美的方向性
システムがないと、デザインはあなたが見てきたものすべての平均に流れていきます。白背景にInter、グラデーションのヒーロー、3枚のカードを横に並べる——あえてそれに対抗しましょう。
構築する前に
数行で書き留めてください：
- 目的 — 問題、読者、それを見る瞬間。
- トーン — 1つ選び、それにコミットする：極限までミニマル、編集者的、工業的、温かみのある家庭的、制度的、遊び心のある、ラグジュアリー、テクニカル、アーカイバル。「モダンでクリーン」は不可。その言葉は決断していないことを意味します。
- 一つのこと — 1時間後も覚えている何か。異常なサイズのディスプレイ書体、グレイッシュグレーに対する単一の彩度の高い色、意図的な非対称性、ページの高さいっぱいに走る罫線。
次に、すべての要素をその3行に奉仕させて構築します。要素がトーンや一つのことに貢献しないなら、削除してください。
方向性は細部に宿る
- タイポグラフィは色よりも多くの役割を担う。 特徴的なディスプレイ書体と落ち着いた本文書体の組み合わせで、ほとんどの作業が完了します。実際に使用するサイズで組み合わせを確認してから、コミットしてください。
- アクセントは1つ、控えめに使う。 支配的な中間色に、フル彩度の単一アクセントを加える方が、5つのくすんだ色よりも優れています。
- 装飾の前に構成。 非対称性、重なり、広いマージン、グリッドを一度だけ破る要素——左右対称のレイアウトにテクスチャを重ねるのではありません。
- モーションは多くではなく、ひとつの瞬間。 単一のずらした出現は職人技と読まれますが、散らばったホバーエフェクトはテンプレートと読まれます。
プロジェクト間で変化をつける
最近制作した2つの成果物が似ている場合、いつもデフォルトで選んでいるものを変えてください——通常はパレットの色温度、ディスプレイ書体、または密度です。同じ選択に流されるのではなく、意図的に小さなセットから選びましょう：
- パレット：骨とインク · 濃紺と温かみのある白 · グレイッシュグレーと酸化した赤 · フォレストグリーンとクリーム · ブラックとアシッドイエロー · サンドとテラコッタ。
- 書体：ハイコントラストセリフディスプレイ · タイトトラッキングのグロテスク · ヒューマニストサンセリフ · スラブ · コンデンスディスプレイ · 全体を通して使用する単一のモノスペース。
構築する前に、どれを選んだか、その理由を一行で述べてください。その一行は、相手に具体的な反応のきっかけも与えます。
ガードレール
以下の基準は方向性に関わらず守られるべきです：
- 本文のコントラスト 4.5:1、見出し 3:1。
- 画面上の本文テキストは最低 16px、印刷では 12pt、1080p スライドでは 24px。
- ヒットターゲットは最低 44px。
- ブランドがすでに使用している場合を除き、絵文字をアイコンとして使用しない。
- 写真を SVG で描画しない。FLUX ツールが利用可能な場合はそれらで生成し、それ以外の場合はプレースホルダーを使用して、何がそこに属するかを記述する。
相手から参考資料をもらった場合
参考資料の表面ではなく、その論理に従ってください。相手が好きなサイトを共有した場合、その理由——スペーシングのリズム、抑制の効いた表現、書体のウェイトなど——を特定し、その理由を適用してください。表面をコピーすると、結局は何か別のものの劣化版のようなデザインになってしまいます。