『HTML5/CSS3モダンコーディング』を読んでいました #kosen14s 読書会
kosen14s 読書会 10日目、担当やましーです。担当は1周まわったのですが有志により読書会は続いており、立川のガルパンのような状態です。まだもうちょっと終わりそうにないしどこまで続くか見守っていきたいです。
今回は『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』という本を紹介します（読んだのは去年の秋頃ですが…）。
むかし「これすごいで一回見てみ〜」と http://yoshiko-pg.github.io/ というポートフォリオサイトを見せてもらったことがありまして、HTML/CSS/JSでこんなに広い表現ができるのかとびっくりしました。
それからしばらく経ってこの本が出ると聞いて、ふと著者のかたのお名前を見て「あ！！！！！あのすんげーポートフォリオサイトの！！！」「これは絶対読まなあかん」と思って買いました。
どんな本？
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
- 作者: 吉田真麻
- 出版社/メーカー: 翔泳社
- 発売日: 2015/11/02
- メディア: Kindle版
- この商品を含むブログを見る
よく見る人気のWebページのデザインスタイル
をハンズオン形式で作っていきましょう、という内容です。リンク先に見本があります。
IE9より下は切っていて、
HTMLの
- section
- article
- nav
やCSSの
- :last-child擬似クラス
- 単位rem
などをハック無しで使う前提でいます。うれしい。
とにかくサンプルサイトがかっこいい！
コードを書いていくたびサイトがどんどんかっこよくなっていくので、モチベーションが途切れることがありません。 やっぱり作るならかっこいいサイトがいいです。
著者のかたは Goodpatch の社員さんなんですよね。憧れます…！
ONE POINT の説明がわかりやすい！
例えば、プロパティを当てる前→当てた後、marginについて、などの図がとてもわかりやすいです。
これまで position や display をなんとなくで使ってしまっていたのですが、図を見て「なるほどだからあの時うまくいかんかったんか〜」と理解できました。
今までの自分が書いたコードを振り返るようになる
この本を読み終わってサンプルサイトも3つ作り終えると、「めっちゃ勉強になった…すごい本に出会ってもた！」という感情のほかに「やばい、今まで書いてきたコード無駄多くて全然だめやん…」「できることなら全部書き直したい」と思うようになりました。
もっと前にこの本を読めていたら、開発スピードも上がっていただろうしもっとかっこいいサイトになっていただろうなぁ…
こんなひとにおすすめ
対象は、HTML5/CSS3を書いて主要なタグ・プロパティを知っている人〜ひとりでWebサイトを作ったことがある人、でしょうか。逆に全く触れたことのない人にはちょっと難しいかもしれません。
主要なタグ・プロパティを知っている人は「こんな書きかたをするんだ」「こんなこともできるんだ」、ひとりでWebサイトを作ったことがある人は「こんな実装方法もあるのか」「今度はこう書いてみよう」とそれぞれ勉強になる部分が変わってくると思います。
おわりに
この本が誰かのほしい物リストに入っていたら必ず贈るようにしています。 Kindle版は時々セールになっているので、ぜひ読んで写して書いてみてほしいです。
『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:
