『UIデザインの心理学』を読んでいます #kosen14s 読書会
kosen14s 読書会 4日目、担当やましーです。
3日目は いらいざ による 「精神分析入門」を読んで でした。文章めっちゃ読みやすくてびっくりした、高校は高専と違ってちゃんと国語の授業あるんだな…
さて、私は『UIデザインの心理学―わかりやすさ・使いやすさの法則』という本を紹介します。
どんな本？
- 作者: Jeff Johnson,武舎広幸,武舎るみ
- 出版社/メーカー: インプレス
- 発売日: 2015/03/13
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
UIデザイン原則と心理学上の根拠がわかる一冊。
◎物事を認識するときにどのようなバイアスがかかるか
◎物事をどのように見分けてとらえるか
◎色情報をどのように処理するか
◎周辺視野や読む能力がどのように機能するか
◎注意、記憶、想起、学習、意思決定をどのように行うか
◎使いやすいと感じる物理的法則や時間的法則は何か
と紹介文にあるように、よく言われるUIデザインの原則が「なぜ良いのか」また「どうすればいいのか」を人間の身体・心理目線で解説した本です。
「心理学」とありますが、心の動きにルールを見つけようとする「behaviorism（行動主義）」とか「認知心理学」とかの言葉を使ったほうがより近いかもしれません。あんまり詳しくないのでいらいざに教えてほしい…
こんなひとに読んでほしい
私みたいに、独学でデザインに触れているひと
デザインはセンスがないとできないと思っているひと
ちょっとだけ中身を紹介
本当はこの本の内容をまるごと紹介したいのですが、全部で280ページあるのと、まだ私が最後まで読み切れていないのもあって、5章「周辺視野」についてだけ紹介して雰囲気をつかんでもらえればと思います。
内容を元に、簡単なスライドを作ってみました。
最近のかっこいいレイアウトや人気のデザインなどにはほとんど触れていません。かわりに私たち人間が普段どうやってモノを見ているのか、何が得意で何が苦手なのか、どんな癖があるのか…についてが豊富な図・スクリーンショット・過去の研究を交えて紹介されています。
「わかりやすさ・使いやすさ」は考えれば考えるほど行き詰まってしまいますが、この本は人間の身体や認知心理の視点からヒントを出してくれます。
「一貫性を保ちましょう」「記憶しなくても見ればわかるようなデザインにしましょう」などはよく言われるデザインの原則の例ですが、この本を読み終えると、なぜそれが原則とされるほど大事なのか、説得力のある理由を説明できるようになると思います。
他の本も紹介
武舎 広幸さん、武舎 るみさんが翻訳されている本には他にも
などがあります。
おわりに
学生が気軽に買える値段と重さではないので、図書館に入れてもらうのがベストだと思います。欲しいけど :)
高専カンファレンスlolでほげほげしてきました #kosenconf 【お蔵入りデザイン編】
このシリーズ。
100カンファイケメンデザイナーのでなりさん（ @denari01 ）に、アドバイスやマサカリなど大変お世話になりました :bow: デザイン初心者が大開催のデザイナーを務められたのもでなりさんはじめ運営のみなさんのおかげです。ありがとうございました。
ポスターとかでお蔵入りになった子たちをここでお祀りします。
ポスター
第一次
案①
まだ会場が確定してなかった頃のやつ。今よりぽわぽわ◯の色が濃かった。右下の地図モドキが地図の意味を成してないのでそこは却下。
どれひとつとして同じ色・大きさのものはなくて、それでも形は似ていて互いに重なりあう部分もある、私なりの高専生（を10倍ぐらい希釈して美化した）イメージです。
案②
ネタ。クッキーアイコンのらりょす（ @raryosu ）がちょうどぴったりぽわぽわ◯にハマってキマった。
もちろん却下なんだけど、この案のおかげで◯の展開性が見えてきた。らりょすありがと。
案③
lol…大笑い、ということで「●点」っぽさを出してみた。後ろの紗綾形（さやがた）にもちょっとこだわってみた。これは卍崩しとも呼ばれるように卍の形をモチーフにしてるらしい。文様のルーツとか調べてみるとたのしいね。
ＤＦＰ勘亭流とか初めて使ったわ。
案④
波のようにわっかを広げて、いろんなものがデンパ（伝播|電波）していくイメージを表現。わりとお気に入り。
こんな展開もできる。らりょす最高。
第二次
第一次でみんなで話し合って案①が採用されました。理由は「ぽわぽわしてる感じがいい」「らりょコラしやすい」とかだったかな。忘れた。
ここから案①をブラッシュアップしていく作業に入ります。
ぽわぽわが濃すぎたので薄めてlolロゴを目立たせたり、下にあるとlolロゴが寂しかったので重ねてみたり。ぽわぽわは上にあるほうがロゴが目立って良い感じでした。
あとはそもそも共同開催の情報いらなくね？ ということで書くことを減らして下部をスッキリさせました。
実はこの時点ではポスターを2枚作る予定で、連絡先メアドとか内容とかは決定してから2枚目に載せよう、ということになっていました。結局時間がとれなくて情報量ゼロな感じのまま1枚目だけが世に送り出されました…
ロゴ
ロゴはポスターの第一次を作っている途中に並行して考えました。
あのロゴは最初のほうに作って「これだ！」ってなったので他にはあんまり考えてません。【発表編】 をご覧ください。
おまけで作った、らりょくっきーなlol
名刺
今回名刺代行プランをやって、19人だったかな、申し込みがありました。こんなデザインでほんまに誰か申し込むかいな〜って思ってたので嬉しかったしびびりました。
運営用はオレンジ、参加者用は緑がベースになっています。また運営用はウラがlolカンファの宣伝になっていて、春休み前に印刷してどっかイベント行ったときにばらまいてくるのを想定していました。
運営用ウラは結構悩みました。プレゼン発表とブース発表のテーマカラーは決まっていたのですが、それをどう盛り込むか…そもそもこの時は企画内容がちゃんと決まってなかったかも…いっぱい意見もらったしいっぱい揉めたところでもあります。最終的にはテーマカラーの丸を重ねて2つの企画を表現した一番右の案になりました。
オモテは運営用と参加者用の色が違うだけでデザインは同じです。ウラが縦なのでオモテも縦になりました。
横だった場合のデザインはこんな感じです。
縦はアクセントとして黄色の円、中に「lots of laugh!」の文字を入れてみました。キュッと引き締まった気がします。黄色って今までちょっと苦手だったんですが、こんな使い方もできるのか〜と好感度上がりました。
ポスター2枚目
鯖委員長の顔が載ってるのでちょっと載せるのは遠慮しときます。
追記: おまけ「高専カンファレンスmol」
エイプリルフール限定でサイトをmol仕様にしていました。
さいごに
とりあえず雑にまとめたのでまとめて rm kosenconf*.ai します。これにて供養おしまい :pray:
高専カンファレンスlolでほげほげしてきました #kosenconf 【発表編】
シリーズはこちら
息をするように高専カンファ高専カンファと宣伝してきた 「高専カンファレンスlol」 が4/30にありました。高専カンファレンスlolの説明はサイトをご覧ください。
この記事には、カンファの発表者として言いたかったことや感じたことのほげを書いていきます。運営をして思ったことは【運営編】に書こうと思っています。
「lolカンファを支える技術」
裏話
上のタイトルでLTをさせてもらいました。選考では運営が多少不利になる仕組みがあった（たぶん運営も発表もしたら忙しいから）んですが、私も含めて5人ぐらい選考に通っていました。お前らどんだけ筋肉ムキムキなの。
実はこの発表もともとは一般発表として出す予定で、当選直後も一般発表だと信じてたんですが、なんと 間違えてLT発表のほうに出していたみたいです 。10分でしゃべることを5分にまとめるとかまず無理だったんです。ごめんなさい。でもlolでしょ。
自己紹介
スーツに恨みとかはありません。よろしくお願いします。
電気情報系の学科に通っていて、アルバイトもコードを書くところを選ぶのでエンジニア寄りかもしれません。また、色・構成・動きやCSSが好きなのでデザイナー寄りかもしれません。自己紹介では「デザイナー寄りのエンジニアっぽいもの」という言葉を使っています。どちらでもないしどちらでもある中途半端な存在だといいなーと思っています。
エンジニアリングとデザイン、最低限のことはどちらもできるので、lolカンファでも両方を担当していました。そんな中途半端な目線からやってきたことや考えたことを紹介します。
前半戦
デザイナーとしてjoinしました
去年の11月頃だったか、100カンファのイケメンデザイナーでなりさん（ @denari01 ）に「高専カンファレンスのデザイナーやってみない？？」とお誘いを受けて参加することになりました。そのときもらった情報がこんな感じです。
- 高専カンファレンスっていうイベントがある
- みんなでほげほげする
- 101回目
- lol (lots of laugh) っていうテーマ
- 全国から高専生やOBOGが来るねん
- こんど関西でやるねん
- オタクのオフ会
でもわたし高専カンファレンス行ったことないし…そんなこと言われても…わかんないわかんないわかんないよ！！！わかんないよーーーっあっあっあーーー！！
あまりの情報の少なさにびっくりして怒りながらも、ロゴやポスターを作ったり、デザイナーらしいことをしました。このへんのくるしい話は、もし書いてもいいのなら【運営編】で書こうかな。
ロゴをつくりました
よくあるプロジェクトのように、まずは高専カンファレンスを視覚的に代表する「ロゴ」を作りました。
個人的に、ロゴはざっくり「① 識別できるか」「② 展開できるか」で評価できると思っています。（もちろんカッコいいかとかも判断基準に成り得るけど、個人差が大きいのであんまり有力な理由ではないかも）
それぞれについて気をつけたこと、気づいてくれたらうれしいなってことを箇条書きでまとめておきます。
① 識別できるか
ざっくりいうと「印象に残るか」「次見たときに思い出せるか」、ちょっと進んで「ロゴを見て何かわかるか」のこと。
- 「101」「lol」で掛けてるんだから、どっちにも読めるようにしたい
- そのためにエルは直線がいい。下のほうがくにゅって曲がってるとイチっぽくない
- どちらも直線と円の組み合わせなので、全体的に記号っぽいロゴにしたい
- 記号感を出すためにテクノ的なフォントを使いたい
- 有料フォントだと他の人が使いにくい
- フリーの「スマートフォントUI」を使用
- そのままだとゆるい感じだったので、幅を80%ぐらい狭めてシュッとさせる
- 高専カンファレンスをこれと表すモチーフがない
- 一度ロゴを見た人には、次にロゴの一部だけ見たとき「高専カンファレンスだ！」と思ってもらえるように、そんなモチーフを入れたい
- 白基調に黒文字
- サイト（ http://kosenconf.me ）が一番わかりやすい例
- ぽわぽわ
- 白基調に黒文字
② 展開できるか
オリンピックの佐野さんのロゴはこの点ですごいよなぁと思うのですが、要するに「バリエーションに未来はあるか」「どこにあってもそれと分かるか」ですね。 自分的にはここを一番気をつけました。
- ロゴはスライド・名札・運営パーカー・ステッカー・その他配布物…いろんなところで使われる
- 企画ごとに色が決まっているので、スライドや案内貼紙に応用できる
- オレンジがプレゼン発表、緑がブース発表、ピンクが懇親会でした。名札の色もそうしてたから、気づいてもらえたかな…？
- お手伝いしてくれたあみたんもそれをわかってデザインしてくれたから成功したと思ってる
- 「lol」の文字なし、ぽわぽわだけで構成してみる
- 色や形だけでなく、動きでlolと感じさせる
- サイト（ http://kosenconf.me ）のあちこちに散りばめたマウスhover時のぽわぽわアクション
最後のは平面デザインだけじゃなくて、webならではの展開方法って感じする。楽しかった。
余談だけどオリンピックとかでっかいやつのロゴデザインは立体展開もありだと思っていて、個人的に楽しみです。
後半戦
前半戦もまだ書き足りないし議論の余地はあるけど気になったらTwitter（ @yamasy1549 ）とかにリプください。いっぱいお話聞きたいです。
webサイトをつくりました
See:
技術的なこと
技術関係で書いておくことは「Jade(Pug)」「gulp」「CSS animation」「Mixin based (S)CSS」ぐらいでしょうか。
Jade(Pug)
HTMLを書くためのテンプレートエンジン、という説明になるのでしょうか。タグを省略して書いたり、専用の構文を使ってちょっとプログラマブルに書いたりできる、生HTMLをゴリゴリするのと比べると断然効率良くHTMLを書けるやつです。最近Pugって名前に変わったみたいです。名前かわいい。
gulp
こちらはJade(Pug)やSCSSのコンパイルを自動化したり、ファイルに変更があれば自動的にブラウザをリロードさせる機能を組み込んだりできるタスクランナー（タスク自動化ツール）です。いちいちコマンド叩いたりするの面倒くさいしコード書いてるときに余計な割込み入るの嫌ですよね。怠惰最高。
CSS animation
あんまり参考にしたサイトとかないので、こんなこともできるよっていうまとめ記事を貼っておきます。私はJSが苦手なので装飾にはできるだけJSを使いたくないと思っていて（そもそもwebサイトの装飾はなるべくCSSが担うべきでもある）、うまいことCSSだけでanimationを完結させられないかなーと頑張ってほげほげしてました。トリガーとしてどうしてもJSを挟まないといけないところもありますが、ぽわぽわやマウスhover時のanimationなど大体はCSSで完結しています。気になった方は、汚いし特殊なディレクトリ構造だけどソースコード読んでください。
Mixin based (S)CSS
SCSS には mixin っていう便利な機能（関数みたいによく使うプロパティを集めて、いろんなところでincludeして使える）があって、それを中心にスタイルを当てています。例えばボタンなら button って名前のmixinを作って、 .button(class) や button(selector) にのみinclude…適用することで、変更範囲・汚染範囲をなるべく狭めています。…むずかしいのでLTで話してないです。
CSSの設計やディレクトリ構造は「Atomic Design」を参考にしています。 mixin based な書きかたと相性が良いと思っています。今年のはじめに Atomic Design に触れてみたスライド も公開したのでざっくりと知りたい方はこちらもどうぞ。
デザイナーさんのお仕事ってなんですか
前半戦と後半戦って分けてるのに、さらにまだ章が続くなんて5分でしゃべり切る気ないのが見え見えなアレ。
見習いデザイナーとして見える範囲では上のようなことをしてきたわけですが、じゃあデザイナーさんのお仕事ってなに？って聞かれても…わかんないわかんないわかんないよ！！！わかんないよーーーっあっあっあーーー！！
パッと思い浮かぶ制作物はこんな感じでしょうか。
でも「あーそっか、デザイナーさんは目に見えるこんなものを作るのがお仕事なのか」って納得されたらちょっと困るのです。それ以前に大事なことがあると思っています。
例えばロゴデザインは他グッズとの間に統一感を与えるため、Tシャツデザインやパンフレット制作は参加者が記念に残しておけるため、さらには会話のきっかけを作るためでもあります。
目に見えるモノを作るだけがデザイナーさんですか？
私の答えはNOです。デザイン業を通して、「会場の雰囲気」「統一感」「ワクワク感」をつくるお手伝いができればいいな、できていたらいいな、と考えています。
この話のオチは、それがデザイナーの私自身にはわからないことです。 ご清聴ありがとうございました。lollol最高。
おまけ
デザイナー制作物を公開しています。100カンファのと比べたらレベルはお察しですがまあ何かの参考になればと思います。
あと、いろいろ作っていく過程でボツになった子たちにも報われてほしいと思うので、その子たちが登場する記事も書きたいです。
追記: 書きました
がんばりましたのでごほうびください http://www.amazon.co.jp/registry/wishlist/3KDNW63RQCCKNwww.amazon.co.jp
