Web design

【デジタルハリウッドLIGの卒業制作】デザイン未経験から猫カフェwebサイト制作

【デザイン未経験者の卒業制作】デジタルハリウッドLIGで猫カフェwebサイト制作のバナー

こんにちは、shioです。

今回は私がデザインスクール(デジタルハリウッド STUDIO by LIG)で作った卒業制作をご紹介します。

昔の作品なので、お見せするのはお恥ずかしいですが、

  1. webデザインの勉強をしている
  2. ポートフォリオに載せる作品に悩んでいる
  3. webデザインスクールを通おうか迷っている

そんな方の参考になれば嬉しいです^^

shio
shio

デザインスクール(デジハリ)で卒業制作を作る過程も少しお話しします♪

 

卒業制作はポートフォリオにも載せました!

デザインスクール・デジタルハリウッドLIGで作った卒業制作

デジハリの卒業制作とは

私の通っていた「デジタルハリウッド studio by LIG」のwebデザインコースでは、卒業する前に卒業制作として実際にwebサイトを作り、発表します。

知り合いのサイトを作ってもいいし、
架空のサイトを作っても、自分のポートフォリオを作っても、OK!

私はちょうどこの頃動物カフェにハマっていたこともあり、実際に行った猫カフェの架空リニューアルサイトを作ることにしました。

shio
shio
お店の雰囲気がとても気に入り、行ったその時に店長に「架空のリニューアルサイトを作らせてください」と声をかけて、卒業制作として作らせていただくことになりました!

デザインスクールの在籍は6ヶ月なので、4ヶ月目から卒業制作を作り始めます。
下記の流れを約2ヶ月で進めていきました。

  1. 卒業制作のオリエンテーションで担当のトレーナーさん決定
  2. 題材を決める
  3. デザインのコンセプトなどを含めたサイトのプレゼン
  4. デザイン制作
  5. デザインのプレゼン
  6. コーディング制作
  7. コーディングしたものを発表
  8. フィードバック
  9. 卒業制作発表会
  10. 完成したwebサイトを提出

プレゼンは6人くらいのチームでしていて、結構みんな発表直前まで修正など調整していました。

コンセプトとデザインは何度も何度もトレーナーさんに見ていただいて、フィードバックを頂きました。

私の卒業制作(猫カフェの架空リニューアルサイト)紹介

デザインスクールの卒業制作(猫カフェ)のwebサイトの画像   デザインスクールの卒業制作(猫カフェ)のwebサイトの画像

猫カフェの仮想リニューアルサイトです。

制作期間 2ヶ月
(企画:1ヶ月、デザイン:3週間、コーディング:2週間)
使用技術 Illustrator/Photoshop/
HTML/CSS/jquery
対応機種 SP/PC

卒業制作のサイトの設定

〜浅草にある猫カフェ〜

ペルソナ 外国人観光客。
(日本が大好き・動物好き・SNSで情報を探す・猫カフェ初心者・お酒好き)
初めて日本に旅行で訪れる。浅草寺を観光し、疲れたから早く近くでゆっくりできる場所を見つけたい!と思っている。
お店のコンセプト 「猫のいるカフェ&バー」‥普通のカフェ・バーに猫がいる
サイトのコンセプト 「お酒も飲める猫カフェ」
デザインコンセプト 「レトロモダンな隠れ家」

トレーナーさんから頂いたアドバイス・学んだこと

  1. サイトのコンセプト「レトロモダン」について調べてからデザインに取り掛かること。
  2. 手書きの部分とデジタルの直線が混ざっていて統一感がなかったこと。
  3. 猫のいるカフェの感じがしなかったこと。
  4. 隠れ家の要素がなかったこと。
  5. 箇条書きの説明の部分の行間や段落を下げて読みやすくすること。
  6. 文字が多すぎたので減らすこと。

制作途中の段階でトレーナーさんに上記のアドバイスを頂いたので、直しながら進めていきました。

卒業制作の解説

卒業制作、猫カフェサイトの「トップページ」

卒業制作猫カフェのwebサイトの画像
  1. メインカラーは隠れ家の雰囲気を出したかったため、暗めの色を選びました。暗めで且つ黒猫も見やすい色を選ぶのが難しかったです。レトロな雰囲気が出るように黄色味がかった暖かい色にもしたかったので、赤茶色に設定しました。
    メイン画像は隠れ家をのぞいているような雰囲気にしました。お店の中に猫がいる写真を選び、「猫がいるカフェ」であると感じてもらえるようにしました。写真の周りはラフにしてレトロ感を出しています。
  2. ヘッダーは縦書きにし、ラフにしたダイヤを入れることでレトロ感を出しました。
  3. Englishページへの切り替えは国旗を使いました。
  4. 白と緑のダイヤを目立つ部分に並べることで、レトロを感じられるようにしました。
    サイトのコンセプトが「お酒が飲める猫カフェ」なので、目立つ猫の写真の上にワインボトルのイラストを乗せました。
卒業制作猫カフェのwebサイトの画像
  1. (6)足跡を増やしていくアニメーションをしました。
  2. (7)背景を暗くしてから固定し奥行きを出すことで、店内写真の部分が隠れ家のように感じられるようにしました。
  3. (8)レースやフォントオーサムを使ってレトロ感を出しました。「BOOK」などの文字もラフにしてあります。
  4. (9)招き猫のようなポーズの写真を選びました。
  5. (10)地図はサイトに合うように自作し、GoogleMapに飛べるボタンを付けました。
  6. (11)TOPボタンは猫の手で、ホバーすると上に上がるようにしました。

卒業制作、猫カフェサイトの「下層ページ」


箇条書きの部分は読みやすいようインデントをつけてコーディングしました。

 

猫の写真をホバーすると「にゃー」の文字が出てきます。
フォントの種類・大きさ・位置や出てくる速さなど変化して猫の個性を表現しました。
クリックをすると猫の詳細画像が出てくるようになっています。
詳細画像は個性豊かな写真を選び、優しい色合いに調節しました。

手作りの地図

サイトの雰囲気を壊さないように

  • サイトで使用している色を使うこと
  • 直線にならないようにラフにすること

に気を付けて作成しました。

雷門から近いことを強調したかったので、雷門のイラストを作成し地図上に入れました。

卒業制作、作成後の「反省」

「デザインコンセプトの決定」「レトロモダンについての理解」に時間がかかり、難しかったです。

HOMEのページと他のページの「メイン画面」の変化が写真のみだったため、ページが移動したのか分りづらくなってしまいました。

次回はそこにも気を付けて作成していきたいです。

卒業制作発表会での皆さんからの声

卒業制作発表会に参加していた皆さんからの声です。
後日まとめたものをスタッフさんから送っていただきました。

Aさん
Aさん
細部にまでこだわりが感じられて素敵でした!
地図のイラストも分かり易かったです!漢字と平仮名でフォントサイズや種類を変えているのか、乙女レトロチックでコンセプトに沿ってデザインされているということを感じました!
Bさん
Bさん
至る所にこだわりが感じられるサイトでした。動きもつけていて完成度が高いと思いました。
Cさん
Cさん
細かいところまでデザインがこだわってあって素敵でした
Dさん
Dさん
隠れ家というコンセプトで、写真が全部のぞきこむような構図だったのでそこがいいなと思いました。
Eさん
Eさん
こだわっているレトロ感が伝わってきてとてもかわいいサイトでした。
Fさん
Fさん
未経験でこんなに素敵に作れるなんてすごいです。ちゃんとデザインの説明も理屈が通っていて聴いていて納得できました。猫もかわいい。
クオリティが高くてびっくりしました
色に拘ってるところが好きです。レトロ感、感じました
Hさん
Hさん
ネコ画像をクリックするとおちゃらけるアイデアはグッときました
Iさん
Iさん
レトロな感じが出ていて、猫もすごく可愛いなと思いました。足跡のアニメーションや、猫の紹介も楽しいなと思いました。

終わりに

実際の卒業発表会では、緊張しましたが、転職活動の面接で作ったサイトの説明をする練習だと思ってプレゼンしました。

発表後はトレーナーさんや、同期の皆さん、在学生の皆さんから感想やアドバイスを頂けて、貴重な経験ができたと思います。
独学ではこんな機会ないですからね・・・

同期の皆さんの作品も、とても考えられて制作されたんだなぁ・・と思うものばかりで、勉強になりました。

shio
shio
トレーナーさんとかに初めてwebサイトをデザインしたものを見て頂くのはとても恥ずかしかったのですが、恥を捨てて何度も「提出→アドバイス→修正」を繰り返したことによって、たくさんの学びがありました。

デザインスクール通おうか悩んでいる方は私の通っていたデジハリもチェックしてみてくださいね^^

Web制作会社LIGが運営するWebデザインスクール【デジタルハリウッド STUDIO by LIG】

デジハリオンラインスクールもあります♪

デジタルハリウッドSTUDIO by LIG(デジリグ)で未経験からwebデザイナーへ【スクールレビュー】の画像
デジタルハリウッドSTUDIO by LIG(デジリグ)で未経験からwebデザイナーへ【スクールレビュー】こんにちは、webデザイナーのshioです! 私も決めるまで、ものすごく悩み、ものすごく時間がかかりました。 ...
【Q&A】デジタルハリウッド STUDIO by LIG(デジリグ)はどんなところ?の画像
【Q&A】デジタルハリウッド STUDIO by LIG(デジリグ)はどんなところ?こんにちは、shioです。 前回、デジタルハリウッド STUDIObyLIGについてお話ししたのですが、 読んでくださる方が多か...

では、また^^

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー