flow
作品概要
Webデザインの授業での課題として制作した、古民家カフェ虎威殿という架空の古民家カフェのトップページデザインです。写真、文言などはあらかじめ用意してあり、全体のレイアウトをデザインしました。iPhoneなどのスマホのデザインはせず、PC用のデザインのみ考えました。PC表示のみですがHTML・Sass・jQueryでコーディングまでしました。
制作の過程・思考
Photoshopを使って、トップページをデザインしました。古民家カフェということで和風をどうやってデザインに反映するのかを考えました。また、予約制のディナーもある設定で、そんな予約制のディナーがあるカフェは作業や休憩などに入るような普通のカフェというよりは、高級で落ち着いた雰囲気のカフェなんだと考え、その落ち着いた雰囲気や高級感も和風と一緒にどうやって出していくかもしっかり考えながらデザインしていきました。
和風と高級感の両方を出すために、メインカラーは黄土色、ベースカラーは黒にしました。メインカラーの黄土色は、金に近い色で高級感も出ますし、昔の家でもあった土壁っぽい色で和風もしっかり出るような色だと考えたので、使用しました。ベースカラーの黒は、落ち着いた雰囲気を出すために使用しました。また黄土色と合わせて見た時に、背景が白などよりも相性がいいなと感じたというのもあります。見やすさなども考慮し、真っ黒ではなく少しだけ明るめにしました。フォントに関しては、和風と高級感を出すためとコーディングまでした時のことも考え、WindowsでもMacでもきれいに表示される游明朝を使用しました。文字同士のコントラストも意識して、大きさや装飾など意識しました。
コーディングでは、実際に自分で作ったデザインをしっかり再現できるようにしつつ、デザインしている時にはあまり感じなかった違和感があるところはコーディングしながら微調整しました。コーディングまで行うとデザインで各パーツでのマージンがきちんと統一されてルールができていると楽にコーディングもできるなと感じました。また、実際に現場でサイトのコーディングするとなったら一部分だけ若干ずれていたりした時に勝手に判断せずデザイナーさんとコミュニケーションを取れるならしっかり聞いて元々そうゆうデザインなのかどうかを確認するのも大事なのかなと思いました。