"CAFE AZITO" SITE RENEWAL

Website / Design / Cording | 学校課題

CAFE AZITOのモックアップ画像

  • CAFE AZITO
  • CAFE AZITO
  • CAFE AZITO
  • CAFE AZITO

DATA/

制作時期 :
2024.11
制作時間 :
デザイン - 7時間
コーディング - 12時間
対応機種 :
PCのみ(1920pxで制作)
使用技術 :
HTML / Sass(scss) / jQuery
デザイン、画像編集ツール :
Adobe Photoshop / Figma

DESCRIPTION/

概要
大阪府にある海の目の前にあるカフェ、cafe azitoのWebサイトリニューアル(TOPページのみ制作)
ターゲット
日常を忘れて休日をゆっくり過ごしたい20〜40代の女性やカップル、夫婦
目的
他店との違いや独自性を伝え、ターゲット層の来店数増加を図りたい
課題
サイト全体の雰囲気は店舗にあっているが、レイアウトが単調なため各カテゴリーのコンテンツが分かりづらい
コンテンツが多くボリュームがあるがシングルページにまとまっているため、情報を取得しにくい
コンセプト
街から離れた海の見える非日常空間
情報設計
現行サイトの課題である「レイアウトの単調さ」と「情報の分かりにくさ」を解決するため、構成を見直しました。まず、各コンテンツに下層ページを作成し、TOPページはシンプルな構成にすることで、必要な情報をスムーズに取得できるようにしました。また、TOPページには下層ページへ誘導する紹介文を配置し、思わずクリックしたくなる工夫をしました。さらに、コンセプトをより伝えやすくするため、各コンテンツに合わせたレイアウトで、情報を整理しながらも、サイト全体を通してゆったりと過ごす時間をイメージしやすい構成にしました。
デザイン
サイトを訪れた瞬間に、店舗の雰囲気を感じられるデザインを目指しました。余白を多くとり、ゆったりとした時間の流れを演出。写真はコラージュのように配置し、海場のカフェならではの開放感を表現しました。また、ボタンに波のあしらいを加えることで、さりげなく海を感じられるデザインに。
配色はロゴにも使われているブルーや、アクセントにベージュを取り入れることで、海や砂浜のイメージを大切にしました。
デザインで使用したカラーコード

VIEW SITE

CAFE AZITO デザインカンプ