私たちは、企業のビジネス課題を解決するデザインパートナーです。Webサイトやアプリケーションのビジュアルデザイン制作、そして情報設計プロセスからUXデザインを行っています。

私たちは、企業のビジネス課題を解決するデザインパートナーです。Webサイトやアプリケーションのビジュアルデザイン制作、そして情報設計プロセスからUXデザインを行っています。

情報設計の目標は、コンテンツを明確で理解しやすい方法で分類整理するだけでなくクライアントのビジネス目標を共有することです。
そして設計された情報は、ユーザーがより少ない労力で必要なものを見つける体験(UX)を得るためのものです。

情報アーキテクチャとは、コンテンツを構造化し設計するテクノロジー技法です。


webサイトの情報設計における全体の流れ

webサイトの情報設計における全体の流れ

1. 顧客分析と調査をする

この段階の目的は、ユーザーのニーズについて深く理解するフェーズになります。分析調査で明らかにされたデータにより、ユーザーのペルソナプロファイルを作成、ビジネス要件とすり合わせしていきます。

1-1:現状の課題を整理

ユーザーファーストのコンテンツになっているか、外的要因はないか。

1-2:ユーザーペルソナ

推論をベースに設定された理想的な顧客の人物像の作成、もしくは確認。

1-3:課題が発生している原因を分析

購入へと至るまでのプロセスを記したバイヤーズジャーニー・マップを作成する。

1-4:原因を解決する方法の仮説を立てる

再設計した顧客ビジネスに合わせたユーザーフローを作成します。

1-5:戦略施策とゴールを作る(KGIとKPI)

短期・中期・長期の目標を整理し、段階における実現可能な施策を考えます。


2. 構造マップを作成する

ユーザーが何を望んでいるかがわかったら、このフェーズでは既存のWebサイトのコンテンツを一覧にし、必要なコンテンツ構造を検討します。

2-1:コンテンツの洗い出し

Webサイトのすべてのページに情報要素のリストを作成し、トピックとサブトピックを分類します。作成はGoogleスプレットシートで行っています。

  • 見出しと小見出し
  • テキスト
  • メディアファイル(画像、ビデオ、オーディオ)
  • ドキュメント(doc、pdf、ppt)
  • ページのURLリンク

2-2:コンテンツの精査

長期にわたりユーザーの興味を持続させることで、収益につながるコンテンツを協議します。また変更や削除するページ、新規で作成するWEBページをこの段階で企画します。


3.ユーザーフレンドリーなナビゲーションのためのWebサイト階層を構築

コンテンツ洗い出しの次は、ユーザーが役立つフレンドリーなナビゲーションを設計します。ウェブサイトに呼び込んだユーザーを顧客へと転換する大切な要素の設計と同時に、この章ではSEO影響や内部構造の強化を行います。

3-1:ナビゲーションの種類

主に4つのタイプ「ボタン、メニュー、ページ内のアンカーリンク、コンテンツの表」で構成されているナビゲーションの文面とデザインを設計します。

3-2:ラベリング

トピッククラスターをはじめとする構造設計とSEOに影響がある分類(カテゴリー)や小分類(タクソノミー/タグ)を洗い出し、整理します。

3-3:レイアウト種類

視覚的に表現するデザインパターンを整理し、トップページ以外の階層種類を検討します。

3.ユーザーフレンドリーなナビゲーションのためのWebサイト階層を構築

コンテンツ洗い出しの次は、ユーザーが役立つフレンドリーなナビゲーションを設計します。ウェブサイトに呼び込んだユーザーを顧客へと転換する大切な要素の設計と同時に、この章ではSEO影響や内部構造の強化を行います。

3-1:ナビゲーションの種類

主に4つのタイプ「ボタン、メニュー、ページ内のアンカーリンク、コンテンツの表」で構成されているナビゲーションの文面とデザインを設計します。

3-2:ラベリング

トピッククラスターをはじめとする構造設計とSEOに影響がある分類(カテゴリー)や小分類(タクソノミー/タグ)を洗い出し、整理します。

3-3:レイアウト種類

視覚的に表現するデザインパターンを整理し、トップページ以外の階層種類を検討します。


4.サイトマッピングとサイトマップ作成

サイトマップは、コンテンツの階層全体を視覚化する構成図です。
情報設計のサイトマップは通常、左図のような図形式で作成され、情報アーキテクチャ図と呼ばれています。また、検索エンジンがWebサイトの構造を理解し、関連情報を見つけるのに役立つXMLまたはHTML形式で表示することもできます。

4-1.サイトマップ図の作成

新規・リニューアル問わずWebサイトのコンテンツを把握するため重要な資料となります。サイトマップ作成にはADOBE XDやPowerPointを活用します。

4-2.機能表の作成

WordPress等のCMSでは、多様な機能・更新箇所を資料にし、運用範囲も明確にします。


5.UIプロトタイプのワイヤーフレームの作成

Webアプリのワイヤーフレーム

サイトマップはコンテンツ階層のスキームですが、ワイヤーフレームは最終的な外観を具体化します。ワイヤーフレームは、Webサイトまたはアプリケーションのナビゲーションとインターフェイスを表示するアプリの概略図です。
情報設計のワイヤーフレームは、コンテンツが配置される見出し、タグ、ラベル、および灰色のボックスとともに、製品のすべてのページと画面を表示します。これは、デジタル製品のUIの最初のドラフトでもあります。

5-1.ワイヤーフレーム

ワイヤーフレームは、Adobe XDfigmaなどの特別なソフトウェアを使用して、デジタルワイヤーフレーム、サイトマップ、または忠実度の高いプロトタイプを作成します。ワイヤーフレームは、構造が明確で簡潔であるかどうかを定義するために非常に重要です。

Webプロジェクトについてご相談してください

情報設計やWeb構築について

個別相談/オンラインミーティング

Webプロジェクトについてご相談してください

情報設計やWeb構築について

個別相談/オンラインミーティング

Service & Products.

Creative Web

Webサイトの制作やソフトウェア開発について

サイト分析と改善サービス

顧客から信頼を獲得するにはサイト分析と改善から

インターネット広告

関連性の高い沢山のお客様へアプローチ。Google・SNSの集客について

地方・決済サービス

あなたのお店もキャッシュレスを始めよう