そんなわけで、インクルーシブデザインワークショップの各グループごとの発表資料というか、その際のスライドを公開させていただきます。といっても、参加していない方々にとっては何がなんやら分からないかもしれませんが、雰囲気だけでも感じ取ってもらえれば。

あと、参加していただいた皆さんには後日その際の動画も落とせるようにしたいと思っていますので、もうしばしお待ちください（編集とかはやっていないのであしからず）

業務連絡：って冷静に考えれば、このファイルそのものがPDFなんだし、slideshareに上げる時点でダウンロードもできるようになっているんだから、PDFを別途用意する必要なかったですよねｗ＞某人

では、以下からスライドです。

スライド

さて、今回はパーソナルブログの作り方もお休みして、海外のちょっとしたデザインルールの惰訳です。元記事は、Shneiderman’s Eight Golden Rules of Interface Designより。

1. 一貫性を維持する。
2. アクティブユーザがショートカットを使えるようにする。
3. 意味あるフィードバックを用意する。
4. システム間のつなぎ目が分かるようにデザインする。システムはあるタスクの固まりが複数連結して構成されているものだ。ユーザはその固まりを1つ処理できたと分かることによって、満足や安心を得られるものだ。
5. 簡単にエラーを処理できる。
6. やり直しをできるようにする。
7. システム内部の動きが把握できるようにする。特にそのシステムに慣れた人はそのもの自体に責任を持っているし、その動きにどんな意味があるのかを知りたいものだ。
8. 人間の短期記憶に負担をかけない。

シンプルだけどよいガイドラインですね。特に、4はなるほどなーとちょっと考えさせられました。ちなみに、著者のBen Shneiderman氏はこんな人みたい。

あと、インクルーシブデザインワークショップ with Re:Creator’s Kansaiはまだまだ募集しています。

グラフィックデザインの勘所と書いてはみたものの、僕、あんまり専門でもないので大したこと言えないなーと思いつつ、何回かに分けてエントリーを書きます。

どこからデザインを作り込むか。

正直に言って、今このエントリーを書きながら、非常に悩んでいます。いやね、自分がデザインするときってどこから始めているんだろうか、と。

レイアウトは先ほどのエントリーのプロトタイピングあれこれで基本的なところは決まっているわけです。あと、配色とかもポートフォリオを集めるで決まっているわけです。すると、あとはどうやっているんだろう。。。

このNPtech.jpの場合はまず絶対にグリッドシステムのラインをそのままデザインにしたい！というのが明確にありました。故に、背景にほぼ均等間隔にラインを引いているわけです。それで、単にラインを引いただけでは面白くないよなと思い、上から段々に灰色から黒色に濃くしていったりしています。

で、あえてラベリングを英語にすることによって「わかりやすいかっこよさ」を演出していたりします。本当はナビ部分とかは日本語のほうが視認性が圧倒的に高いんですけど。Verdana使いたい！という理由もあります。

その上で全体的に2.0っぽくしたくなかったので、ドロップシャドウとかを使わずにやっていくと、どうしても平べったいイメージになってしまいます。そこで、各所ボーダーに対して色の違う1pxのボーダーを2色くっつけて表示してみたり。すると、ちょっとだけそこが盛り上がっているように見えますよね？

ありゃ、このままいくとｇｄｇｄコースだ…orz

デザインの勘所

ものすごく無理矢理にまとめてみます。

1. デザインはデザインする前が勝負！どんな情報を掲載し、掲載しないかの取捨選択をしておくこと（そういうのがユーザビリティやディレクションのワークフローの必要性だと思うのです）。
2. かちっとデザインしようとすると面白みがなくなる。コントラスト大事！
3. でも、一方で揃えるべきところは揃えること。統一感大事！

うーん、うまく言葉に表わせていない。

グラフィックデザインをするときは、情報を整理してその強弱をわかりやすくすること、一方で楽しさ、面白さ、そういう感性的なもの。

そう、うまく理論的な情報整理と感覚的な楽しさ、それをどのように融合させるのかがデザインの大事なところなんだと思います。

ダメですか、このエントリ－。次のエントリー頑張りますので、勘弁してやってください。

心理学の一分野に、選択行動解析というものがあります。人間が何かを選択するときに、どういう思考プロセスをたどるか研究する、というものです。

Web制作における情報設計を行う上で、知っておいても損は無いと思うのでちょっと取り上げてみたいと思います。

人間の選択行動と選択肢集合形成過程

細かな議論はここでは割愛してざっくりと結論だけ述べると、「人はものを選択するときに、まずは直感的に2つか3つの候補（これらを選択肢集合と呼ぶ）を選び、じっくり比較するのはその中に限られる」らしい、という有力な仮説があります。

もちろんこれは、たとえばサーバを選択する時のように明確な基準が決まっている場合や、職務上全ての選択肢について詳細な検討をしなければならない場合には当てはまりません。あくまで一般的、日常的な選択行動に限ったお話です。とはいえ、購買行動のほか経路や目的地の選択など、かなり幅広い分野で同じような結果が報告されています。

Web制作に応用できること

Web制作においては、ECなど直接関係のする領域はもちろんありますが、それ以外についても下記の二つの点を頭の隅においておくといいんじゃないかと思います。

それは、人間の頭はそう多くの選択肢を比較検討できるようにはできていないということと、直感的に選択肢を絞る時にも、なにかしらの手がかりが無ければ上手く絞込みを行うことができないということです。

一般にユーザビリティの議論がされるときには、「目的のある利用者」が「特定のコンテンツを探す」場合に、いかにストレス無く目的のコンテンツにたどり着くことができるかという問題が前提になることが多いと思います。

ただ、実際には（明確な）目的がなく来る人を前提にするコンテンツも存在します。ECだと、サイトを見ながら商品を選ぶ場合なんかそうですし、CGMサービスは一般的にそうでしょう。

そういうときに、この直感的絞込み（選択肢集合の形成、専門用語で非保障型の選択行動といいます）を行いやすいような見せ方をしておくか、もしくは最初から選択肢が3つ程度に絞り込まれるようなナビゲーションを用意しておくと、利用者のストレスが小さくて済みます。

もちろん、利用者によってどのような情報をより重視するのかは違いますが、そういったことが状況が想定しきれない場合であっても、情報がちゃんと読まれた上で選択されるのではなく、まずは直感的な選別の対象になるのだということを知っていれば、デザインだけでなく文章の表現なども変わる部分が出てくるのではないでしょうか。

また折をみて詳しい事例のお話なども書けたらと思います。

ポートフォリオを集める

今まではどちらかというと、情報をリストアップし、整理するという作業でした。そろそろデザインらしいデザインの話をしてもよいのかなと思います。もちろん、今までも書いてきたのもデザインの話です。ここからはデザインの中でも、グラフィックデザインのフローを少しずつ書いていきます。

まず僕がすることはポートフォリオを集めること。ポートフォリオとは一般的には自分の作品集というような意味ですが、個人的には「制作するサイトのデザインの参考になる作品群」と定義付けしています。意味的にはムードボードに近い感じです。

本来は気に入ったサイトを1つずつSBMなどに管理していくのが理想的なのですが、ここに関しては他人任せです。僕の場合はデザインのまとめ系サイトをdel.icio.usで管理することによってその代替としています。

del.icio.usのWebデザインギャラリー

このページからあっちのサイトへ行ったり、こっちのサイトへ行ったりと繰り返し、今までのフローでイメージできるサイトに近いものをピックアップしていきます。

NPtech.jpの場合

では、NPtech.jpの場合はどんなサイトを参考にしたのか。ネタばれしてしまうのが痛いところですが、

• thruSITES / UK web design and development
• Intype – In type we trust
• Blog ☺ cause/affect
• afasici papuasia

と、全部英語のサイトです。

それにもちゃんとした理由があります。今回のNPtech.jpでは「単純なくらい分かりやすいかっこよさ」というのを目指したからです。このサイトの主な想定読者層は社会起業やNPO関係者でネットに関係した情報を収集する層というふうに捉えています。そのため、あまりWebデザインというものを知らないからこそ、かちっとしたデザインで信頼を勝ち取る、というようなことを考えているわけです。

ゆえに、英語圏のサイトのかっこいいもの（この場合はクールなもの）を選び、また、あまり日本語圏では使われない背景色を黒にしたりしています。

もし、皆さんもポートフォリオの集め方で「こんな方法いいよ！」とか「このサイト便利だよ！」というのがあったら教えてください。友人の服飾デザイナーさんはデザインするときに雑誌から切り抜いたモデルの写真を画用紙にペタペタ糊付けしていましたね。

そんなこんなでそろそろ次あたりから実際に手を動かすというお話をしていきたいと思います。

マッピングとは何か？

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

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

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

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

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

マッピングの作業フロー

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

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

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

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

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

以下、注意点。

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

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

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

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

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

ということで元記事で触れらていない黄金比と、日本の美におけるもう1つの「比率」について書いてみたいと思います。

それは白銀比ッッッッッ！


黄金比が　縦：横＝1:1.618　であるのに対し、
白銀比は　縦：横＝1:1.414　という比率。

黄金比がパルテノン神殿やダヴィンチの絵、回転の力を生むためのモノの比率であるように、白銀比は「大和比」とも呼ばれ、法隆寺や四天王寺や、生け花の美のバランスにも反映されているといいます。

また「紙」でも、名刺は黄金比、A4用紙は白銀比で構成されています。
※A4サイズ用紙を半分に折るとA5サイズ、A5サイズを半分におるとA6サイズ、と半分にあった場合でも同比率を保つのが白銀比の特徴です。

余談ですがこれが日本で生まれた比率であるかは文献不明で調べようがなかったので、そのうち考えるのをやめました。

Webデザインにおける白銀比

さて実際にこれらの美の比率をWebデザインにあてはめると、という話なのですが元記事にあるように黄金比の縦横比率は、歴史的に美しさを持つ安定した比率でありがながらも、そのままだと使いにくいようなイメージもあるんじゃないでしょうか。

黄金比が単純にページのカラム比率に割り当てるとサイドバーにあたる方が若干広く感じるのに対して、白銀比の場合だと、

• 960pxの場合＝679px：281px
• 760pxの場合＝537px：223px

このように数字で見ても、特にSVGA（800×600）に合わせた760から780pxのページ幅のときには220から240pの幅というのは見慣れているのではないかと思います。

そういう意味では導入しやすさを考えると個人的に白銀比の方を推すねっ！って感じなんですが、黄金比よりも優れてるとかそういう話ではありません。

ミキさんもおっしゃるように、

実は過去に一度提案でこの黄金比をデザインロジックとして、提案したことがある。
意思決定するキーマンが複数いたり、デザインについて検討する人が多数プロジェクトメンバーにいる場合には有効な手段ではないかと思う。
だって、昔から多くの人たちが、これは安定していると思ってきているからだ。

というように、ただなんとなくな数字でレイアウトするよりは、プレゼンテーションできる根拠ある数字で示すのが良いのではないでしょうか。

おまけで白銀比計算ツール（黄金比も！）

レイアウトの小技　Ver2.0

電脳狂想曲 Webデザインの小技で提供されている計算ツールです。
こちらもシンプルで、少なくとも数字を割り出すだけなら十分すぎるツールだと思います。

ミキチョクシ先生のエントリが読めるのはRe:Creator’sだけ!!

じゃないんですけど、今後とも是非フィードを登録してエントリを追いかけてもらえればと思います。

ペタビット株式会社、ナフタリンのミキチョクシです。

水曜日担当のkennsuさんのいきなり代打で記事作成します。（苦笑

日本語が苦手なのでおかしい文面があったらご容赦ください。

Smashing magazineで黄金比に関する記事があったので簡単な翻訳とともにご紹介したいと思います。

（via http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/）

僕は大学で専攻が建築だったので、なじみがあるのですが、ルネッサンスの時代から多くのアーティストや建築家によって安定したデザインの特性として「黄金比」を取り入れている。この黄金比をWebデザインに活用することで、劇的に変化させましょうという記事です。

黄金比とは「1：1.618」の比率で構成される割合のことで、一般的なWebページレイアウトに当て込むと以下のような数値になるそうです。

しかし実際には完全なグリッドデザインを用いない限り、読みにくかったりする。そこでサンプルとしてThe 404 Blogを紹介。余白部分に共通の31pxを適用し、以下のようなシンプルな数値に設定している。

このように、レイアウトサイズに根拠を持たせると、プレゼンテーション時に役に立つ場合もある。（すべてではないが）しかし、いつも感覚でレイアウトを決めているデザイナーにとっては、黄金比の感覚をもつことも必要かもしれない。そんな強制的に覚えたい人に役立つツールをいくつか紹介します。

・Phiculator

シンプルに黄金比レートを算出できるツール。WinやMacで利用可能です。

実は過去に一度提案でこの黄金比をデザインロジックとして、提案したことがある。

意思決定するキーマンが複数いたり、デザインについて検討する人が多数プロジェクトメンバーにいる場合には有効な手段ではないかと思う。だって、昔から多くの人たちが、これは安定していると思ってきているからだ。

ひとまず「黄金比」についての解説を。（そのままだが汗）

３分割の法則についてはまた次の機会にでも取り上げたいと思います。

以上、適当な訳で非常に読みづらかったかと思いますが、急に作成しないといけなかったので勘弁してやってください。次の機会にも、ちょくちょくピンチヒッターで記事かきますので、次のタームでご期待してください。

主に海外で取り上げられるデザインに関するトピックスなどを紹介したり、情報デザインに関する内容を取り上げていきたいと思います。

ミキチョクシ（Chokky!Blog）