2. サイト設計
SITE DESAIGN
サイト設計フェーズでは、ユーザーとホームページ双方の目的に沿ったコンテンツの配置やレイアウト、動線の検討を行い、顧客目線のサイト実現を目指します。効果的なコールトゥアクション（CTA）や目的達成に向けた機能も組み込み、ビジネスの成功をサポートします。
2-1. コンテンツの設計
商材特性と顧客ニーズから考える論理的なコンテンツ設計
ホームページはBtoC・BtoB問わず、いずれも何かしらの購買行動を後押しすることを目的とすることが多く、その性質上、論理的な言語コミュニケーションが重視される傾向にあります。つまり、ターゲットユーザーのニーズに応えるコンテンツを必要十分以上に揃えることが重要となってきます。
SAVVYでは、サイトで取り扱う商材の特性と、プロジェクト設計フェーズで設定したターゲット情報の2つの側面から顧客目線での訴求方法やコンテンツの作り方を考えていきます。
具体的には、商材が持つ「機能的な特徴」を「顧客にとってどのような価値を生むのか」といった視点に転換した上で、代表的な顧客価値の抽出と自社の独自性を設定。それを元に実際にサイト上で訴求するコンテンツストーリーを作成し、個別のコンテンツ設計に展開していきます。
商材の機能的特徴から、対応する顧客価値をリストアップ（価値転換）し、その中からターゲット顧客にとっての代表的な価値の抽出と自社の独自性を設定します。
フレームワークを活用したコンテンツストーリーの作成
ユーザーの購買行動における心理欲求に基づいたフレームワークを活用し、コンテンツ設計の芯となるストーリーを作成します。
コンテンツストーリーの展開
コンテンツストーリーをもとにしてホームページを構成するコンテンツを検討・配置していきます。例えばストーリーを1ページで簡潔に取りまとめたページや、ストーリーを個別に分解して説明するページ、といった視点から商材訴求に必要なページを洗い出します。
このステップの主な目的
商材の顧客価値と自社独自性の抽出
取り扱う商材の顧客にとっての代表的な価値の抽出と自社の独自性の設定をします。訴求すべき要点を整理する非常に重要なプロセスです。
コンテンツストーリーの作成と展開
顧客価値・自社独自性をもとに、コンテンツの芯となるストーリーを作成します。ホームページ内のどのページに「何を・どのように・どの順番で配置するか」といった画面設計の基礎になります。
2-1. サイトの全体設計
サイト全体設計では、コンテンツ設計で洗い出したコンテンツ群をページ単位まで詳細化・階層構造化した上で、各コンテンツの配置や動線の最適化を行います。「情報を整理しユーザーが情報を探しやすくする」という情報アーキテクチャの考えに基づいて、顧客視点の使いやすさを考慮しながらサイトの全体像を組み立てます。
このステップの主な目的
ディレクトリマップの定義
コンテンツ群をページ単位まで詳細化・階層構造化し、各ページにどういった内容を掲出するかといった情報の配置や動線を整理・最適化します。要素の抜け漏れや重複チェックといったコンテンツの全体像確認の他に、プロジェクトの進捗管理などを目的にも活用します。
2-3. 画面の設計
ユーザーとホームページ双方の目的達成に向けた「サイト設計」の鍵
「画面設計 = ワイヤーフレーム」では、ホームページ内の主要ページの画面構造を設計し、ページ内のコンテンツの枠組み、場合によっては具体的なコピー案まで定義します。このワイヤーフレームを元にコンテンツのブラッシュアップやビジュアル制作を行います。
サイト全体設計により整理・定義されたコンテンツ要素を、ワイヤーフレーム化によりページ単位で詳細に設計していきます。ユーザーの目的達成やCTAの促進に貢献する機能やインタラクションの導入もこの段階で検討します。これによりユーザーにとっての良質な体験をつくり出します。
CTAはコンテンツごとに変わる場合などもあるため、ワイヤーフレームの段階でそれぞれ定義しておきます。
このステップの主な目的
ワイヤフレームの作成
サイトの各ページやセクションの基本的なレイアウトや要素配置をワイヤフレームとして設計します。
場合によっては具体的なコピー案やCTA促進のためのインタラクションなど、「ページ単位」で細かい体験まで具体化して詰めていきます。レスポンシブデザイン対応
PC・タブレット・スマートフォンなどの異なるデバイスや画面サイズに対応するために、レスポンシブな画面設計を行います。具体的には、デバイス環境によって設計の最適化が必要な場合は、それぞれの環境ごとのワイヤーフレームを作成します。
