【読書】コーダーが知っておくべきデザイン基礎【だから、そのデザインはダメなんだ。】

UI・UXについてもっと学びたいと思い、
「だから、そのデザインはだめなんだ。」を購入しました。

デザイナーさんにとっては基礎的な知識かもしれませんが、
コーダーである自分にとっては勉強になる部分が多かったのでご紹介します。

視認性を上げるために黄金比を利用しよう

美術・建築・工業デザインなどで頻繁に利用される、

黄金比「1:1.618（5:8）のバランス比」

を利用しましょう。

font-sizeとline-heightの関係性などに利用すると、
すごく引き締まったデザインになるはずです。

ユーザーの視線移動はF字に近い

よくコンビニなどの商品棚を見る時にZをなぞって視線が移動するという話があります。

しかし、
ウェブページにおいてユーザーの視線はF字のような形で視線で移動するようです。

重要な情報はページの左上部に設置し、
次に重要な情報はページの左サイドに配置するようにしましょう！

膨張色と収縮色を理解しよう

赤、オレンジ、黄色などのカラーは膨張色（暖色系）、
青、水色・緑などんカラーは収縮色（寒色系）に分類されます。

警告や注意喚起などは膨張色、
広い面積を染める場合は収縮色を利用しましょう！

スクロールしないとページの内容がわからないのはNG

なにかの商品を紹介するページなどで、
ページの下までスクロールしないと内容がわからないのはよくありません。

このサイトでも利用していますが、
しっかりとページの上部に目次を導入することは大切です。

• 【目次がない記事は低評価】Table of Contents Plusで目次をつくりましょう【10分で目次が作れます】

ファーストビューでページの内容が全て把握できるような作りを目指しましょう。

パンくずリストはページ下部に設置するのもあり

SEO対策としてもユーザービリティーの向上のためにも、
パンくずリストの設置は必要不可欠です。

• 【Breadcrumb NavXT】パンくずを設置してユーザビリティーアップ【SEO】

しかし、
本当にページ上部に設置することがユーザーにとって最適なのかは疑問が残ります。

コンテンツを見終わったあとに、
ページの上部までスクロールしてパンくずリストを利用するでしょうか？

Appleのようにパンくずリストをページ下部に設置するのも1つの選択肢になりえます。

フラットデザインを採用するのであればリンクやアイコンを統一しよう

フラットデザインを採用するのであれば、
ボタンの左側に「>」を挿入するなり影をつけるなりして、
リンクボタンということを誰にでも認識できるような形にしましょう。

ロールオーバーして初めてリンクだとわかるようなデザインは好ましくありません。

さいごに

この本は実際にNGとされるデザインと好ましいデザインが併記されており、
自分のようなコーダーにも簡単に読み進めることができました。

デザインにうといコーダーさんで、
デザインの基礎について知りたい方は是非ともこの本を手にしてみてください！

カテゴリー: 仕事

執筆者: みーぷー