webサイト・カフェ(自主制作)

【概要・要件設定】

• ハーブティーカフェ”Three H(架空)”のwebサイト
• サイトからの予約を促したい
• 動きは必要最低限、情報がわかりやすく、シンプルにして欲しい

【目的】

• 店舗紹介
• 予約申し込みからの集客

【ターゲット】

• 20代後半〜30代女性
• 20代前半の時は毎日コーヒーを飲んでいたが、体に取り入れるものに気を使うようになってきた。
• ハーブティー初心者、気軽に友達とお茶やランチを兼ねて試したみたい。
• 飲食店を決めるときは、サイトで事前によく調べて行くことが多い。

【使用ツール】

• Photoshop
• Illustrator
• Sublime Text(HTML/CSS/js)
• XD

【制作時間】

• 約1ヶ月半

【制作工程】

• 要件定義、参考サイト集め(プラニング)
• ワイヤーフレーム作成
• デザインカンプ作成
• コーディング

【工夫したこと】

• 配色
  「ハーブティー初心者」に向けて配色を考えた。背景は親近感と暖かみのあるベージュ、文字はミントグリーンを濃くした緑で視認性とハーブの清涼感やナチュラル感を出した。

• PHOTOセクションのスライダー
  指もしくはマウスでスライドさせる動きを取り入れた。理由は①写真を多く入れられる上に、見たい量を人によって選べるからだ。まず、「飲食店を決めるときは、サイトで事前によく調べて行くことが多い。」という今回のターゲット特徴からすると、写真の多さが重要だと考えた。参考サイトでは自動スライダーを取り入れていたが、自動スライダーで流してしまうと目に留まらず比較や検討が十分にできない為、今回のターゲットの理解度や満足度が下がるではないかと考えた。

• 写真
  「ハーブティー初心者、気軽に友達とお茶やランチを兼ねて試したみたい。」がこのお店に行きたくなるには①飲食店として魅力的か、②ハーブティーへの興味が湧くか、③初心者でも気軽に入れる雰囲気か、が重要だと考えた。①に関してPHOTOセクションで料理写真を多く使用、②に関してCONCEPTでハーブへのこだわりと効果を説明、③に関して全体を通して店内の様子とスタッフ顔写真を入れ安心感を持ってもらえるよう工夫した。

• CTAボタンの追従、設置場所
  サイトを読み進めていく中で、行動(今回の場合予約)したくなった時にすぐアクションが取れるようにグローバルナビを追従させ、CTAボタンが常に画面にあるようにしました。またグローバルナビからすぐアクセスセクションに飛ぶユーザーは、比較的予約する可能性が多いと考えられる為、店情報の下に大きめのCTAボタンを設置し取りこぼさないようにしました。

【学んだこと】

• クライアントの理解(事前ヒアリングの重要性)
  今回は架空の案件だった為、コンセプトやターゲットを自分で決めてからデザイン制作に取り組んだ為、過程を踏みながら自分と対話し、完成イメージの解像度が上がっていった。しかし実際の案件ではサービス内容やターゲット、サイトを通じてどのような状態になったらユーザーは行動をしてくれるのか(もしくはどんな状態になって欲しいのか)等、設計の解像度が上がるまで事前に徹底的にヒアリングすることが重要だと感じた。

• レスポンシブ対応の事前設計
  パソコンサイズのワイヤーフレームのみ作成しコーディングをした為、レスポンシブ対応で改めて情報設計をやり直した箇所があった(conceptセクション)。最初からレスポンシブを考慮した設計を行っていれば余計なコーディングを書かずに済んだと思う。web制作を一気通貫で取り組んでみたからこそ気がつくことができ良い学びとなった。