実際に制作した6つのページを公開
「AFFINGER7 EXで、どんな記事が作れるの？」「購入しても、自分のサイトで使いこなせる？」
テーマを選ぶ前に、完成したページの雰囲気を見てみたいですよね。はまちゃんねるでは実際にAFFINGER7 EXを使い、キャンプ用品や腕時計のレビューから、家電の比較記事、WordPressの解説記事まで制作しています。
今回は、その中から6記事を公開。写真を中心に伝えるレビューと、HTML・CSSで見せ方を強化した比較記事を、実例付きでご紹介します。
ブログ記事のデザインは、装飾が多ければ良いわけではありません。商品そのものを見てほしいのか、たくさんの候補から選んでほしいのか。それによって、使う写真も比較表も変わります。
たとえば時計のレビューなら手元の写真をしっかり見せたい。家電10選なら、最初に用途と優先順位を整理してから商品を比べたい。私は記事ごとに、読者が「次に知りたいこと」へ迷わず進めるデザインを意識しています。
AFFINGER7 EXは、レビュー・商品比較・サービス紹介など、異なる目的のページを同じWordPressサイトで育てたい方に向いています。写真主体の記事も、比較表や図解を活用する記事も作れます。ただし、後半に紹介する独自のレイアウトはHTML・CSSも組み合わせて制作しています。
商品写真、使って感じたこと、メリットとデメリットを順番に読む構成です。
独自のHTML・CSSを用い、記事の入り口から購入検討までを視覚的に整理します。
AFFINGER7 EXで制作した6記事を一覧で公開
まずは今回ご紹介する6記事をご覧ください。サムネイルを押すと、それぞれの実際の公開ページへ移動できます。
Naturehike Village 13-Ti Blackレビュー中心の記事 →
Coleman インフィニティチェアマックスレビュー中心の記事 →
G-SHOCK GM-B2100D-1AJFレビュー中心の記事 →
男性・夫が喜ぶクリスマスガジェット10選HTML・CSS補強記事 →
AFFINGER7を使った本音レビューHTML・CSS補強記事 →
共働き・子育て家庭の時短家電10選HTML・CSS補強記事 →
見比べてみると、記事の目的に合わせて情報の出し方が異なることが分かります。レビュー記事では写真と使用感を中心に、比較記事では見やすさ（一覧表示）や選びやすさを意識しています。
実際の制作記事3選｜写真と使用感を主役にしたデザイン
最初にご紹介するのは、キャンプ用品と腕時計のレビュー3記事です。実際に手に取った商品や使用風景を見てもらうため、過度に装飾を増やさず、写真と文章が引き立つ作りにしています。
こうした記事の大きな強みは、メーカーの商品説明だけでは分からない発見を伝えられること。写真の順番、見出しの切り方、具体的な失敗談や注意点の入れ方もぜひご覧ください。
Naturehike Village 13-Ti Black
家族キャンプでの使い方が伝わる、暮らし目線のテントレビュー
設営しやすさだけでなく、ロッジ型の居住性や前室の使い方、暑さ・雨への備えまで説明した記事です。特に「子ども連れで荷物が多い」という場面を軸にしているため、製品のスペックだけでは想像しにくい使い勝手が伝わります。
見せ方のポイントは、使い始めの印象から設営、快適性、注意点へと読み進められる構成。見出しで論点を分け、写真を添えることで、読者が必要な情報に戻りやすくなっています。
購入前に気になる「区画サイトに収まるか」「暑い日にも使えるか」「撤収しやすいか」といった疑問を拾っている点も特徴です。キャンプ用品のように購入後の生活を想像する必要がある商品では、より具体的に説明します。
この記事の情報の流れ
Coleman インフィニティチェアマックス
写真と使用感を組み合わせて魅力を伝えるリクライニングチェア紹介
ブランド紹介から製品の特徴、座り心地、サンシェード、フットレスト、アームレストといった細部まで掘り下げたレビューです。写真の枚数が多く、外観と細部を交互に見ながら読み進められるのが特徴です。
良いところだけでなく、本体の重さやカップホルダーの使い勝手など、使って気づいた点まで触れています。「座り心地が良い」という短い感想で終わらせず、どこが快適なのかを部品ごとに説明すると、購入前のイメージが具体的になります。
特に比較的高額なアウトドア家具は、写真を見て魅力を感じたあと「サイズは？」「持ち運べる？」「使い続けられる？」と疑問が生まれます。実物写真と具体的な使用感を組み合わせた記事構成です。
この記事の情報の流れ
G-SHOCK GM-B2100D-1AJF
購入後の写真と比較情報で、時計の質感まで伝えるレビュー
実際に購入したGM-B2100D-1AJFについて、外観の質感、着用感、バンド調整、重量、ライトの使い勝手などをレビューした記事です。時計の魅力はスペック表だけでは伝わりにくいため、手元の写真や別モデルとの比較が内容を補っています。
記事冒頭で結論を示し、その後に写真と体験、機能、メリット・デメリット、口コミへと進む流れです。読者にとって「結局、満足したのか」「仕事にも使えそうか」が先に分かり、細部を確かめたい人だけが深掘りできます。
同じ商品ジャンルでも、テントは使用シーン、チェアは座り心地、腕時計は装着感と質感が購入判断の中心になります。記事の設計を商品ごとに変えています。
この記事の情報の流れ
レビュー記事では、商品に詳しい人だけが分かる言葉を並べるよりも、購入前に気になることをそのまま見出しにする方が読みやすくなります。たとえば「フットレストは必要？」「バンド調整は簡単？」「前室はどんな場面で便利？」。読者の疑問を起点にすると、写真も活躍します。
HTML・CSSで補強した制作記事3選｜図解と比較表で読みやすく
続いては、HTML・CSSでレイアウトを補強した3記事です。情報量が多い記事ほど、ただ文章を長くするだけでは読者が迷ってしまいます。
はまちゃんねるでは、解説欄、比較表、商品画像、CTAなどのデザインを記事内で使い分けています。記事内の細かなデザインは、AFFINGER7 EXの標準機能と独自コードを組み合わせたものです。
男性・夫が喜ぶクリスマスガジェット10選
季節感のある導入と、商品比較がつながるギフト特集
クリスマスらしいビジュアルを最初に見せ、その後で予算・相手のライフスタイル・使用機器の相性から選び方を整理した特集記事です。ガジェットを10個列挙するだけでなく、「通勤で使う」「仕事で使う」「自宅で楽しむ」といった具体的な場面に沿って案内しています。
記事独自のHTML・CSSで、ヒーロー、選び方、比較表、商品紹介のまとまりをデザインしています。商品画像やスペック情報が多くても、セクションを視覚的に区切ることで「いま何を比較しているか」を見失いにくくしています。
このような季節商戦の記事では、華やかさだけでなく「予算はいくらか」「相手の端末に対応するか」「重複しないか」といった買い物の不安を早めに解消することが重要です。デザインと文章の両方で選択を支える構成にしています。
この記事の情報の流れ
AFFINGER7を使った本音レビュー
Web制作の実体験を、製品比較と申し込み導線につなげる記事
AFFINGER7の機能や価格を説明するだけでなく、はまちゃんねるがWordPressサイトを運営する中でどのように活用しているかをまとめた記事です。最初に「向いている人」と「向いていない人」の結論を示し、そこから機能、公開記事の実例、メリット、注意点を説明しています。
比較表、CTAボタンなどを独自HTML・CSSで整え、WordPressテーマの紹介記事自体をデザイン実例にしています。購入を急がせるのではなく、価格・使い方・デメリットを理解した読者が次のアクションを選べる構成しています。
この記事で使っている独自のデザイン要素は、すべてがAFFINGER7の標準設定だけで完成するものではありません。テーマの土台とカスタマイズを組み合わせたことで、記事の見せ方を細かく整えています。
この記事の情報の流れ
共働き・子育て家庭の時短家電10選
生活の困りごとから商品を選べる、比較・購入ガイド
洗濯・食器洗い・掃除・料理・身支度など、時間が足りなくなりやすい家事を軸に10商品を整理した記事です。「高性能な家電ランキング」ではなく、「どの家事を手放したいか」で商品を選べる設計にしています。
導入では「ドラム式洗濯乾燥機・食洗機・ロボット掃除機」など優先候補を示し、本文では比較表、商品写真、家事工程の図解、家庭ごとの選び方へとつなげています。商品数が多い記事だからこそ、HTML・CSSでカードの役割と視線の流れを揃えている点が特徴です。
また「設置寸法」「メンテナンス」「使い始めても残る家事」まで触れることで、購入後のギャップを減らすようにしています。写真だけでなく、生活動線を図解することで、商品を使った後の変化をイメージできる記事を目指しました。
この記事の情報の流れ
季節のギフト特集と時短家電特集では、商品数は同じ10点でも、選び方はまったく異なります。前者は贈る相手と予算、後者は減らしたい家事と設置条件が中心です。デザインを揃えながら、文章の順番は記事ごとに変えている点にも注目してみてください。
AFFINGER7 EX中心の記事とHTML・CSS補強記事の違い
どちらの方法が優れているかではなく、記事の目的に合わせて選ぶことが大切です。写真を中心に見せる場合と、比較情報を整理する場合では、必要な工夫が違います。
| 比較項目 | レビュー中心の3記事 | HTML・CSS補強の3記事 |
|---|---|---|
| 中心に置く情報 | 実物写真・使用感・具体的なメリットと注意点 | 比較表・図解・カテゴリー別の案内・CTA |
| デザインの考え方 | 写真と文章を引き立てる | 情報を区切り、選びやすくする |
| 記事の流れ | 結論→写真→体験→評価 | 悩み→比較→詳細→購入前の確認 |
| 向く記事ジャンル | 単品レビュー・使用レポート・愛用品紹介 | 複数商品比較・解説ガイド・サービス紹介 |
| 制作・更新 | AFFINGER7とWordPressの編集機能を活用 | 独自CSSやHTMLの確認・保守も必要 |
| 読みやすさの工夫 | 見出しと写真を中心に読み進めやすく | 表・カード・結論枠で必要な情報を探しやすく |
初めてWordPressで記事を書く方が、最初から独自コードを大量に使う必要はありません。まずは写真と本文を分かりやすく整え、比較記事やセールス記事を作り込む段階で、必要に応じてデザインを加える方法がおすすめです。
読みやすい記事に共通する5つの設計ポイント
1．記事の最初に「誰に向いているか」を伝える
ブログ記事を読む人は、最初からすべての文章を読むとは限りません。そこで私は冒頭で「どんな人に向いているか」「先に何を確認したいか」を示すようにしています。時短家電の記事なら、まず家事のどこに負担を感じているかから考えます。
2．見出しを「読者の疑問」で区切る
Naturehikeの記事では設営・夏の暑さ・前室・雨対策など、Colemanの記事では座り心地や各パーツ、G-SHOCKの記事では着用感や操作性。商品によって気になることは違います。目次を見ただけでも知りたい答えに近づける構成を目指しています。
3．写真・比較表・図解に、それぞれ役割を持たせる
写真は見た目や質感を伝えるのに向いています。比較表は複数の候補を同じ基準で比べるのに便利です。図解は作業の流れや違いを短時間で理解してもらうときに活躍します。用途が違うものを使い分けるだけで、長い記事も読みやすくなります。
4．注意点を商品リンクより前に説明する
購入前に必要な情報は、メリットだけではありません。設置寸法、サイズ感、操作の難しさ、価格に見合うかどうかなど、不安を残したままリンクへ進んでもらうより、先に疑問を解消する方が読者に親切です。
5．デザインはサイト全体で統一し、内容は記事ごとに変える
濃紺とターコイズの組み合わせ、淡い水色の結論枠、見出しやSUMMARYのデザインを揃えることで、別の記事を読んでも同じサイトだと分かるようにしています。一方で、本文の内容や比較軸まで同じ型にしないことが大切です。
6．スマートフォンで読んでも疲れない余白を作る
パソコンでは見やすい3列の比較カードも、スマートフォンでそのまま表示すると文字が細かくなり、かえって読みづらくなります。そこで、画面が狭いときはカードを縦に並べたり、比較表だけを横にスクロールできるようにしたりと、表示方法を変えています。本文の文字サイズも、写真・ボタンとのバランスを見ながら調整しています。
とくに商品比較記事では、読者がスマートフォンから商品詳細ページへ移動する場面が多くなります。見出しを追いながら気になる商品を探し、本文で注意点を確認して、リンクを押すまでの流れが自然かどうか。その視点でスマートフォン表示をチェックしています。記事が完成したら、パソコンだけでなく実際のスマートフォンでも一度読んでみると、改善点が見つかりやすくなります。
7．アイキャッチは記事の「約束」を分かりやすく伝える
今回の6記事は、アイキャッチの作り方にも違いがあります。NaturehikeやColeman、G-SHOCKは、商品そのものが魅力を伝える写真が中心。一方で、クリスマスガジェットと時短家電の特集記事は、扱うテーマと商品数が一目で伝わるデザインです。
読者が検索結果や記事一覧でページを見つけたとき、どんな内容が待っているかを短時間で判断できるようにすることが大切です。写真を主役にするか、文字を大きく見せるか。どちらが正解ということではなく、記事に入る前に伝えたい情報によって選びます。タイトルで伝えていることと、ページを開いた後の内容がずれないようにするのも重要なポイントです。
8．広告や問い合わせのボタンを置く位置は理由を持って決める
アフィリエイト記事では、ボタンの数を増やすことだけを考えがちです。しかし、商品を十分に理解できていない段階で購入リンクが続くと、読者は必要な説明を探してページを行き来することになります。そこで、比較表の後、個別商品のメリットと注意点の後、記事のまとめなど、疑問が解消された位置にリンクを置くことを意識しています。
Web制作の記事なら、購入ボタンよりも「どんなサイトを作りたいか相談する」という行動の方が自然な場合があります。記事の役割が、商品を選んでもらうことなのか、問い合わせをしてもらうことなのか。ゴールを決めてからデザインを整えると、読者にとっても次の行動が分かりやすくなります。
9．ページ全体より先に、ひとつのセクションを完成させる
独自のHTML・CSSに初めて挑戦すると、ヒーロー、比較表、ボタン、FAQを一度に作りたくなるかもしれません。けれど、装飾の調整ばかりしていて肝心の記事が完成しなければ、読者に届く機会もありません。まずは記事冒頭と最初の見出しを読みやすく整え、その後に比較表や商品紹介へ進む方が作業を整理しやすくなります。
私も記事の種類によって、写真の大きさやカードの数を変えています。その記事に必要な情報が最も見つけやすい形に調整する。こうした小さな積み重ねが、はまちゃんねるのデザインの統一感につながっています。
AFFINGER7 EXでできること｜通常版で十分な場合もある
AFFINGER7は、WordPressでサイトの配色、見出し、記事装飾、広告ボタンなどを調整したい人向けの有料テーマです。通常版にも記事制作で必要となる多くの機能が用意されています。
EXは、通常版に加えて記事一覧のカードデザイン、個別ページのLPワイド表示、表示期間を指定するブロックなど、より細かな表現に取り組みたい人向けの選択肢です。機能の範囲はバージョンによって変わることがあるため、購入時は最新の製品案内も確認してください。
一方、今回の時短家電特集やクリスマスガジェット特集のような、独自の図解や装飾を多用する記事は、EXを購入しただけで同じデザインが自動的に完成するものではありません。WordPressテーマを土台にして、必要な部分をHTML・CSSで追加しています。
まずブログを始めたい人
記事を書く、写真を載せる、比較表やCTAを整える。基本的なブログ運営から始めるなら通常版が候補です。
サイト表現をさらに広げたい人
LPや一覧の見せ方、EX限定のブロックなどを活用し、サイト全体のレイアウトをより細かく調整したい方に向いています。
EX環境セットには、EXテーマのほかにタグ管理マネージャーPRO、PVモニターPRO、ABテストなど、記事公開後の改善に活用できるツールが含まれています。AFFINGER7 EX環境セット49,800円の内容と注意点も、あわせてご参考ください。
まずは通常版の機能を確認
記事を書くところから始めるなら、通常版でできることをチェックしてみてください。
AFFINGER7通常版の購入ページを見る →価格・付属特典・購入条件は販売画面でご確認ください。
AFFINGER7を選ぶ前に考えたいこと
完成したページを見ると、デザインの豊富さが魅力的に感じられるかもしれません。ただ、最初から細部にこだわりすぎると、記事を書く時間がなくなってしまいます。自分のサイトで何を発信するかを決めてから選ぶのがおすすめです。
記事のデザインより、まず写真と文章を充実させたい
単品レビューや体験談を中心に発信するなら、まず通常版の機能で十分なケースがあります。大切なのは、実際に撮った写真や使って感じたことを、読者が知りたい順番で伝えることです。
記事一覧やLPの見せ方をもっと細かく整えたい
商品紹介以外にもサービス案内、固定ページ、記事一覧などを作り込みたいなら、EXの機能が選択肢になります。記事単位の見た目だけでなく、サイト全体をどのように育てるかで考えてみてください。
記事公開後の広告・クリック状況も確認したい
購入ボタンや広告の配置を改善する予定がある方は、EX環境セットの管理ツールも候補です。ただし、外部ASPのリンク形式によっては計測に対応しないこともあります。EX環境セットの記事で収録内容を詳しく紹介していますので、ぜひご参考ください。
これからAFFINGER7を導入する方は、サイトの目的に合わせて通常版とEX環境セットを比較してみてください。
※購入前に最新の販売条件をご確認ください。EX環境セットはアップグレード単体とは異なります。
AFFINGER7 EXのデザインについてよくある質問
通常の見出しやレイアウト、記事装飾はテーマの機能で調整できますが、独自の図解や特集ページの一部にはHTML・CSSも使っています。まずは作りたいページを決め、必要な範囲から整えていくのがおすすめです。
はい。写真、見出し、表、商品リンクを使った基本的なレビュー記事は通常版でも制作できます。今回のレビュー例をご覧いただき、どんな順番で情報を見せるかを考えてみてください。
基本的な記事投稿やテーマの設定はHTML・CSSを直接書かなくても進められます。ただし、独自のレイアウトを細かく作り込む場合は、コードの知識や制作サポートが役立ちます。
商品を一覧で見せたり、ボタンや案内枠を整えたりする運営に活用できます。比較記事では、テーマの機能だけでなく、どの項目を同じ条件で比べるかも重要です。
テーマの変更はできますが、以前のテーマ専用ショートコードやレイアウトが残る場合があります。変更前にバックアップを取得し、見出し、画像、広告、フォーム、スマートフォン表示を確認してください。
読みやすく使いやすいページは大切ですが、見た目だけで検索順位が決まるわけではありません。読者の疑問に答える内容、独自写真、内部リンク、ページの表示体験なども一緒に考える必要があります。
WordPressでサービス案内や会社紹介、問い合わせページなどを制作する用途にも利用できます。予約システムなどの追加機能が必要な場合は、別のプラグインや開発も検討しましょう。
大きな画像をそのまま大量に読み込むと、表示速度に影響する場合があります。適切な画像サイズや形式を選び、遅延読み込みや圧縮を活用することが大切です。
まずブログの記事を書き始めるなら通常版から比較する方法が現実的です。EX限定の表現や、クリック計測・ABテストなどの管理ツールを使う予定が明確な場合は、EX環境セットも候補になります。
はい。ご紹介した6記事は公開中のWebページです。ぜひスマートフォンでも開き、見出しや写真、比較表の見え方をご確認ください。
自分が作りたい記事に合うデザインを選ぼう
今回、はまちゃんねるで実際に公開している6記事をご紹介しました。キャンプ用品と腕時計のレビューは、写真や使用感を丁寧に伝える構成。クリスマスガジェット、AFFINGER7、時短家電の記事は、比較表やHTML・CSSによる図解で多くの情報を整理しています。
私がサイト・記事制作で大切にしているのは、見た目を派手にすることより、読者が必要な情報へスムーズに進めること。そのために写真、見出し、表、CTAを記事ごとに使い分けています。
AFFINGER7 EXはその土台を作る選択肢の一つです。まずはこの6つの公開記事を実際にご覧いただき、「自分ならどんな記事を作りたいか」をイメージしてみてください。ブログを少しずつ育てたい方にも、Webサイトの見せ方を細かく整えたい方にも、ヒントになるはずです。
自分のサイトでも、伝わる記事を作ってみませんか？
まずはAFFINGER7でできることを確認し、作りたい記事やサイトの形に合うかご検討ください。
AFFINGER7通常版の購入ページを見る →価格と付属内容は販売画面をご確認ください。
機能や価格について詳しく知りたい方は、私が実際に使っているAFFINGER7のレビュー、EX環境セットの内容と注意点もぜひご参考ください。
Web制作をご検討中の方は、はまちゃんねるの無料相談からお問い合わせいただけます。
広告について：この記事にはアフィリエイト広告を含みます。リンク経由で購入が成立した場合、運営者に報酬が発生することがあります。
AFFINGER7の機能・提供内容は更新される場合があります。最新の仕様はAFFINGER7公式案内をご確認ください。