永井ギャラクシー せいかつ部

関西を拠点とするウェブ制作チーム“永井ギャラクシー”の台所。せいかつ部部長(せ部長)が担当します。今は更新停止中ですが、いつか復活するかも??

自分なりのウェブ制作における情報整理法

こんにちは、せ部長です。

今、ご依頼いただいたホームページに掲載する情報を整理する作業をしています。会社でウェブ制作やっていたころからこの作業はよくやっていましたが、今あらためて発見することもあるので、かなり抽象的ですが、情報を積み木にたとえ、覚え書きとして手順を書いておこうと思います。

 

情報を可能な限り引き出す・揃える

お客さんにヒアリングしたり、Googleで検索したり、取材したりして掲載する情報をありったけ集めて並べます。

具体的には、商品、サービス、企業理念、住所や営業時間など事務的な情報、そして企業や商品に携わる人が見える情報・・・、ウェブサイト制作では主にこんなものになるでしょうか。実際に掲載しなくても知っておいたほうが良い情報もあります。簡単に言語化できない情報もあります(たとえば社風とか代表者の人柄とか)。そういったものも含め、ひたすら集めます。

そうすると、どんな種類の情報があるか、ざっと見渡すことができます。積み木にたとえると、丸くて赤くて小さい積み木とか、正方形で青くて大きい積み木とか、その情報ひとつひとつが持ってる、色、かたち、サイズなどの属性を一通り知ることができます。そうすれば次の段階で分類するときに、この積み木を分類する箱が足りない!ということが防げます。サイトの全体像もおぼろげに見えてきます。

だけどこの作業はワンステップでは無理だったりします。何度もお客さんとキャッチボールしたり、元のキーワードを元にさらに検索して掘り下げることを何度も繰り返すうちに、やっと揃ってくる感じです。

 

情報を分類する箱をつくる

上のステップで、色、かたち、サイズなどの属性があるとわかったので、今度は属性ごとに積み木(情報)分類してみます。色ごとに分類したほうがいいのか、かたちごとに分類したほうが良いのか、サイズなのか。いろいろやってみて一番使いやすい(情報が伝わりやすい)分類を決定します。色ごとに分類するといい感じっぽい、と思ったらそうします。

ウェブサイトの場合だったらすでに定番の箱があったりします。たとえば、トップページ、商品紹介ページ、企業情報ページ、お問い合わせページ・・・等々。あるいは家電メーカーだったら、白物家電とAV家電で分類したりとか。

 

入れ子の箱をつくる

色ごとに分類しただけではまだごちゃっとしているので、さらにその中に箱を作り、今度はサイズごとに分けてみたり、かたちごとに分けてみたりします。だんだん情報がわかりやすく整理されてきます。ウェブだったら、ひとつのページの中で、さらに項目分けするのもこれにあてはまるでしょうか。たとえば白物家電ページ内でさらに冷蔵庫と洗濯機と掃除機に分け、さらに冷蔵庫を大容量、標準サイズ、1人暮らし用などに分類するなど、何層にも入れ子になることがあります。

 

そぎ落とす

そんなふうに整理していると、重要じゃない情報が箱の外に取り残されるので、それは処分してしまいます。また、分類してみたけど茶色積み木グループなんか弱いな、と思ったら、思い切って捨ててしまうこともあるかも知れません。実際には扱っている商品だけど、あまりウェブでプロモーションする必要がない、もっと主力商品にスポットライトをあてたいなどと言うケースなら、そういった情報が削られる場合があるかもしれません。しかし貧乏性の私はこのそぎ落とす作業が苦手です(笑)。

 

強弱をつける

そして、赤グループと黄色グループと青グループが残り、その中で赤グループが一番パワーを持っているなと思ったら、赤を目立つように配置し、黄と青はちょっと脇役的な扱いにします。ケーキ屋さんなら、他にもケーキいろいろあるけど、うちの主力はバームクーヘンだ!的な感じでスポットライトをあてます。

デザインやマーケティングでは、何かひとつに主役に絞って、他をそぎ落としたり脇役にするやり方が王道ですが、場合によっては主役が3人いるというのも正直な感じがしてアリな気もします。それもケースバイケースでしょうか。にしても、3人の主役を目立たせるためにその他の色の脇役を弱める、というのは必要かなと思います。

 

違う切り口を見せる

ここまで「まず色で分類」というルールで進めてきましたが、ここでいきなり、それぞれの色の中から一番大きくて三角形のやつを選抜して並べる!ということをやってみたりします。それをトップページや訴求力の高いページに配置します。

たとえば、営業部と技術部と企画部から若手の有望株を選抜してインタビューし、それを人材募集の特設ページに掲載するとか。そうすると、その会社の違う切り口や側面が見えたりしますよね。

または、サービスごとにページを作っていたけど、今度はユーザーのお悩みごとに構成して訴求してみるとか。

ウェブサイトは複数ページから成り立つので、こんな感じでひとつの情報を立体的に見せることができるんじゃないかなと思います。そして違う切り口はアクセントにもなると思います。

 

全体像を確認する(ここまで来たらデザインつくれるかも)

ここまでの手順でかなり情報が整理され、全体の輪郭、骨格がかなりはっきりできてくるんじゃないでしょうか。

ウェブ制作では、デザインをする前にワイヤーというものを作ります。つまり、入れ子の箱にある程度情報が整理された状態のものです。トップページはこんな構成で、この項目にはこれが入る・・・、といったものをページごとに作ります。それがワイヤーです。それがあれば、ある程度全体が見渡せられ、安心してデザインに取り掛かれると思います。

 

後から追加も可能(但し、今までに出てきた属性のものに限る)

これまでの工程で情報の割り振り方のルールと箱(構成)ができているので、後で多少情報が追加されたり削除されてもそんなに大きな致命傷にはなりません。ただし!それは色とかたちとサイズという、これまでの情報と同じ属性を備えているものに限ります!突然、微妙なニュアンスのベージュで、手触りも独特で、軽い性質の木材で作られていて・・・といった積み木が登場しても、分類できる箱がありません。それが重要でどうしても目立つ位置に入れる必要があるとなると、今までの工程を全部ひっくり返して箱を作り直す必要も出てきます。最初の段階でありったけ情報を引き出すことが大事なのはこのためです。

だけど、今まで出てきたどれかに当てはまる情報であれば、コーディングの後でも、そんなに無理なく追加できたりします。

 

仕事の上での情報整理の手順は以上です。 

ウェブサイトを作る基本的な手順は、大体どこの会社も下のような感じではないでしょうか。

  1. ヒアリング
  2. ワイヤー作成
  3. デザイン作成
  4. コーディング
  5. CMS、プログラム実装

今回の情報整理の話しは1と2の工程になります。家にたとえると基礎の部分でしょうか。ここを固めないで作って、後で辻褄が合わなくなって苦しむ経験は何度となくしました(笑)。

 

といった感じですが、そうは言うものの、実際にはこんなにきれいにはいかないです。

分類しているうちにどの属性にも属さない特殊な情報を見つけてしまい、捨てるわけにもいかず、かといって主役になるような情報でもなく扱いに困ったりします。また、積み木のように色とかたちとサイズのようなシンプルなものとは限らず、たとえば質感とか重さとか、パッと判断できない属性があったりします。しかも丸くて赤くて三角でつるっとしてて、ちょっと重くて・・・と、ひとつのものがたくさんの複雑な属性を持っていると、どう分類してよいかわからなくなったりします。

また、こんなことも思います。昔は気づけなかったけど、今だから気づける属性があったりするなぁと。

たとえば若い頃なら色やデザインで服を選んでいたけど、最近は素材や着心地が重要だと思ったりします。若い頃は素材なんて属性をスルーしてましたから。

仕事の上でも、パッと見地味でも重要な情報、地味だけど効果的な見せ方、というものもあるかなーと思ったりもします。

今はパッと見だけでは勝負できず、より中身に注目される時流という気もしますし、しっかり中身のあるものを作っていけるようにしたいなと思います。

 

ところで最近、こんな記事が話題になってました。

大金をかけずに勝つ!自分で作る「戦うホームページ」の骨子案 - micata(ミカタ)

皮肉にも無料ホームページ作成サービスのサイトの記事なのですが(笑)、どういう風に考え、何を優先に中身を整理すれば効果的なサイトが作れるか、について書かれています。自分たちがウェブ制作やる中で聞いてきたこととかなり合致するし、ちょうど今自分がやっていることとも重なったので、ふむふむと頷きながら読みました。とくに、“売り手の載せたい情報は豊富に載せてるがユーザーの小さな疑問、不安に答えられていない”ホームページが多い、という部分には深く頷きました。

しかし!この中身を作る作業、けっこう手間と時間がかかります。上に書いたような工程も、やってみるとけっこうめんどうです。そして客観的に見てくれる第三者の意見も必要だったりします。

ということで、中身作りを大事にしているホームページ業者を見つけ、ご自身は本業に時間と労力を費やすというのも手ではないかと、最後にちゃっかり営業的なことを書いて締めくくっておきます。