こんにちは、shioです。
今回は私がデザインスクール(デジタルハリウッド STUDIO by LIG)で作った卒業制作をご紹介します。
昔の作品なので、お見せするのはお恥ずかしいですが、
- webデザインの勉強をしている
- ポートフォリオに載せる作品に悩んでいる
- webデザインスクールを通おうか迷っている
そんな方の参考になれば嬉しいです^^
デザインスクール(デジハリ)で卒業制作を作る過程も少しお話しします♪
卒業制作はポートフォリオにも載せました!
デザインスクール・デジタルハリウッドLIGで作った卒業制作
デジハリの卒業制作とは
私の通っていた「デジタルハリウッド studio by LIG」のwebデザインコースでは、卒業する前に卒業制作として実際にwebサイトを作り、発表します。
知り合いのサイトを作ってもいいし、
架空のサイトを作っても、自分のポートフォリオを作っても、OK!
私はちょうどこの頃動物カフェにハマっていたこともあり、実際に行った猫カフェの架空リニューアルサイトを作ることにしました。
デザインスクールの在籍は6ヶ月なので、4ヶ月目から卒業制作を作り始めます。
下記の流れを約2ヶ月で進めていきました。
- 卒業制作のオリエンテーションで担当のトレーナーさん決定
- 題材を決める
- デザインのコンセプトなどを含めたサイトのプレゼン
- デザイン制作
- デザインのプレゼン
- コーディング制作
- コーディングしたものを発表
- フィードバック
- 卒業制作発表会
- 完成したwebサイトを提出
プレゼンは6人くらいのチームでしていて、結構みんな発表直前まで修正など調整していました。
コンセプトとデザインは何度も何度もトレーナーさんに見ていただいて、フィードバックを頂きました。
私の卒業制作(猫カフェの架空リニューアルサイト)紹介
猫カフェの仮想リニューアルサイトです。
制作期間 | 2ヶ月 (企画:1ヶ月、デザイン:3週間、コーディング:2週間) |
---|---|
使用技術 | Illustrator/Photoshop/ HTML/CSS/jquery |
対応機種 | SP/PC |
卒業制作のサイトの設定
〜浅草にある猫カフェ〜
ペルソナ | 外国人観光客。 (日本が大好き・動物好き・SNSで情報を探す・猫カフェ初心者・お酒好き) 初めて日本に旅行で訪れる。浅草寺を観光し、疲れたから早く近くでゆっくりできる場所を見つけたい!と思っている。 |
---|---|
お店のコンセプト | 「猫のいるカフェ&バー」‥普通のカフェ・バーに猫がいる |
サイトのコンセプト | 「お酒も飲める猫カフェ」 |
デザインコンセプト | 「レトロモダンな隠れ家」 |
トレーナーさんから頂いたアドバイス・学んだこと
- サイトのコンセプト「レトロモダン」について調べてからデザインに取り掛かること。
- 手書きの部分とデジタルの直線が混ざっていて統一感がなかったこと。
- 猫のいるカフェの感じがしなかったこと。
- 隠れ家の要素がなかったこと。
- 箇条書きの説明の部分の行間や段落を下げて読みやすくすること。
- 文字が多すぎたので減らすこと。
制作途中の段階でトレーナーさんに上記のアドバイスを頂いたので、直しながら進めていきました。
卒業制作の解説
卒業制作、猫カフェサイトの「トップページ」
- メインカラーは隠れ家の雰囲気を出したかったため、暗めの色を選びました。暗めで且つ黒猫も見やすい色を選ぶのが難しかったです。レトロな雰囲気が出るように黄色味がかった暖かい色にもしたかったので、赤茶色に設定しました。
メイン画像は隠れ家をのぞいているような雰囲気にしました。お店の中に猫がいる写真を選び、「猫がいるカフェ」であると感じてもらえるようにしました。写真の周りはラフにしてレトロ感を出しています。 - ヘッダーは縦書きにし、ラフにしたダイヤを入れることでレトロ感を出しました。
- Englishページへの切り替えは国旗を使いました。
- 白と緑のダイヤを目立つ部分に並べることで、レトロを感じられるようにしました。
サイトのコンセプトが「お酒が飲める猫カフェ」なので、目立つ猫の写真の上にワインボトルのイラストを乗せました。
- (6)足跡を増やしていくアニメーションをしました。
- (7)背景を暗くしてから固定し奥行きを出すことで、店内写真の部分が隠れ家のように感じられるようにしました。
- (8)レースやフォントオーサムを使ってレトロ感を出しました。「BOOK」などの文字もラフにしてあります。
- (9)招き猫のようなポーズの写真を選びました。
- (10)地図はサイトに合うように自作し、GoogleMapに飛べるボタンを付けました。
- (11)TOPボタンは猫の手で、ホバーすると上に上がるようにしました。
卒業制作、猫カフェサイトの「下層ページ」
箇条書きの部分は読みやすいようにインデントをつけてコーディングしました。
猫の写真をホバーすると「にゃー」の文字が出てきます。
フォントの種類・大きさ・位置や出てくる速さなど変化して猫の個性を表現しました。
クリックをすると猫の詳細画像が出てくるようになっています。
詳細画像は個性豊かな写真を選び、優しい色合いに調節しました。
手作りの地図
サイトの雰囲気を壊さないように
- サイトで使用している色を使うこと
- 直線にならないようにラフにすること
に気を付けて作成しました。
雷門から近いことを強調したかったので、雷門のイラストを作成し地図上に入れました。
卒業制作、作成後の「反省」
「デザインコンセプトの決定」「レトロモダンについての理解」に時間がかかり、難しかったです。
HOMEのページと他のページの「メイン画面」の変化が写真のみだったため、ページが移動したのか分りづらくなってしまいました。
次回はそこにも気を付けて作成していきたいです。
卒業制作発表会での皆さんからの声
卒業制作発表会に参加していた皆さんからの声です。
後日まとめたものをスタッフさんから送っていただきました。
地図のイラストも分かり易かったです!漢字と平仮名でフォントサイズや種類を変えているのか、乙女レトロチックでコンセプトに沿ってデザインされているということを感じました!
色に拘ってるところが好きです。レトロ感、感じました
終わりに
実際の卒業発表会では、緊張しましたが、転職活動の面接で作ったサイトの説明をする練習だと思ってプレゼンしました。
発表後はトレーナーさんや、同期の皆さん、在学生の皆さんから感想やアドバイスを頂けて、貴重な経験ができたと思います。
独学ではこんな機会ないですからね・・・
同期の皆さんの作品も、とても考えられて制作されたんだなぁ・・と思うものばかりで、勉強になりました。
デザインスクール通おうか悩んでいる方は私の通っていたデジタルハリウッド STUDIO by LIGもチェックしてみてくださいね^^
デジハリオンラインスクールもあります♪
では、また^^
導線迷子やデザインの魅せ方に
悩んでる女性起業家さんへ
集客導線・世界観をサポート
Webデザインを中心に制作してます*