@kotyのブログ

PythonとかAWSとか勉強会のこととかを、田舎者SEがつづります。記事のライセンスは"CC BY"でお願いします。

書籍 理論でわかるデザイン入門 読了後メモ

引き続きweb制作の勉強をしている。

2年前の本。冒頭で語られている「ITエンジニアとデザインスキルの"関係"および"現状"と"課題"」は納得感がある。 自分を含め多くのシステムエンジニアは「デザインは専門外」と線を引いてきていたのが実際のところでは。しかし昨今はそうも言っていられなくなってきたわけだ。。。

以下自分のためのメモ

デザインの構成要素

  • コンセプト
  • ビジュアル・・・サイトのイメージを決定づける写真やグラフィック
  • 文字・・・ビジュアルを補完また代行、情報そのもの
  • 色・・・強調やイメージの補完
  • レイアウト・・・記事を読みやすく編集し、配置する
  • 線・飾り・・・記事をグループ化したり、デザインを補完する 意味なく「フォント」「色」「飾り」は使わない。

Chapter3. タイポグラフィ

  • それぞれのフォントが持つイメージがある。サイトのコンセプトに見合うものを選ぶ。
  • 基本はフォントは1つ
  • 日本語フォントと欧文フォントは合わせる
  • メリハリ、適度な余白、行間

Chapter4. 情報整理とワイヤーフレーム

  • 次にどうすれば意図した情報を得られるかが分かるUI
  • 大中小の3階層に情報をレベル分けする
  • トップ画面から最大3ステップで情報を得られること → 所感:具体例があるとより分かりやすかった。
  • 利用者が想起することに寄せる → 所感:ペルソナが十分具体化されている必要がある

所感

  • シナリオを作るの部分は、カッコよく言うとカスタマージャーニーマップかなぁ。 *「プレグナンツの法則」の節も、具体例があるとより分かりやすかったが。。。
  • ワイヤーフレームを作るにはツールに習熟するまでが、まず大変そう。

Chapter5. ビジュアル

  • トップページに載せる写真は大変重要なのでプロの素材を買うのがおすすめ。iStock, PIXTA, Shutterstock, Fotolia など多くのストックフォトサイトがある
  • 写真のトリミングには、3分割法を意識する

Chapter6. レイアウトとスペーシング

所感

実際に使いこなすのは難しそう

Chapter7. 色彩の基本

  • ベースカラー、メインカラー、アクセントカラー
  • ベースとメインの配色が曖昧or対比が強すぎる場合はセパレーションを置く
  • ジャッドの色彩調和論、色彩対比と同化などその他いろいろと細かいノウハウがある。。
  • 意味なく色を使わない。

所感

多くのページ数が割かれていた。カラーコーディネーターって資格もあるくらいだから、必要な知識は多い。 ただ実際にはベースカラー、メインカラー、アクセントカラーの組み合わせを数個選定して選ぶ、くらいしかまずはできないでは。。。 コンセプトに合う色の組み合わせを色見本の本から選べばいいかな。

Chapter9. デザイン実践のコツとポイント

  • デザイン案は、そういうデザインをした意味づけをしたうえで複数案を作る
  • その意味づけも含め、ステークホルダーと各案について議論する

おしまい

デザインに根拠を持て、デザインにセンスはいらない、と著者が繰り返し主張していたのが印象的だった。 そして、読み終わるには終わったけどこのままだと机上の空論だ。実践するとともに、普段使ってるWebサイトや街中にある構造物やPOPにも注目するようにしたい。