アイキャッチ画像: デスクの上でパソコンを使用している

こんにちは、スタジオ・ウミの山砥です。 早いもので入社して8ヶ月が経とうとしていますが、まだまだ毎日インプットの日々なので、年の瀬も近づいてきたところで、自分の覚書きのためにもWebデザインの基礎をこちらのブログにてアウトプットさせていただきます。ホームページを新しく制作される方にも参考になれば幸いです。
前回はWeb制作フローにおいてワイヤフレームの作成がいかに大切であるかをご紹介させていただきましたが(詳しくはこちら)、今日はそれと同じくらいWeb制作フローにおいて大切な「情報アーキテクチャ」について触れてみたいと思います!

コミュニケーションメディアの屋台骨:情報アーキテクチャ

みなさんは「情報アーキテクチャ」という言葉をご存知ですか?Wikipediaによると下記のような意味があるそうです。

> - 情報アーキテクチャ(Information Architecture)は、知識やデータの組織化を意味し、「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術である。
> - Webデザインの発展に伴い、従来のグラフィックデザイン(平面デザイン)に加え、編集・ビジュアルコミュニケーション・テクノロジーを融合したデザインが要求されるようになった。情報アーキテクチャはこれらの要素技術を組み合わせた、わかりやすさのためのデザインである。
> - ウェブ技術の発達に伴いその重要性が認識されているが、情報アーキテクチャの考え方自体は、紙面デザインの頃から変わらない。
> (以上、Wikipediaより抜粋)

要は「情報アーキテクチャ」というのは、ユーザーに「情報をわかりやすく伝えること」「複雑なものを明解にすること」に関わる一連のスキルセットを指します。 デザインというと「色」や「形」を整える作業と考えがちですが、情報アーキテクチャでは「情報」の「組織化」に焦点をあてます。
この情報アーキテクチャはホームページやモバイルサイトを含むコミュニケーションメディアにおいては大変重要で、ある意味屋台骨ともいえるフェーズ。情報を発信する目的と発信先つまりユーザーのニーズを見極めて、Webサイト内のページ同士のつながりや最適なナビゲーションの数・位置などを検討しながらより伝わりやすい情報の伝え方を工夫することで、使い勝手のよいホームページにすることができるのです。

制作過程における情報アーキテクチャの位置づけ

ホームページ制作には「必ずこの流れで作る」といった決まりはありません。ホームページの規模や内容により、作業の流れも多少変わってきます。以下に、一般的なWebデザインの制作フローを載せさせていただきました。

ホームページ制作フロー

情報アーキテクチャはこの初期の段階、情報設計に含まれます。厳密にいうと少し違うかもしれませんが、ホームページのサイトマップを作る過程に含まれている作業と考えてよいと思います。 初期段階での主な作業は、ホームページの構造やナビゲーションの設計などです。情報を整理してわかりやすく伝えるための過程なので、ここを曖昧にするといくら見栄えよく仕上がっても、ユーザーにとっては使いづらいサイトになってしまう可能性があります。

ちなみにサイトマップとは、ホームページ全体の構造をまとめたファイルやページのことをいいますが、ひとくちに「サイトマップ」といっても制作過程から実際のホームページ内で扱われるものまでいろいろな意味合いで使われています。代表的なものを下記に挙げてみました。

  1. 制作段階でホームページ全体のページ構造を分かりやすく図表で示したサイトマップ
  2. ホームページ上でサイト内のコンテンツ構造を示したサイトマップページ
  3. Google や他の検索エンジンにホームページのコンテンツの構成を伝えるためのサイトマップファイルなどがあります。

以下の図は上記でいうと1にあたる典型的なサイトマップの例です。

サイトマップ

サイトマップを作るには、どのページの下層にどのようなコンテンツ(=情報)をもってくるかを整理しないと作れませんね。
どんなに有益な情報でも、ただ並べて掲載しただけでは伝わりません。情報量が多くなると伝達性は低下していきます。つまり、欲しい情報を探し出せないという問題が出てくるのです。カテゴリを決めて情報をいくつかのグループに分けたり、優先順を決めて見せ方を変えるなど、「情報のデザイン」が必要になります。

さいごに

いかがでしたでしょうか? 先ほど、情報設計を曖昧にするとよくない、と述べましたが、Webデザインにおいては、ホームページ上で何かを探そうとしている人たちに情報を適切に届けることが求められます。クライアントの目的やホームページをつくる目的、ユーザーの目的をうまくかなえること、その手助けをするのがWebデザインの持つ役割といえます。その基盤となるのが情報アーキテクチャです。サイトマップやワイヤーフレームといった骨の部分を大切にすることは、ユーザーへの配慮でもあると思います。 良いコンテンツがあるのに、設計がうまくできていないせいでユーザーがコンテンツにたどり着けなかったらもったいないですよね。ユーザーが迷わないように見えない導線を考えたり、快適に使っていただくための工夫と思いやりを持っった設計をしていきたいと思います。

次回も引き続き、Web制作フローの初期段階について書いていこうと思います!
ではまた。


共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート&フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎!ぜひお気軽にご連絡ください。