デザイン＆コーディング

デザイン、コーディングでドーナツショップのページを作成しました。
Figmaでデザインし、コーディングしました。

サイトはこちら→http://sk8altamont.xsrv.jp/donuts/

Figmaで作成したデザインカンプはこちら

ポイント

・Figmaでデザイン
・モックアップの使用
・レスポンシブ
・Googleフォントの使用
・JQueryとCSSで動きをつける

制作で意識したこと

まずは、ファーストビューに誰が見てもドーナツを取り扱っているお店、またはドーナツを取り扱っている会社なんだということがわかるように大きいドーナツの画像を使いました。

次に、この1ページのサイトの目的は、お店のアプリをダウンロードしてほしいという目的なので、ファーストビューにコンバージョンボタンを設置。

これをクリックすると、下のアプリをダウンロードするセクションに移動するようにつくりました。

デザインのポイントは、このお店自体がドーナツ1つ200円という設定なので、20代後半〜30代の社会人の利用者が多く、客層もそのあたりが多いということから、あまりポップな色の使用は避けました。

少し抑えめだけど、ドーナツという、様々な種類やカラーがある食べ物が引き立つような色を選択しました。

また、ガヤガヤとしたお店のイメージでなく、ある程度洗練されたお店の内観ともマッチするような色を選択しました。

使用言語

HTML/CSS/jQuery/

トップに戻る