調査・研究レポートReport

さて、早速ですが、サイトマップやサイトストラクチャを作成するときって皆さんはどのようなプロセスを経て作成していますか？今日はサイトストラクチャの作り方についてどのような要点があるかをまとめながら記事にしてみたいと思います。

サイトストラクチャの種類

IAに関するどの書籍を読んでも一般的には以下の5分類があると書かれています。

• 階層型分類構造
• ファセット分類構造
• Web型構造
• ハブ＆スポーク構造
• 直線型構造

今回は中小企業様のウェブサイト制作の効率化することが最大の目的なので、上記のうちフォーカスすべきは「階層型分類構造」一択です。基本的には階層型のサイトストラクチャにてサイトマップの設計を行っていくことになりますので、2019年の今現段階においてはこれだけを押さえておけば問題はないと言い切っておきます。

階層型分類構造

大カテゴリー　→　小カテゴリー　→　詳細情報　といった階層構造のことです。一般的に中小企業様のウェブサイト制作においてはこちらがほぼ100％といってよいでしょう。詳細にはそれ以外のサイトマップを持つサイトもあるかもしれませんが、基本的にはこの階層分類型構造の枠にはめて考えればOKです。

ファセット分類型構造

ファセット分類型構造についても少しだけ触れておくと、ブログにおけるタグやカテゴリーなど、一覧 → 詳細の遷移において、複数の一覧から複数の詳細に遷移できるような構造がファセット分類型構造です。WordPressで構築されたブログのタグとカテゴリーの機能を使えば基本的にはこちらの構造となります。その他にAmazonなどのECサイトのカテゴリーなどもこちらの構造になっていることが多いですね。名前だけ押さえておけばプロっぽさ満載です。

サイトストラクチャの目的

ウェブサイトの全体像を把握すること

「ウェブサイトの全体像を把握する」ということが一番の目的になるかと思います。私の周囲においては、全体像とは主に構造を指すことが多いと感じています。中小企業様のウェブサイトを制作するにあたってまず一番最初にウェブサイトの構成要素としてのサイトマップ（構造が把握できるもの）を作成し、お客様との認識の共有を図るツールとして利用されるケースが多いように思います。

ただ、上記はあくまでもウェブディレクターとお客様での間の利用用途であって、目的をブレイクダウンしていくとこれだけでは終わりません。

様々な使用目的

具体的にお客様とディレクター間以外の利用用途について見ていきましょう。

• プランナー／ユーザーフローの設計
• デザイナー／ナビゲーションの設計
• エンジニア／ファイルの生成場所を確定

さて、上記で早速気になるポイントが1つ。そうです、私たち中小企業様向けのウェブサイト制作においては、プランナーの仕事、すなわちユーザーフローの設計が抜けていませんか？ ユーザーフローを設計し、お客様に説明することもサイトストラクチャを利用用途の一つであるということを認識した上で、最適なユーザーフローが設計されているかどうかについても検討する必要があると思います。

サイトストラクチャの作成は、ユーザーエクスペリエンスデザイン（UXD）に一領域を占める情報アーキテクチャの担当領域です。ウェブサイトの制作を行っていく上で、ユーザーの体験を無視した設計にならないように注意する必要があります。そのためには、見た目や使い勝手をつかさどるナビゲーションの設計やファイルの生成場所の確定など、デザイナーやエンジニア目線の用途だけではなく、プランナーや、強いてはお客様のビジネスを支援する目的での目標達成や成果という目線での理解が欠けていては成果につながりようがありません。

文章表現

ラベルシステムの作成

タイトル → パンくず → ディレクトリとファイル名 などの流れで用いられる日本語や英語の命名規則のことをラベルシステムと言います。これらラベルシステムを考えることもサイトストラクチャを作るうえで必要なことになりますので、ディレクターの成果物としてこれらの整理したドキュメントの作成などを行っても面白いかもしれませんね。

少なくとも私の周囲では、パンくずはデザインデータに落とし込まれている場合があるためデザイナーが勝手に考える場合が多いですし、ファイル名の付け方についてはエンジニアが勝手に考える場合が多いような気がしています。上流からきちんと最適な状態で情報を整理するという目線を持つということができれば、一歩上のウェブサイト制作につながる可能性を示唆しています。

情報を整理し、デザイナーやエンジニアのインプットとしてドキュメントを提供することもUXデザイナーのお仕事です。私の周囲でも飛びぬけてできるデザイナーさんはこのことを十分に理解してるような気がしますね。若くして尊敬してやまないデザイナーさんも三重にはいるのです。

概念からファイルに落とし込む

整理した情報は最終的にHTMLやPHPなどのファイルに落とし込む必要がありますので、情報アーキテクチャとしての仕事は概念の実体の間を埋めることとも言い換えることができます。どこまで情報アーキテクチャの仕事として整理文書化を進めていくかはプロジェクトによるところは大きいとは思いますが、本来のユーザー体験設計の範囲を鑑みるとUXデザイナーの仕事としてはファイルレベルまで落とし込むことができればベストだと個人的には考えています。

数千万円クラスのプロジェクトで利用されるような完璧に作りこまれたデザインドキュメントというものを私は見たことがないのですが、もしそのようなドキュメントがあるとすれば、完璧に作りこまれていてほしいものだという気持ちがありますね。デザイナーやエンジニアとお客様の間を取り持つ職種としての情報アーキテクチャに求められている知識範囲は非常に広いと言えるでしょう。

サイトストラクチャ作成の思考プロセス

サイトストラクチャは4分類で考える

サイトストラクチャを構成する上で以下の4分類に分けて考えると整理が楽です。

• トップページとその他のコンテンツ群
• メインメニュー群
• サブカテゴリ―
• 詳細コンテンツ群

上記での整理を行う場合には以下の項目に注意するとスムーズに整理が進みます。

• 基本構造の4分類を利用して描く範囲を決める
• 同じカテゴリや同じレシピのページで共通のナビゲーションを見つける
• コアコンテンツにあるナビゲーションを利用して関係性を把握する

ハイレベルサイトストラクチャによるヒューリスティック分析とベンチマーク

同業種のサイトを分析し、良いとこどりでサイトストラクチャを作成していきましょう。様々なサイトを見ているとどこが使いやすくてどこが使いにくいのかということが経験上少しずつ分かってくるものです。競合他社など同業種のサイトを実際に閲覧し、利用するということ自体がサイトストラクチャの作成など、ウェブサイトの設計を行う上での工程に含まれているという認識を持つことが重要ではないでしょうか。

サイトストラクチャは4分類で考えるで挙げたコアコンテンツへの遷移の違いをサイト別に分析し特徴を把握し仮説を立てて最適な導線を設計することなども情報アーキテクチャの仕事の内容になると思います。

これら抽象化されたサイトストラクチャのことをハイレベルサイトストラクチャといい、一般的には〇〇業のサイトはこうだよね？といった一般かされた構造のことを指します。抽象化されたサイトストラクチャを書くことによって、抜けや漏れを未然に防ぐ効果がありますので、きちんとベンチマークサイトをいくつかピックアップして分析し、標準的な機能については押さえておくことが鉄板の正攻法になると思います。

ヒューリスティック分析とは

ヒューリスティック分析は、Webサイトのユーザビリティを評価する手法のひとつです。 ヒューリスティック分析では、ユーザビリティの専門化が自らの経験則を基に、あるいは担当者がユーザビリティの原則に基づき、分析対象となるWebサイトのユーザーインタフェースを評価します。

ヒューリスティック分析とは1より引用
https://www.seohacks.net/basic/terms/heuristicanalysis/

ベンチマークとは

ベンチマークとは、本来は測量において利用する水準点を示す語で、転じて金融、資産運用や株式投資における指標銘柄など、比較のために用いる指標を意味する。また、広く社会の物事のシステムのあり方や規範としての水準や基準などを意味する。

Wikipedia（ベンチマーク）より引用
https://ja.wikipedia.org/wiki/%E3%83%99%E3%83%B3%E3%83%81%E3%83%9E%E3%83%BC%E3%82%AF

まとめ

今日はサイトストラクチャ（サイトマップ）の作り方についてまとめてみましたがいかがだったでしょうか？ 当たり前に作成しているサイトマップに関してもフォーカスして研究してみると色々と気が付くポイントがあるものです。更に専門的に深めて学んでいくことも可能なので興味がある方はユーザー体験設計の一領域である情報アーキテクチャという領域についても学んでみてください。

ただまぁ、最近はIA（情報アーキテクチャ）という言葉自体をあまり聞かなかくなったのもあるし、実際はどうなのでしょうね。ウェブサイトを制作していく上では当たり前に行っていることなので、きちんと知識を整理しておくことによって得られるメリットは割と多いと思います。

書籍のご紹介

最後に私が学んできた情報アーキテクチャに関する書籍を少しだけご紹介します。オライリーの白くま本は少し内容が難しいし、実践というよりは割とアカデミックな内容が多い印象です。それよりかは実践的な内容で書かれたその他の2冊が読みやすいのでお勧めです。ちなみに僕が持っている白くま本は第2版（5年以上前に購入）なのに対して現在は第4版まで進んでいるのでそれだけ多くの方々に読まれている書籍と言えそうですね。「情報アーキテクチャを学ぶ」ということはウェブ／UXデザイナーやウェブディレクターとして専門知識を深めるには避けて通れない道ではないでしょうか。

INFORMATION ARCHITECT 100
ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
https://amzn.to/2TGEwMF

100ページすべてに図解があり、デザイナーの方にオススメです。非常に視覚的にわかりやすい。

IAシンキング
Web制作者・担当者のためのIA思考術
https://amzn.to/2HsZWGo

ウェブディレクター向けです。実践的でわかりやすい。

情報アーキテクチャ
見つけやすく理解しやすい情報設計
https://amzn.to/2TLuYQo

内容は非常に学術的で難しいです。ボリュームも一番。実践するにはかみ砕いて理解する力と応用力が必要です。