読者です 読者をやめる 読者になる 読者になる

notitie

日々感じたことをメモ書き

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

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

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

 

 

 

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

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

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

  

 

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

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

 

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

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

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

 

 

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

f:id:rindarinda5:20160318220234p:plain

*1

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

  

f:id:rindarinda5:20160318220720p:plain

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

 

 

 ゲームニクス理論

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

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

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

 

 

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

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

 

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

 

 

 UXハニカム構造

f:id:rindarinda5:20160318230056p:plain

UXが果たす7つの役割を表したもの。

 

 

 UXの時間の概念

f:id:rindarinda5:20160318230610p:plain

UX白書(日本語訳版).pdf

UXというのは利用中だけでなく利用前から利用後までの一連の範囲を含む。

 

 

 

イメージや文章も分かりやすく、理解しやすかった。

 

 

 

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

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

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

 

 

 コーディングをより学びたい人におすすめしたい一冊を紹介。

 

 UI/UXデザインをSlideShareで学んでみたという記事。

 

おわり

 

*1:RETRIPから引用