MD-Blog_Web Creative

Webディレクターの仕事は、華やかな企画やデザインチェックだけではありません。クライアントへのわかりやすい説明、制作物の品質管理、納品後のマニュアル作成......。これらは、プロジェクトを円滑に進めるために重要な業務です。

しかし、ここに時間をかけすぎて、肝心の「より良いものを作る時間」が圧迫されてしまっては本末転倒です。細部までこだわりたい〜でも、時間は有限。このジレンマを解消するために、ChatGPTやGeminiなどのAIを「専属のアシスタント」としてチームに迎え入れています。

元デザイナーとしての自分のこだわりを維持しつつ、制作進行をスムーズにするために。私が実務でAIに任せている5つの業務をご紹介します。

【活用1】用語の「例え話」メーカー

ご依頼いただくクライアントは、皆様必ずしもWebにお詳しいわけではありません。どの分野においても、業界内では当たり前の用語でも、専門外の方にとっては「何のことやらさっぱり」というのはよくある話です。

そんな時、専門用語を使わずに直感的に理解していただくために、相手の業界（例：飲食、不動産）に合わせてAIに「うまい例え話」を作らせています。

非エンジニアである私自身も、技術用語の腹落ち感を高めるために活用しているプロンプトです。

▼プロンプト例

あなたは「説明の達人」であるWebディレクターです。
IT知識のない方に向けて、以下の技術用語をわかりやすく説明する「例え話」を考えてください。

【説明したい用語】
* API（アプリケーション・プログラミング・インターフェース）

【ターゲット】
* 飲食店のオーナーシェフ
* 普段はスマホ操作がメインでPCはあまり触らない

【依頼内容】
APIの役割を、ターゲットに馴染みのある「レストランの業務（ウェイターや厨房の動き）」に例えて説明してください。
「API＝ウェイター」という切り口で、以下の構成で文章を作成してください。

1. 一言で言うと？（キャッチーなフレーズ）
2. 例え話での解説（客、ウェイター、厨房の関係で説明）
3. 結論（だから、このシステムを入れると便利なんです）

▼活用のポイント

相手の「得意分野」に寄せる

相手の職業や趣味に合わせることで、理解度が格段に上がります。

厳密さより「伝わりやすさ」

技術的な正確さよりも、イメージの共有を優先させます。

【活用2】思考の幅を広げる「アイディアの壁打ちと構成案」

ネタ出しは可能性を広げるクリエイティブな工程で、楽しいものではありますが、一人でPCに向かっていると視野が狭くなりがちです。

AIを「編集パートナー」として扱い、壁打ち相手になってもらうことで、自分一人では思いつかなかった切り口や視点を取り入れることができます。

▼プロンプト例

あなたは優秀なWebプランナーです。 
現在、中堅IT企業の「採用サイト」のリニューアルを企画しています。 

【ターゲット】
30代前後の経験者エンジニア 
技術向上意欲が高く、裁量権を持って働きたい人 

【課題】
現状は「アットホーム」「仲が良い」という訴求だが、ターゲットに響いていない。 
「技術への本気度」や「自由な働き方」を、競合と差別化できる言葉で伝えたい。 

【依頼内容】
ターゲットの心を掴むサイトの「メインコンセプト（キャッチコピー含む）」を、 
切り口を変えて3パターン提案してください。 

1. 【挑戦・成長軸】：技術的な高みを目指す人に刺さる案 
2. 【環境・自由軸】：働きやすさとプロ意識を両立させる案 
3. 【意外性・インパクト軸】：業界の常識を覆すようなエッジの効いた案 

また、その中で最もターゲットに響きそうな案を1つ選び、
TOPページの構成案（セクションの流れ）を箇条書きで作成してください。

活用のポイント

「切り口（軸）」を指定する

あえて思考の枠組みを指定することで、アイディアの幅を強制的に広げます。クライアントとのやりとりの中で得られる情報であり、人間にしか指定できない部分です。

構成案まで落とし込ませる

抽象的なアイディアで終わらせず、Webサイトとしての形（ワイヤーフレームの元）まで具体化させます。

【活用3】デザインの解像度を上げる「リアルなダミーテキスト・キャッチコピー作成」

やりがちですが「あああああ」「Lorem ipsum」などのワイヤーフレームに設置するダミーテキストは、デザインの完成イメージを遠ざけます。

ターゲットや商材に合わせた「生きたテキスト」をAIに生成させることで、ワイヤーフレームの段階でクライアントと世界観を共有できますし、デザイナーが迷わずデザインできるための設計図づくりにもなります。これが結果的に、手戻りを防ぎ、デザインの質を高めることに繋がりますね。

▼プロンプト例

あなたはプロのWebコピーライターです。
以下のWebサイトのワイヤーフレームに挿入する、「具体的で、デザインのイメージが湧くダミーテキスト」を作成してください。

【サイトの概要】
商材：自宅ポストに届く、スペシャルティコーヒーの定期便「Daily Brew」
ターゲット：リモートワーク中心の30代会社員。家での時間を豊かにしたい人。
トーン＆マナー：上質、リラックス、親しみやすさ（高級すぎない）。

【作成してほしいパーツ】
1. メインビジュアルのキャッチコピー（3案）
20文字以内。改行位置がわかるように作成してください。
2. 「3つの特徴」セクションの原稿（3セット）
見出し：15文字以内
 本文：60〜80文字（3行程度で収まるイメージ）
3. コンバージョンボタン（CV）の文言（3案）
「申し込む」等の単純なものではなく、クリックしたくなるマイクロコピー。

【禁止事項】
「最高のコーヒー」のようなありきたりな表現は避ける。
抽象的な表現ではなく、具体的な生活シーンが浮かぶ言葉を使う。

活用のポイント

文字数を指定する

想定文字数で出力させることで、デザイン崩れを未然に防ぎます。

マイクロコピーまで指定する

ボタンの文言一つにもこだわることで、UXへの配慮を示します。

「ありきたりな表現」を禁止する

サイト独自の魅力を引き出すための工夫です。

【活用4】脱・目視チェック！「自作ツールによる品質管理（整合性チェック）」

実はこれが一番の実用例かもしれません。

CMSを得意とするMONSTER DIVEでは、登録データの移行や更新、チェックなどの業務が日常的に発生します。指示書とデータの突合チェックで目視は避けたい...！

そんな時はスプレッドシートを使い「やりたいこと（要件）」さえ言語化できれば、複雑な関数やプログラミングコード（GAS）はAIが書いてくれます。コードが書けなくても、目視確認という不安定なチェック体制から脱却し、確実かつスピーディな品質管理が可能です。また、実際に狙ったとおりの結果がでると謎の達成感を得られ気分が良いです。

▼プロンプト例

あなたは優秀なエンジニアです。
Googleスプレッドシートで、CMSに入稿するデータのバリデーション（整合性チェック）を行いたいです。

【対象データ】
* A列：ページタイトル
* B列：URLスラッグ（例：about-us）
* C列：タグ（例：#AI関連）

【解決したい課題】
B列のURLスラッグの中に、以下の「NGルール」に該当するセルがあれば、背景色を赤くする、またはD列に「NG」と表示させる方法を教えてください。
B列のURLスラッグが「Blog」の場合はC列にタグが必須なので、空欄の場合には背景色を黄色くする

【NGルール】
1. 半角英数字とハイフン（-）、アンダースコア（_）**以外**の文字が含まれている（例：全角文字、スペース、?、&など）
2. 先頭または末尾がハイフンで終わっている

関数（正規表現）で解決できるか、Google Apps Script（GAS）が必要か判断し、
最適なコード（または関数）と設定手順を教えてください。

活用のポイント

目視チェックからの解放

人的ミスをゼロにし、精神的な負担を減らします（最高最高最高）。

リアルタイムなフィードバック

入力した瞬間にアラートが出るため、その場での修正が可能になります。

【活用5】CMS操作マニュアルの「手順書」作成

納品時の重要タスクである「操作マニュアル作成」。クライアントのために丁寧な資料を作りたい気持ちはありますが、操作しながらスクショを撮り、説明文を考える作業は非常に工数がかかります。

そこで、操作しながら取った箇条書きのメモを、AIに「丁寧なマニュアル用語」へ清書してもらいましょう。ホスピタリティと効率化の両立です。

▼プロンプト例

あなたは「マニュアル作成のプロ」であるテクニカルライターです。Webサイトの管理画面（CMS）の操作手順書を作成しています。

【ターゲット（読み手）】
* パソコン操作に不慣れなWeb担当者
* 専門用語は苦手。「わかりやすく、優しく」教えてほしい。

【依頼内容】
私が操作しながら取った以下の「メモ」を元に、クライアントにそのまま渡せる「丁寧な操作手順テキスト」に書き直してください。

【書き方のルール】
* ステップ形式（手順1、手順2...）にする。
* ボタン名やメニュー名は【 】で囲んで強調する。
* 「〜してください」という丁寧語で統一する。

【メモ】
ログイン→左の投稿→新規追加→タイトル入れる（必須）→本文書く→右のカテゴリ選ぶ→アイキャッチ画像設定（推奨サイズ：1200x630px）→公開ボタン

活用のポイント

ステップ形式への変換

そのまま資料に貼り付けられる形式で出力させます。

表記揺れの統一

AIに任せることで、誰が書いても統一されたトーン＆マナーのマニュアルになります。

まとめ：「AIを使う」のではなく「AIと働く」

今回ご紹介した5つの業務は、今までは時間をかけて行っていたものばかりです。これらをAIという「優秀なアシスタント」に任せるようになってから、もっと深くクライアントの課題に向き合ったり、デザイナーとデザインの微調整を行ったり、「人間がやるべき本質的な仕事」に注力することが可能となりました。

AIを、クリエイティブの品質を底上げするための手段として、うまく付き合いながら、クライアントにとってベストな制作を追求していきたいと思います。

※記事内のイラストはすべて、Gemini（Imagen 3）で生成したイメージです。