HTMLやcssコーディングを主にしてきて、独自の見解ですがまとめ。
※プロモーションサイトのようなデザインではなく、商業サイトやデザインシステム寄りな見解ですのでご留意ください。
#「伝えたいこと」を「デザイン」する
まずこれが大前提じゃないでしょうか。
私が常々思っている、「見出し」「本文」「飾り(画像)」「リンク」が素人が見ても一目で分かるデザインは素晴らしいと思います。
最近は、SEO的に文書構造をより機械的に理解してもらう方向でも、HTMLの構造には重点を置き、より正確なマークアップが求められます。
極端に言うと、cssが全くきかない状態でも、内容は伝わるように作らないといけません。
そのため、素人目にも要素の分類が「わかる(認識できる)」デザインは、プロダクトデザインとしては優れていると思います。
意図した方向にユーザーを導くデザイン
ユーザーの動向が思い通りであれば、してやったり感ありますよね。
昔見た、どこかのホテルのLPで、体験談をオムニバスに配置してあって、その記事の要所要所で「詳細を見る」ボタンが配置されていて、思わず押したくなった記憶があります。引き込む力がすごかった。
LPは、そういう事もできますが、他サイトデザインともなると、ユーザー目線や興味をそそる内容をどこに配置するか、目線をどう誘導するかなど、データに基づいていろいろ想像を膨らませないとダメですね。ターゲットや目的にそったデザインは素晴らしいですね。
一貫されたデザイン
きちんと統制された、一貫性のあるデザインだと、ユーザーは心理的に安心します。
また、同じ機能が同じデザインだと、使う側も慣れてきて使いやすいですよね。
ボックスレイアウトでは、上余白か下余白で一貫しないと、パターン増えた時に対処できなくなる場合があります。
上下や幅のサイズは、「5」で割り切れる数字が良い(10px,15px,300px,320px,640pxなど)と言われてましたが、最近は「8」で割り切れるのもアリらしいですね。個人的には、5の方がやりやすいです。リッチ感を出すなら、やっぱ8なのかなー。
デザインをきちんと学んだわけではないですが、ボーダーや影を除いて上下間隔が11pxとか、疑似要素的なものをデザインの計算にいれると、どんどん狂っていくと感じています。
(そのような場合でも、ボーダーを含んで割り切れる数字になる、とかどこかでつじつまを合わせますが)
なので、数値は割り切れる数で統一したほうが良い、と個人的な見解です。
繰り返し使えるデザイン
同じ要素を同じデザインで何度も使いまわしやリピートできるのが、コーディングもしやすいし、ユーザーも混乱しないのでみんなハッピー。
このあたりのデザインルールは、アトミックデザインを取り入れる&ガイドライン作成に伴った苦労話として、また別記事にて書こうと思います。