投稿日:2019年3月14日サイトストラクチャ(サイトマップ)の作り方|UXデザイン/情報アーキテクチャ実践さて、早速ですが、サイトマップやサイトストラクチャを作成するときって皆さんはどのようなプロセスを経て作成していますか?今日はサイトストラクチャの作り方についてどのような要点があるかをまとめながら記事にしてみたいと思います。いった階層構造のことです。一般的に中小企業様のウェブサイト制作においてはこちらがほぼ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/ベンチマークとはベンチマークとは、本来は測量において利用する水準点を示す語で、転じて金融、資産運用や株式投資における指標銘柄など、比較のために用いる指標を意味する。広く社会の物事のシステムのあり方や規範としての水準や基準などを意味する。当たり前に作成しているサイトマップに関してもフォーカスして研究してみると色々と気が付くポイントがあるものです。専門的に深めて学んでいくことも可能なので興味がある方はユーザー体験設計の一領域である情報アーキテクチャという領域についても学んでみてください。最近はIA(情報アーキテクチャ)という言葉自体をあまり聞かなかくなったのもあるし、実際はどうなのでしょうね。ウェブサイトを制作していく上では当たり前に行っていることなので、きちんと知識を整理しておくことによって得られるメリットは割と多いと思います。最後に私が学んできた情報アーキテクチャに関する書籍を少しだけご紹介します。オライリーの白くま本は少し内容が難しいし、実践というよりは割とアカデミックな内容が多い印象です。それよりかは実践的な内容で書かれたその他の2冊が読みやすいのでお勧めです。ちなみに僕が持っている白くま本は第2版(5年以上前に購入)なのに対して現在は第4版まで進んでいるのでそれだけ多くの方々に読まれている書籍と言えそうですね。「情報アーキテクチャを学ぶ」ということはウェブ/UXデザイナーやウェブディレクターとして専門知識を深めるには避けて通れない道ではないでしょうか。100ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計https://amzn.to/2TGEwMF100ページすべてに図解があり、デザイナーの方にオススメです。非常に視覚的にわかりやすい。IAシンキングWeb制作者・担当者のためのIA思考術https://amzn.to/2HsZWGoウェブディレクター向けです。実践的でわかりやすい。情報アーキテクチャ見つけやすく理解しやすい情報設計https://amzn.to/2TLuYQo内容は非常に学術的で難しいです。実践するにはかみ砕いて理解する力と応用力が必要です。公式アカウント資料ダウンロード会社やサービスに関する資料ダウンロードをご希望の方は右の資料ダウンロードページからご利用ください。ご希望の方は応募フォームからご応募ください。