案#30 AI × WordPress 最強の独学法

画像

①

②

Elementor

Cocoon

SWELL

③SWELLのロゴは同上

④

⑤

⑥

⑦

⑧はギガファイル便にて

⑨

11

12

13

14

15

17　動画gigaファイル便で送ります

18

１９　動画gigaファイル便で送ります

---

＜オープニング＞

AIを使ってホームページ制作、
ここまで独学できるの！？
すごい！と評判です。
こんにちは、Webデザイナーのshokoです。

今回は、無料のAIを使った
WordPressの最強独学法を
7ステップでお伝えします。

この動画を見れば、
何から始めて、どこまでやれば
仕事レベルなのかが分かり、
迷わずサイト制作を進められます。

ただし独学で一番大切なのは「順番」。
ちなみにステップ5からAIをフル活用しますが、
そこまでの土台が抜けるとかえって遠回りに。

動画の途中ではAIにサイト添削してもらえる
プロンプトもお渡しするので、
途中をスキップせず
順番どおりに最後までご覧ください。

(37秒)

＜STEP1：AIの苦手分野を知る＞

まず最初のステップは、
AIを使うことではありません。

AIに全任せできない領域を知ること。

ここを間違えると、
むしろ学習効率が一気に下がります。

AIはとても便利ですが、
“何でもできる先生”ではありません。
得意なことと、苦手なことが
はっきりしています。
AIの苦手分野は大きく2つ。

1つ目：人の気持ちを決めること

成果の出るホームページは、
情報が正しいだけでは成立しません。

誰に向けたものか、
どんな不安を持っている人か、
なぜこのサービスを選ぶのか。

ここには必ず「人の理解」が必要。

AIは分析はできますが、
責任を持って判断することはできません。

ここが、人が介在する価値です。

２つ目：運用できる形にすること

AIが出した文章やコード、画像を
WordPressで実装できる人にならないと、
AIを使う側には回れません。

ここでひとつ注意点があります。
AIはとても優秀ですが、
あなたのサイト環境までは把握していません。

WordPressでは、
テーマとプラグインの組み合わせや
相性がとても重要。

例えば、
「このプラグインを入れると
こんな機能を追加できます」と
AIに提案されることがありますが、
すでに使っているテーマやプラグイン
によっては機能が重複し
動作不良やレイアウト崩れなどの
エラーの原因になることも。

AIは一般的な解決策を提示してくれますが、
個別のサイト環境までは判断できません。

最終的にサイトを完成させるのは人の力です。

だからこそ、
AIを補助として使いながら
自分で実装できる力を
身につけていきましょう。
(2:05)

＜STEP2：テストサイトを作る＞

独学が止まってしまう原因の一つは、
サイトが壊れてしまうんじゃないかという恐怖心。

本番のサイトだと、
「触って大丈夫かな」
「設定変えて表示が崩れたらどうしよう」
と手が止まってしまいます。
これが、独学が進まなくなる典型的な状態。

なので、
どうなってもいいサイトを1つ用意しましょう。

触って壊して、戻して、また試す。
この安心できる“実験環境”があるだけで、
学習スピードは一気に上がります。

おすすめは、サブドメインで作る方法。
本番サイトとは完全に分けて運用できるので、
本命を守ったまま、
気にせず触って試せるサイトを用意できます。

サブドメインの具体的な作り方は、
こちらの動画で手順を解説しているので、
ぜひご覧ください。

また、練習としてサイトを作ってみる時には必ず
設定＞表示設定から
「検索エンジンでの表示」の欄で
「検索エンジンがサイトを
インデックスしないようにする」
にチェックを入れるようにしましょう。
これは、「検索結果には載せない」という意味。
つまり、ググっても表示されないように
することができます。(3:03)

＜STEP3：使うテーマを1つに絞る＞

ここ、かなり重要で、今後の分かれ道になります。

独学が進まなくなる人の多くは、
努力不足ではなく、
情報がバラバラになってしまうことが大きな原因。

WordPressは、テーマが違うと
設定画面も、作り方も、
使える機能も全部変わります。

例えばよくあるのが、
Elementorの動画を見て勉強して、
Cocoonの記事を読んで、
SWELLのブログを参考にする。
足りないところはプラグインで代替（だいたい）…
という学び方。

それぞれの情報は間違っていないのに、
やり方が全部違うので、
自分のサイトでは再現できないんです。

その結果、
「ちゃんと調べているのに進まない」
という状態に。

なので最初は、
テーマを1つに絞って一点突破してください。

私は SWELL をおすすめしています。

理由はシンプルで、
日本でのユーザー数が多く、
検索したときに情報が圧倒的に
見つかりやすいから。

独学では「困ったときに調べられるか」が
学習スピードに直結します。

他にもSWELLをおすすめする理由は
たくさんあるんですが、
詳しくはこちらの動画で解説しているので
参考にしてください。(4:04)

＜STEP4：一通り触って全体像をつかむ＞

WordPressは、
投稿ページ、固定ページ、カスタマイズ、テーマ設定、プラグインなど、
いくつもの要素が組み合わさって動いています。

ノーコードでサイトは作れるんですが、
機能が多く最初はどこを触れば何が変わるのかが分かりにくく、
複雑に感じやすいです。

ただ、ここで大事なのは
100%理解することよりも慣れること。

完璧に覚える必要はありません。
まずはテストサイトで

・ページを作ってみる
・画像を入れてみる
・色を変えてみる

というように、ひと通り触ってみてください。

なぜこれが必要かというと、
この後のステップでAIを使うときに
大きな差が出るから。

WordPressをあまり触ったことがない状態だと、
AIの提案が合っているのか、
自分のサイトに適しているのかを判断できません。

AIは答えをある程度出してくれますが、
その答えを使えるかどうかを決めるのは人間です。

なのでまずは、
自分の手で触って体験として知っておきましょう。

最初に行う基本設定については、
こちらの動画で具体的な手順を解説しているので、
参考にしてみてください。

この“触った経験”が、
次のステップでAIを使いこなすための
土台になります。(5:09)

＜STEP5：同じテーマで作られた
サイトをトレースしてみる＞

これ、独学でスキルアップする上で
めちゃくちゃ効果があります。

実はデザイン制作を学ぶときも、
最初は0からオリジナルで作るのではなく
模写から入ります。
バナー制作やLP制作でも同じで、
お手本を再現することで
構造やバランスが分かるようになるんです。
WordPressでサイト制作を学ぶときも同じで、
非常に有効な練習方法。

実際に、私が講師をしている
就労支援事業所でも
利用者さんはWordPressを
ほとんど触ったことがない状態から
既存サイトをトレースすることで
自分からたくさんの学びを得て
ぐんぐん成長しています。

ゼロから作ろうとすると、
「何をどう組み立てるか」が分からず
手が止まりやすいんですが、
お手本があると、細部を観察して
再現することで作り方が身についていきます。

余白の取り方や文字サイズ、ボタンの形、
スマホ表示の見え方まで。
こういう細部が表現できるようになると
一気に上達します。

「学び」の語源は「まねび」。
つまり“真似ること”が学びのスタート。

もちろん完全コピーはNGですが、
学習段階で真似をするのは、
昔からある王道の習得方法です。

まずはその「お手本サイト」を探すんですが、
ここからがAIをフル活用するフェーズ。

例えば、
「SWELLで作られた医療業界の
サイトを5個出して」というように
チャットGPTに指示を出すと、
同じテーマで作られたサイトの候補を
ピックアップしてくれます。

そして、このサイトが本当にSWELLで
作られているかは自分でも確認可能。

Googleで対象のサイトを開き、
右クリックして「検証」を押すと
ディベロッパーツールが開きます。
その中の wp-content/themes を開くと
テーマ名が表示されています。
このようにして使用テーマを
調べることができます。

ここまでの下準備ができたら
実際に再現してみましょう。
具体的な操作方法の動画は過去にも
たくさん出しているので
私のチャンネルを辞書のように使えるように
チャンネル登録されることをお勧めします。

そして、トレースしていて
自力でできなかった時。
ここでもAIの出番。

再現したいサイトのURLを用意して、
「このサイトの○○の部分を、
SWELLで再現するにはどうしたらいい？」
と聞いてみてください。
ちなみにこの質問を私が試してみたところ、
GeminiよりもチャットGPTの方がここでは
提案の精度が高かったので
チャットGPTの方がお勧めかなと感じました。

AIは、
使うブロックの候補や設定の方向性、
必要であればCSSの案まで出してくれるので
詰まったところをピンポイントで突破可能。

さらにここ、もう一段
おいしいポイントがあるんです。

このステップで作ったサイトが
もし「いい感じ」に仕上がったら、
そのまま 見本サイト＝ポートフォリオに
育てられます。

もちろん完全コピーはNGなので、
文章はAIで言い換えを作り、
画像はフリー素材で探すか、
Googleが出しているAI「nanobanana」に
似た雰囲気の画像を生成してもらいます。
あと、架空サイトを作る上での店舗名の
候補を出してもらったり
ロゴを作ってもらったりすることも
AIでできちゃいます。
ちなみにこちらの架空サイトのロゴも
AIで作りました。

そうすると、
練習で作ったサイトがそのまま
ポートフォリオになるので、一石二鳥。

まずは1サイト、完成度よりも、
“手を動かすこと”を優先してみてください。(8:10)

＜STEP6：架空サイトを0からAIでつくってみる＞

ここでやるのは
「お客様から依頼を受けた」と仮定して、
1件の制作を最初から最後まで
体験するトレーニングです。

実案件で多くの人がつまずくのが
「ヒアリングした内容を
どう整理して設計に落とすか」

ここでは、AIを使いながら
ヒアリング → 設計 → ワイヤーフレーム → ラフ案
までを0からAIで作って、
一通りの制作の流れを掴みましょう。

この流れを一度経験しておくことで、
実際にお仕事をいただけた時に
「どう進めればいいか」が分かる状態になれます。

ここでは３つのAIをフル活用！
手順は次の３つ。

① 仮想クライアントの情報を作る
使うAIはGeminiかチャットGPT、
どちらでもOKです。
私が特典でお配りしている
ヒアリングシートのPDFを読み込ませて、
例えば

「添付PDFのヒアリングシートの
質問項目の通りに、あなたがワインバーの
店主になったという想定で回答を出して」
とAIに指示を出します。
すると、このように仮想クライアントの
ホームページに必要な情報を出してくれます。

このヒアリングシートは
私の公式ラインから無料プレゼントしているので
概要欄のリンクもしくはQRコードから
受け取って時短しちゃってください。

② Relume(リリューム)でワイヤーフレーム作成

Relume AIは一瞬で
サイトの構成整理からワイヤーフレームを
作成してくれる
webデザイナーにとっては神ツール。
無料版でも十分に活用できます。

ここまでAIで一瞬で作れてしまうなんで
本当にびっくりですよね。

仕上がったワイヤーフレームに
微調整を入れたい場合は
Figmaに書き出すことも可能。

もしFigmaを使ったことがないよ〜という方は
今回はFigmaを使わずにこのままラフ案に進めちゃいます。

③nanobananaでラフ案作成

Relumeで作ったワイヤーフレームを
スクリーンショットなどで切り取ります。

あとは、WordPressで再現していくだけ。
(10:36)

＜STEP7：人とAI両方にフィードバックをもらう＞

サイトを作り上げたら、
ぜひ一度、自分以外の目を入れてください。

独学で一番起きやすいのは、
自分では良いと思って作っているのに、
見る人には伝わっていない状態。
・導線は分かりやすいか
・何のサービスなのか一目で伝わるか
こういった“伝わり方”は、
作っている本人ほど気づけません。

そこでおすすめなのが、
今から紹介する3つの方法。

①：AIに添削してもらう

こちらのプロンプトに
サイトURLを入れてAIに送ると、
採点評価と改善点を具体的に出してくれます。

このプロンプトは今日の動画を
見てくれた方にだけプレゼントするので、
概要欄のリンク、またはQRコードから
私のLINEを追加して
「独学」と漢字2文字を送ってください。
このような形でお送りします。

②：身近な人に率直な意見をもらう

実際に人に触ってもらって
ユーザーテストをしましょう。
感想をもらったり、
使いやすさを聞いたりするだけでも、
かなり多くの気づきがありますよ。

もし周りに事業主の方がいれば、
ぜひその方にも見てもらいましょう。
客観的な視点がもらえるだけでなく、
「サイト制作ができる人」と
認知してもらうきっかけにもなるので
一石二鳥です。

③：プロに添削してもらう
これから収益を上げていきたいなら
経験値があるプロからのフィードバックは、
独学する上では絶対に外せません。
身近に先輩webデザイナーさんがいれば
ぜひ見てもらいましょう。

私も毎月、受講生も初めましての方も関係なく
人数限定で無料の個別添削をしているので
独学で進めている方は、
こういった機会を必ず活用してくださいね。

AIが得意な領域と、人にしかできない領域は、
はっきり使い分けることが大事。

AIは作業を助けてくれる道具。
人は価値を判断する存在。
そしてプロの視点は、独学では気づけない
“仕事の基準”を教えてくれます。

この3つを組み合わせることで、
独学でもスキルはしっかり伸ばしていけます。

サイト制作を仕事にしていく上で一番大事なのは、
目の前のクライアントに成果を出すこと。

そのためには、
クライアントの想いをどう表現するか。
エンドユーザーの悩みや欲求をどう動かすか。

この部分こそ、
作り手の理解力や提案力が問われるところです。

AIは、
その仕事をより速く、より深く進めるための
強力なサポートツール。

今日お伝えした学習方法を使って、
AIを“使われる側”ではなく、
使いこなす側になっていきましょう。

＜エンディング＞

独学を選ぶ理由は、
本当に人それぞれだと思います。

自分に向いているのかを
まず確かめたい段階の方もいれば、
本当はしっかり学びたいんだけど、
色んな事情があって、まずは自分で
できるところまでやってみようと
頑張っている方もいると思います。

私自身も、子育てをしながら
正社員で働いていたとき、
心身ともに限界まで無理をしてしまい、
働けなくなってお金の不安に
押しつぶされそうな時期がありました。
だからこそ、人にはそれぞれ事情がある
ということは痛いほど分かります。

だから遠慮せず、
今、無料で得られるものは
しっかり活用してください。

私も無料の個別相談や勉強会も
開催しているので、
いま一人で進めている方は、
こういった機会をぜひ
頼ってもらえたら嬉しいです。

一人で抱え込まず、
使える環境は使いながら、
少しずつ前に進んでいきましょう。

ただ、現実もちゃんとお伝えすると
作るスキルと稼ぐスキルは全くの別物。
今回お話しした内容を活かして稼いでいきたい！
そんなあなたは概要欄のリンクをタップして
私の公式ラインとお友達になってください。

実務ですぐに使える
業務委託契約書のテンプレートや、
迷わず初回ヒアリングができる
ヒアリングシート、
さらに私が独学からスタートして
WordPressで月収100万円
マネタイズした方法をまとめたミニマガジンなど
豪華20大特典をお渡ししています。

この動画が、あなたが
一歩踏み出すきっかけになれば嬉しいです。

参考になったら、
チャンネル登録・高評価・コメントも
よろしくお願いします。

また次の動画でお会いしましょう。(13:46)