自主制作【Cafe HP制作】

OVERVIEW

カフェ(架空)

YEAR 2021

成果物

制作期間:6週間(デザイン2週間・コーディング4週間)

制作範囲:情報設計・ワイヤーフレーム・デザインカンプ・コーディング・レスポンシブ

【使用ツール】photoshop・illustrator

【設定】音楽教室併設の個室カフェ

【コンセプト】やりたいことに集中できる自宅の別室をイメージして[Secret Base(秘密基地)&Coffee]という店名にしました。

【ターゲット】20代〜40代|資格やスキルアップの勉強を自宅以外でしたい人、気軽に音楽を習いたいと思っている人、これから趣味で音楽を始めたい人

【ビジュアルデザイン】ロゴは、音楽教室と秘密基地っぽさを譜面の5本線と植物を使用して表しました。

全体的なカラーは、秘密基地が山や自然の多いところにあるイメージからブラウンやグリーンなどくすんだアースカラーでまとめ長居したくなる落ち着いた居心地の良いカフェになるように意識しました。

【学び、頑張ったポイント】

制作にあたり同業のお店や個人店のホームページを10社程度参考にし必要なサイトの構成や項目を設定しました。

全体的に統一感を意識してイラストやフォントや写真を選び、実装した際もくづれないようなデザインを意識しました。組み込んだ地図も、全体のカラーを考えモノクロにしマウスを当てるとカラーに変わるように実装しました。

html・cssをベースに制作しjQueryなどを使用してアニメーションを実装し、サーバーのアップまでの流れを学びました。