UI・情報設計

Question

どんなサイトが出来上がるの？

成果につながるWebサイトを構築します。

「デザインは気に入ってるけど、成果が出ない」「問い合わせが全然増えない」そんなご相談をいただく機会が増えています。

原因の多くは、見た目だけを重視して「設計」が抜け落ちていること。どんなユーザーが、どこから来て、どんな行動をして、どう動いてほしいか。こうした“体験の流れ”をきちんと描いたサイトは、自然と成果につながります。

私たちは、最新の手法も取り入れながら、「目的に合った、ちゃんと働くサイト」を一緒に考え、つくっていきます。

UI & Information Design Process

UX5Sに基づいた
UI/情報設計プロセス

当社ではUI（＝デザインレイアウト）及び情報設計を行う過程で、UX5段階モデル（エレメンツ・オブ・ユーザーエクスペリエンス）という5つの設計ステップを用いています。

これは、ユーザーの体験をデザインするためのフレームワークで、順序立てて「何を」「どのように」考えれば、伝わりやすく・使いやすいサイトになるのかを明確にしてくれます。

このプロセスを取り入れることで、伝えたい情報がきちんと届き、ユーザーが迷わず行動できる設計が可能になります。これが将来的に成果を生むWebサイトへとつながっていきます。

#01 戦略 Strategy

まずは、Webサイトの目的とターゲットをしっかりと整理します。「なぜこのサイトを作るのか」「誰に届けたいのか」を明確にすることで、すべての判断基準が定まります。
- ・ヒアリングによるゴール設定
- ・ペルソナ（想定ユーザー）の設定
- ・競合／市場調査と課題抽出
#02 要件 Scope

どんな情報や機能が必要かを決めていきます。訪れた人が迷わず目的を達成できるように、伝えるべき内容や必要な機能を整理します。
- ・必要ページ・導線の洗い出し
- ・ユーザーとサイト側のニーズの整理
- ・要件定義シートの作成
#03 構造 Structure

要件をもとに、情報や機能をどのように組み立てるかを設計します。ナビゲーションや情報の流れを考え、スムーズに使えるサイト構造を作ります。
- ・サイトマップ（全体構成図）の作成
- ・情報設計（カテゴリ分け・並び順）
- ・ユーザー動線の設計
#04 骨格 Skeleton

ページのレイアウトや、各要素の配置を考える段階です。見やすく、使いやすい設計を意識して、構成案やワイヤーフレームを作成します。
- ・ワイヤーフレーム（設計図）の作成
- ・各画面のUI設計（ボタンやフォームなど）
- ・主要ページの構成案（要素の優先順位）
#05 表層 Surface

最後に、写真・色・フォントなど、見た目を整えていきます。視覚的にわかりやすく、ブランドの世界観や信頼感が伝わるようにデザインを仕上げます。
- ・ビジュアルデザイン（写真／色／文字）
- ・デザインコンセプトの設計
- ・デザインカンプの作成（デザイナー連携）