#15　読み上げ用

（オープニング）

「AIを使って、見応えのある
Webサイトを作りたい！」
でも… 「実際どうやって活用すればいいの？」
その方法は〜（AIをうまく活用すること）〜で
一撃解決します！

こんにちは、webデザイナーのshokoです。

今回は、WordPress ✖️ チャットGPTの
最強コンビを使った

おすすめ活用法5選をご紹介します！

逆に、絶対にやってはいけない落とし穴も
包みかくさずお伝えするので、
動画を最後までご覧ください。

第１選　cssコードの作成

WordPressでサイトを作っていると、
「ここだけ色を変えたい」とか
「文字サイズをもうちょっと大きくしたい」
…そんな細かい調整、出てきますよね？

でもCSSが書けないと、
「もうテーマの機能に任せよう」と
妥協してしまいがち。
そこで登場するのが、チャットGPTの出番です！

たとえば、
「特定の画像の四隅を丸くしたい」
と思ったら、チャットGPTにこう聞いてみてください。

以下のcssを書いて

WordPressテーマ：SWELL

クラス名：photo

効果：クラス名photoが指定された
画像の四隅を少し丸くする

すると、こんな感じでコードを出してくれます。

ただし、一発で決まらないこともあるので、
実際にコピペしてみて反映されない場合は、

もうちょっと根気よく
チャットGPTと会話して見ましょう。

すると、修正版を出してくれるので、

このようなやりとりをして
cssを完成させてくれます。

あとは、ご自身で数値を変えてみて
お好みの丸みに合わせてください。

問題は、「cssをどこにコピペ
すればいいかがわからない」という方。

cssクラス名とは、
冒頭の.（ドット）の次にくる部分が
cssクラス名になります。
今回の例で言うと、photo
がクラス名になります。

エディター画面で、
右の編集バーを下の方にスクロールすると
「高度な設定」という欄が出てきます。
こちらの「追加CSSクラス」に
photoと入力。

コードを貼り付ける場所は、
こちらのcss用コード。もしくは、
「外観」→「カスタマイズ」→「追加CSS」。
こちらにペースト。
（説明動画挿入）

すると、そのクラス名がつけられた
画像だけ指定のスタイルが適用されます。

ちなみにクラス名は、
自分で好きな名前をつけてOK！
「rounded-photo」や「photo1」など、
わかりやすい名前にしておくと管理しやすいですよ。

　このように、
「CSS」×「チャットGPT」の組み合わせが
WordPressで大活躍！

もはやcssを自分で書く必要はありません。

ただし、AIを上手く活用するためにも
cssの基本的な仕組みは
理解しておいた方がいいです。

第２選リサーチ

Webサイトの構成や内容を作る上で
欠かせないのが 「リサーチ」。
クライアントによって、
業種も違えば求めるターゲットも違います。
リサーチをしっかりやることで、
サービスの伝わり方やサイトの成果が
まるで変わってきますよ。

チャットGPTはこのリサーチにも
めちゃくちゃ使えるんです！

ポイントは3つ！

1. ユーザーリサーチで悩みの把握

Webサイトに来るユーザーは、
基本的に「問題を解決したい」。
何かしらの「検索意図」を持ってアクセスしてきます。
なので、まず大事なのは、
「読者はどんな悩みや叶えたい
未来を持ってるのか？」を知ること。

例えば、地域のベビーシッターサービスの
webサイトをご依頼いただいた場合。

チャットGPTにこう聞いてみましょう。

「ベビーシッターサービスのwebサイトを
依頼してもらったため、 現在リサーチ中です。
ベビーシッターサービスを利用する人が
感じている悩みや不安を10個教えて」

こうお願いすることで、
ピックアップしてくれます。

より具体的に質問すると、
リアルなユーザー像やニーズが想定でき、
ペルソナ設定のヒントにも。
コンテンツの方向性がブレなくなりますよ！

2. 競合リサーチで他社サイトをチェック

次に大事なのが、競合のリサーチ。

たとえば、チャットGPTにこのようにお願いすると便利。

「福岡市で、ベビーシッターサービスを行っている
会社のWebサイトを5つ教えてください。」

するとこのように、
サイトをピックアップしてくれます。

さらに、具体的に
エリア・サービス内容・ターゲットなどを
組み合わせて伝えると、
より的を絞って出してくれます。

また、「競合サイトの特徴と、
強み・弱みを表で比較して」

とお願いすれば、
比較表でまとめてくれるので、
分析もしやすいです！

より深く調べたい場合は、
具体的に競合サイトのURLを入力し、
「このサイトのサービスの強みを洗い出して」
と指示を出すと、
このようにサイトに記載されている
内容を書き出してくれます。

3. カスタマージャーニー分析

ちょっと聞きなれない言葉かもしれませんが、
要するに、ユーザーの行動プロセスを知ること。

サービスを
「①知る」→「②興味を持つ」→「③比較する」
→「④問い合わせ・購入する」→「⑤リピート・紹介する」
という5段階の流れを分析し、仮説を立てましょう。

これによって、必要なページ・導線・言葉の選び方が見えてきます。

チャットGPTにこう聞いてみましょう。

「出産を控えた30代女性が、
産後ケアサービスを見つけて問い合わせに
至るまでの行動プロセスを
カスタマージャーニーとして5段階で教えて」

すると、このように一覧にして出してくれます。

また、さらに深掘りをする質問もしてみましょう。

例えば、次のように聞いてみてください。

産後ケアサービスを集客・営業する際に
以下の内容を教えて
①「どこでつまずくか」 ②「どんな情報が必要か」
③「どんな感情が芽生えて、
それに対してどんな言葉をかけると心が動くか」

すると、このように瞬時に回答を出してくれます。

この3つのリサーチを
チャットGPTで回せば、
ペルソナ設定、サイト構成、訴求ポイントまで
一気に洗い出せます！

これで、「ただのAI」ではなく、
あなたの右腕パートナーに早変わり！

チャットGPTを使えばリサーチが爆速で進みます。
「もう私、凄腕マーケターじゃん！」って
思いたくなるかもしれません。

ただし！！
ここで絶対に見落としてはいけない
落とし穴が。

それは、

AIは万能ではないということ。

クライアントの強み、
歩んできたストーリーや想い、
そして伝えたい本質――

こういった“人の背景”や“空気感”は、
AIには読み取れません。

チャットGPTはあくまで
リサーチの補助ツール。
本当に大切なのは、
クライアントとの対話や
ヒアリングを通して、深い理解を得ること。

つまり、
AIを使って“事前準備の質”を
高めることはできても、
すべてをAIに丸投げするのは絶対NG！

AIが出してくれた情報を
自分の頭で整理し、考え、判断して
「だからこの設計にする」
「この導線が必要だ」と結論づけていくこと。

それが、クライアントに価値提供し続ける
「思考設計から始めるデザイナー」という在り方です。

第３選　コンテンツの案出し

「どんなデザインにするか」
の前にまず悩むのが、
“そもそもサイトに何を載せればいいのか？”
ということ。

構成や中身を考えるのって、
意外と時間がかかりますし、
「なんか情報が足りていない気がする…」
と迷うことも多いですよね。

そんなときこそチャットGPTの出番！
“中身を一緒に考えてくれる壁打ち相手”として、
めちゃくちゃ頼れる存在なんです。

たとえば、介護タクシーのサイト制作の場合。

「介護タクシーのサイトに、
安心感を持ってもらえるコンテンツを教えて」

こうお願いするだけで、
スタッフ紹介や、ご利用の流れ、
使用者の声、Q&Aなど、
目的に合った具体的な要素を
ズラッと提案してくれます！

特に相談するのにぴったりな
コンテンツは次の２つ

① Q&A（よくある質問）
ユーザーの「これって大丈夫かな？」
という不安を先回りして解消できるコンテンツ！

チャットGPTにこう聞いてみてください。

「介護タクシーのサイトで
Q&Aの項目を作っています。
介護タクシーを初めて利用する人が
検討するときに感じやすい不安と質問、
その回答例を教えて。」

すると、このように

実際のユーザーが抱えるリアルな質問と
回答例を出してくれます。

さらに、「10個にまとめて」「箇条書きで」
「優しい言葉で」といったオーダーも可能！
たたき台をサクッと用意できるので、
クライアントへの提案のスピードが
一気に上がります◎

---

② 選ばれる理由・他社との違い
競合が多い中で「ここにお願いしたい！」
と思ってもらうには、明確な言語化が必要です。

チャットGPTにこのように聞いてみましょう。

「介護タクシーの会社が“選ばれる理由”を
3つ、初めて利用する人にも
わかりやすい言葉でまとめて」

すると、このように客観的に整理してくれます。

ちなみにこの内容は、
ユーザーが最初に見る導入部分に使うのも効果的。
クライアントの価値を的確に伝えるためにも、
AIの力を借りることで
より伝わる言葉を
引き出すことができます。

「何を載せればいいかわからない…」
そんなときは、
チャットGPTに壁打ちしてみるだけで、
ぐっと道筋が見えてきますよ。

ただし、ここで注意点。

チャットGPTって本当に便利で、
どんどんコンテンツ案を出してくれます。
でも、ここで気をつけたい大きな落とし穴が。

それは、「AIがすべて正解を出してくれる」
と思い込んでしまうこと。

チャットGPTは、
たくさんの選択肢を提案してくれる
優秀な相棒ではありますが、
クライアントごとの状況や背景、
強みまでを自動で理解してくれるわけではありません。

大切なのは、
AIが出してくれたアイデアの中から、
クライアントに合う内容を
デザイナー自身がピックアップして、
意味を持たせて提案すること。

つまり

“提案の選択肢を広げるための道具”としてAIを使う。
というスタンスが、AI活用の最大のポイントです。

選ぶのはあなた。
組み立てるのも、あなた。
“思考を放棄しない”ことが、
デザイナーとしての価値に繋がります。

第４選　検索キーワード

Webサイトを作るときに欠かせないのが、検索キーワードの設計。
「SEO対策をしよう！」とよく言われますが…

実際は、
「キーワードってどうやって決めるの？」
「ユーザーはどんな言葉で検索するの？」
と迷ってしまうこと、ありませんか？

そんなときにも、
チャットGPTが超便利！

たとえばこのような使い方

「介護タクシーを探している高齢者の
家族が検索しそうなキーワードを10個出して」
「札幌エリアで介護タクシーを
検討している人が調べそうな検索語句を、
ニーズ別に分類して」

こう聞くだけで、
“検索されやすい言葉”の候補を、
ユーザー視点で提案してくれます。

さらに、気になるキーワードを見つけたら
次のように質問して深ぼってみましょう。

「“札幌 介護タクシー 通院”という
キーワードで検索する人が求めている
情報を教えて」

こう聞けば、
検索の裏側にある、ユーザーの
「知りたいこと・不安・期待」
まで洗い出してくれます！

これによって、気になるキーワードから
トップページやサービスページの設計にも
活かせるんです。

もちろん、記事コンテンツの
企画案にも役立ちますよ。

---

---

ただし、ここでも注意点
数字の正確性には要注意！

チャットGPTは検索ボリュームなどの
“数値的データ”には対応していません。

リアルなデータが必要なときは、
Googleキーワードプランナーや
ラッコキーワードなどの
専用のツールを使いましょう。

アイデア出しはチャットGPT、
データ検証は専用ツール
という使い方がGoodです！

検索キーワードは、
なんとなく決めるのではなく、
ユーザーの悩みや行動に合わせて
設計することが大切。

チャットGPTを使えば、
「どんな人に、
どんな言葉で見つけてほしいか」
という視点から、コンテンツの方向性や
設計のベースが作れるようになります。

SEO対策の第一歩は、“ユーザー理解”から。
そのサポート役として、
AIはとても心強い存在です。

第５選　文章作成

Web制作で避けて通れないのが、
「文章を書くこと」。
トップページのキャッチコピー、
サービス説明、ブログ記事、…

「何を書けばいいかわからない！」
「考えるのにすごく時間がかかる！」

そんなときに助けてくれるのが
チャットGPTです。

たとえばこんな使い方：

「東京で訪問看護を提供するサービスの
トップページ用キャッチコピーを5案出して」
「“訪問看護　不安”をテーマにしたブログの
導入文を、高齢者の家族向けに
やさしい口調で200文字書いて」

このようにお願いすると、
誰に向けた文章なのかを踏まえたうえで、
トンマナ（トーン&マナー）や
語調まで整った文案を
パパッと提案してくれます！

特におすすめなのは次の3つ！

1. キャッチコピーのたたき台づくり
   1案に悩むより、
   5〜10案を出してもらいましょう。
   いくつかの選択肢の中から
   しっくりくるものを選ぶのが
   沼にはまらないポイント。
2. サービス紹介や特徴説明の整理
   内容を伝えるだけで「わかりやすく
   構成された説明文」を作ってくれます。
3. 文章の言い換えや表現の調整
   「もっとやさしい表現で」
   「専門用語をかみくだいて」などの
   要望にも対応してくれます。

チャットGPTは、
文章をゼロから書く時間を減らし
質を上げる手助けをしてくれる最高の相棒。

でも、最終的に
「どの言葉を選ぶか」
「どんなニュアンスで伝えるか」
それを決めるのは、私たち
“伝えるデザイナー”の役割。

だからこそ、「伝わる言葉選び」の力を、
AIと一緒に磨いていきましょう！

エンディング

CSSのように
「答えが決まっているもの」は、
正直AIだけでも十分。
でも一方で、「人によって正解が変わるもの」
そこには人の視点や思考が必須です。

今の時代、ユーザーの考え方や
価値観は本当に多様化しています。
だからこそ、ユーザーを深く理解し、
相手に合わせて提案できる力。
これは、これからWebデザイナー
として活動していく上で、
絶対に欠かせないスキルです。

AIは、“ちゃちゃっと作る”
ための道具ではありません。
むしろ、
“考え抜くために使う”ツール。

“脳死で作業する”ためではなく、
AIを使って“思考をフル活用する”
この考え方が大事。

これからの時代に問われるのは、
「AIに仕事を奪われるかどうか」
ではなく、
“AIをうまく使いこなせる人に、
仕事を奪われていく”というのが現実。

だからこそ、AIを味方につけて、
あなたの提案力・設計力・伝える力を、
どんどん磨いていきましょう。

クライアントのビジネスに
しっかり伴走できる
デザイナーを目指したい。

そんな本質がわかるあなたは、
ぜひ概要欄のリンクから、
私の公式LINEとお友達になってください。

今なら、
チャットGPTでcssコードを
作成するオリジナルGPTs。
“伝える力”を最大化する講義動画。
稼ぐ力を身につける
「webデザイン起業スタートアップ
徹底解説動画」など
豪華12大特典をプレゼント中！

さらに、毎月人数限定の
個別ロードマップ作成会を
無料で開催しています。

私がサポートをした方からは

「WordPressの初案件を
単価10万円で受注できた」
「5万円だった案件が、
提案に満足してもらえて10万円に上がった」

という嬉しいお声がどんどん届いています。

あなたもお悩みを解決して
webデザイナーとしての一歩を
一緒に踏み出していきましょう。
まだの方は必ず登録してくださいね。

この動画が参考になったら
チャンネル登録・高評価も
よろしくお願いします。
今日も最後までご覧いただき
ありがとうございました。

またね〜