【AI×Web制作 爆速ワークフロー③】AIと一緒にデザインを理論で整える

今だけ無料でAIチューター（先生）付きレッスンを提供しています。
AI先生があなたの学習をやさしくサポートします。今までは有料ユーザーにのみ開放していましたが、今なら無料でWeb/AI制作7講座が受講できます。 この機会にAIつきの学習を体験してみてください。
（無料、限定100名、2月8日まで）

» 今すぐ無料講座をチェックする

Webデザインのデザイン制作を行っている中で不安になるのは「正解が分からないまま手を動かすこと」ではないでしょうか？

色はこれで合っているのか。
カッコよさげな装飾を入れたけど、ちぐはぐな気がする。
そもそも、この方向性で進めて良いのか。

今回はAIを使って「デザインの基準」を整理しながら、デザインを組み立てていく工程を紹介します。
センスに頼らず、理由を持ってデザインを進めるための考え方を見ていきましょう。

• 【AI×Web制作 爆速ワークフロー】について
• AI×Web制作 爆速ワークフロー第3回｜Webデザインの制作
• デザインで一番つまずくのは「正解がわからないこと」
• ポイント｜デザイン前提を整理する
• AI活用①｜デザイン方針を言語化してもらう
• 配色とフォントを決める
• デザインを制作する
• AI活用②｜画像の提案から生成まで
• AI活用③｜デザインをチェックして調整する
• まとめ
• AIは「センス」ではなく「判断基準をくれる存在」
• 次回予告

【AI×Web制作 爆速ワークフロー】について

この連載では、AIを使ってWeb制作を“爆速化”するリアルな制作フローを、ひとつの架空案件を通して紹介していきます。
テーマはAIを使って、1ヶ月分の仕事を3日で終わらせる。

なお、この連載は「AIに丸投げして作っちゃおう」という話ではありません。
これは、実際のWeb制作ではクライアントの要望を理解し、Webサイト（ページ）に落とし込んでいく必要があるためです。

我々Skillhubがお伝えしたいのは、Web制作の仕事を請け負う中でのAI活用術です。

• 実際の制作フローの中で、AIをどのように活用するか？
• 失敗を防ぎ、AIを効果的に使うには？
• AIが優秀な今、人間（Web制作者）側に必要なスキルは何か？

前回は、各ページに掲載したい情報からワイヤーフレームの作成を行いました。
今回、第3回目では、ワイヤーフレームを元にWebデザインを制作していきます。

AI×Web制作 爆速ワークフロー
第3回｜Webデザインの制作

デザインで一番つまずくのは「正解がわからないこと」

デザイン作業で一番つらいのは、色を選ぶことでもフォントを探すことでもありません。
本当に困るのは、自分が考えている・作っているデザインが「良いのか悪いのか判断できないこと」です。

配色が合っている気がしない。
フォントがこれで正解なのか分からない。
結果として「センスがないからだ」と感じてしまう。

ですが、多くの場合これはセンスの問題ではありません。
判断基準がない状態で作業していることが原因です。

ポイント｜デザイン前提を整理する

デザインに入る前に、まずはデザインの前提条件を整理します。
ここで大切なのは、新しく考えることではなく、すでにヒアリングで決まっている内容を確認することです。

① クライアントからヒアリングしたデザイン要件

第一回で紹介したヒアリングシートを用いて、以下の条件はクライアントからヒアリング済です。

この時点で、色や雰囲気の方向性はある程度決まっていますね。

② デザインを考える上での補足前提

判断をしやすくするために、デザイン要件以外からも補足情報を取り出します。

これはヒアリングシートの内容から導き出しても、クライアントに直接聞いて掘り下げても良いです。
クライアントが積極的ではない場合は、ヒアリングリートの内容を元に、AIに情報整理をしてもらいながら「〇〇だろう」という仮定条件を作成していっても良いです。

AI活用①｜デザイン方針を言語化してもらう

デザインにAIを使うと聞くと「配色を考えて」や「デザイン見本を作って」など、デザインに直結するプロンプトを投げるイメージを持つかもしれません。

ですが、それで良いものが出来る可能性は低いです。それっぽいものは生成できても、不安要素である「デザインの方向性はあってる？」を解決できません。

Webデザイン初心者の方、デザインに不安がある方の場合、重要なのは、AIに答えを出させることではなく、判断基準を言語化させることです。 AIを「色決め係」ではなく、「なぜそれが良いのかを説明してくれるアートディレクター」として使います。

1. AIに情報を渡してデザイン方針を固める

AIには、先ほど整理したデザイン前提をそのまま渡します。
その上で、次のような視点で質問します。

このサイトのデザイン方針を言語化してください。
目指すトーンや雰囲気、避けたい表現、全体として大切にすべき考え方を整理してください。

ポイントは、具体的な色やフォントを求めないことです。
まずは、このサイトがどんな方向のデザインを目指すべきかを、言葉として整理してもらいます。

　　↓

実際にChatGPTに送信したところ、上のようなデザイン方針が出力されました。
一瞬「長いし、よく分からないかも」と感じるかもしれません。

ここで決めているのはデザインそのものではなく、サイト全体のデザイン方針をまとめたもので、いわば「デザインの軸」にあたります。この軸があることで、実際にFigmaでデザイン制作を行っている途中で迷いが出たときに、「この判断は方針に合っているか」という視点で確認できるようになります。

ただし、このままでは実際のデザイン作業には使いづらいですね。
次のステップとして、この内容を「判断に使える形」に整理します。

• 配色に関するルール
  
• フォントに関するルール
  
• レイアウトに関するルール
  
• その他のルール（UIパーツやアニメーションの考え方など）

これは、新しく考える作業ではありません。
AIが言語化してくれた方針を、デザイン用の簡単なルールに翻訳するイメージです。

配色とフォントを決める

デザイン方針が言語化できたら、次は配色とフォントを決めていきます。
ここで大切なのは、「映える色を選ぶ」「それっぽいフォントを探す」ことではありません。デザイン方針に則り、企業やブランドイメージを伝えられるものを選択していきます。

実際にやることはとてもシンプル。
先ほどAIが出力したデザイン方針を、そのまま判断材料として使います。

■ 配色を決めるときの考え方

今回のデザイン方針では、次のような考え方が示されていました。 要点としては、以下の３つ。

• 誠実で落ち着いた印象を大切にすること。
  
• 革新性は派手さではなく、整理された情報や余白で表現すること。
  
• コーポレートカラーは「軸」として使い、使いすぎないこと。

これを、そのまま配色ルールに変換します。

• ベースカラーは白やごく薄いグレーを中心
  
  • 教育向けで情報量が多いサイトにおいて、可読性と安心感を優先する。
• コーポレートカラーは見出しや区切り、CTAなど「意味のある場所」に限定して使用する
  • 青いサイトではなく「青が効いている」サイトにすることで落ち着いが印象にする。
    

この時点で、配色の方向性はほぼ決まっています。
色を増やすかどうかで迷ったときは、「これは本当に軸として必要か」という視点で判断します。

例えば、CTAまで全部同色（青一色）というのは、上品だけど弱いと感じたとします。
デザイン方針という軸があれば、以下の様にAIに相談することもできます。

CTAのボタンは目立たせたいので、黄色～オレンジあたりの色を使おうか迷っている。デザインの方針からは外れてしまうと思う？

すごい返信が来ました。 目立たせる＝補色、となんとなく候補の色を挙げましたが、きちんと理屈付けしたうえで「彩度低めの落ち着いた色なら良い」という答えが導き出されています。
これで使う色を絞り込めますし、クライアントにデザイン意図を聞かれたときにも役立ちます。

■ フォントを決めるときの考え方

フォント選びも、同じようにデザイン方針から考えます。

今回の方針では、「落ち着いている」「可読性最優先」という条件がありました。

まずは、可読性が高く、情報構造が分かりやすいフォントをベースに考えます。
この段階で、個性的すぎるフォントや装飾的な書体は候補から外れます。

見出しは太くしすぎず、余白と組み合わせて強弱をつけます。
本文は行間を広めに取り、長時間読んでも疲れにくいことを優先します。

デザインを制作する

これまでに整理したデザイン方針をもとに、ワイヤーフレームを実際のWebページとして成立するデザインに落とし込んでいきます。
見た目を大きく変えるというよりも、「なぜそうするのか」を確認しながら、整えていくイメージです。

実際にFigmaでデザインを組む作業は、私たち人間が行います。
何から手を付けていいか迷った場合は、最初に配色とフォント、余白の取り方から決めていきましょう。
ここが固まるだけで、ワイヤーフレームは自然と「デザインされた画面」に近づいていきます。

下図は、ワイヤーフレームから見出しや文章の内容自体は変えていません。
変えたのは、色の使い方と余白、そして情報の強弱の付け方だけです。

• 左：ワイヤーフレーム
  
• 右：決めたデザイン方針に則って整えたもの
  

この段階で、画面としての整理感や読みやすさは大きく改善されました。
一方で、全体をフラットに整えたことで、少しだけ「静かすぎる」印象にもなります。

今回のデザイン方針では、派手さは抑えつつも、「現場に寄り添うサービスであること」。
そこで次に考えるのが、ファーストビューに背景画像を取り入れるか、入れるとしたらどんな形にするか、です。 画像選定の判断を、感覚ではなく言葉に基づいて行うために、ここでもAIを活用します。

AI活用②｜画像の提案から生成まで

先ほど整理したデザイン方針を前提に、ファーストビューに使う背景画像についてもAIに相談します。

まずはAIに、どのような背景画像が適しているかを相談します。
制作内容によって聞き方は変わりますが、ここで大切なのは次の一言です。

デザイン方針を元に考えてください。

この一文を入れることで、見た目の好みではなく、方針に沿った提案が返ってきやすくなります。
実際に相談すると、どのような画像が適しているか、その理由とあわせて整理してくれます。

　　↓

クライアントから素材提供がない際には、ストックフォトサイトで「デザインにマッチする画像」を探します。その際に、候補が絞れていないと時間がかかってしまいますよね。
あらかじめイメージの方向性を言語化できていると、素材探しの時間を大きく短縮できます。

もし条件に合う画像が見つからない場合は、画像生成を使うのも一つの方法です。
このとき、いきなり画像生成に投げるのではなく、まずプロンプトとして整理してもらうのがおすすめです。デザイン方針から逸れにくいプロンプトを考案してくれますよ。

　　↓

画像生成は一度で理想通りの結果が出るとは限らず、何度か調整や再生成を行うことも多いため、プロンプトを別でまとめておくと扱いやすくなります。
整理したプロンプトは、Adobe Fireflyのような画像生成AIにもそのまま流用できます。

画像生成の具体的な使い方については、こちらの記事で詳しく解説しています。

AI活用③｜デザインをチェックして調整する

ワイヤーを元にデザインを組み、配色や余白、背景画像の方向性まで決まったら、最後に全体を俯瞰してチェックします。ここでの目的は「最初に決めたデザイン方針からズレていないか」を確認することです。

完成したデザインを添付するか、文章で説明し、次のような視点で確認を依頼します。

このデザインが、最初に定義したデザイン方針に沿っているかをチェックしてください。
トーンや印象にズレがあれば指摘してください。

AIは、配色の使いすぎや情報の詰め込みすぎなど、人間が見落としがちな点を客観的に指摘してくれます。

「ここは少し強すぎる」「この要素は主張しすぎているかもしれない」といったコメントは、最終調整のヒントになります。

重要なのは、AIの指摘をそのまま採用することではありません。
判断基準として使い、「なぜそう感じるのか」 「なぜAIがそうレビューをしたのか」を考えながら微調整することが大切です。

まとめ

AIは「センス」ではなく「判断基準をくれる存在」

第3回では、デザイン制作の工程にAIを取り入れる方法を紹介しました。
配色やフォント、画像選定、最終チェックまで、AIはさまざまな場面で活用できます。

センスに自信がなくても、最初にデザイン方針を固めておくことで、デザインを進められます。判断に迷ったときの拠り所を示す存在として、AIはあなたをサポートしてくれるでしょう。
根拠に基づいたデザインなら、クライアントへの説明もスムーズ。信用を得ることにも繋がります。

■ AIを使うメリット

デザイン制作にAIを取り入れる最大のメリットは、迷う時間を減らせることです。
配色やフォント、画像の使い方について「なぜそうするのか」を言葉で確認できるため、感覚だけに頼らず判断できます。

また、客観的な視点でチェックしてもらうことで、自分では気づきにくい「ズレ」にも気づきやすくなります。結果として、制作スピードだけでなく、安心感も大きく変わります。

■ AIを使う注意点

AIの提案を、そのまま正解として採用しないことも大切です。
AIはあくまで判断材料を出してくれる存在で、最終的に決めるのは人間です。
AIは考え方を支えてくれる補助輪のような存在だと捉えると、うまく付き合えるようになります。

また、前提となる情報やデザイン方針が曖昧なままだと、AIのアウトプットもブレてしまいます。
まずは人間が「何を目指すのか」を整理し、その上でAIを活用することが重要です。

次回予告

次回は、作成したデザインをそのままWebページにするための「コーディング」に進みます。

HTMLやCSSを一から書くのが不安・時間がかかるという方でも、AIを使えば構造を理解しながら実装を進めることができます。
デザインを崩さず、効率よく形にしていく方法を解説します。

Skillhubのご案内

この連載で紹介しているフローは、基礎があってこそ再現できるものです。
Skillhubでは、以下のようなことを、初心者向けに体系的に学べるカリキュラムを提供しています。

• Webサイトの構造の考え方
• なぜその構成・デザインになるのか
• AIが出したコードや提案を“理解して直せる力”

基礎知識を学べる無料講座もご用意しています。
この機に、AIを活用するために必要な基礎力を身につけちゃいましょう！