「現場のプロが教えるWebデザイン&レイアウトの最新常識」を読んでみた感想

以下の本を読み終えたからまとめを書いてみる。

この本は読みながら作業をする感じではないので、スラスラと読み進めて行くことが出来る。

現場のプロが教えるWebデザイン＆レイアウトの最新常識　知らないと困るWebデザインの新ルール3

作者: 佐々木智也,佐藤ねじ,貫井伸隆,橋本和宏,福岡陽,森本友理,山田晃輔
出版社/メーカー: エムディエヌコーポレーション（MdN）
発売日: 2014/09/29
メディア: Kindle版
この商品を含むブログを見る

本書の内容は以下の４つ。

レイアウト&配色
UX&UI
グラフィック&タイポグラフィ
エフェクト&リッチメディア

レスポンシブの基本はカラム落ち

「カラム落ち」といえば、以前はCSSのレイアウト崩れの代表例だったが、このカラム落ちこそがレスポンシブレイアウトの基本形だ。

PCだとマルチカラムができるが、スマートフォンでは画面が小さくなるのでシングルカラムを採用しないといけなくなる。

フラットでも押させるデザイン

f:id:rindarinda5:20160318220234p:plain

ボタンに少しだけ影をつけるだけでフラットデザインの印象のままボタンらしさを強調できる。

f:id:rindarinda5:20160318220720p:plain

こちらは影を付けなくてもボタンだと認識させるデザイン。

ゲームニクス理論

説明書を読まなくても楽しめたり時間を忘れるほどゲームに夢中になる、こういった体験を実現させるノウハウを体系化した理論のことを言う。

重要なポイントは５点ある。

画面を見ただけで理解できる構成と演出
ユーザーが適切な操作を実行できるように誘導し、迷わせないこと
ゲーム内でレベルアップする内容を盛り込んだり、アニメーションや効果音でユーザーがハマる演出を作り出す
ゲームの難易度を徐々に上げていき、ユーザーのやる気を誘発してゴールまで導かせる。
仮想世界と現実世界をうまく融合させる

スーパーマリオブラザーズが大ヒットした理由

最初の画面でマリオが画面の左側に立っているためで、右に移動することがわかる。最初の空間に敵キャラクターがいないため、Aボタンを押してジャンプするなどの基本操作を試すことができる。右に進んで最初に目にするのは、チカチカ光るクエスチョンマーク。ここで、ブロックを壊してアイテムを入手することを学ぶ。そして現れるのが最初の敵クリボー。なぜこれが敵だとわかるのか？まずこのキャラクターが怒った表情をしているから。そしてこれまで遭遇してきたオブジェクトとは違い、プレイヤーに向かってきているからである。

スーパーマリオブラザーズは画面を見ただけで直感的に操作できる。それが大きな理由。