課題03 カフェサイト制作

課題の設定を元に新規オープンカフェサイトのデザインをしました

トップ画像前半トップ画像後半
サイトを見る
課題内容
要望を元に新規サイトを制作する。
一番の目的は、店の知名度を上げて集客へ繋げる事。
店舗は駅からも繁華街からも離れた住宅街に新しくオープンする。
要望
既存客のいない新規店舗のWebサイトなので、初めてサイトを訪れた人が見やすく迷わない構成・デザインがいい。
地域の人たちが気兼ねなくお店に行ってみたくなるような雰囲気にしたい。
ユーザーを限定するような極端に個性的・先鋭的なものは望まない。
できればスマホでも見やすいレスポンシブデザインにしたい。
ページ構成
以下3ページは必須。
  • Aトップページ
  • Bコンセプトページ
  • Cメニューページ
必須要素
  • Aサイトロゴ(「was cafe」「ワズ・カフェ」)
  • Aメインビジュアル
  • Aオープン告知(2020年12月1日オープン)
  • Aお店のコンセプト
  • B店舗情報
  • Cドリンクメニュー、フードメニュー、スイーツメニュー
コンセプト
トップページを見ただけでユーザーの求めるニーズがこのカフェにはあるという事が伝わるサイト
制作意図

広いターゲットを意識

サイト離脱対策を意識したデザイン

男女共に見た時に場違い感を感じさせないよう、女性的なカラフルな色味と明朝体に見出しを入れつつ、男性イメージのある太めなフォントやコントラストあるデザインも入れ込む事でバランス調整をしました。
画像メインにする事で文章を読まないユーザーにもアプローチできるよう狙っています。

ニーズ別のアプローチ

トップページへアクセスして離脱する可能性を考慮し、トップページだけを見ればカフェがどんなサービスを提供しているのかをざっくり認識できるようなコンテンツを入れました。 また、工夫として「空間」についてのセクションを入れています。「女子会」「勉強」「仕事」「落ち着いた空間」「車イスやベビーカーも通れる広い通路」など空間に関するカフェへのニーズについてアプローチする事でより訴えるユーザー層を絞り、強いアプローチを狙いました。

メニューページについて

ストレス対策

メニュー情報が多い事から、文章を読むストレスが発生します。なるべくそのストレスを減らすためにシンプルなメニュー表を意識しました。
温かい/冷たい飲み物についての情報に色別のタグを設ける事で、読まなくても色で認識できるよう工夫しています。
同様に、メニュー表横に種類別で画像を入れる事で、メニュー表のどのエリアに何があるのかが探しやすくなるようにしました。
それぞれのメニュー表はレイアウトを統一する事で見る側の負担権限を狙いました。

カフェイメージを意識した調整

画像を多用したことにより直線的な線が多い事から、ヘッダーとフッターには緩やかな曲線を入れ込む事でカフェの穏やかな印象が出るよう調整しています。

ユーザビリティについての工夫

リンクについて

初めてサイトを訪れたユーザーが迷わずサイトを閲覧できるよう、特にリンク配置や色に気を付けました。
押したら何かアクションのある部分の文字色を白で統一し、「これはリンクボタンだ」と認識しやすいようにしました。また、ページ途中で下層ページへ繋がるリンクボタンに関しては、下層ページへの誘導を含め目立つ配色の赤を取り入れボタンはボタンでデザインを統一させています。
Google mapのリンクボタンに関しても、下層サイトと外部サイトの差別化を意識し、ボタンデザインにしています。

グローバルナビについて

元々グローバルメニューの数が少ない事から、最初の段階で「ドリンク」「フード」「スイーツ」とページを分けています。メニューページは画像数が多く、外出時にも閲覧される可能性が高い事から、データ通信料を考慮したのと、文字数が多い事からページが長いと離脱する可能性を考慮しページを3つに分けました。最初から分ける事でクリック数が1つ減り、ユーザーのストレス軽減対策としています。

ロゴ案

素材画像にコーヒーが多い事から一番の看板商品と仮定し、WASの文字をコーヒーカップに見立てました。
デザインコンセプトで「空間」を意識したのでそれをイメージし、斜めから見た立方体のシルエットを枠として取り入れました。

制作時間
コンセプト考案1日(6時間)※ラフ画含む
デザイン制作5日(30時間)
コーディング6日(36時間)
制作環境
Adobe Illustrator CS5 , 2020
Brackets
トップへ戻るTOP