情報を設計するワークフロー

唐突ですが、サイトのコンテンツをどのようにリストアップしていますか？漏れがあったり、重複したりしていませんか？はたまたデザインを作りこんでコーディングをスタートしてから、やべえメニューが1つ足りていない！とかなっていませんか？

そういったことを未然に防ぐのが情報設計というやつ。インフォメーションアーキテクチャですね。

今回はコンテンツ – 情報をどのように設計するのかについて基本的なフローを説明しておきます。

僕のフローはこんな感じです。

1. 2つか3つの競合サイトのコンテンツをリストアップする。
2. 自サイトの独自コンテンツをリストアップする。
3. それぞれのコンテンツをグループ分けする。
4. そのグループに優先順位をつける。
5. サイトマップを作る。

次の章でNPtech.jpを事例に具体的に見てみます。

NPtech.jpでの事例

NPtech.jpそれ自体は単なるブログですので、競合サイトというよりもほかのブログを参考にしました。これらのブログはデザイン面でも本当に影響されました。

• Nitram+Nunca
• greenhug : 良いコト・モノだけエコニュース
• Mushline

それから今までのワークフローで紹介した手法からオリジナルなコンテンツも加味し、こんな感じでコンテンツをリストアップしました。

• 記事
• 記事サマリー
• カテゴリ
• タグクラウド
• アバウトのページ
• プロジェクトのページ
• アーカイブのページ
• 最新記事一覧
• 最新コメント一覧
• コンタクトのページ
• 検索ボックス
• 広告
• タグライン
• RSSリンク
• WordPressの著作権
• 自分の著作権

とこんな感じですね。実際のデザインではこの過程で必要を感じなくなり却下したものや逆に付け加えたものもあります（ちょっと思ったんですが、厳密にはコンテンツという言い方は正しくないですね。英語で言うと、chunkです。ユニットとかそんな感じかな）。

あとはこれらをグループ化して、それぞれのグループに優先順位を与えて、コンテンツの位置付けを決めたりします。ここで、ある程度どんなコンテンツが必要なのかについての一覧ができるので、それをサイトマップに落とし込めばいいわけです。

ちょっと急ぎ足になりましたが、こんなところで。

マッピングとは何か？

過去2回ほどのエントリーでやってきたことは、自分のポジションを知り、その上でほかの人たちのことも知ろうというものでした。そういった情報を得てから、自分のブログはどんなコンセプトで作るのかを考えていくわけです。

では、一体何から考えていけばいいのでしょうか？そろそろムードボードとかを作るためにサイトや素材を集めますか？いやいや、僕はまずはアイディア出しだと思います。

その手法がマッピングというものです。いや、もしかするとマッピングと呼ばないのかもしれない（おいｗ）でも、僕はワークショップやコーチング系のセミナーでそう習ったはず。というわけで、このエントリーではマッピング（仮）と呼びます。

では、そのマッピング（仮）とはどんなものでしょうか。手っ取り早くパーソナルブログの作り方で取り上げている事例、NPtech.jpのときのマッピング（仮）を掲載しておきます。

字が汚いとかそういう批判は受け付けられません。いいんです、個人的なものですから。

マッピングの作業フロー

コーポレートサイトを制作する場合はディレクターさんとかが仕切って、数人でブレストするのがよいのですが、パーソナルブログなので、基本的には一人でやってみましょう。

まずは、次のものを準備します。

• 紙1枚
• ペン1本
• 誰にも邪魔されない10分ほどの時間

紙に自分のサイト名、もしくは「パーソナルブログ」と書いて、四角で囲います。

次にそのサイトから「ぱっと」連想するキーワードを思いつきでよいので、周りにいくつか書き留めます。それを四角で囲み、「パーソナルブログ」と線で結びます。次はその思いついたキーワードから、また別のキーワードと…このように思いついたことをどんどん紙に書いていきます。

以下、注意点。

• あまりにも関係なさ過ぎるキーワードばかりになったらそこはそれ以上伸ばさずに、ほかのキーワードに戻り、そこからもう一度始めてみましょう。
• 1つのキーワードから思いつくことは1つである必要は全くありません。理想はくもの巣みたいな感じです。

すると、上で紹介した画像のような状態になると思います。あとは、この中からパーソナルブログに関係ありそうなキーワード群が固まっているはずなので、それらを線で囲みます。

NPtech.jpの場合はつながり、黒・白、シルバー、やさしい、リングなどを囲んでいます。これらがパーソナルブログのキーワードです。NPtech.jpのときはサイトカラーは黒白を基本としていますし、その中にやさしいという色を使いたくて、ロゴやリンクが緑、加えてところどころにリングを表す円形を書いています。

このときに選ぶのは色合いやデザインのキーコンセプトに直接関係するものでなくても構いませんし、ここで抽出されたキーワードを必ずサイトに反映させないといけないというわけでもありません。

あくまでアイディア出しです。ただ、アイディア出しはその発想こそが重要なので、まずはいろんな視点からいろんなことを思いつくために、このマッピング（仮）は面白いと思うのです。

2種類のクライアントとヒアリングシート

ちょっとパーソナルブログの話から離れますが、1つのサイト、もしくはブログを運営するにあたって気をつけなければならないことがあります。それはクライアントは2種類いるということを忘れないことです。これを忘れてしまうと、サイトの方向性がかなり捻じ曲がってしまいます。

2種類とは、サイトを見てくれる訪問者とサイトの制作を依頼するクライアント。この2種類。

訪問者さえ満足してくれればそれでいいやん！というのもあながち間違いではないのですが、受託開発型の場合はそうも言ってはいられないのが辛いところ。お金の出所というのはすごく重要です。

そんなために、僕がサイトを制作する時は大体2つのヒアリングシートを使い分けます。それがこのヒアリングシート。ダウンロードできるようにしておきますので、適当に改変するなり何なりして使ってやってください。僕もいろんなヒアリングシートを参考にしながら、項目を追加したり、抜いたりして作ってきたものです。

• ヒアリングシート

内容は「基本事項」というお金を出してくれるクライアントと「顧客」という訪問者向けにシートを分けています。本当は、「顧客」のほうはサイトを見てくれそうな人たち（見込み客）にグルインするのがよいのですが、小規模サイトの場合は時間的にも予算的にも難しい。そんなときはそのクライアントの営業さんなど、直接お客さんと折衝する人たちの意見を聞くと参考になることが多いです。

また、ここでヒアリングシートという媒体に落とし込むのは主に3つの理由があります。

1. クライアントとドキュメントを共有し、共通認識を図るため。
2. 意見や理解を言語化することにより、アイディアを形にするため。
3. あらかじめ聞いておくべきことを忘れないため。

ちなみに、NPtech.jpの制作においてもこのシートはざっくりとですが、どちらとも使用しています。それによって、頭でぼやーと考えていたものをより明確にする狙いがあるからです。そのため、こういったシートが手元にあれば、ぜひパーソナルブログを作る際も活用したほうがよいと思います。

それと、ほかにも個人的にいくつかシートは持っているのですが、そのアイディアをくれたブログの記事も紹介しておきます。

• WEBディレクションで使うＩＡツール : ユージック

そんなこんなでパーソナルブログでヒアリングシートを使ってみるのも悪くはないよっていう話でした。

まずはじめに断っておかないとダメなことがあります。それは、このテーマでは単に日記を書くためのパーソナルブログではなく、どちらかというと情報発信をしていきたい！という方向けの話になります。そこで、パーソナルブログといっても、実際には企業サイトの制作フローをベースに説明していきますので、もしかすると日記を書きたい！と思っている方には少し話が堅くなるかもしれませんが、ご了承ください。

類似テーマのブログを探す

まず、僕が始めにしたことは、自分が書くテーマと似たような内容を扱っているブログを探すことでした。感覚的にはわかっていただけると思うのですが、ブログにしてもネットにしても、オンリーワン（笑）というのが非常に際立つメディアです。そのため、すでに類似のテーマのブログが数多くあり先駆者がいるということは、そのブログとの競争的なところが発生しますので、どうしても情報の影響力を持っておくのは難しくなります。そこで、まずは類似のサイトを探すことから始めます。

ただ、類似のサイトがたくさん見つかったからといって悲観的になる必要はありません。その中で扱われていないニッチなテーマをうまく探し出せばよいのです。いわゆるポジショニングです。

例えば、TRANSという僕のブログでは現在主にアクセシビリティのテーマを扱っていますが、元は単なる日記から始まり、CSSやWordPress、そして翻訳記事と移り変わって、今のアクセシビリティをメインに書くブログになっています。かといって、既にアクセシビリティのサイトは数多くあり、その中で自分の独自色をどのように打ち出していくのかがポイントでした。

その中で僕がポジショニングとして意識したのは、ビービットのユーザビリティ実践メモのアクセシビリティ版を目指そうというものでした。こういった実践的な内容でアクセシビリティを扱ったブログがなかったからです。このように、はじめからそのポジショニングがうまくいかなくても仕方がないのかもしれません。徐々に軌道修正しながら面白い、独自性のある情報発信をできればいいと思うのです。

ユーザ、もしくは見込み客にインタビューする

その上でできれば自分のブログを将来的に読んでくれそうな人にも意見を聞いておきましょう。その人はどんなブログを普段読んでいるのか、どんなことに関心があるのか、など。簡単でもよいので意見聞いておき、かっこよくいえばペルソナ的なものを頭にイメージできるようにしておくと後々にブログのデザインや情報設計をする際に役立つことと思います。

個人的にはパーソナルブログだからこそ実験的なことも行うとよいと思いますし、はたまたこのディレクションのようなステップを踏んでおくことが重要だと思います。次回はヒアリングシートなどを使って、もう少しブログのベース部分を考えてみます。