HTML5、CSS3、JavaScript、jQuery、AdobeXD

専門学校を探している高校生と保護者の方

東京電子専門学校の公式サイトだと進路を調べる時には不便に感じる部分があり、進路の情報だけに絞ったサイトがあれば専門学校選びに迷う高校生やその保護者の方にとって便利なのではないかと思い、制作した。

専門的な知識がない人が見てもわかりやすいように、将来目指せる職業や勉強する内容の説明を厚くしたい。また、このサイトを見るだけで終わるのではなく公式サイトへの導線も意識したい。

学科の情報だけでなく職業の詳細が分かるページも作ることによってより興味が湧くようにした。また、公式サイトや体験入学の申し込みなどのリンクを最後に置き、このサイトを見た先のことを意識した。

HTML5、CSS3、JavaScript、Photoshop、Illustrator

小学生

小学生の将来の夢の一歩の参考になってほしい。どんな学校か、どんなことが出来るのか、どんな仕事につけるのかを知ってもらう。

どうすれば子供にも見てもらえるようなサイトになるか。

チャットボットを用いて会話の中で気になることを聞いてもらうようにする。会話を楽しんでもらう。

AdobeXD、HTML5、CSS3、JavaScript、PHP、Premiere Pro

ウェブ・メディア科所属の学生

コロナ禍でクラスメイトと想い出作りが出来ない時、私が提案した企画で皆を笑顔に出来たら良いなと思ったから。また、既に実現した企画での皆の笑顔や私自身が感じた反省点などを読んで次の世代につないでいきたいと思ったから。

コロナ禍で学校イベントが中止なり、楽しい想い出が減った事

感染対策や内容などを工夫しながら、企画を考え提案した。

HTML5、CSS3、JavaScript、jQuery、swiper.js、Ajax、PHP、Illustrator、Photoshop、AdobeXD

企業の方、来年入る高校生、他校の生徒,保護者

保護者の方に向けて普段自分たちが学校でどのようなことを学んでいるのかを発信するため、また1年生は就活に向けてのモチベーションの入口としてより良い作品作りのため学生同士で競い合ってもらう。

昨年度の展示会サイトでは、1人1人が別ページ構成で制作されていたため作品を見た後他の作品を見るのに毎回ページをロードしなくてはならないという手間がありました。

作品の詳細をモーダルウィンドウで表示することによってユーザーが毎回ページをロードすることなく、快適に作品を見れるようにしました。またモーダルウィンドウ間の移動ができるようにボタンを設置してあります。

AdobeXD、Illustrator

5歳～8歳のお子さん,親御さん

子供の読書量を増やしもっと絵本などに関心を持たせるため、たくさんの人に本を見てもら得るようにする。

子供たちが見ても見やすいウェブサイトをどういうふうに作るか。

小さい子供が見てもわかりやすいようにウェブサイトなどに押しやすいボタンや難しい漢字などは使わない、親しみやすいキャラを入れて見てもらえるようにする。

HTML5、CSS3、JavaScript、AdobeXD

5~8歳の子供、その親御さん

子供の読書量を増やしもっと絵本などに関心を持たせるため、たくさんの人に本を見てもら得るようにする。

子供たちが見ても見やすいウェブサイトをどういうふうに作るか。

小さい子供が見てもわかりやすいようにウェブサイトなどに押しやすいボタンや難しい漢字などは使わない、親しみやすいキャラを入れて見てもらえるようにする。

HTML5、CSS3、JavaScript、jQuery、AdobeXD

東京電子専門学校への入学希望者、情報系への進学を考えている高校生

職業や資格などの説明が公式サイトに記載されていても、どこに表記されているか分からなかったり見づらかったりで課題点があるためターゲットに情報が伝わりやすくしたいと思ったから。

学科や職種の情報をわかりやすくし、入学希望者や高校生に分かりやすく職業の説明をすること

この学科ではこの職種を目指せるという情報を学科ごとに載せて、見たい情報のみを確認しやすくした。

HTML5、CSS3、AdobeXD、Photoshop、Illustrator、JavaScript、jQuery

東京電子専門学校の在学生・就活生、入学希望者(高校生)

当校の公式サイトに簡単に紹介されてはいるが、わからない/分かりずらい点が多々あるためそれを分かりやすくターゲットに伝えるために作成。

どうすれば分かりやすく・簡潔に情報を提供できるか。

UIのデザインや要素ごとの配置をユーザー視点で考えユーザーが知りたい情報をわかりやすく確認できるようにする。

HTML5、CSS3、JavaScript、PHP、AdobeXD

展示会を通じてゲームコースのゲームをやる方

ゲームコースが作成したゲームを展示会だけではなくwebサイト内でもダウンロードを行えるようにする

ダウンロードをしてゲームをプレイした後にそれに対しての評価を見えるようにする

プレイ後にアンケートを取ってゲームに対してのレビューをしてもらいまた、それだけでなく私たちが作ったwebサイトにもレビューを行ってもらいSNSに繋がるアイコンを用意して投稿をしてもらう

HTML5、CSS3、JavaScript、AdobeXD

展示会を通じてゲームコースのゲームをやる方

ゲームコースが作成したゲームを展示会だけではなくwebサイト内でもダウンロードを行えるようにする

ダウンロードをしてゲームをプレイした後にそれに対しての評価を見えるようにする

プレイ後にアンケートを取ってゲームに対してのレビューをしてもらいまた、それだけでなく私たちが作ったwebサイトにもレビューを行ってもらいSNSに繋がるアイコンを用意して投稿をしてもらう

HTML5、CSS3、PHP、Illustrator、AdobeXD

展示会の来場者、ウェブ科の学生

展示会の来場者に各展示への意見や感想を頂くため。またその声を受けて反省点や改善点を発見し、学生の今後の制作活動における意欲向上へとつなげるため。

アンケートは「めんどくさい」等ネガティブイメージがつきやすく、回答数が少ない。来場者の声を1つでも多く頂くにはどうするべきなのか。

コンセプトを付けることで、単なるアンケートのページとは違うイメージを持たせました。また回答状況や回答数に応じた表示をして、小さなゲーム性を感じられるサイトにしました。

HTML5、CSS3、JavaScript、jQuery、PHP

動画好きの整理が苦手な学生

私はYouTudeで再生リストを良く使っているのですが、追加しすぎてどこに動画があるかわからない時、このサイトを作ろうと思いました。

ターゲットは主に子供なのでどれだけ簡単な操作で見やすいデザインにするかの点

ターゲットデザインの部分を子供むけでGIFを使ったオシャレなデザインにし、イライラせず子供も押しやすいようにアイコンを大きくする。

HTML5、CSS3、JavaScript、jQuery、PHP、AdobeXD

就活生

就活をしていた当時の自分の経験をもとに、就活生に役立つ画期的なツールを制作するため。

既存ツールとの差別化。離脱率を下げること。より多く利用してもらうこと。

自分が周りの就活生と比較してどの立ち位置にいるのか平均が分かるようにし、比較からのアドバイス機能を実装することで、既存の類似ツールとの差別化を図ること。

Python、PHP

展示会にお越しになる方々

展示会を盛り上げたいと思ったため。また、Python 3 エンジニア認定基礎試験の合格を目指しPythonの技術や資格の情報についてこれからウェブ科に所属する後輩に残すため。

Pythonの試験を受けたことについてのレポートを書くので勉強時間を確保したり試験に関して自分のしたことを覚えておかなければいけない点。

バックエンドの工程を充分に行い、しっかり動くプログラムを組む必要がある点。

HTML5、CSS3、JavaScript

社会人、学生、c言語初心者

c言語の勉強が必要になった人や勉強に活用したり学生が勉強できるように作成した。また、初心者にも優しく勉強するため。

初心者にわかりやすく、ユーザー登録など手間をかけずに時間をかけずに手軽に学ぶ。

基礎から問題を出し、わかりやすく理解してもらう。

HTML5、CSS3、JavaScript、PHP、SQLite、AdobeXD

就活生、ウェブ科の1年生

ポートフォリオサイトを1人で作る力がなくても自分のポートフォリオサイトができる。空いた時間に自分だけのポートフォリオサイトfが作れる。そして就活にも使用することができる。

ポートフォリオサイトがある程度ウェブサイトを作る知識がないと制作が困難。それにさらに見てもらえるように個性を出そうとすると高い技術力が求められてしまう。

データベースを用いてブラウザ上で作品の画像や説明のテキストを表示し、知識がなくても直感的に自分のポートフォリオサイトが制作できるようにする。

HTML5、CSS3、PHP

これから就活を始める人たち、1年生

ポートフォリオサイトを1人で作る力がなくても自分のポートフォリオサイトができる。空いた時間に自分だけのポートフォリオサイトが作れる。そして就活にも使用することができる。

ポートフォリオサイトがある程度ウェブサイトを作る知識がないと制作が困難。それにさらに見てもらえるように個性を出そうとすると高い技術力が求められてしまう。

データベースを用いてブラウザ上で作品の画像や説明のテキストを表示し、知識がなくても直感的に自分のポートフォリオサイトが制作できるようにする。

HTML5、CSS3、JavaScript、jQuery、PHP、AdobeXD

大学生・専門学生

服に興味があり、自分で服をデザインした人が居たとしても発信することが難しいので、自分でも発信することができるという事を伝えるため。

他のECサイトではシンプルな作りが多く、動きのあるサイトが少なくブランドのイメージが伝わりにくいので、ブランドのイメージがサイトを見てもわかるようにする。

ブランドイメージがサイトを見てわかるように、色の使い方や、動きのあるサイトにしました。

HTML、CSS、PHP、Illustrator

10代から30代

自分の好きなスケートボードをECサイトを通じて知ってもらうため。

商品をできるだけ見やすくし、新しくスケートボードを始める人のためにも、サイト内で一式揃えられるようにする。

購入ボタンやカテゴリーを分けたり、並び替えをできるようにした。

HTML5、CSS3、JavaScript、Scss、jQuery、Vue.js、AdobeXD、Illustrator、Photoshop、SQLite

企業の方、学生

就活で今までの作品を企業の方に見せたり、学生がポートフォリオサイトを制作する時、自分の作品を参考にできるようにするため。

企業の方と学生の方と見る方向性が全く違うターゲットにどう合わせるか。

ポップなデザインで自分らしいイメージと青い色や太文字で信頼感を与えるデザインにしました。

HTML5、CSS3、JavaScript、Photoshop、Illustrator、PHP、AfterEffect、Premiere Pro、AdobeXD

企業の方、後輩、先生、保護者、高校生

就活や将来に役立つ、まとめサイトが欲しい。今までの成果を先生や企業の方、保護者に見やすく、分かりやすく拝見して欲しいため。

幅広い年齢の方に見やすく、分かりやすいサイトとはどんなものか。

シンプルなデザインで自分の作品を見やすくする。

Illustrator、Photoshop、AdobeXD、AfterEfect

展示会に来てくれる方

ロゴを制作することで、展示会への思いや、雰囲気が来てくれた方に伝わるようにするため。また、展示会のデザインの方向性を決めるため。

どうすれば展示会への思いや、雰囲気を分かりやすく可視化することが出来るか。

ロゴアニメーションを取り入れることで、見た人がより直感的に展示会への思い、雰囲気を感じ取れるようにした。

HTML5、CSS3、JavaScript、PHP、AdobeXD、Illustlator、Photoshop

全世代

自分の住む栃木県の特産品であるイチゴについてゲームで知ってもらう

どのようにイチゴについて知ってもらうか

多くの種類のイチゴを用いてまあずは品種から知ってもらう

WordPress 、HTML 5 、CSS3、CapCut

後輩、勉強に興味がある方、就活生

少しでも勉強の方法やタスク管理情報を共有し、就活生や勉強方法・本校に興味がある方の役に立てて欲しいため

より多くの人に勉強ツールや方法をわかってもらえるか。 どうすればこのサイトに飛んできてもらえるか。

勉強方法がわからない人や勉強が好きな人向けによりわかりやすく、伝わりやすく発信していく。リールなどもうまく使ってサイトに飛んできてくれる数をより増やす。

HTML、CSS、JavaScript、AdobeXD

東京電子専門学校に興味がある人

東京電子専門学校の公式ブログを更新するだけではなくこれからの就職先での仕事などで活かせるようにするため。

サイトを見てもらう際に他の専門学校との差別化、ストレスのないように見たいものがみれるブログにするにはどうすれば良いか。

ターゲットに合わせ、動きのあるサイトにすることで興味をもって見てもらうことができる。

Unity、C#

ゲームコースに興味のある学生

第一に遊んだユーザーが「楽しい」と思ってもらうこと。第二に「今の東京電子の学生はこれくらいのものが作れる」と知ってもらうこと。

どのような点をユーザーを楽しいと思ってもらえるかという点。東京電子専門学校の学生の集大成として、ほぼ全ての素材を各々用意することで自分たちは既に存在する作品を利用しなくともゲームを作ることができることをｱﾋﾟｰﾙする

戦闘時の戦略性を増やす。敵の攻撃が一辺倒にならないようにすることで戦略性を生み、楽しいと思ってもらえるようにする。

Unity2D、C#

ゲームコースに興味のある学生

第一に遊んだユーザーが「楽しい」と思ってもらうこと。第二に「今の東京電子の学生はこれくらいのものが作れる」と知ってもらうこと。

どのような点をユーザーを楽しいと思ってもらえるかという点。東京電子専門学校の学生の集大成として、ほぼ全ての素材を各々用意することで自分たちは既に存在する作品を利用しなくともゲームを作ることができることをｱﾋﾟｰﾙする

戦闘時の戦略性を増やす。敵の攻撃が一辺倒にならないようにすることで戦略性を生み、楽しいと思ってもらえるようにする。

Unity、C#

ゲームコースに興味のある学生

第一に遊んだユーザーが「楽しい」と思ってもらうこと。第二に「今の東京電子の学生はこれくらいのものが作れる」と知ってもらうこと。

どのような点をユーザーを楽しいと思ってもらえるかという点。東京電子専門学校の学生の集大成として、ほぼ全ての素材を各々用意することで自分たちは既に存在する作品を利用しなくともゲームを作ることができることをｱﾋﾟｰﾙする

戦闘時の戦略性を増やす。敵の攻撃が一辺倒にならないようにすることで戦略性を生み、楽しいと思ってもらえるようにする。

Unity、C#

ゲームコースに興味のある学生

第一に遊んだユーザーが「楽しい」と思ってもらうこと。第二に「今の東京電子の学生はこれくらいのものが作れる」と知ってもらうこと。

どのような点をユーザーを楽しいと思ってもらえるかという点。東京電子専門学校の学生の集大成として、ほぼ全ての素材を各々用意することで自分たちは既に存在する作品を利用しなくともゲームを作ることができることをｱﾋﾟｰﾙする

戦闘時の戦略性を増やす。敵の攻撃が一辺倒にならないようにすることで戦略性を生み、楽しいと思ってもらえるようにする。

Unity、C#、Illustrator

ゲームコースに興味のある学生

第一に遊んだユーザーが「楽しい」と思ってもらうこと。第二に「今の東京電子の学生はこれくらいのものが作れる」と知ってもらうこと。

どのような点をユーザーを楽しいと思ってもらえるかという点。東京電子専門学校の学生の集大成として、ほぼ全ての素材を各々用意することで自分たちは既に存在する作品を利用しなくともゲームを作ることができることをｱﾋﾟｰﾙする

戦闘時の戦略性を増やす。敵の攻撃が一辺倒にならないようにすることで戦略性を生み、楽しいと思ってもらえるようにする。