記事更新日：
AFFINGER7って、デザインの自由度が高いぶん、「で、結局どれを選べばいいの？」と手が止まりやすいんですよね。
公式のデザインカードを開いてみても、企業サイト向けのものから個人ブログ向けのものまでズラッと並んでいて、名前だけでは違いが分かりにくいものもあります。
とはいえ、いざ調べはじめると、
- デザインカードってそもそも何？
- 公式のデザインカードにはどんな種類があるの？
- 自分のブログにはどれが合っているの？
こんなふうに、気になることが次々出てきますよね。
実際、私も公式の見本をひとつずつ開きながら、「これはブログ向け？ それとも仕事用サイト向け？」と見比べました。
このページでは、AFFINGER7公式のデザインカードとのんどりデザイン限定の特典デザインカードについて、個人ブロガー目線で特徴をまとめています。
「難しいことは抜きで、サクッと見た目を整えたい」
「自分のブログに合うデザインを選びたい」
そんな方は、まずここからチェックしてみてください。
AFFINGER7の初期デザインは「デザインカード」で整えます
AFFINGER7の初期デザインは、「AFFINGERデザインカード」を使って整えます。
使いたいデザインカードを選んで読み込めば、配色やトップページ、メニュー、ウィジェットなどの土台をまとめて設定できます。
AFFINGER7は細かいところまで自由に変更できる反面、まっさらな状態から触ると、
「色はどこで変えるんだっけ？」
「トップページには何を置けばいいの？」
「設定項目が多くて、どこから手をつければいいか分からない…」
と、最初のところで止まりやすいんですよね。
その点、デザインカードなら、ある程度形になった状態から始められます。
もちろん、導入しただけで自分のブログがすべて完成するわけではありません。画像やサイト名、メニューなどは自分用に変更します。
それでも、ゼロから全部組み立てるよりはずっとラクです。
公式のデザインカードとのんどりデザイン限定のカードは、どちらも基本的な導入方法は同じ。まず土台を入れて、必要なところだけ自分のブログに合わせて直していく流れです。
AFFINGERデザインカードって何？
AFFINGERデザインカードは、あらかじめ用意されたデザインデータを読み込むことで、ブログ全体の初期デザインを1クリックで設定できる機能です。
配色やトップページ、メニュー、ウィジェットなどを一つずつ設定しなくても、選んだデザインカードの雰囲気をまとめて反映できます。
AFFINGER7は細かなところまで自分好みに調整できる反面、最初から全部を設定しようとすると、
「まず、どこから触ればいいんだろう……」
と手が止まりやすいんですよね。
その点、AFFINGERデザインカードなら、使いたいデザインを選び、用意されたデータを読み込むだけで、ある程度整った状態からブログを始められます。
デザインをゼロから作り込む必要がないので、できるだけ早くブログの見た目を整えて、記事作成へ進みたい方にも使いやすい機能です。
デザインカードを使うとラクになること
デザインカードのいいところは、「何から決めればいいかわからない…」という最初のつまずきを減らしやすいところです。
最初の段階でそこが整理されるだけでも、気持ちがかなりラクになります。
- サイト全体の雰囲気を整えやすい
- 配色やデザインの統一感を出しやすい
- 初心者でも形にしやすい
- あとから自分好みに調整しやすい
最初から完璧を目指さなくても大丈夫です。
まずは土台を整えておくだけで、「ちゃんと形になってきたかも」と感じやすくなります。
一から作り込む方法との違い
もちろん、AFFINGER7は細かいところまで自分で作り込んでいくこともできます。
ただ、最初から全部を自力で整えようとすると、思った以上に時間がかかったり、途中でちょっと疲れてしまったりしやすいんですよね。
その点、デザインカードは「まずは形にする」のが早いのが大きなメリットです。
先にある程度整った状態を作って、そこから少しずつ自分好みに寄せていく。そんな進め方がしやすくなります。
いきなり全部を完璧にしようとしなくていいので、気持ちのハードルもぐっと下がります。
AFFINGER7公式デザインカード12種類を個人ブロガー目線で紹介
AFFINGER7の公式デザインカードは、2026年7月12日時点で12種類あります。
いかにも会社のホームページらしいもの、記事を並べやすいブログ型、写真や世界観を大きく見せるものなど、見た目だけでなくトップページの構成もかなり違います。
ここからは公式のサンプルを見ながら、「どんな見た目か」「どんなサイトに使いやすそうか」を、個人ブロガー目線でまとめます。
※向いているジャンルは、公式が指定しているものではなく、サンプルの見た目や構成を確認したうえでの私なりの印象です。
DemoBiz_
「DemoBiz_」は、企業サイトやサービス紹介サイトに使いやすい、きちんと感のあるデザインです。
大きなメイン画像の下に、NEWS、よくある悩み、選ばれる理由、利用の流れ、FAQ、会社概要などを並べられる構成になっています。
個人ブログというより、サービスの内容を説明して、問い合わせや資料請求につなげたいサイト向きです。
フリーランスの仕事用サイト、教室、店舗、地域の会社ホームページなどにも合わせやすそうです。
Sky-biz
「Sky-biz」は、画面いっぱいの大きな写真や動画を使ったファーストビューが目を引くデザインです。
最初の画面にキャッチコピーとボタンを置けるので、サイトを開いた瞬間にサービスの雰囲気を伝えやすくなっています。
About、Service、会社概要、スタッフブログなどを配置できるため、写真をしっかり見せたい仕事用サイトや店舗サイトと相性がよさそうです。
サロン、宿泊施設、観光、飲食店など、写真がサイトの印象を左右するジャンルにも向いています。
DEMO05
「DEMO05」は、大きなヘッダー画像の下に4つのメニュー画像とNEWSを配置した、オーソドックスなホームページ型です。
どこに何があるか分かりやすく、PCでは右側にメニューやバナーを置けるため、情報をきちんと整理できます。
少し昔ながらの企業ホームページらしい安定感があり、会社・施設・お店などの案内を分かりやすく見せたいサイトに使いやすそうです。
派手さよりも、迷わず情報へたどり着けることを優先したい方に合います。
Notes
「Notes」は、白を基調に、記事を写真付きのカードでたくさん並べられるデザインです。
PCでは記事一覧を広く見渡せて、カテゴリや別の記事も探しやすい構成。余計な装飾が少ないので、アイキャッチ画像がそのままブログの雰囲気になります。
雑記ブログ、暮らし、旅行、写真、趣味など、記事をどんどん増やしていくブログに使いやすそうです。
記事数が増えるほど、情報メディアらしい見栄えになっていくタイプだと思います。
Media
「Media」は、大きな写真を使ったトップ画面の下に、カテゴリへの入口と新着記事を配置できるデザインです。
最初にブログの世界観を見せつつ、「生活」「ニュース」「仕事」のように複数のジャンルへ案内しやすくなっています。
カテゴリが複数ある雑記ブログや、記事数の多い情報サイトと相性がよさそうです。
ただし、トップページの面積が広いぶん、記事や写真が少ないうちは少し寂しく見える可能性があります。これから記事を増やして、メディアっぽく育てたい方に向いています。
Requid
「Requid」は、背景写真の上に半透明の記事カードやプロフィールを重ねた、かなり個性的なデザインです。
一般的な白背景のブログとは雰囲気がまったく違い、背景写真ひとつでサイト全体の印象が大きく変わります。
写真、旅行、作品紹介、音楽、ファッションなど、内容と一緒に世界観も見せたいブログに合いそうです。
一方で、実用情報を落ち着いて読ませたいブログでは背景が強く感じることもありそう。見やすさよりも「この雰囲気が好き！」で選ぶタイプです。
Demo04
「Demo04」は、淡いブルーの背景に記事カードを3列で並べた、明るくすっきりしたデザインです。
構成がシンプルなので、アイキャッチ画像を差し替えれば、いろいろなジャンルに合わせやすそうです。
暮らし、旅行、趣味、レビューなど、写真を使う個人ブログにも取り入れやすいと思います。
「個性的すぎるものは避けたいけれど、真っ白なブログより少し雰囲気がほしい」という方にちょうどよさそうです。
BasicBK
「BasicBK」は、上部に記事スライド、その下にカード型の記事一覧とサイドバーを配置した、王道のブログ型です。
黒をアクセントにした落ち着いたデザインで、見た目を作り込みすぎず、記事を中心に見せられます。
特化ブログ、商品レビュー、ノウハウ、アフィリエイトなど、記事を主役にしたいブログに使いやすそうです。
「公式カードが多すぎて、どれにすればいいか分からない」という方も、まず候補に入れやすいタイプだと思います。
affinger7-diarybrown
「affinger7-diarybrown」は、ベージュやブラウン、ドット柄、テープで写真を留めたような装飾を使った、手帳やスクラップブック風のデザインです。
会社サイトのようなかっちり感はなく、書いている人の温度が伝わりやすい、かなり個人ブログらしい雰囲気があります。
日記、暮らし、子育て、料理、ハンドメイドなど、やわらかく親しみやすく発信したいブログに合いそうです。
きれいに整えすぎず、少し手作り感を残したい方にも向いています。
affinger7-tedy
「affinger7-tedy」は、淡いピンクとブルーを組み合わせた、明るくやさしいデザインです。
大きなスライド画像とカード型の記事一覧があり、写真を使いながらトップページを華やかに見せられます。
美容、暮らし、子育て、ファッション、カフェなど、かわいさややわらかさを出したいブログと相性がよさそうです。
色の印象がはっきりしているので、この雰囲気が好みに合う方には使いやすいと思います。
af7studybear
「af7studybear」は、ピンク系の模様、大きなスライド、写真付きのメニュー、丸い記事画像を使った、かわいらしく親しみやすいデザインです。
トップページにカテゴリや固定ページへの入口を作りやすく、ブログ記事だけでなく、読んでほしいページへ案内しやすい構成になっています。
勉強、資格、教育、子育て、習い事など、初心者向けに情報をやさしくまとめるサイトに合いそうです。
かわいい装飾が多めなので、シンプル派というより、最初からある程度華やかに見せたい方向けです。
Demo03
「Demo03」は、白を基調にした、すっきり読みやすいブログ型のデザインです。
上部に記事スライドがあり、メイン部分では画像と文章を組み合わせた記事一覧、右側にも記事カードを表示できます。
雑記、ノウハウ、レビューなど、ジャンルを問わず記事を読みやすく並べたいブログに使いやすそうです。
強い装飾がないぶん、自分のアイキャッチや配色をなじませやすく、「まずは普通に読みやすいブログを作りたい」という方にも選びやすいと思います。
公式デザインカードを使う前に確認
公式ページでは、デザインカードはAFFINGER7・AFFINGER7EX共通として掲載されています。
また、カードに使われている動画や画像素材は基本的に含まれていないため、導入後は自分のブログに合う画像へ差し替えます。
公式の最新データや注意事項は、こちらで確認できます。
のんどりデザイン限定のAFFINGERデザインカード特典について
のんどりデザインでは、公式デザインカードだけでなく、AFFINGER7に対応したオリジナルの「カスタムAFFINGERデザインカード」も限定特典としてご用意しています。
のんどりデザイン限定のカスタムAFFINGERデザインカードも、公式のAFFINGER7デザインカードと基本的な導入方法は同じです。
用意されたデザインデータを読み込み、使いたいデザインを選ぶだけ。1クリックでブログの初期デザインを設定できます。
難しいコードを追加したり、配色やトップページを一つずつ設定したりする必要はありません。
さらに、のんどりデザイン限定特典では、
- Firstlyシリーズ：4色
- Nuafyシリーズ：4色
の2シリーズ・合計8種類を用意しています。
同じシリーズでも色が変わると、ブログ全体の印象はかなり変わります。
爽やかな雰囲気、落ち着いた雰囲気、やわらかく親しみやすい雰囲気など、好みのカラーを選ぶだけで、自分が目指したいブログの雰囲気に近づけやすいのも、この特典のポイントです。
「デザインは気に入ったけれど、色が自分のブログに合わない……」
となりにくいように、それぞれ雰囲気の異なる4色を用意しました。
まずは、好みに合うシリーズとカラーを選んでみてください。
Firstyシリーズ-4種
Nuafy（ニュアファイ）シリーズ-4種
この特典のいちばん大きな魅力は、難しい設定をあれこれ細かくしなくても、好きなデザインと色を選ぶだけで、ブログの土台をサクッと整えられることです。
公式デザインカードと同じように1クリックで初期デザインを設定できるため、デザインを一から作るところで力尽きる心配もありません。
初期設定が終わったあとは、記事を書きながら少しずつ自分のブログらしく整えていけます。
「設定ばかりに時間を使わず、まずは記事を書き始めたい」
という方にも使いやすい特典です。
AFFINGER7は自由度が高い反面、最初にあれこれ調整しようとすると、そこで手が止まりやすいテーマでもあります。
「できることが多いのはうれしいけど、逆にどこから触ればいいの…？」と軽く迷子になる感じ、けっこうあると思います。
でも、のんどりデザイン限定の「カスタムAFFINGERデザインカード」なら、最初から全部を作り込まなくても、記事を書きながら少しずつブログの形を整えていきやすいように作っています。
最初の負担をできるだけ減らして、まずは書くことに集中しやすいのがポイント。
特に、ブログを始めたばかりの頃は、記事数が少なくてサイト全体が少し寂しく見えやすいですよね。
せっかく始めたのに、見た目がまだスカスカだとちょっと気持ちがしょんぼりしやすいものです。
その点、のんどりデザイン限定の「カスタムAFFINGERデザインカード」は、3記事くらいからでも見栄えしやすいのが特長。
記事数がまだ多くない時期でも、できるだけ整って見えやすいように考えています。
さらに、AFFINGER7はそのままだとTOPページやカテゴリーページの記事一覧をカード化できません。
のんどりデザイン限定の「カスタムAFFINGERデザインカード」では、そういった一覧部分も簡易カード化済みで、ブログ全体を整った印象にしやすくなります。
「記事は書いているのに、全体で見るとなんだか惜しい…」というところを、できるだけラクに整えやすいのも魅力です。
こんな方におすすめです
- 最初の設定で止まりたくない方
- まずは記事を書くことを優先したい方
- 記事数が少ない時期でも、見栄えよく整えたい方
- TOPページやカテゴリーページも見やすくしたい方
- なるべくラクに、ブログ全体の雰囲気を整えたい方
「難しい設定はできるだけ減らしたい」
「でも見た目はちゃんと整えたい」
そんな方には、のんどりデザイン限定のAFFINGERデザインカード特典がかなり相性のよい選択肢になると思います。
手間をかけすぎずに、それでもちゃんと形にしたい方には、かなりしっくりくるはず。
のんどりデザイン限定の「カスタムAFFINGERデザインカード」を見てみる
AFFINGER7のデザインカードはどれを選べばいい？
12種類もあると、「結局、私のブログにはどれがいいの？」となりますよね。
そんなときは、細かい色や装飾よりも、トップページで何を見せたいかから考えると選びやすくなります。
仕事やサービスを紹介したい方
会社、店舗、教室、フリーランスの仕事などを紹介したいなら、DemoBiz_・Sky-biz・DEMO05が候補です。
問い合わせまでの流れをしっかり作りたいなら「DemoBiz_」、写真や動画で第一印象を作りたいなら「Sky-biz」、メニューや案内を分かりやすく整理したいなら「DEMO05」が合わせやすそうです。
記事を主役にした個人ブログを作りたい方
まずは記事を書いて増やしていきたい方は、Notes・Demo04・BasicBK・Demo03が候補です。
写真付きの記事をたくさん並べたいなら「Notes」や「Demo04」、王道のブログ型で始めたいなら「BasicBK」、読みやすさを優先したいなら「Demo03」が選びやすいと思います。
まだブログの方向性が固まっていない方も、この4つなら大きく外しにくそうです。
写真やブログの世界観を大きく見せたい方
写真を大きく使い、サイトを開いた瞬間の雰囲気まで作りたいなら、Media・Requidが候補です。
カテゴリの入口も作りながらメディアらしく見せたいなら「Media」、背景まで含めて個性的に見せたいなら「Requid」が向いています。
ただし、どちらも画像の影響が大きいので、使う写真を決めてから選んだ方が失敗しにくいと思います。
やわらかく、かわいい個人ブログにしたい方
暮らしや子育てなどを、親しみやすい雰囲気で発信したいなら、affinger7-diarybrown・affinger7-tedy・af7studybearが候補です。
ナチュラルで手帳のように見せたいなら「affinger7-diarybrown」、ピンクとブルーで明るく見せたいなら「affinger7-tedy」、メニューや案内もかわいく整理したいなら「af7studybear」が合いそうです。
記事が少ない時期から、できるだけラクに整えたい方
「公式カードも見たけれど、最初の3記事くらいからブログ全体をさまにしたい」という方は、のんどりデザイン限定のカスタムAFFINGERデザインカードも候補に入れてみてください。
TOPページやカテゴリーページの記事一覧を簡易カード化しているため、記事数が少ない時期でも、空白ばかりに見えにくいように作っています。
まず公式の12種類から好みに近いものを探し、「もっと個人ブログ向けにラクに整えたい」と感じたら、のんどり限定カードと見比べる流れがおすすめです。
| デザインカード | 見た目・構成 | 向いていそうなサイト | 詳細 |
|---|---|---|---|
| DemoBiz_ | 悩み・強み・流れ・FAQ・会社概要まで並べられる | 企業、サービス、フリーランス | 詳しく見る |
| Sky-biz | 写真や動画を大きく見せるファーストビュー | 店舗、サロン、観光、サービス | 詳しく見る |
| DEMO05 | メニューと案内が分かりやすいホームページ型 | 会社、施設、地域のお店 | 詳しく見る |
| Notes | 写真付きの記事を一覧でたくさん見せやすい | 雑記、暮らし、旅行、趣味 | 詳しく見る |
| Media | 大きな写真とカテゴリ導線を組み合わせたメディア型 | 複数カテゴリの雑記、情報サイト | 詳しく見る |
| Requid | 背景写真と半透明カードを使った個性的な見た目 | 写真、作品、旅行、世界観重視 | 詳しく見る |
| Demo04 | 淡い背景に記事カードを並べたシンプルなブログ型 | 暮らし、旅行、レビュー | 詳しく見る |
| BasicBK | 記事スライド・一覧・サイドバーの王道ブログ型 | 特化、レビュー、ノウハウ | 詳しく見る |
| affinger7-diarybrown | ブラウン系の手帳・スクラップブック風 | 日記、暮らし、料理、ハンドメイド | 詳しく見る |
| affinger7-tedy | ピンクとブルーの明るくやさしいデザイン | 美容、子育て、ファッション | 詳しく見る |
| af7studybear | スライドと写真メニューを使ったかわいい構成 | 勉強、資格、教育、習い事 | 詳しく見る |
| Demo03 | 白を基調に記事を読みやすく並べるブログ型 | 雑記、ノウハウ、レビュー | 詳しく見る |
| のんどり限定カスタムAFFINGERデザインカード | 少ない記事数でも全体を整えて見せやすい | 設定を減らして、まず記事を書きたい方 | 詳しく見る |
アイキャッチ画像もそろえると、さらに統一感が出ます
デザインカードでブログ全体の雰囲気を整えたら、記事ごとのアイキャッチ画像も同じトーンでそろえると、さらに見た目に統一感が出ます。
トップページや記事一覧に画像が並んだとき、アイキャッチの雰囲気がそろっていると、ブログ全体がより整って見えやすくなります。
アイキャッチ画像づくりを時短したい方へ、無料版Canvaで使える有料テンプレートも作りました。
AFFINGER7デザインカードを導入する前の注意点
デザインカードは、細かい設定をまとめて読み込めるぶん、導入前に知っておきたいこともあります。
公式では、サイトの初期状態で使うことを想定した機能として案内されています。
運営中のサイトでは必ずバックアップを取る
すでに記事を書いているサイトや、細かくデザインを変更しているサイトで試す場合は、必ずバックアップを取ってから作業してください。
「ちょっと見てみよう」と気軽に切り替えるより、できれば新しく作るサイトの最初に使う方が安心です。
サンプルと同じ画像は入っていません
カードを導入したあとは、自分のブログに合うヘッダー画像やアイキャッチへ差し替えます。
同じカードでも写真が変わるとかなり印象が変わるので、サンプルの雰囲気だけで決めず、自分が使う画像を当てはめて考えるのがおすすめです。
オリジナル子テーマとは併用できません
通常のAFFINGER子テーマを使っているか、導入前に確認しておきましょう。
デザインの内容は変更・配布終了になることがあります
この記事では2026年7月11日時点のラインナップを紹介していますが、実際に導入するときは公式ページで最新情報を確認してください。
AFFINGER7のデザインを整える前に、不安ポイントを先に潰しておくと迷いません
AFFINGER7のデザインカードや装飾を触り始めると、途中で「これって自分だけ？」みたいな小さな不安が出てきやすいです。
たとえば、設定が多くてどこを触ればいいか分からない、思った見た目にならない、やり方が合ってるのか不安…みたいなやつ。
デザインはあとからいくらでも調整できますが、こういう“つまずきポイント”を先に知っておくと、作業中の「あれ、次なにするんだっけ？」がかなり減ります。
これから整えていく方は、まずはよくある悩みと解決策をざっと見ておくと安心です。必要なところだけ拾い読みでOK。
-
AFFINGER7は難しい？ 初心者だった私がぶつかった壁と突破法【実体験】
続きを見る
AFFINGER7でつまずきやすいポイントを先にチェックしたい方はこちら
まとめ｜AFFINGER7のデザインカードは、見た目より「何を見せたいか」で選ぶ
AFFINGER7の公式デザインカードは、会社やサービスを案内するタイプから、記事をたくさん並べるブログ型、写真や世界観を見せるタイプまで幅があります。
見た目だけで選び始めると、「こっちもいいし、あっちもいい…」と迷いやすいんですよね。
そんなときは、
- 仕事やサービスを紹介したい
- 記事を中心に読んでもらいたい
- 写真や世界観を大きく見せたい
- やわらかく、かわいい雰囲気にしたい
のように、トップページで何を見せたいかから絞ると選びやすくなります。
個人ブログで迷った場合は、まずNotes・Demo04・BasicBK・Demo03あたりを見比べると、自分に合う方向がつかみやすいと思います。
一方で、
- できるだけ設定で止まりたくない
- 記事を書きながらブログを形にしたい
- 3記事くらいの時期から見栄えを整えたい
という方は、のんどりデザイン限定のカスタムAFFINGERデザインカードも見比べてみてください。
公式デザインカードと導入方法は同じですが、TOPページやカテゴリーページの記事一覧まで、個人ブログで使いやすい形に整えています。
最初から完璧なデザインを作る必要はありません。
まずは自分の発信内容に合う土台を選び、サイト名や画像を差し替えて、記事を書きながら少しずつ自分のブログにしていく。それくらいの進め方が、いちばん続きやすいと思います。
-
AFFINGER7の口コミは本当？約5年使った私が良かった所・つまずいた所をまとめた
続きを見る
-
のんどりデザイン特典［総合ページ］
続きを見る
「どのデザインにするか」は見えてきたけれど、購入後の流れや最初の設定もまとめて確認しておきたい方は、こちらの導入ガイドもあわせてどうぞ。
