Works

ウェブサイト

2023.02.04制作

Cafe azito

スクロール矢印

作品3

作品03デザインカンプ

デザインコンセプト

●店名:Cafe azito(カフェ アジト)
海の近くで食事と風景とリラクゼーションでゆったりした時間を過ごしてもらいたい。営業日、営業時間が限定されているため予約は必須。ということで、ぱっとすぐ目に入るようにメインビジュアルの右上に予約ボタンを配置しました。全体を波を意識したデザインにしていますが、波の動きはメインビジュアルの部分だけにしました。グラデーションの波を動かすと美しくなかったためやめました。やってみて気づけたので学べて良かったです。落ち着いた雰囲気にするために、ロゴの色でグラデーションにしました。

●ターゲット:20~30代
比較的自由な時間がある層。

●設定:大阪にある実在の店舗でサイトのリニューアルとして制作
不定期での営業のため予約は必須。
お店は海のすぐ近くにあるため、非日常感を味わって欲しいのと、写真映えするのでインスタグラムのフォロワーを増やしたいということもありインスタグラムのセクションを入れて欲しい。

制作時間

●Webデザイン構想「2時間」
●素材の選定や写真加工「4時間」
●デザインカンプ「6時間」
●コーディング「12時間」=合計24時間

レスポンシブ

非対応

使用ソフト・使用言語

XDアイコン

XD

Photoshopアイコン

Photoshop

htmlアイコン

HTML LS

cssアイコン

CSS 3

Sassアイコン

Sass

JQueryアイコン

JQuery

書体

英語:PT Serif
日本語:Noto Sans JP
ロゴに合わせ、明朝を使用。すべて明朝にしてしまうと、ターゲット層よりも落ち着いた雰囲気となり上の年代になってしまうので、説明文などはゴシックを使用しています。

使用色

1トーンのグラデーションで落ちつきを表現
お店が海の近くにあるため波のあしらいにしました。メインビジュアルの波は、写真の色味によせ白と透明の白・水色の3色にしています。

写真

提供素材
全体的にフォトショップで色補正をしています。

こだわり

お客様にゆっくりして欲しいということで、余白(背景の白)が多いゆとりのあるデザインにしました。

下層ボタンにはホバーすると矢印が横に動き、色がつくようにしました。ボタンだと認識してもらえるように意識して制作しました。

関西国際空港から公共交通機関でのアクセスが約50分ほどのため、観光客も意識してmapのトリミングは関西国際空港が入るようにし、アクセス情報もそこからお店までの内容を追加しました。

mapの上に住所や電話番号などのデータを入れました。mapを動かしても文字が見えるように、文字の下には海と同じ色を入れています。

Visit Website