課題03　カフェサイト制作

• Aトップページ
• Bコンセプトページ
• Cメニューページ

• Aサイトロゴ（「was cafe」「ワズ・カフェ」）
• Aメインビジュアル
• Aオープン告知（2020年12月1日オープン）
• Aお店のコンセプト
• B店舗情報
• Cドリンクメニュー、フードメニュー、スイーツメニュー

広いターゲットを意識

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

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

ニーズ別のアプローチ

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

メニューページについて

ストレス対策

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

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

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

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

リンクについて

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

グローバルナビについて

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

ロゴ案

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