Webデザインに使えるAIツール｜配色・レイアウト・素材の役割分担

クライアントから届いたのは、ロゴと「明るい感じで」の一言だけ。配色、ワイヤー、メイン画像、アイコンと考えるうちに、AIツールのタブが10個並んでいる。ここ、迷いますよね。

「おすすめ10選」はもう読んだはずです。知りたいのは、自分の作業のどこに、どのツールを置くか。各社の公式ページ（2026年10月15日確認）をもとに、作業ごとに整理しました。

結論: ツールを選ぶ前に、案件を工程に分けて「1工程1ツール」に絞る。

• 配色で迷っているなら → AIに案を出させて、コントラスト比で人が選ぶ
• アイコンを揃えたいなら → AIで作る前に、無料ライブラリを探す
• 画像をAIで作るなら → 作る前に、商用で使えるプランか確認する

この記事の目次

1. AIツールは1案件の中でどう組み合わせる？
2. 配色はAIに任せていい？
3. レイアウト案（ワイヤー）はどのAIで作る？
4. AIで作った画像素材は、仕事で使っていい？
5. アイコンもAIで作るべき？
6. よくある質問
7. この記事のまとめ

AIツールは1案件の中でどう組み合わせる？

6つの工程に分けて、次のツールへ渡すデータ（色コード・Figmaファイル・SVG）を決めておけば迷いません。

小さな店舗のLPを1本作るなら、この順番です。

← 表は横にスクロールできます →

選び方の基準：「無料枠で試せるか」「次の工程へそのまま渡せる形式で書き出せるか」「商用利用の条件が公式に書かれているか」の3点で選びました。

6のバナー転用は、Canvaプロに入っている機能です。年額¥11,800（1人あたり・2026年10月15日確認）で、月にすると1,000円弱。

「完成品を自動でつくる魔法の道具というより、制作を前に進めるための補助線として使うと非常に強い。」 — 企業の実務振り返り記事（2026年4月）

配色はAIに任せていい？

案出しまではAIに任せてOK。採用するかどうかは、コントラスト比で人が決めます。

AIの配色案は、見た目がきれいでも文字が読みにくい組み合わせが混ざります。基準はW3CのWCAG 1.4.3（文字の読みやすさの国際基準）。本文の文字は背景とのコントラスト比4.5:1以上、大きい文字は3:1以上です。

← 表は横にスクロールできます →

最終チェックは、Adobe Colorに寄せるのが分かりやすいと思います。コントラストの判定と色覚の見え方確認が、同じ画面で済むからです。

コツは、AIに渡す前の準備です。ロゴの色など、動かせない色を先に1つ決めておきます。

「なので、Webページでの配色を考える場合には「ベースカラー」は決めておいて、その色を基準に配色を考えてもらうと決めやすくなります。」 — noteの記事（2026年2月）

レイアウト案（ワイヤー）はどのAIで作る？

サイト全体の構成ならRelume、ラフや文章から画面を起こすならUizard。仕上げはどちらもFigmaです。

← 表は横にスクロールできます →

見ておきたいのは、Relumeの書き出し先です。

• Figmaへ：無料でも渡せる
• WebflowとReactへ：無料だと30コンポーネント（部品）まで

あなたがデザインをFigmaで仕上げるなら、無料で足ります。

FigmaのAIクレジットは毎月リセットされ、繰り越せません。Figma Makeとエージェント機能は、ベータ期間中のみクレジットを消費しない扱いです。正式版のあとの条件は、公式で確認してください。

「レイヤー分けて出力できればアシスタント代わりになりこっちでブラッシュアップして工数もかなり削減できますが、みなさんどう思われますか？」 — Yahoo!知恵袋の質問（2026年3月）

AIで作った画像素材は、仕事で使っていい？

使えます。ただし商用利用の条件はツールとプランごとに違うので、作る前に確認します。

上の3手順は、文化庁の「AIと著作権に関するチェックリスト＆ガイダンス」（令和6年7月31日）を短くまとめたものです。使う前に既存の作品と似ていないか、画像検索などで確かめる。生成に使ったプロンプト（AIへの指示文）も残しておく。この2つが勧められています。

← 表は横にスクロールできます →

Fireflyの自社モデルは、Adobe Stockのライセンス済み素材とパブリックドメイン（著作権の切れた作品など）で学習していると公表されています。

Recraftを使うなら、無料プランの条件は地味に見落としがち。仕事用の画像は、有料プランに入ってから作ってください。

「背景を伸ばすのには使いますね。 あとピンポイントでここにトカゲを追加したいとか、女性の服をもう少しゴージャスにするため服の一部に特定の装飾を指定して付けるとか。」 — Yahoo!知恵袋の回答（2024年9月）

アイコンもAIで作るべき？

揃ったアイコンが欲しいなら、無料のアイコンライブラリを探す方が早くて確実です。

調べていて一番うれしかったのが、ここです。

アイコンは線の太さと形が揃っていないと、ページがちぐはぐに見えます。AIで1個ずつ作るより、最初から揃ったセットを使う方が仕上がりは安定します。

← 表は横にスクロールできます →

AIで作るのは、店舗の看板商品や独自のキャラクターなど、ライブラリにないものだけ。この順番なら、AIのクレジットもほとんど減りません。

よくある質問

Q. 無料のプランだけで、1案件を回せますか？

小さなLPなら回せます。無料枠は次のとおりです（2026年10月15日確認）。

← 表は横にスクロールできます →

ただし、無料プランで作った画像を商用で使えないツールもあります（Recraftなど）。画像だけは、商用条件を先に確認してください。

Q. AIで作った画像を、クライアントのサイトや広告に使っても大丈夫？

ツールの利用規約しだいです。文化庁の資料でも、使うAIサービスの規約を確認して従うよう書かれています。

Q. 参考サイトの画像をAIに読み込ませて、似た画像を作ってもいい？

避けるのが無難です。文化庁の資料には、既存の画像を入力して「似たものを生成させる」目的がある場合、著作権法第30条の4（AIの学習などに作品を使ってよいとする規定）が適用されないことがあると書かれています。参考にするのは雰囲気だけ。プロンプトは自分の言葉で書きます。

この記事のまとめ

• 案件を「配色・構成・UI・画像・アイコン・バナー」に分け、1工程1ツールに絞る
• 配色はAIに案を出させ、文字は4.5:1以上のコントラスト比で人が選ぶ
• ワイヤーはRelume→Figmaの流れなら無料枠で足りる
• 画像は、商用で使えるプランかを作る前に確認。納品前に「規約・類似検索・プロンプト保存」の3つを済ませる
• アイコンはまずMaterial SymbolsかLucideを探し、足りない分だけAIでSVGを作る

次の案件でやること：配色の工程だけ、KhromaかCoolorsで案を出し、Adobe Colorでコントラストを確かめてみてください。

料金と無料枠は2026年10月15日時点の内容です。半年ほどで変わることもあるので、契約前に各公式ページで確認してください。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。