3章：AIによるビジュアルデザインの高速化

INDEX

前の章に戻る次の章に進む

3章：AIによるビジュアルデザインの高速化

この章の目安学習時間：1時間30分

この章で到達できるゴール：

RelumeのAI機能を活用し、簡単なプロンプトからLPのサイトマップと高品質なワイヤーフレームを生成できるようになる
デザインに必要なアイコンや画像をAIで高速に生成・収集できるようになる
リアルなダミーデータを一括で挿入し、デザインの品質を向上できるようになる
デザインのアクセシビリティをAIでチェック・改善できるようになる

【3-1】アイコンと画像の生成

目安の学習時間：20分

Iconifyで信頼性の高いアイコンを探す

LP（ランディングページ）では、商品の特長やメリットを視覚的に伝えるためにアイコンが多用されます。
Iconifyを使えば、10万種類以上の豊富なアイコンから、LPのコンセプトに合ったものを瞬時に見つけることができます。

例えば、「オーガニック」「無添加」「日本製」といった特長を伝えるアイコンを探してみましょう。

EX① 特定AIツール深掘り講座_Figma編 3-1

画像生成AIでLPのイメージ画像を生成する

LPの第一印象を決定づけるキービジュアルや、コンセプトを伝えるイメージ画像も、AIで生成できます。
プラグインを使用することもできますが、Canva AIやImage-FXを使用することでより高品質な画像を生成することができます。

それでは、LPのキービジュアルで使えそうな画像を生成してみましょう。

プロンプト例：イメージ画像生成

A cosmetic serum bottle and fresh green leaves on a clean white background, with soft morning sunlight, photorealistic, high quality

（日本語訳：清潔な白い背景に置かれた美容液のボトルと新鮮な緑の葉、柔らかい朝日、写真のようにリアル、高品質）

考えてみよう！
生成された画像がイメージと少し違った場合（例：葉の種類が違う、光の当たり方が暗い）、どのようにプロンプトを修正すれば良いでしょうか？

解答例

葉の種類を具体的に指定する。（例：fresh mint leaves）
光の当たり方をより詳細に指示する。（例：bright overhead lighting）
全体の雰囲気を表す単語を追加する。（例：minimalist, elegant）

練習問題：アイコンと画像を生成してみよう

問題
「新作オーガニックスキンケア」のLPに掲載する、「商品の3つの特長」を表現するための素材を作成してください

「無添加」「日本製」「保湿力」という3つの特長を伝えるためのアイコンをIconifyで探し、Figma上に配置してください。
LPの背景に使用することを想定し、「瑞々しい緑の葉と、葉の上の水滴」のクローズアップ画像をImage-FXで生成してください。

解答（例）

【3-2】AIによるサイトマップ＆ワイヤーフレーム生成 (Relume)

目安の学習時間：30分

Relume AI Site Builderの基本

このセクションでは、本教材の核となるRelumeプラグインのAI機能を学びます。
Relumeを使えば、2章で固めた要件定義を基に、LPのサイトマップ（情報構造）と、各セクションの高品質なワイヤーフレームを、AIに一括で生成させることが可能です。

利用制限に関する注意

Relumeの利用制限について
- このプラグインは、AI Site Builderの利用に月ごとのクレジット制限がある「無料枠あり」のサービスです。
- クレジットは毎月回復しますが、使い切るとその月はAI機能を追加で利用できません。
- 本教材の演習を行う上では、無料枠で十分に対応可能です。

RelumeのAI Site Builderは、簡単なプロンプトを入力するだけで、LPに必要なセクションを提案し、それらを構造化したサイトマップと、Figma上で編集可能なワイヤーフレームを自動で生成します。

EX① 特定AIツール深掘り講座_Figma編 3-2

制作例

練習問題：別のテーマでLPを生成してみよう

問題
RelumeのAI Site Builderを使い、「IT企業の採用LP」のサイトマップとワイヤーフレームを生成してください。
プロンプトには、どのような会社で、どんな職種を募集しているかを簡潔に記述してみましょう。

解答
今回は以下のプロンプトを使用

IT企業の採用LP。ターゲットは革新的な技術と自由な働き方を求めるエンジニア、デザイナー。
トーンはモダン、プロフェッショナル、インスピレーションを与える。
以下のセクションを含める：

1.  Our Mission: 私たちの目指す未来と社会貢献について。ビジョン、ミッション、バリューを簡潔に。
2.  Why Join Us?: なぜ当社を選ぶべきか？当社の強み、独自の魅力。
3.  Our Technologies: 採用している主要技術、開発環境、技術スタック。
4.  Open Positions: 現在募集中の職種一覧。各職種へのリンクを含む。
5.  Company Culture: 企業文化、働く環境、チームの雰囲気。具体的なエピソードや写真のイメージを想起させる説明。
6.  Work-Life Balance: ワークライフバランスへの取り組み、福利厚生。
7.  Member Interview: 実際に働くメンバーの声。多様な職種のメンバーを選定。
8.  Hiring Process: 採用フロー、応募から内定までの流れ。
9.  FAQ: よくある質問と回答。
10. Contact Us / Apply Now: 応募フォームへの誘導、問い合わせ先。

各セクションには、視覚的に魅力的な画像を配置できるようなスペースを考慮すること。

入力プロンプト