この度、当ブログ「INFOREVIEW」を、WordPressテーマAFFINGER7EXで全面的に作り直しました。
（AFFINGER7シリーズは2026年7月に、前テーマAFFINGER6から大きく飛躍しリリースされました）
TOPページの見直しだけではありません。
動画ヘッダー、メニュー、見出し、フッター、商品紹介エリア、おすすめ商品・ツールの固定ページなど、
サイト全体を実際に触りながら調整しています。
もともと私はAFFINGERシリーズを代々長く使っていますが、
今回あらためてAFFINGER7EXをかなり細かく触ってみて、
ものすごく強く感じたことがあります。
それは、AFFINGER7EXは高機能だからこそ、「何ができるか」以上に
「どこをどう触ればよいのか」が最初は分かりにくいという点です。
そしてもうひとつ。今回の改修では、
HTMLやCSSをほとんど知らなくても、ChatGPTと会話しながら、
コピペと画面確認しながら細かなところまで調整できる
ということがわかりました。
数年前は知らないとできない、諦めるか、しかたなく外注に出す。
もうそんなことしなくて済むレベルに生成AI能力（GPT能力）が
到達したのを実感できたのです。
これは現物をお見せしながら説明します。
私自身、HTML/CSSはまともに勉強したことさえなく、
だいたいはわかる程度であって、細かく設計できるスキルはありません。
この改修に伴う実経験を、これからAFFINGER7を使う方、
あるいは購入したものの思うように使いこなせていない方に
役立つ形にしたいと考えました。
実際に改修した当ブログのキャプチャ画像など交えながら、
AFFINGER初心者、いやWordPress初心者だけど高品質で長持ちする
独自のサイトを作りたいという方をイメージしながら説明しますね😀
AFFINGER7EXでここを変えた
ビジュアルとしてわかりやすい点に絞って、
「何をやったのか」だけをまずお話します。
何はともあれTOPページ
改修前のTOPページは、AFFINGERの標準機能＋スライダー用プラグイン（有料）
という組み合わせで表現していました。
今回はAFFINGER7EXの機能だけを用いて、プラグインなしで構築。
TOPページの大きな変更点
- ヘッダー部分に動画背景を使う（リピート再生）
- 動画背景をメニューやタイトル部分まで透過させる
- 運営ポリシー説明部分で動画背景を使う（リピート再生）
- 厳選ツール＆コンテンツ部分をAFFINGER用スライダーで紹介
- 記事をタブ分類し、「もっと読む」で無限スクロール化
- フッター部にオリジナリティをもたせて新設
- INFOREVIEWのロゴ、デザインを変更
- 新ロゴのカラーに合わせた見出し等のデザイン、カラー変更
- TOPページメニュー内容見直しとメニューバー固定化（PCのみ）
- 全体見直しに伴うスマホ表示用の各種設定最適化
とまぁ、少なくともこれだけの項目を最初にリストアップし、
ひとつひとつ丁寧に対処しました。
例えば下図で示す、TOPページ中の運営ポリシー部分。
背景に動画を置いて、そこに3つのポリシーをマッチさせた配色でボックスで作る。
簡単そうに見えて、実はこれまでの私のHTML/CSSスキルではできないレベルでした。
後ほど補足しますが、これは私が作ったGPT（AFFINGER7EX/環境セットで特典化）の力を借りて、
やりたいことを説明し、最終的に「こういう案でどう？」というのを採用した結果に過ぎません。
商品紹介も「置く」から「見つけてもらう」へ
今回かなり意識したのが、商品やツールの見せ方です。
これまではサイト内の複数箇所に商品紹介がありましたが、
改修では「おすすめ商品・ツール」として整理し、固定ページへ集約する方向で見直しました。
PCでは複数列、スマートフォンでは1列になるようにレイアウトを考えたり、
商品ごとの説明量、ボタン位置、ページ内アンカーなども調整しています。
こうした作業は、完成した画面だけを見ると簡単そうに見えます。
ところが実際に作り始めると、「この余白はどこで変えるのか」とか、
「この3列はどのブロックで作るのか」、「スマホだけ崩れるのはなぜか」といった、
小さな疑問が次々に出てくるものです。
今後も少しずつ改善したいと思いますが、キリがないので一旦ここまで。
WordPress初心者・AFFINGER初心者がつまづくところ
ここまでの話は、AFFINGER7EXを使ってやったことのポイントだけお伝えしました。
ここからがとても重要な話です。
これまでAFFINGERシリーズに限らず、どんなWordPressテーマであろうと、
「サーバーにワードプレスをインストールした」ところまでは何とか進んでも、
そこから先に進めない、つまりサイトを作り切ることができない、
という方々を本当に多く見てきました。
時間がない、とかじゃないです。
もっと基本的なところで躓いて、面倒くさくなって始められない、進まないのです。
それをひと言で表すと；
WordPressサイトを作る上での世界観が無い
このせいだと、私自身もAFFINGER7EXでリニューアル工事中に
きっとここだ！と思うところをいくつか発見しました。
世界観があるとは、こういうサイトをこう作りたいとか、ここにあんな表現をしてみたい、
とか思ったときにWordPressに備わった機能、あるいはテーマ機能のどこをどう使えばよいか、
そういったことが、ある程度はわかるという意味です。
細部まですべて知っている必要があるということではなく、
何かをしたいとき、どこでどんな操作が必要になるのかを、
アバウトでも理解できていればよいという意味です。
私の経験、またこれまでWordPressに関連したご相談を受けて、
おそらくつまづきやすい点は次のようなことじゃないかと想像しました。
WordPress/AFFINGERでつまづきやすいところ
- テーマが用意する専用画面（ここではAFFINGER管理）、カスタマイザ、ウィジェットの関係や役割がよくわからない
- Gutenbergの各ブロック機能（WordPress標準、AFFINGER専用もあり）で何ができるのかわからない
- HTML/CSSが作れない（人によってはなんのことかもさっぱりわからない）
これをマルッと言い換えるなら；
いま自分がやりたいことは、
どこを開いてどう設定すればいいのか？
これがパッと頭に浮かんでこない状態です。
ああ、もうわからない・・・
わからないし、めんどくせー！
となって挫折が毎度よくみるパターンです。
確かに最初、このことを理解するのは難しい。
私もWordPress歴ではかれこれ13年以上になります。
WordPressってこんなものだ、という既成概念もそれなりにできています。
でも、例えばここはCSSとHTMLで対処できそうだ、とかはあまり思いつきません。
もとよりWEBデザイナーでもなければ、今さらその方面の勉強したいとも思わないです。
HTML/CSSは独学である程度は知っていても、応用がきかないレベルの知識です。
なぜ知ってるかというと、ネット黎明期にガラケー向けアフィリエイトに取り組んだのがきっかけ。
当時の携帯サイト（スマホではなくガラケーです）向け、物販アフィリ用のページを
全部HTMLの手打ちで作るしかなかったので、その程度ならわかるということです。
今回は、自ら作ったChatGPT上のGPTに完璧に救われました。
HTML/CSSについても、どこを開いて実際に設定するコードそのものも
何度も提案を受け、画面を見て試しながら完成できました。
完全コピペであり、コードの中身は画面で検証できました。
また、AFFINGER管理というのは、WordPressダッシュボード画面からの
AFFINGER専用の各種設定ページになります。
これはこれで見ればなんとなくは、あーそうなんだと理解できると思います。
ただ、このAFFINGER管理画面での設定とカスタマイザで設定する値とは
いったいどういう関係にあるのか、どっちで設定すべきかのか？
とか、少なくとも初心者さんは迷うはずです。
と、これを言葉で書いてもまた難しいので、AFFINGER管理画面とはどんなものかを図示しますね。
最後のカスタマイザで追加していくCSS、AFFINGER管理、ウィジェットや記事中に設定する
HTMLなど各種こまごました設定は、すべてAI（GPT)が出してくれました。
あなたもHTML/CSSはさっぱりわからなくても大丈夫です。
コード生成はAIの得意とするところであり、WordPressサイトの検証ならPCとスマホ画面を見て進められます。
HTML/CSSに詳しくなくても、AIが提案したコードを指定された場所へコピー＆ペーストし、
PCやスマホの表示を確認しながら進めることは十分可能です。
AFFINGER7のマニュアルは、歴代AFFINGER5,6と継承してかなり充実しています。
しっかり見れば、
「Gutenbergの各ブロック機能（WordPress標準、AFFINGER専用もあり）で何ができるのかわからない」
についてはほとんど載っているのですが、個々の機能ではなくやりたいことに対しての
ワークフローという意味ではピンと来ない方もいるかもしれません。
AFFINGER7を愛用し、専用GPTをご購入者へ提供済ですが、
もっと楽に使いこなして、AFFINGER7を制するための方法があります。
その話を続けていきます。
AFFINGER7で立ち止まらないための追加特典
そこで現在、今回の改修経験をAFFINGER7購入者向けの追加特典として整理しています。
すでにご購入された方へも完成後に提供しますのでご安心ください。
私自身が実際にAFFINGER7EXを使いながら迷ったこと、
AI（GPT）とやり取りしながら解決したことを、
「最初にこれを知っていればもっと早かった」
という視点でまとめているところです。
現時点では、次のような特典案をベースに制作中です。
なおこれらの特典については、将来的に単独提供も検討しています。（AFFINGER7EX以上をお持ちの方前提）
※以下の特典案は現時点での構想です。
制作を進めながら、特典名称、分け方、役割、収録内容などを調整する場合があります。
最終的にご購入者にとって最も分かりやすく、実際のサイト制作で使いやすい形に整理します。
もともと特典でご提供しているGPTである、
KENBO流サイトプロデューサー for AFFINGER7【Growth】
で細かくやりとりしても解決できる話ではありますが、
右往左往するやりとりを減らして、一気にサイト作成に繋げる補完教材です。
これらを理解できると、あなたの中でWordPressの前提知識が作られ、
このことで一気にGPTが今まで以上に頼れる相棒となるでしょう。
以下追加特典1～3は;
AFFINGER7EXを理解する → AIと作る → 実際のケースで使いこなす
という順番で使えるように設計しています。
追加特典1：AFFINGER7EXの「どこを触るか」が分かる実践スタートガイド
AFFINGER7EXを使い始めたとき、まず迷いやすいのが、
「いまやりたいことは、どこで設定するのか？」
という点です。
AFFINGER管理、カスタマイザ、固定ページ・投稿ページの編集画面、ウィジェット、AFFINGER専用ブロック、追加CSSなど、それぞれ何のために使う場所なのかを整理します。
この特典の目的は、細かな操作を暗記することではありません。
「サイト全体の設定ならこのあたり」「ページの中身ならここ」「見た目の微調整ならここ」というように、
AFFINGER7EXを使うための“地図”を頭の中に作ることです。
本記事で述べた、WordPress／AFFINGER7EXでサイトを作るための「世界観」を理解するためのガイドです。
こちらはPDFでの提供を予定しています。
追加特典2：AI × AFFINGER7EX コピペ実践カスタマイズガイド
特典1で「どこを触ればよいか」が分かったら、次は実際に自分のやりたいことを形にします。
ここでは、HTML/CSSを詳しく知らなくても、
「こうしたい」という完成イメージをAI（GPT）へ伝える
↓
必要に応じてURLやスクリーンショットを見せる
↓
AFFINGER7EXの操作方法やコードを出してもらう
↓
指定された場所へコピー＆ペーストする
↓
PC・スマホで表示を確認する
↓
違っていたら再びAIへ見せて修正する
という一連の進め方をまとめます。
この特典で学ぶのはHTML/CSSそのものではありません。
AIへどう依頼し、その回答をAFFINGER7EXのどこで使い、どう確認すればよいのか。
その実践的な作業方法です。
「こんなデザインにしたいけれど、自分ではコードを書けない」
という場面で使うための手順書をイメージしています。
コピペと画面確認ができれば十分です。
こちらはPDFでの提供を予定しています。
追加特典3：Growth GPTと進める AFFINGER7EXケース別実践トレーニング
特典1と2で基本的な考え方と進め方を理解したあと、
実際のケースを使ってAFFINGER7EXを動かしてみるための実践編です。
たとえば、
・カスタマイザを開いて色や表示を変更する
・固定ページでカラムやマイボックスを配置する
・PCでは3列、スマホでは1列にする
・余白が合わないときに原因を探す
・AIが作ったCSSを追加CSSへ貼り付ける
・スマホだけ表示がおかしい場合にスクリーンショットを使って相談する
といった、実際によく起こるケースを取り上げます。
単なる操作一覧ではなく、
「Growth GPTへどう相談するか」
→「WordPressのどこを開くか」
→「どの項目・ブロックを選ぶか」
→「AIの回答をどこへ反映するか」
→「どこを見て正しくできたか確認するか」
までを、一連の流れとして追える内容にします。
つまり、
特典1は「AFFINGER7EXの地図」
特典2は「AIと一緒に作業する方法」
特典3は「実際のケースで手を動かす実践編」
という役割です。
すでに提供している「KENBO流サイトプロデューサー for AFFINGER7【Growth】」を、
より迷わず使えるようにするための実践教材としてまとめる予定です。
こちらもPDFでの提供を予定しています。
期間限定追加特典：背景用動画の最適化編集代行
これなにかというと、このページでもご紹介した私のブログのTOPページでも活用している
動画背景に関する特別なサービスです。
あなたのAFFINGER7EXサイトで動画背景を使う場合、
その動画のファイルサイズ、縦横のピクセルサイズ、品質レベル
などを考慮したmp4ファイルを用意しなくてはなりません。
またこれにはPC用、スマホ用とそれぞれに用意すべきです。
あなたがどこかから入手し利用可能な動画ファイルは、
例えば4Kで、数十秒あるとそれだけで数百MBのサイズになっているはずです。
例えば、元動画が4K解像度だと、横3840×縦2160ピクセルです。
これは通常のPC（スマホは言うに及ばず）での背景に使うには大きすぎます。
また30秒程度のクリップだとすると300-400MBくらいになりそうです。
AFFINGER7EXサイトに限らず、WordPressサイトでその動画を呼び出す、
つまり表示させるには重すぎて、おそらくフリーズしたように見えるでしょう。
オリジナルの動画ファイルをもとに、例えばある範囲をリピート再生させ、
しかもサイト表示でもパッと開けて負荷にならないようにするためには
いくつかの工夫をして小さな（数MBレベル）ファイルに落とさねば使えません。
この作業は意外と面倒ですし、ちょっとした知識なども必要です。
その面倒な作業を私が代行して、でかいファイルサイズの動画を、
そのままWordPressへアップロードして使える動画ファイルに圧縮・編集して
お返ししましょう、というのがこのサービスです。
ざっくりと、私のブログTOPページの中ほどに使っているクジラの泳ぐ動画で説明しましょう。
この縦横比を変え、ファイルサイズも劇的に小さくし、且つ
リピート再生時にうまくつながるような工夫をしている編集画面です。
（同じ動画が2個続いているように見えますが、最初は3個並べて編集後に2個になっています）
この背景動画編集の代行サービスは次のようなものです。
期間限定特典：背景用動画編集代行
- AFFINGER7EXまたはEX環境セットのご購入者が対象
- 所定の日時（←別途正式に特典追加時に公開）までの前記ご購入者が対象
- これまでにAFFINGER7EXまたはEX環境セットを購入された方も対象になります
- 編集用の元動画は、ご自身で入手されたものであること（著作権/利用範囲などを事前確認お願いします）
- 動画編集とはAFFINGER7EXでの用途を想定し任意の縦横サイズ、所定の品質、リピート再生有無など含めて、3～5MB程度のMP4ファイルにすることを意味します。
- 元動画、および編集後の動画送付手順は別途こちらから提示します。
- 対象とする動画は1本です。（2本目以降は有償）
前記で一定期間終了後は、この特典は消滅します。
代わって必要に応じ有料サービスとする予定です。
ざっと、AFFINGER7での追加特典についての予告となります。
ご質問があればお問合せフォームよりいつでもお気軽にどうぞ😆
AFFINGER7EX・購入特典について
AFFINGER7EXの特徴や、現在提供している購入特典
「KENBO流サイトプロデューサー for AFFINGER7【Growth】」
については、以下のページで詳しく紹介しています。
今回予告した追加特典も、完成後はこちらのページへ正式に追加する予定です。