Webデザインは新しい生成AIツールが次々登場する一方で、土台となる原則は変わらない。今回は配色・コントラスト・タイポグラフィ・レイアウト・モーションという5つの基本を、それぞれを助けるAIツールとあわせておさらいする。
配色の基本原則とAIパレット生成ツール
配色設計の基本は「色相・彩度・明度」を意識してベースカラー・メインカラー・アクセントカラーを役割分担させることに尽きる。よく使われる目安が「60-30-10ルール」で、背景など面積の大きい部分に60%、サブカラーに30%、目立たせたいボタンやリンクなどのアクセントに10%を割り当てるという考え方だ。この基本を押さえたうえで、実際のパレット作りはAIツールに任せる流れが定着しつつある。
- Coolors — スペースキー連打で無数の配色候補を生成できる定番ツール。エクスポート形式が豊富でデザインシステムへの組み込みもしやすい。
- Khroma — 好みの色を学習させ、その人の感覚に近いパレットをAIが自動生成する。ブランドの「好み」を数値化したいときに向く。
- Adobe Color — 補色・類似色などの配色理論のルールに沿ったホイールベースの生成に強く、写真からのカラー抽出も可能。
- Huemint — ブランドキットやUIコンポーネント向けに、複数カラーの組み合わせを一括で試作できる。
これらのAI配色ツールは2024年以降、提案精度の向上とデザインチームのスピード重視の流れを背景に急速に普及したと指摘されている。ただしAIが出す配色案はあくまで出発点であり、次章のコントラスト基準を必ず満たすかを確認する工程が欠かせない。
コントラストとアクセシビリティ——WCAG 2.2から次世代APCAへ
現行の到達基準はWCAG 2.2で、通常テキストはコントラスト比4.5:1以上、大きな文字は3:1以上が目安になる。一方で次世代のWCAG 3に向けては、人間の知覚によりそった新しいコントラストの計算方式であるAPCA（Advanced Perceptual Contrast Algorithm）が検討されている。APCAは文字サイズ・太さによってスコアが変わり、背景色と文字色を入れ替えると結果も変わるなど、単純な比率だけで判定するWCAG 2の方式より精密だ。ただし2026年4月時点でもWCAG 3で採用する正式なアルゴリズムは未確定のままで、現行案件では引き続きWCAG 2.2を満たすことが安全とされている。
実務でのチェックには次のようなツールが使える。
| ツール | 方式 | 特徴 |
|---|---|---|
| WebAIM Contrast Checker | WCAG 2 | 2色を入力するだけで比率とAA/AAA判定を即座に表示するシンプルな定番ツール |
| Stark | WCAG 2 / APCA両対応 | Figma・Sketch・Adobe XD向けプラグイン。色覚シミュレーションもその場で確認できる |
| APCA Contrast Calculator | APCA | ダークモードなど従来のWCAG2方式では判定しづらい配色の検証に向く |
タイポグラフィの基礎——可変フォントとAIフォントペアリング
Web文字組みの基本は、見出し・本文・キャプションのサイズ比を決めるタイプスケール、行間（本文は1.4〜1.6倍が目安）、そして読みやすさを崩さない範囲でのフォント数の制限（2〜3ウェイト程度）だ。近年はここに可変フォント（Variable Fonts）という技術が加わっている。1つのフォントファイルに太さ・幅などの複数軸を持たせ、CSSだけで細かく調整できる仕組みで、読み込みの軽量化にもつながる。もっとも普及率にはまだ差があり、Google Fontsに登録されたフォントの約28%が可変フォント対応である一方、Adobe Fontsでは約7%にとどまるとの報告もある。
フォントの組み合わせ選びには次のようなAIツールが役立つ。
- Fontjoy — 機械学習でバランスの良い見出し・本文のフォントペアを自動生成し、その場でプレビューできる。
- Fontpair — Google Fontsの厳選された組み合わせをカタログ的に閲覧・プレビューできるツール。
レイアウトとモーションの原則
レイアウトの基本原則としてよく挙げられるのが、階層（Hierarchy：視線の誘導）・コントラスト（Contrast：メリハリ）・バランス（Balance：視覚的な重みの分配）・整列（Alignment：グリッドに沿った配置）の4点だ。実装面では4ptまたは8pt単位の余白システムを全体で統一すると、要素間の余白がそろい、開発側への引き継ぎもしやすくなる。
モーションについては、アニメーションの目的を「装飾」ではなく「状態変化の説明」に置くのが基本原則になる。OS側の設定を尊重するprefers-reduced-motionメディアクエリへの対応は、めまいや吐き気などの症状を訴えるユーザーへの配慮として必須の実装とされる。またエラー表示など重要な情報をアニメーションだけで伝えず、色やアイコンなど静的なシグナルと必ず併用することも基本とされる。2026年にはFigmaがConfigイベントでモーション機能を強化するなど、これまで属人的だったモーションを配色やタイポグラフィと同じように「デザインシステムの一部」として管理する動きも出てきている。
主な情報源
- 12 AI Color Palette Generators for Branding in 2026 Guide – BrandClickX
- WCAG3 Contrast as of April 2026 – Adrian Roselli
- WCAG 3 and APCA – Dan Hollick
- Variable Font UI is Broken – Phinney on Fonts
- Animation in UX Design: A Practical Guide – MyUX Academy
- Figma Motion Just Made Animation a Design System Problem – Design Systems Collective
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。