ajike switch

Webサービス/アプリ制作における情報設計(IA)のアウトプット代表5選

こんにちは、はじめまして。今月からアジケの仲間に加わった柴宮です。

初めてのブログに何を書こうか迷ったのですが、ぼくが本を読んだり実際の制作〜開発のプロジェクトで実践したりして、こんな感じのアウトプット(ドキュメント)があれば最低限クライアントさんやデザイナ・コーダーさんや開発の方々と共通認識持てるかな?と思ったものを紹介しようかと思います。参考になりましたら〜

※ちょっと自分なりにアレンジしてますのであしからず

コンテンツインベントリ

コンテンツインベントリ

文字通りコンテンツの目録です!(日本語にしただけ…)

ページではなくコンテンツ単位でサイト全体を把握する

とありました!(長谷川敦士さん談)クライアントの要件から、実際どんなコンテンツあるかまたは機能が必要なのか一覧にしたものです。これがあれば、要件を漏れなく制作〜開発に反映できます。

コンテンツマップ(これちょっとぼくがアレンジしてみました)

コンテンツのマップですね、はい。えっと、コンテンツインベントリからカテゴリ分け…といってもいろんな方法がありますが、代表的なのはKS(カードソーティング)とかですかね。をして、今度はページ単位で情報をまとめたものです。これによって、カテゴリ分けされたコンテンツが一目で見ることができます。

サイトストラクチャ(サイトマップとも言いますね)

サイトストラクチャ

さて、いよいよサイト制作っぽくなってきました。ページ単位で情報をまとめたもの(コンテンツマップ)をもとに導線などを決めます。これによってサイトでどういった導線でコンテンツに辿り着くかがわかります。

ワイヤーフレーム

ワイヤーフレーム

おなじみWF!!特に書くまでもないかもしれませんが、ここまでの集大成でページ毎のナビゲーションや各ラベリング、コンテンツの見せ方の骨組みです(レイアウトはデザイナさんと相談して決めたりもします。丸投げしたりもします)。クライアントさんもこの辺でイメージが湧いてきて「ナビゲーションはこうだ!」とか「このコンテンツはここだ!」(ページ変わったり…)とか盛り上がってきます。

ページリスト(これ前の会社の派遣さんに教えてもらいました…便利!)

ここら辺で制作〜開発は佳境になってます。ぼくは開発の方とやり取りするときなんかに使いますね。静的ページをリスト化してある程度階層構造をもたせたものです。エクセルなんかで作ります。制作で実際作成するのはどのページで何ページあるのかなんかがすぐわかります。ピンときます。

以上、超ざっくりですがWebサイト制作における情報アーキテクチャ(IAなんていいます)のアウトプットの代表例でした。ほんとはもっといろんなこと考えたりまとめたり話した合ったりしています。最近ではUXD(ユーザーエクスペリエンンスデザイン)なんていった、ユーザーの体験もデザインするみたいなこともあり、ほんとにいろんな手法でいろんなことを考えたりまとめたり話し合ったりします。

逆に、今まで挙げてきたものはWebサイト制作における中間成果物なので、特にドキュメント化必須というわけではありません。要はちゃんと自分の中で整理できていて、みんなで共通認識を持てればいいということです。えっと、それが一番難しいんですよね…w

今回、それぞれの概要のみですが、自分の中でのまとめも兼ねてなんとなく情報アーキテクチャというものの流れがわかればいいなと思いまして。詳細やIA, UXDに関してなど今後掘り下げていこうか(どうしようか)と。興味ある方は下記参考など調べてみるといいと思います!

余談ですが、前述の長谷川敦士さんと一緒にお仕事(というほどでもないですが)させてもらう機会がありましたがいろんな手法ふっ飛ばしてウルトラCを決めてましたwまあ、最近はiPhoneアプリなどを作っているfladdictさんも監訳しているO’REILLのモバイルデザインパターンという本の中で言ってますが

愚直に型を学び、そうやって型をスムーズにこなせるようになってはじめて、それぞれの中にある本質的なエッセンスを発見できます。そして定石の通用しないシチュエーションで、型を破った新しいものを作り出すことができるのです。

と。そういうことなんでしょうね…

  • 下記書籍(前の会社の先輩に教えていただきました…w)とサイトさんを参考、画像を拝借させていただいてます。

IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計

情報アーキテクチャ(IA)の第一歩!Webサイトを分解して設計意図を考える

5つのサイトストラクチャ(Webサイト情報構造)を実際のサイトと照らしあわせて考える

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×