クライアントワーク

café iwabuti

東中野の小さなカフェ

クライアントワーク モックアップ

サイトを見る

  • 制作期間
    1ヶ月
    • 全体構成
      1週間
    • デザイン
      1週間
    • コーディング
      1週間
  • 担当工程
    全工程
    • 顧客折衝
    • デザイン
    • コーディング
  • ページ規模
    3頁
    • home about
    • menu
    • access contact

概要

クライアントは、東中野駅より徒歩3分の閑静な住宅街に佇む個人経営の小さなカフェ。本店舗のサイトを顧客折衝からテーマやゴールの設定、ワイヤーフレーム・カンプ作成、マークアップ・コーディングまでを行う。

カフェ店内カフェ店内2

顧客折衝

サイトを作らせていただけるクライアントを探すための営業活動を行う。
人脈を通して個人でカフェを経営されている方に行き着きましたが、以下のようにいくつかの問題点が発生したため、その対策案を考え実行。

  • 問題点1

    信頼感の不足

    面識が薄いことから信用を得られておらず、サイトを作成することにネガティブである。

  • 対策1

    自分を知ってもらう

    店舗に足繁く通い、クライアントとミュニケーションを取ることで信頼を獲得する。

  • 問題点2

    サイトの必要性の欠如

    facebookやtwitter、blog等を利用した情報発信をされており、改めてサイトを作る必要性を感じていない。

  • 対策2

    サイトの意義の考案

    サイト作成のメリットや意義を自身でも改めて振り返り、情報をまとめる事でクライアントへその思いを伝える。

打ち合わせ

サイト制作にあたり、コンセプトやターゲット層などの確認のために打ち合わせを行う。 ただし、サイト制作にネガティブな印象がある事からも、こちらからクライアントへ提案できるようにワイヤーフレームやサイトマップを含め予め準備を行い、打ち合わせに挑む。

コンセプト

信頼を獲得するために店舗へ通いクライアントとコミュニケーションを取っていたが、話の中から店舗のカラー、客層、最寄駅や店舗がある街の特色などが見えてきた。また、実際に店舗へ訪れる顧客からもユーザーの傾向が見えてきた。その点を踏まえ、サイトの目的を決定。

コンセプトイメージ

ワイヤーフレーム

全体を大まかにイメージできるようにワイヤーフレームを作成し、クライアントと打ち合わせ。 店舗の連絡先など重要度の高いものはページトップへ移動するなど、話し合いとクライアントの要望を踏まえ、全体のレイアウトを修正。

ワイヤーフレーム

サイトマップ

ワイヤーフレームと併せ、ページ全体の構成を案を打ち合わせ時に提示。 個人での経営であることから、メールチェックは難しいとのことでコンタクトページのメールフォームは不要との要望あり。その点を踏まえサイトマップを修正。

サイトマップ

スケジュール管理

ワイヤーフレームより必要な画像の枚数、テキストを割り出し、クライアントへ素材の提供を依頼。サイト制作の進行に大きく影響するため、依頼時にはいつ頃いただけるか確認し、予定日を設けることで素材の取得が滞らないよう対応。また、納期から逆算してスケジュールを作成し、ガントチャートにて進捗の管理を行う。結果として、納期に間に合うように制作を進めることが可能となる。

ガントチャート

制作時のポイント

クライアントとの打ち合わせ時のコンセプト等を基に、サイト製作時に工夫したポイントを項目ごとに解説。

キービジュアル

  • 三分割法を考慮

    クライアントよりいただいたデータでは、バランスが悪く店舗のイメージを魅力手に伝えることができないため、三分割法を意識した修正を加えることでバランスが取れ安定した構図になるよう工夫。

  • ストーリー性を考慮した並び

    「普遍的な価値」をコンセプトに、店舗の全体像ではなく、一部をクローズアップした画像にすることで、ユーザーが店舗を取り巻く環境を想像できるようなストーリー性のある構図になるよう意識。

キービジュアルポイント

コンテンツ

ページ移動を促す奇数配置

コンテンツを奇数配置することで、不安定さを発生させる。人は不安定なものに遭遇すると安定を求める心理が働くため、その点を考慮し、コンテンツを奇数配置することで次のページへ動きたくなる心理状態を生み出す。

コンテンツポイント

トップへ戻るボタン