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

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

1. メインカラーは隠れ家の雰囲気を出したかったため、暗めの色を選びました。暗めで且つ黒猫も見やすい色を選ぶのが難しかったです。レトロな雰囲気が出るように黄色味がかった暖かい色にもしたかったので、赤茶色に設定しました。
   メイン画像は隠れ家をのぞいているような雰囲気にしました。お店の中に猫がいる写真を選び、「猫がいるカフェ」であると感じてもらえるようにしました。写真の周りはラフにしてレトロ感を出しています。
2. ヘッダーは縦書きにし、ラフにしたダイヤを入れることでレトロ感を出しました。
3. Englishページへの切り替えは国旗を使いました。
4. 白と緑のダイヤを目立つ部分に並べることで、レトロを感じられるようにしました。
   サイトのコンセプトが「お酒が飲める猫カフェ」なので、目立つ猫の写真の上にワインボトルのイラストを乗せました。

1. (6)足跡を増やしていくアニメーションをしました。
2. (7)背景を暗くしてから固定し奥行きを出すことで、店内写真の部分が隠れ家のように感じられるようにしました。
3. (8)レースやフォントオーサムを使ってレトロ感を出しました。「BOOK」などの文字もラフにしてあります。
4. (9)招き猫のようなポーズの写真を選びました。
5. (10)地図はサイトに合うように自作し、GoogleMapに飛べるボタンを付けました。
6. (11)TOPボタンは猫の手で、ホバーすると上に上がるようにしました。

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