クライアンド案件を経験したい！そんな目的をもったKさんは、足を運ばなくても、学びたいことが学べる架空のサービスサイトを制作しました。オンライン上の「習い事」で、先生、生徒を同時に募集し、クラスを開講。ブランドを作り、たくさんの人に知ってもらうことを目的としています。

実案件に近い形でクライアントも設定し、掲載する情報をヒアリングしたKさん。デザインでは写真、文字、色、形にこだわり、ポップな印象を作りました。ロゴに三角形のあしらいを入れたことはこだわりの一つ。三角の形は、「成長させるイメージ」ということを調べられ、うまくデザインで表現しました。スクロールをして動きのある工夫も取り入れ、シンプルだけどオシャレなサイトです。

トレーナーからは、「実案件でディレクションを頑張ったサイト。取捨選択をしながらプロジェクトを進めている。シンプルだけどキレイにまとめ、遊び心のあるデザイン。コーディングもできている」と講評しました。

現職で高等学校に勤められているUさん。学校サイトのカテゴリメニューを再構築し、来訪者が目的の情報に辿り着けるように。そして、サイトに訪れた時、いきいきとした生徒や学校の様子が飛び込んでくるような動画を用いたキービジュアル。そんなサイトデザインへのリニューアルを行いました。

信頼感があって、リッチなイメージを意識したデザイン。サイトのファーストビューは、学校の様子、イベントの様子などをつなぎ合わせた動画を取り入れています。動画の天地サイズを可能な限り大きくし、かつ、動画の上にドットをCSSで書き込み、キレイに見えるように工夫をしました。来訪者が目的ごとに、見やすく分かりやすいようにポータルボタンを設置したこともポイントです。

トレーナーからは「やりたいことが再現されている。動画編集の達成も素晴らしい。カテゴリも必要なものが必要なところにあって企画立案がしっかりできている」と講評しました。

Iさんは自身が好きな「カヌレ」をテーマに、上品で、かつ、愛を持ってサイトを作りたい。そんな想いで卒業制作に取り組まれました。仮想のお店は「Charmant シャルマント」。カヌレのおいしさはもちろん、「居心地の良さ」、「おしゃれ」感を重視したお店で、店のテイスト、カヌレへのこだわり、差別化ポイントなどを一つのサイトにまとめました。

トップのファーストビューは、「あなたの、大切なひとの、しあわせを彩る。」メッセージがゆっくりと出現。スライダー画像の動きと合わせ、ゆっくりとした動きでお店の雰囲気が伝わります。スクロールしていくと、文字がフワッと出現したり、また、スクロールに合わせて、カヌレの断面がスライドで動く工夫も。GSAPというアニメーションにも挑戦するなど、カヌレや、テキストにも色々な動きがあり、飽きがこないサイトです。

トレーナーからは「デザイン、コーディングともに早く、やりたいこと全てが詰まっている。プレゼン力も素晴らしい」と講評しました。

とある漫画家が大好きなIさん。その漫画家の出身地にあるミュージアムを想定し、その場所へ実際に行ってみたいと思っていただけるようなコンセプトで、架空の漫画ミュージアムのサイト制作に取り組みました。

漫画をテーマにしているため、かたい感じにならないようにエンタメ性に振り切ったデザイン。トップページのメイン画像は、大好きな漫画家のふるさとまで出向き、風景を撮影。スライダーでその場所がどのような場所かわかるように表現しています。ページをスクロールしていくと、上に戻るボタンが出現。漫画のキャラクターをモチーフにしており、Iさんが一番好きなお気に入りポイントです。背景も真っ白ではなく、漫画と分かるようなデザイン。Iさんの思い入れが伝わる作品です。

トレーナーからは「愛を感じるサイト。背景を含め、理解が深い。情報設計からデザインのあしらいまで良いサイトに仕上がっている。斜めのデザインもしっかりコーディングで実装している。」と講評しました。

Oさんが昔から好きで、愛着のある絵本。絵本のWebサイト自体もあまりなく、少ないジャンルで挑戦してみようと思い、大好きな絵本のWebサイトを卒業制作に選びました。絵本だけでなく、キャラクターそのものを多くの人にしってもらいたい。また、大人になった読者の方にも懐かしんでもらうことがコンセプト。

画像が少ない中、綺麗な画像の厳選や、切り抜きを細かく行うことにこだわり、絵本の色合い、絵本のイメージとなるよう、デザインに気を使いました。スクロールしていくと、キャラクターが横切ったり、Oさんのお気に入りポイントでもあるTopに戻るボタンにもキャラを使用するなど、色々なところにこだわりを感じるサイトです。

キャラクター紹介ページでは、クリックするとモーダルウィンドウでキャラの説明文が出現。企画当初からこの表現を計画していたOさんは、しっかりと実装まで結びつけました。

トレーナーからは「計画性のあるデザイン、コーディングであり、企画の段階で柱ができている。世界観が上手に表現できている。」と講評しました。

銭湯、サウナが好きなKさん。自分好みのサウナを作って、サウナ人口を増やす目的でホームページ制作に取り組まれました。「あとはかえってねむるだけ。あしたからまた、えがおの自分でいたいから」のキャッチコピー。カフェのようなサウナっぽくない雰囲気で、くつろぎ、身近さ、プライベート空間を表現しています。

トップページのキービジュアルは、サウナの部屋の中から窓に文字を書いたように「ひろまさうな」が描かれています。キービジュアルの窓にかかる湯気の動きもCSSで実装。ヘッダーの磨りガラスのような表現や、背景の湯気の動きなど、細部へのこだわりが伝わります。イラスト、テキストもKさん自身が描かれました。特にAboutページは、まとめることが難しかったとのことですが、ノートまとめをするように、コンテンツを配置し、デザインとして表現しています。

トレーナーからは「イラストが描けることが強み、リラックス感のあるテイストも伝わり、世界観ができている」と講評しました。