AI生成のポイント
AI GENERATION POINTS
WEBデザインAI
AIでWEBデザインを効率化！
イメージ通りに指示するプロンプトのコツ
WEB DESIGN AI
WEBデザイナーの仕事は幅広く、コンセプト設計から素材集め、レイアウトなど、膨大な時間と労力を要します。しかし近年、AI（人工知能）の活用により、簡単なテキストの入力だけで一瞬にして洗練されたWEBデザインが生成できる魔法のようなツールが誕生しました。本記事では、AIツールを使ったデザイン生成のコツや、デザイン生成AIの弱点、おすすめの活用法などを紹介します。
POINT
1
プロンプトとは？プロンプトでデザイン指示するコツ
多くのクリエイティブ系AIと同様に、現在リリースされているWEBデザイン生成AIの多くは、プロンプト（呪文）と呼ばれるテキストによって欲しいデザインをAIに指示します。
プロンプトは英語で入力しますが、文章を作成する必要はなく、欲しいイメージに関連するワードを羅列するだけで指示が可能です。英語が得意な人でなくても、WEBの翻訳ツールなどを活用すれば簡単に入力できるでしょう。ただし、プロンプトは、同じ内容でも表現によってアウトプットが異なるため、イメージ通りのデザインを生成するには正しい書き方を習得する必要があります。
本章では、AIに指示が通りやすい、基本的なプロンプトの書き方について紹介します。
プロンプトの基本ルール
- 英語単語で入力する
- 単語は「, 」カンマで区切る
- ワードの入力順が結果に影響する
1具体的に指示する
AIがより具体的にイメージを生成できるよう、「飲食店のサイト」のような抽象的な指示は避け「オーガニック料理を提供するカフェレストランのWEBサイトデザイン」のように、できるだけ詳細な指示を出しましょう。以下は、プロンプトで伝えるべき情報の一例です。
- 何のデザインを作るか
- 業種は何か
- サービスにはどんな特徴があるか
- コンセプトは何か
2簡潔に指示する
具体的に書くべきとは言っても、思いついたワードを長々と無造作に羅列してしまうのはNGです。どのワードがデザインに影響しているのかが見極めづらく、想定していないイメージが生成された際にプロンプトを改善したり、デザインをブラッシュアップしたい時に調整したりすることが難しくなってしまいます。プロンプトはシンプルに、必要な要素のみを指定しましょう。
33つの要素を意識する
プロンプトは、（1）品質、（2）主題、（3）スタイルの3つの要素から受ける影響が大きいと言われています。（1）の品質は、画像のクオリティを指定するワードです。「4K」、「8K」、「HD」などのほか、「best quality」「ultra detailed」などのワードを指定することで、画像の鮮明さやディテールの作り込みなどがアップします。クオリティは高ければいいというものでもなく、ラフのイメージで出したい場合など、目的に応じて指定を調整しましょう。（2）の主題は、AIに生成してほしいものを指定するワードを意味します。WEBデザインを生成したい場合は、①で解説した通り、「●●のWEBサイト」というワードを入れましょう。（3）のスタイルは、「油絵」や「浮世絵」、「ポップアート」、「モダン」、「アニメ」など、絵のタッチを指定できるワードです。同じ内容のプロンプトでも、スタイルの指定によってはガラリと雰囲気が変わるため、サイトのコンセプトに合わせて指定しましょう。
プロンプトの重要要素
- （1）品質：画像のクオリティを指定
「4K」「8K」「HD」「best quality」「ultra detailed」等 - （2）主題：AIに作ってほしいデザイン
「オーセンティックな日本の蕎麦屋のWEBサイト」等 - （3）スタイル：絵のタッチ、WEBサイトのトンマナ
「油絵」「浮世絵」「ポップアート」「モダン」「アニメ」等
4ワードの順番を検証する
多くのデザイン生成AIでは、プロンプトに記入するワードの順番がアウトプットに影響すると言われています。例えば、品質に関わるワードは先頭に書くと良いとされています。また、デザインの主題となる業種やサービス、コンセプトもプロンプトの最初の方に記入しておきましょう。1度の生成でイメージした結果にならない場合、プロンプトの順序を入れ替えながら何度も検証してみるのがおすすめです。
5ネガティブプロンプトでイメージを絞り込む
ネガティブプロンプトとは、デザインに反映したくない要素をワード化したもの。ネガティブプロンプトを使うことで、欲しいイメージをよりピンポイントに絞り込めます。例えばレストランのWEBサイトを作る際に、シェフのイメージを前面に押し出したくなければ、プロンプトに「–no,chef」などのように「–no」を使って指定することで、シェフが登場するデザインを回避できるでしょう。
POINT
2
デザイン生成AIの弱点
プロンプトひとつで優れたデザインを量産できるデザイン生成AIですが、WEBデザイン業務の全てをAIが代替することはできません。WEBデザインにおけるAIツールの弱点を知り、デザイナーが正しくディレクションすることで、作業効率を上げクオリティの高いWEBサイトを作成しましょう。
1
WEBデザインはデザイン以外の要素も必要
良いWEBなどでデザインには、使いやすい動線や、目に入りやすいコピー、ターゲットの心を掴む動きやイメージなどの要素を組み合わせたアウトプットが重要です。AIが出したアイデアを元に、これらの要素を付加していくには、デザイナーによる方向性の設定とディレクションが不可欠でしょう。
2
コードのミスやエラーに対応できない
現在では、デザイナーが指示したWEBデザインを自動でコーディングしてくれるAIも存在します。シンプルなWEBサイトであれば、デザインから構築までの工程をAIが完結できるとも言えるでしょう。しかし、優れたUIやオリジナリティを追求したWEBサイトの場合は、実装が複雑になり、エラーも増えるでしょう。AIは自らのエラーに気づき、対応することができないため、WEBデザイナーやエンジニアは技術的なチェックを行い、細かな調整を行う必要があります。
POINT
3
WEBデザインにおけるAIの活用法&おすすめのツール
AIを上手に活用することで、WEBデザイン業務は劇的に効率化でき、デザイナーはクオリティアップに注力できます。本章ではWEBデザインにおける、デザイン生成AI活用のヒントとおすすめのAIツールを紹介します。
1素材作成
アイコンやトップイメージなどをAIツールで生成することで、思いがけないアイデアが得られたり、イメージ作成の時短につながったりと、WEBサイトの素材作成に役立ちます。
【おすすめのAIツール】Magisian
Figmaのプラグインツールで、テキスト指示でイメージ画像やアイコンデザインを生成してくれます。また、AIによるテキストの生成も可能なので、キャッチコピーやボディコピーのアイデア出しにも活躍します。とくにアイコン生成のクオリティが高く、そのままWEBサイトに使えそうな高品質なアイコンが生成できます。
料金：figmaの料金プラン スターター 無料／プロフェッショナル 月12ドル／ビジネス 月45ドル／エンタープライズ 月75ドル
サイト：Magisian
2モックアップ作成
モックアップ作成はチームのイメージ共有やデザイン効果の実証に欠かせない工程のひとつです。デザイン生成AIを活用すればモックアップ制作にかける時間を大幅に短縮できるでしょう。
【おすすめのAIツール】Uizard
手書きのワイヤーフレームを読み込んで編集可能なデザインを生成したり、スクリーンショットやURLからトンマナを読み取ってデザインに反映したりできるUIデザインツールです。また、人間の視線が集まりやすい部分をAIが予想したり、コピーの言い回しを提案してくれたりと、モックアップ作成が効率化できる便利な機能が充実しています。
料金：無料トライアル 3プロジェクト・10テンプレートまで／pro 月12ドル・100プロジェクトまで／Business 月39ドル・プロジェクト制限なし
サイト：Uizard
3WEBデザインのアイデア出し
AI画像生成ツールはWEBサイトデザインのアイデア探しも強力にアシストしてくれます。レイアウトやトンマナのヒントに役立てましょう。
【おすすめのAIツール】Midjourney
「日本料理店、UIデザイン」のように、プロンプトに“UIデザイン”を指定することで、瞬時に多数のWEBデザインアイデアを提案してくれます。また、プロンプトにアスペクト比を追加することで、WEBサイトの縦横比に近づけられるため、より正確なデザインイメージが得られるでしょう。
料金：フリープラン 月約25枚まで／ベーシックプラン 月10ドル 約200枚まで／スタンダードプラン 月30ドル 約900枚④ プロプラン：年間 60ドル（約1800枚・リラックスモードにすれば無制限）
サイト：Midjourney
POINT
4
【まとめ】AI導入でコストを抑えクオリティアップ
AIの発展はWEBデザインの生産性を向上し、クリエイターに新鮮な発見の機会を与えてくれます。AIと人間の仕事を棲み分け、自身のスキルを磨き上げていくことで、これまで以上にクリエイターの価値は高まるでしょう。WEB制作へのAI導入はクリエイターが企画力やディレクション力を強化できるきっかけとなり、トータルでのコストダウン・クオリティアップに貢献するはずです。
