「やった」課

「やる」と心の中で思ってたら、すでに行動は終わっていたんだ

【書評】「Webデザインの見本帳」で画と理をセットでインプット

Amazon CAPTCHA

読みました。
f:id:mw-matrixa:20170209225800j:plain
正確には「眺めました」が正しいですね。
この本はWebサイトのデザインをその特徴ごとに分けて記載し、
それぞれにWebクリエイターの著者らが説明や情報を添えている本です。
タイトルが「見本帳」である通り、Webサイトの実例がメイン。
文字を読む本ではなく、目で見て楽しんで学ぶ本という感じですね。


概要

章立て

Introduction Webページデザインの基礎知識
Chapter 1   テキストやタイポグラフィで魅せるデザイン
Chapter 2   情報の配置やレイアウトで魅せるデザイン
Chapter 3   配色や余白で魅せるデザイン
Chapter 4   グラフィックや写真で魅せるデザイン
Chapter 5   最新のWebページデザインの事例

ここではこの本のオススメの読み方をご紹介。

この本の個人的使い方(1) ~デザイン意図推測遊び~

1 ページをパラパラめくりながら眺める
2 おっ、なんかいいな!と感じるデザインをよく見る
3 このWebページはどのような意図でデザインされているか自分で推測してみる
4 解説を読む
5 同じページに共通のデザイン要素のページがあるので比較してみる

この本の個人的使い方(2) ~対照的デザインの比較~

1 目次やページの見出しで、対になりそうなページを2つ探す
2 ページをぺらぺらめくりながら交互に眺める
  例 「若い女性がかわいいと感じる色調」
    f:id:mw-matrixa:20170209230039j:plain
    「無彩色で構成されたスタイリッシュなページ(男性的)」
    f:id:mw-matrixa:20170209230106j:plain
3 感じたことをそのまま付箋に書いて貼っておく。
  例 「たしかに若い女性向けの色合いのページにはなぜか疎外感を感じたし
     無彩色は落ち着く。これがホーム感とアウェー感か」


もちろん使い方は他にいくらでもあって、自由でいいと思います。
配色について記載されているページは色のRGBも載っているので
おしゃれなカラーリングを自分で再現することもできますよ。

終わりに

最初にこの本を「読もう」として、正直読みづらいと感じていました。
文章のカラム(幅)が小さすぎるのと、文字強調があまりないためかな?
しかし見方を変えることで印象ががらりと変わりました。
「なんかいいデザイン」「分類と説明」が合わさることで、
デザインに縁遠かった僕でも、するする理解を進められました。

今おしゃれなWebデザインを集めたサイトはネット上にもあります。
でも実際に手でめくりながら比較したり、
付箋を貼ってすぐ参照できるのはやはり紙の本ならではですよね。
ゴロゴロしながらペラペラめくって あっいいじゃん
そういう楽しみ方ができるいい本だと思いますよ。