くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

ノンデザイナーズ・デザインブックを読んだら、配置・文字・色についてスゴイわかりやすかった。。。

ノンデザイナーズ・デザインブックの感想文。 というか、気になった言葉のクリップ集。

f:id:wannabe-jellyfish:20190916024705j:plain

好きな部分...(´ω`)

デザインには、そして人生にも、全般的に通用する方針がもう一つあります。
それは、臆病になるな、ということです。

これもすき(´ω`)

しかし、ルールを破るためのルールを覚えておいてください。
それは、ルールを破るためには、まずルールを知らなければならないということです

これも〜(´ω`)

活字はけっしてコミュニケーションを妨げてはならないのです

デザイン(と言っても幅広いですが)に関して、まとめて理解できるのでよかった(´ω`)


p.13 4つの基本原則

コントラスト ... はっきり異ならせること
反復 ... 視覚的要素をくり返すこと
整列 ... 他の要素と視覚的な関連をもつこと
近接 ... 関連する項目は、近づけてグループ化すること

p.15 近接の原則

近接の原則とは、関連する項目をまとめてグループ化すること。
関連する項目を物理的に近づければ、無関係な断片の群ではなく、
1個のまとまったグループに見えるようになります。

p.33 整列の原則

整列の原則というのは、ページ上のすべてのものを意識的に配置しなければならないということです。
ページ上のすべての項目が、なにかほかのものと視覚的に関連していなければなりません

p.35 中央ぞろえは弱く見える。

中央ぞろえは、すこし弱く見えることがあります。
その代わりに、テキストを右ぞろえ左ぞろえにすれば、
テキストを結びつける透明な線が、はるかに力強くなります

p.36 中央そろえは、初心者に好まれる

中央ぞろえは、初心者にもっとも一般的に使われる整列方法です。

失敗の危険性がほとんど泣く、安心感を与えるからです。
中央ぞろえは、フォーマル、静か、普通、という印象を与えますが、
ただ単に退屈に見えることもよくあります。

p.39 中央ぞろえの効果を発揮させる

例2 中央ぞろえの効果を発揮させるには、通常以上の配慮が必要です。
このレイアウトでは、
クラッシクな書体の比較的小さなサイズを使い、
行間をより広く開け、
テキストの周囲に多くの空白をもたせ、
枠線をなくしました。

p.41 中央そろえが効果を発揮するとき

中央ぞろえは、明確に意図的な場合に最大の効果を発揮します。
そして、整列が意図的で強力な場合は、他の要素を独創的に扱っても、
ページ上に無秩序に置かれた必然性のない要素群に見えるのではなく、
目的を持ったデザインに見えるのです

p.47 力強い線を見つける

整列の基準になる力強い線を見つけて、それにこだわりましょう
もし本文が左ぞろえなら、見出しと少見出しも左ぞろえにしましょう。

p.51 ルールは破るために存在する

ときには、まったく整列を無視してしまうことも可能です。
意図的に、そうするならば

わたしはこれまでに、いくつかのルールを示してきました。
確かに、ルールは破るために存在します。
しかし、ルールを破るためのルールを覚えておいてください。
それは、ルールを破るためには、まずルールを知らなければならないということです

p.54 整列の原則の目的

整列の基本な目的は、ページの一体化と組織化です。

p.61反復の効果

反復は、情報の組織化に役立ちます。
読者がページを読み進むのを導き、デザインの離れた部分の統一を助けます。

p.69 コントラストの原則

しかし、臆病になってはいけません。
2つの要素が異なっているように見えて、ホントは異なっていない場合には、
コントラスト」ではなく「衝突」が発生します。

コントラストでは、本気になることです

同じものでないのなら、本当に異ならせましょう。

p.85 デザインの指針

デザインには、そして人生にも、全般的に通用する方針がもう一つあります。
それは、臆病になるな、ということです。

p.99 トライアド

トライアド ... 等しい距離にある3つの色の組み合わせ。

プライマリ・トライアド ... 3原色。赤、黄、青
セカンダリ・トライアド ... 緑、オレンジ、紫

p.100 スプリット・コンプリメント・トライアド

ホイール上のどれか1色を選び、その向かいにある補色を見つけます。
実際に使用するのは、補色自体ではなく、「補色の両隣の色」にします。
そうすると、さらに少し洗練された鋭さをもつ組み合わせが生まれます。

p.101 類似色

類似色の組み合わせは、ホイール上の隣り合う色で構成されます。
どの2色あるいは3色を組み合わせても、共通する色を基調にもっているので、
調和の取れた組み合わせができます。

p.102 シェードとチントとヒュー

純粋な色はヒュー(hue)です。
ヒューに黒を加えると、シェード(shade)になります。
ヒューに白を加えると、チント(tint)になります。

p.107 暖色対寒色

ここで覚えてほしいもっと実用的なことは、
寒色は背景に「引っ込む」し、
暖色は全面に「出る」ということです。

p.112 印刷とWebのカラーモデル

CMYKとRGBについて覚えておくべき重要なことは、
* 印刷されるプロジェクトでは、CMYKを使う
* 画面上で閲覧されるものには、RGBを使う

p.142 デザインの4原則と空白

デザインの4原則に従うと、
空白はあるべき所に存在するようになります。
空白を存在させるのは、あなたの仕事です。

p.155 情報の優先順位がわかる

コントラストの原則が適用されて、重要な情報がしっかりと頭に残ります。

この場合、お店の新規オープンです。そして「年月日」が小さいのがポイントです。
日付そのものに比べると重要度は低いため、小さく配置することで相対的に日付が大きく見えるようにしています。

p.161 意識せずともグループが見えてくる

近接と反復の原則が正しく作用しています。
このモバイルアプリには、3つの機能が存在しているということが見て取れます。
加えて、それらが「アイコン+説明+リンク」でひとつのグループが作られていることがわかります。

近接と反復を正しく作用させるには、グループ内の余白設定よりも、
グループ間に設けられている余白を確実に広くする必要があります。

p.163 活字の目的

活字の美的な面に焦点を当てますが、
目的はあくまでもコミュニケーションにあるということを忘れてはいけません。
活字はけっしてコミュニケーションを妨げてはならないのです

p.170 ダッシュ

ハイフン ... 単語のハイフネーションや行の折り返しのために使う
Enダッシュ ... 使用フォントの大文字Nと同幅。時刻や月のような後の間に入れて、期間を表すのに使う
Emダッシュ ... enダッシュのほぼ2倍の長さ。使用フォントの大文字Mと同幅。思考の流れが突然変わったことを示すためや、文中でピリオドでは強すぎるが、コンマでは弱すぎる箇所でよく使われる

p.173 コーストライン

私達は単語を個々の文字や文字のグループとして認識するだけでなく、
次の例が示すようにその外形で、なかでも「コーストライン」(coastline: 海岸線)と呼ばれることもある単語の上部分の形で認識しています。

p.174 下線

下線を使わないこと。絶対。

あなたは、強調したい言葉に下線を引く習慣があるかもしれません。
しかし、強調のためにもっともプロらしい選択は、ほかにいくつも存在します
太字対、大きな活字、別のフォント、色、ああるいはそれらの組み合わせを試しましょう。

p.176 ウィドーとオーファン

ウィドー ... 段落の最終行に7文字(行長によって多少異なる)以下しか存在しない場合の、その最終行のこと。

オーファン ... 段落の最終行が長さに関係なく、段落のほかのテキストから離れて次の段やページの先頭に孤立している場合の、その最終行のこと。

これらを避けるには、その力があれば文書を書き直すか、少なくとも単語を一つか2つ足し引きする必要がある

p.177 段落のインデント

プロ・レベルのタイポグラフィにおける正しい空きは、emスペース1個です。
そして、emスペースというのは、使用する活字のポイント・サイズと同じです。

p.178 段落は、インデントか、間の空きを広げる

インデントは、「これは新しい段落ですよ」ということを意味します。
段落の空きを広げることも、「これは新しい段落ですよ」ということを意味します。
したがって、どちらか「一つ」を選ぶ必要があります。両方ともではありません

p.186 活字でコントラストを付ける6種類の方法

活字でコントラストを付けるには、明確で特徴的な6種類の方法があります。
それは、サイズ、太さ、構造、フォーム、方向、色です。

p.186 書体の組み合わせの問題

書体の組み合わせの何かが悪いのかを見つけるのが難しい場合、
書体同士の「違うところ」を探すのではなく、「似ているところ」を探すようにしましょう。
問題を引き起こしているのは、類似性なのです。

p.188 活字のカテゴリ: オールドスタイル

手書きの文字。
文書を読むのに目障りになるような強い個性がない。
読んでもらいたい大量の活字を組む時に選ぶ。

p.189 活字のカテゴリ: モダン

冷たくエレガントな姿をもつ傾向がある
強い太さの推移を持っているせいで、長文には向いていない。

p.190 活字のカテゴリ: スラブセリフ

スラブセリフ書体には、太さの推移がほとんどない。
太さのコントラストがほとんどないスラブセリフ書体は、
可読性の面で大変優れているので、安心して大量のテキストに使うことができる。
しかし、オールドスタイルの書体に比べると、全体的に暗いページになる
スラブセリフの書体は、すっきりとした単純な形をしているので、子供向けの本でよく使われる。

p.191 活字のカテゴリ: サンセリフ

「サン」(sans)というのはフランス語で、「〜がない」という意味です
だから、サンセリフ書体には、ストロークの先端にセリフがありません。

つまり、実質的に、ストロークに視覚的な太さの遷移がなく、文字の形が全部どこでも同じ太さだということです。

目を引くページを作るための選択肢が驚くほど増えるでしょう。

p.193 活字のカテゴリ: スクリプト

カリグラフィ用のペンや筆や、ときには鉛筆や製図ペンなどで書いた手書き文字のように見える書体。

スクリプト書体は、チーズケーキのようなもの。控えめに使わないと気持ちが悪くなる。

長文には絶対に使うべきではない。絶対に全部大文字にしてはいけない。

しかし、非常に大きなサイズで使うと、衝撃的な効果を発揮する。臆病にならないこと。

p.194 活字のカテゴリ: デコラティブ

ディコラティブ・フォントを見分けるのは簡単です。
全部そのフォントで組んである本を読むことを想像するだけで、
少し吐き気をもようおすようなフォントは、たいていディコラティブの項目に分類できます。

ティコラティブ・フォントは、非常に目立つというまさにその理由のために、使えるケースが限られます。

p.199 活字のコントラスト

  1. Size
  2. Weight
  3. Structure
  4. Form
  5. Direction
  6. Color

p.201 サイズのコントラスト

たとえば、新聞の大きなページに、小さな活字が1行だけ載せていたら、
それは読まざるを得ないとは思いませんか。
読まざるを得ない気にさせる原因として重要なのは、大きなページと非常に小さな活字とのコントラストなのです。

p.204 太さ(Weight)

書体の場合、ウェイトというのはストロークの太さを意味します。
ほとんどの書体ファミリーには、

  1. レギュラー
  2. ボールド(太字)
  3. セミ・ボールド(中太)
  4. エクストラ・ボールド(極太)
  5. ライト(細字)

などさまざまなウェイトでデザインされた書体が含まれています。

p.216 活字の「方向」

活字の「方向」といえば、誰しも思い浮かべるのは活字を傾けることです。
これについて私が言いたいのは、「やめておきなさい」ということだけです。

はっきりと言葉で説明できる場合にかぎってそうしてください。

お願いですから、隅を傾いた活字で埋めるのは絶対にやめてください

p.226 コントラストを組み合わせる

より良い解決策をみつけるためには、まず問題を見つけないとならない。
「問題」をみつけるためには、違いではなく「類似点」の名前を言います。

互いに相手よりも重要な存在であることを主張するのでケンカが起きます。

問題の名前を言えて初めて、解決策を生み出すことができるのです。

p.238 デザインする手順

  1. 焦点からはじめる ... 真っ先に見てもらいたいものを、まず決める。
     次に、強いコントラストを付けて焦点を作る。
  2. 情報を論理的なグループにまとめる ... グループ間の関係を判断(近接)
  3. 整列の強化 ... 強い配列を作り出して、それを維持する
  4. 反復を作る

読んだ感想

チラシやレター、パンフレットなど文字が主体のデザインに関して、
原則を事例と併せて解説している本。

サンプルの画像が多いので、意外とサクサク読める感じでとてもよい感じ(´ω`)

ただ、UIデザイン/Webデザインの例はあまりないので、
適用する際にいろいろと考えないといけないかも。。

「UIデザインの心理学」のほうがエンジニア向けかも知れないが、
原則や色、活字といった全体の話がわかる

後半の活字の話は、フォントの種類やその効果についてまとまっている。
全体的に広告やチラシなどのデザインの話のため、WebアプリのUIデザインとは異なるが、
見出しや本文をどうするかなどは、とても参考になる

特に、最後の「デザインする手順」は何にでも使えそう。
プレゼンのスライドでもそうだと思う。

どう使うかを考えるのは難しいけど、くり返し読んで・考えるとかなり身になりそう(´ω`)


この記事は積読ハウマッチの読書メモ機能を活用してます♪

読みながら、読書メモを残しつつ、コピペでほぼ完成♪
最近つけた機能だけど、便利(´ω`)

tsundoku.site

積読ハウマッチ内でも、人気の書籍だけど、
人気の理由がよくわかった気がする(´ω`)

tsundoku.site

おすすめの本

ここらへんも気になるし&いい本。。(´ω`)

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

UIデザインの心理学―わかりやすさ・使いやすさの法則

UIデザインの心理学―わかりやすさ・使いやすさの法則

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

続・インタフェースデザインの心理学 ─ウェブやアプリに新たな視点をもたらす+100の指針

続・インタフェースデザインの心理学 ─ウェブやアプリに新たな視点をもたらす+100の指針