本ページでは、ブックカフェのサイト制作を題材に、
制作過程を工程ごとに分解して紹介します。
視覚的に情報を共有することで次の工程を具体化し、
クライアントが迷わない進行を意識しました。
クライアントと一緒に課題を解決する姿勢を大切にし、
情報を丁寧に引き出しながら共有とすり合わせを重ねました。
目的・要件整理
課題や目的を整理して、
現状と目指すべき方向性を定める
ヒアリング
クライアントの考え方や店舗への想いを丁寧に聞き出し、事業への理解を深めました。まずはサイトが表現すべき「らしさ」を集めていきました。
リサーチ
来客者からの意見や感想、競合になり得る周辺店舗や業態から現状の課題やサイトの役割を整理し、誰に伝えるか明確にします。
ユーザージャーニー
サイトの目的を明確にして、クライアントへ視覚的に共有することで、今後の展開をイメージしやすくします。
情報設計・構成
何をどう伝えるべきか検討して、
情報を形にする
サイトマップ
ページ構成やコンテンツを絞り込み整理します。必要な情報と不要な情報を選別して共有しました。
ライティング
クライアントへのヒアリングやSNSの発言から言葉を拾い、文章を提案しました。伝えるべき価値を形にしていきます。
ワイヤーフレーム
整理した情報をサイトの形に整えます。完成形のイメージを共有することで、判断の軸を作ります。
デザイン制作
視覚的方向性をすり合わせ、
調整しながら見た目を整える
参考サイト
そのサイトの何が良くて何が合わないかを、メインビジュアル、情緒、機能の項目ごとに方向性を摺り合わせました。
素材・撮影
提供された写真を選定、加工してサイトに合った素材に整えます。さらに店舗へ出向いて撮影し、不足の素材を補いました。
ブラッシュアップ
段階的な共有からブラッシュアップし、サイトの目的からズレがないか協議し、完成を目指しました。
サイト構築
Studioを使ってデザインを
WEB上で再現する
SEO
ディスクリプションや構造を整えるためのタグを設定して、基礎的なSEOで地域との結びつけを強め、集客の基盤を固めます。
レスポンシブ
体験や情報の取得を安定させるために、どの端末からでも崩れないよう実機で確認しながら丁寧にレスポンシブを設計しました。
アニメーション
過剰にならないように注意しながら、ユーザーの感情を意識して閲覧体験の向上を目指しました。
公開・運用
成果に繫げるための戦略と展開
LINE構築
再来店の流れを作るためにLINEの運用を提案し、店舗の公式LINEを作成しました。段階的な運用のサポートで登録者を増やします。
認知拡大
サイトの流入経路を確保し、導線を整備しました。クライアントが運用していたSNSを活かして認知を拡げる提案をします。
サイト運用
CMSの機能を活かしたサイト内の記事の更新方法をレクチャーし、内容の提案や継続的な運用をサポートします。
