Web屋のーりー

ウェブ作ったり、デザインしたり、広告についてかんがえるブログ。

powered by 36℃社

  • twitter
  • Facebook
  • Linked in
  • RSS

初心者さん向け情報の詰まった記事です。デザインのイロハをご紹介

かわいいデザイン・優れたデザイン、広告、コピーライティング

その他のお役立ち情報、たまにおもしろ情報も?

インタフェースデザインの勉強会に参加してきました!

このエントリーをはてなブックマークに追加
Pocket

去る4月27日、東京は武蔵野市にある、クロスメディアデザイン・メディアプランニングをされている会社のサイフォン合同会社さんに行ってきました。
サイフォンさんにはいろいろとお世話になっているんですが、今回の目的はサイフォンさんたちと開催する、インタフェースデザインの勉強会に参加するためです。

じつはなんだか最近、自分自身のデザインの能力に限界を感じていまして……。
ディレクター兼何でも屋(Web屋とも言う)という立ち位置の自分としては、デザインだけを特化したいわけじゃないのですが、とは言えプロとして恥ずかしくないレベルには達してたいわけです。
でも、まだまだジャンルや案件によって時間やクオリティの出来不出来の差が激しくて、それでもデザインをこれからもやっていきたいんだけどどうしましょう、というぐるぐる思考回路はショート寸前的なことを超ざっくりとサイフォン代表の大橋さんに話したら「じゃあ勉強会やりましょう」という流れに。

太っ腹すぎる!
そんなわけで、いろいろとセッティングしていただき、ユーザインタフェース(UI)の勉強会が開かれることになったのでした。

アウトプットまでが遠足です

サイフォンさんは、多くのiPhoneアプリを受託・自社開発されている会社さんなので、UIについての知識や経験はもちろん深いのです。サイフォンさんだけではなく近所の会社勤務の方なども3人ご参加いただきました。
せっかくの機会ですので、自分自身の振り返りという意味もあるんですが、ブログでまとめておこうと考えた次第であります。
誰かが言いました。「アウトプットまでが遠足です」と。

勉強会の内容は、オライリー・ジャパンから発行されている『インタフェースデザインの心理学』という本をベースに、実際のアプリなどをさわりながらUI案などを出していこう、というもの。
1回だけの開催ではとても追いきれないテーマなので、数回にわけての開催となります。

すべての要素を目立たせないようなレイアウト

今回は初回だったので、サイフォンさんが用意してくれた、アイスブレーキング(初回の緊張解きほぐし用)のワークショップを体験。

ui_sm01_iceb

(C) SCIVONE, LLC

それぞれに配られた、四角いA4の枠が印刷された白い大きめの紙。そして、なぞの短冊形のグレー~黒の、幅が複数ある紙がたくさん。
それらを組み合わせて「すべての色を使って、いかにすべての要素を目立たせないようなレイアウトができるか」というのがこのワークショップの課題でした。

しかし、普段の「ウェブデザイン脳」とも呼べる、セオリーが染み付いていた私は「白は無いものとして考える」とか「目立たせるものはしっかり目立たせる」という大きな勘違いをしたまま取り組んでしまう、という大失態!

その結果生まれたレイアウトがこちら。

ui_sm01_iceb01

「目立たせないように」って言われたでしょ! めっちゃ白と黒が目立っている! まるでh1タグ。
すいません、馬耳東風でございました……。思い込みって怖いですよね。

模範解答がこちら。

ui_sm01_iceb02

こちらの模範解答は、グラデーションを使うことなく、そして白を含め、すべての色を使ったうえでどの要素も目立ってないレイアウトなんです。

サイフォン大橋さんの解説によると、以下のことを意識すると、どの要素も目立たないレイアウトができます。

  • 白は膨張色
  • 白と黒は目立ちやすい
  • 中間色の灰色は目立ちにくい

さっきも言いましたが、普段の考え方では白またはベースカラーは多くとる、といった発想ですからね。この解答にたどり着くには、普段とは逆の発想が必要だったわけです。
ほかの皆さんの作例も見せてもらったんですが、共通点もあり相違点もありで、非常に楽しめました。いや、悔しかったんですけどね、もちろん。
ただ、こういった発想にふれることで、「目立たせない」を考えるからこそ、「目立たせる」ことの練習にもなるんだなと納得です。

人はどう考えてどう感じ、どう操作するのか

アイスブレーキングでほどよく頭もほぐれたところで、今度は勉強会参加者への課題図書だった『インタフェースデザインの心理学』の内容をおさらい。

インタフェースデザインの心理学という本は、その名のとおり、ウェブサイトやアプリ、システムを作るうえで必要な、人はどう考えてどう感じ、どう操作するのかという部分を心理学ベースで解説した良書です。

こちらの本、10章にわかれていて、それぞれ複数の項目があるというつくりになっていて、それぞれのメンバーがどの項目に興味がひかれたのか、そしてどんな分野を掘り下げていくのが面白そうなのかなど、それぞれの意見を共有していきます。

一度に覚えられるのは4つだけ

たとえば3章、「一度に覚えられるのは4つだけ」の項目は、ある意味で衝撃的。
だって、この本にも書いてあったとおりに引用しますが、
“きっと「魔法の数字は7プラス・マイナス2」という言葉を耳にしたことがあるでしょう。しかしこれは筆者に言わせれば都市伝説です。”
(中略)
“現在の研究によると「魔法の数」は4なのです。”
という話です。

7つを気にして、グローバルナビゲーションの数や、画面の要素数などを考えていたのは、間違っていた! ということでした。
ただし、
“チャンク(まとまり)を使えば4が5にも6にもなる”
という研究結果もあるそうで、こちらを使えば画面内の要素を増やすこともできるということです。

ほかにも、メンバーから「気になった」という項目をあげていきましょう。

  • 3章「人はどう記憶するのか」 鮮明な記憶でも間違っていることがある
  • 4章「人はどう考えるのか」 情報は少ないほどきちんと処理される
  • 4章「人はどう考えるのか」 人は30%の時間はぼんやりしている
  • 4章「人はどう考えるのか」 人はフロー状態に入る
  • 5章「人はどう注目するのか」 情報は取捨選択される
  • 6章「人はどうすればヤル気になるのか」 目標に近づくほど「ヤル気」が出る
  • 6章「人はどうすればヤル気になるのか」 習慣は長い時間をかけ徐々に形成される
  • 8章「人はどう感じるのか」 データより物語のほうが説得力がある
  • 9章「間違えない人はいない」

項目を見るだけでも、なんというか、「どうなってんの?」「気になる!」と感じそうな見出しが並んでいますよね。

ただ、私を含めたみなさんも、読んでみただけでは内容の深いところまでは理解しきれていないわけです。
なので、それぞれ担当する項目を分担し、次回以降の勉強会でプレゼンすることになりました。
項目を掘り下げたり広げてみたり、実際のアプリケーションやソフト、ウェブサイトを取り上げて、良い例や悪い例を挙げるわけです。

というわけで、次回以降もこの勉強会の内容を(差し支えない範囲で)レポートしていきますので、どうぞお楽しみに!

『インタフェースデザインの心理学』

最後に、この本自体の感想も書いておきます。
先ほども書いたとおり、いちど読んだだけではほぼ意味がない本だというのが正直な印象です。

この本って、ツールの使い方の本や、プログラム学習のための本と違って、読後の効果があらわれてくるまでの時間が長めなんですね。しかも、放っておくと忘れていくので、日々の業務の中で実際のパターンを見つけつつ、確認して自分の中に落としこむ必要があるでしょう。
ということは、この本を読んだあとで「これって、このことかも」というパターンに出会ったときに、この本を逆引きしていくのが良いかなと思います。
もちろん、勉強会を開いてもいい(笑)。

なので、「すぐ効果の出るような本が必要」という方にはおすすめしませんが、ぱらぱらと見てみたときに興味をひかれて、かつ「長い目で見たときに、自分のためになっていてほしい」と思える方にはぜひおすすめしたいです。

こちらのオライリーのページで、最初の部分のPDFが配布されていますので、まずは目を通してみてはいかがでしょうか。

コメントする

ページの先頭に戻る