URL
https://brunoroaster-cafe.shion-design.com
担当
デザイン・コーディング
概要
初めて自分で企画、設計、コーディングしたオリジナルWEBサイトになります。クライアントとして、私がプライベートで利用する近所のカフェ（お店のWebサイトがない）からの依頼という想定で企画・設計しました。
使用ツール
HTML/CSS/JavaScript
制作期間
4週間
デザインについて
トップページにフルスクリーンレイアウトを採用し、お店の雰囲気を感じてもらえるようなインパクトのある写真を掲載しました。フォントについては、日本語は可読性に優れたWebフォント「Noto sans JP」を使用し、ロゴや英字はスペシャリティコーヒー専門店のクラシカルで洗練された印象を表現するために「Copperplate」を使用しました。 また、フッターにラテの写真を掲載し、Webサイトを最後まで見ていただいたユーザーに対してお店への来店を誘致するメッセージを添えています。
コーディングについて
スマートフォンでも見やすくするためレスポンシブ対応を施しております。またJavaScriptを用いてハンバーガーメニュー、ページトップの実装を行いました。