【AFFINGER6旧版】AFFINGER6を入れたけど見た目が整わない…デザインテンプレートでまず形にする方法

当サイトでは実際に購入した商品・サービスのみレビューしています。

記事更新日：2026-07-18

AFFINGER6を入れたけれど、見た目が思ったように整わない……。

そんなところで手が止まっていませんか？

自分もAFFINGER6を使い始めたころは、できることが多すぎて、正直「どこを触ればいいの？」という状態でした。

ヘッダー、トップページ、色、見出し、ウィジェット、記事一覧……。自由度が高いのはうれしいのですが、初心者のうちはその自由度の高さに迷いやすいです。

AFFINGER6が現行版だった当時は、初期デザインを整える方法として、公式の「デザイン済みデータ」と「AFFINGERデザインカード」が用意されていました。

最初からオリジナルデザインを作ろうとせず、テンプレートで土台を作ってから少しずつ自分仕様に変えていく方が、かなりラクでした。

この記事では、そのうちAFFINGER6用の公式デザイン済みデータを使って、ブログの見た目を整える旧設定方法を初心者向けにまとめています。

現在もAFFINGER6を利用している方や、当時の設定方法を確認したい方は、旧版の記録として参考にしてください。

AFFINGER6旧版｜デザイン済みデータとAFFINGERデザインカードの違い

AFFINGER6が現行版だった当時、ブログの初期デザインを整える方法は、大きく分けて「デザイン済みデータ」と「AFFINGERデザインカード」の2通りがありました。

どちらもAFFINGER6のデザインを整えるための仕組みでしたが、設定方法や向いている使い方が異なります。

当時「どちらを使えばいいの？」と迷いやすかった部分なので、旧版の違いをここで整理します。

AFFINGER6では、どちらか一方が必ず正解というわけではなく、作業しやすさや使いたいフォーマットに合わせて選ぶ形でした。

まずは、自分の使い方に合う方法でブログの土台を整えることが大切です。

この記事では、この2通りのうち公式デザイン済みデータを使った設定方法を紹介します。

現在のAFFINGER7デザインカードについて知りたい方は、こちらの記事をご覧ください。

AFFINGER7公式デザインカードの種類と選び方を見る

AFFINGER6（ACTIONシリーズ）のデザイン済みデータをダウンロード

ここからは、AFFINGER6が現行版だった当時のデザイン済みデータ設定手順を紹介します。

まずは、AFFINGER公式サイトのデザイン済みデータ配布ページへ移動し、ACTIONシリーズ用のデータをダウンロードします。

AFFINGER6のデザイン済みデータ配布ページを確認する

※旧データの配布状況や掲載内容は、公式サイト側で変更・終了している場合があります。

ACTIONシリーズは、AFFINGER6やAFFINGER6 EXのシリーズ名として使われていました。以前のWINGシリーズは、AFFINGER5やSTING PRO2などの旧バージョンです。

AFFINGER6専用デザイン済みデータの種類

AFFINGER6で使用できるデザイン済みデータには、いくつか種類があります。

通常のAFFINGER6で使える主なテンプレートは、以下の5タイプです。

• SIMPLE START
• Tidy2
• MUKU
• cloud
• Study Bear

それぞれ雰囲気がかなり違うので、自分のブログの方向性や、出したい印象に合わせて選ぶと良いです。

最初はどれも良く見えて迷いやすいですが、「自分の記事ジャンルに合うか」「読者にどんな印象を持ってほしいか」で見ると選びやすくなります。

SIMPLE START［AFFINGER6デザインテンプレート］

SIMPLE STARTは、名前の通りシンプルで使いやすいデザインです。

余計な装飾を入れすぎず、見やすさを重視したい方に向いています。

「まずはクセのないデザインで始めたい」という方には、かなり使いやすいテンプレートだと思います。

Tidy2［AFFINGER6デザインテンプレート］

Tidy2は、やわらかく優しい雰囲気のデザインです。

色合いもやさしく、女性向けブログや、やわらかい印象を出したいブログに合いやすいです。

パッと見たときにきつい印象がなく、ふわっと親しみやすい雰囲気があります。

タイトルまわりのフォントもかわいい印象ですが、あとから変更できます。

MUKU［AFFINGER6デザインテンプレート］

MUKUは、シンプルで落ち着いた雰囲気のデザインです。

新聞のように情報を整理して見せやすく、大人っぽい印象にしたい方に向いています。

ごちゃごちゃ見せたくないけれど、情報量はしっかり出したいブログにはかなり相性が良いです。

記事数が多いブログにも使いやすいテンプレートです。

cloud［AFFINGER6デザインテンプレート］

cloudは、白ベースでシンプルに見せられるデザインです。

MUKUに近い整理された雰囲気がありつつ、より軽くすっきりした印象にしたい方に向いています。

見た目に余白があるので、読んでいて重たくなりにくいのも良いところです。

「清潔感のあるブログにしたい」という方には使いやすいと思います。

Study Bear［AFFINGER6デザインテンプレート］

Study Bearは、かわいらしい雰囲気のデザインです。

ピンク系の印象が強いですが、実際に使ってみると大人可愛い雰囲気にもできます。

最初に見たときは「ちょっと可愛すぎるかな？」と感じるかもしれませんが、色やパーツの使い方次第でかなり印象を調整できます。

やさしい雰囲気のブログや、かわいい印象を出したいブログに向いています。

AFFINGER6のデザイン済みデータを確認したい方は、公式ページをご覧ください。

デザイン済みデータ配布ページはこちら

ACTIONシリーズEX版のデザイン済みデータについて

AFFINGER6でEX版のデザインテンプレートを試した結果

通常のAFFINGER6でEX版専用テンプレートを使うとどうなるのか、実際に試してみました。

「もしかしたら少し崩れるだけで使えるかも」と思ったのですが、結果はあまりおすすめできるものではありませんでした。

実際に崩れた画面を見ると、「あ、これはやっぱり対応している環境で使わないとダメだな」と感じます。

テンプレートを使うときは、現在使っているAFFINGER6の種類に合ったデータを選びましょう。

デザイン済みデータをダウンロードする方法

ここからは、実際にデザイン済みデータをダウンロードする流れを紹介します。

まずは、公式サイトのデザイン済みデータ配布ページへ移動します。

デザイン済みデータ配布ページはこちら

step
1利用規約を読んで、3ヶ所にチェックをつける

「ダウンロードの方法 及び ご利用規約」を読み、内容を確認したうえで3ヶ所にチェックをつけます。

こういう規約まわりはつい流し読みしたくなりますが、ダウンロード前に一度確認しておくと安心です。

step
2お好みのテンプレートをダウンロードする

チェックを入れると、各デザイン済みデータがダウンロードできるようになります。

使いたいテンプレートを選んでダウンロードしましょう。

最初はどれにするか迷いやすいですが、まずは「自分のブログの雰囲気に近いもの」を選べば大丈夫です。

デザイン済みデータ導入に必要なプラグインをインストール

デザイン済みデータを反映させるには、主に以下の3箇所を反映する必要があります。

• テーマ管理
• カスタマイザー
• ウィジェット

そのために、以下のプラグインを使用します。

1. データ引継ぎプラグイン：テーマ管理を反映するための公式有料プラグイン
2. Customizer Export/Import：カスタマイザーを反映するための無料プラグイン
3. Widget Importer & Exporter：ウィジェットを反映するための無料プラグイン

最初に見ると「プラグインが3つも必要なの？」と少し面倒に感じるかもしれません。

ただ、ここを準備しておくとデザイン済みデータの反映がかなりスムーズになります。

データ引継ぎプラグインをインストール

デザイン済みデータの「テーマ管理」を反映するには、公式プラグインのデータ引継ぎプラグインを使用します。

データ引継ぎプラグインは有料ですが、デザイン済みデータを反映するために必要なプラグインです。

最初は「これも買うの？」と思うかもしれません。

自分も最初に見たときは、正直ちょっとだけ引っかかりました。

ただ、デザイン済みデータをいくつか試したい場合や、サイトの見た目を手早く整えたい場合は、1つ持っておくとかなり便利です。

step
1データ引継ぎプラグインを購入する

公式ページからデータ引継ぎプラグインを購入します。

データ引継ぎプラグインはこちら

step
2データ引継ぎプラグインをダウンロードする

購入後、「商品ダウンロードのご案内」メールが届きます。

メール内のリンクから、データ引継ぎプラグインをダウンロードします。

メールを見失うと少し焦るので、購入後はすぐにダウンロードしておくと安心です。

step
3データ引継ぎプラグインをアップロードする

WordPress管理画面の「プラグイン」→「新規追加」をクリックします。

step
4プラグインをアップロードする

「プラグインのアップロード」をクリックし、ダウンロードしたデータ引継ぎプラグインのzipファイルを選択します。

ファイルを選択後、「今すぐインストール」をクリックします。

zipファイルは解凍せず、そのままアップロードすればOKです。

step
5プラグインを有効化する

インストール後、「有効化」をクリックします。

これで、データ引継ぎプラグインの準備は完了です。

ここまで終わると、ひとまず大きな山は越えた感じです。

カスタマイザー・ウィジェット反映用の無料プラグインをインストール

次に、カスタマイザーとウィジェットを反映するための無料プラグインをインストールします。

• Customizer Export/Import
• Widget Importer & Exporter

こちらはWordPress管理画面からインストールできます。

有料プラグインと違って、検索してそのまま追加できるのでそこまで難しくありません。

step
1Customizer Export/Importをインストール

「プラグイン」→「新規追加」をクリックします。

検索窓にCustomizer Export/Importと入力します。

Customizer Export/Importの「今すぐインストール」をクリックし、有効化します。

step
2Widget Importer & Exporterをインストール

同じように、検索窓にWidget Importer & Exporterと入力します。

Widget Importer & Exporterの「今すぐインストール」をクリックし、有効化します。

これで、必要なプラグインの準備は完了です。

最初は少し手順が多く見えますが、一つずつ進めれば大丈夫です。

デザイン済みデータを反映させる手順

必要なプラグインを入れたら、ダウンロードしたデザイン済みデータを実際に反映していきます。

ここまで準備できていれば、あと少しです。

反映する場所は、主に以下の3つです。

• テーマ管理
• カスタマイザー
• ウィジェット

最初は「3ヶ所もあるのか」と少し面倒に感じるかもしれませんが、順番に進めれば大丈夫です。

テーマ管理を反映する

「AFFINGER管理」→「データの引き継ぎ」ページを開きます。

「インポート」の「ファイルを選択」をクリックします。

ダウンロードしたデザイン済みデータを解凍し、「テーマ管理用」フォルダの中にある「theme.json」を選択します。

ここで違うファイルを選ぶと反映できないので、フォルダ名とファイル名はしっかり確認しておくと安心です。

これで、テーマ管理の反映は完了です。

ひとつ反映できると、「ちゃんと進んでるな」と少しホッとします。

カスタマイザーを反映する

WordPress管理画面の「外観」→「カスタマイズ」を開きます。

左メニュー下部にある「エクスポート／インポート」をクリックします。

「インポート」部分の「ファイルを選択」から、デザイン済みデータ内の「カスタマイザー用」フォルダにあるdatファイルを選択します。

datファイルをインポートできれば、カスタマイザーの反映は完了です。

ここまで進めると、ブログ全体の雰囲気がかなりテンプレートに近づいてきます。

ウィジェットを反映する

「ツール」→「Widget Importer & Exporter」を開きます。

「ウィジェットのインポート」項目で「ファイルを選択」をクリックします。

デザイン済みデータ内の「ウィジェット用」フォルダにあるwieファイルを選択し、「ウィジェットをインポート」ボタンをクリックします。

wieファイルがインポートできれば、ウィジェットの反映は完了です。

ウィジェットまで反映すると、サイドバーやトップページまわりの見た目も整ってきます。

ここまで来ると、かなり「それっぽいブログ」になってくるので、ちょっと嬉しくなると思います。

ウィジェットがうまくインストールできなかった場合は、こちらの記事も参考にしてください。

AFFINGER6デザイン済みデータの反映を確認する

「テーマ管理」「カスタマイザー」「ウィジェット」の3箇所の反映が完了したら、実際にサイトの表示を確認してみましょう。

トップページ、記事ページ、スマホ表示を見て、デザインの雰囲気が変わっていれば反映できています。

最初に表示が変わった瞬間は、「お、ちゃんと反映されてる」と少しホッとすると思います。

メニューやヘッダー画像、細かいウィジェットの位置などは、あとから自分のブログに合わせて調整していけばOKです。

最初から完璧に整っていなくても大丈夫です。

まずは、全体のデザインがきちんと反映されているかを確認しましょう。

つまずきやすいところと対処法

デザイン済みデータの反映時に、つまずきやすいポイントをまとめておきます。

自分も最初は「どこで読み込むんだっけ？」と何度か迷ったので、うまくいかないときは一つずつ確認してみてください。

• インポートのボタンが見つからない AFFINGER管理、外観→カスタマイズ、ツールの3箇所を確認してください。
• ファイルを選んでも読み込めない 拡張子が .json / .dat / .wie であることを確認してください。フォルダではなく、データ本体を選びます。
• 読み込みが途中で止まる 一度画面を更新して、同じファイルをもう一度試してみてください。改善しない場合は別ブラウザでも試してみましょう。
• 反映後に何も変わっていないように見える ブラウザのスーパーリロードを試してください。WindowsはCtrl+F5、MacはCmd+Shift+Rです。

※この記事では、メニュー・ヘッダー・細かいウィジェットまでは大きく触れていません。まずは全体の雰囲気が変わっていれば反映成功です。

反映されないと少し焦りますが、ファイルの種類や読み込む場所を間違えているだけのことも多いです。

落ち着いて、どのデータをどこに入れるのかを確認してみましょう。

デザイン反映後に確認したいこと

デザイン済みデータを反映したら、次に以下を確認しておくと安心です。

• トップページの表示
• 記事ページの見出しや余白
• スマホ表示
• メニューの表示
• ウィジェットの位置
• ヘッダー画像やロゴの表示

デザイン済みデータは、あくまでブログの土台です。

反映したら終わりではなく、自分のブログに合わせて少しずつ調整していくと、より使いやすくなります。

特に、スマホ表示は忘れずに見ておいた方が良いです。

パソコンではきれいに見えていても、スマホだと余白や画像の見え方が少し気になることがあります。

まずはテンプレートで全体を整えてから、色・画像・メニューなどを少しずつ自分仕様に変えていくのがおすすめです。

いきなり細かく作り込みすぎると疲れてしまうので、最初は「大きく崩れていなければOK」くらいの気持ちで進めるとラクです。

ブログ画像もそろえると統一感が出ます

AFFINGERのデザイン設定でブログ全体の見た目を整えたら、記事ごとのアイキャッチ画像もそろえておくと、より統一感が出ます。

トップページや記事一覧にアイキャッチ画像が並んだとき、画像の雰囲気がバラバラだと、せっかく整えたブログデザインも少し散らかって見えてしまうことがあります。

自分も、デザインは整えたはずなのに「なんか全体的にまとまりがないな」と感じたことがありました。

その原因が、アイキャッチ画像のテイストのバラつきだったりします。

アイキャッチ画像づくりを時短したい方へ、無料版Canvaで使える有料テンプレートも作りました。

毎回ゼロから画像を作るのが大変な方は、テンプレートを使うとかなり作業がラクになります。

ブログ用アイキャッチ15種テンプレートを見る

これからAFFINGERを購入する方へ

現在販売されている商品はAFFINGER7です。

この記事で紹介しているAFFINGER6用の「デザイン済みデータ」と、現在のAFFINGER7で使用する「AFFINGER7デザインカード」では、初期デザインの設定方法が異なります。

これからAFFINGERを購入する方は、AFFINGER7の購入方法・インストール・初期設定をまとめた記事をご覧ください。

AFFINGER7の購入方法・インストール・初期設定を見る

AFFINGERが自分に向いているか不安な方は、AFFINGER6を約5年使用し、AFFINGER7へ移行した実体験をまとめたレビューも参考にしてください。

AFFINGERを約5年以上使った本音レビューを見る

現在ののんどりデザイン限定特典について

現在、のんどりデザインからAFFINGER7を購入された方には、AFFINGER7の初期設定や記事作成でつまずきにくくするための限定特典をご用意しています。

その中で自分が特におすすめしたいのが、オリジナルの「カスタムAFFINGERデザインカード」です。

• Firstlyシリーズ：4色
• Nuafyシリーズ：4色

2つのシリーズに、それぞれ雰囲気の異なる4色を用意しています。

合計8種類から好みのデザインと色を選べるため、ブログの内容や目指したい雰囲気に合わせて、デザインの幅を簡単に広げられます。

のんどりデザイン限定のカスタムAFFINGERデザインカードは、公式の「AFFINGER7デザインカード」と同じ仕組みを使用しています。

用意されたデータを読み込んだあとは、「デザインをセットする」を1クリックするだけで初期デザインを反映できます。

AFFINGER6のデザイン済みデータのように、テーマ管理・カスタマイザー・ウィジェットを別々に読み込む必要はありません。

また、デザインカード導入後に変更しておきたい項目をまとめたマニュアルや、記事作成・アイキャッチ画像づくりを進めやすくする特典も用意しています。

特典の詳しい内容はこちらをご覧ください。

まとめ｜AFFINGER6はデザイン済みデータで土台を整えられました

この記事では、AFFINGER6で使用できた「デザイン済みデータ」の導入方法を紹介しました。

AFFINGER6はカスタマイズできる範囲が広いテーマだったため、一からすべてを設定するより、公式のデザイン済みデータで土台を整えると始めやすくなりました。

• デザイン済みデータをダウンロードする
• テーマ管理・カスタマイザー・ウィジェット用のプラグインを用意する
• 3種類のデータをそれぞれの設定画面から読み込む
• 反映後に画像・メニュー・スマホ表示などを確認する

最初から完璧なオリジナルデザインを目指すのではなく、テンプレートで土台を作ってから、少しずつ自分仕様に変えていく方が進めやすい方法でした。

現在もAFFINGER6を使用している方は、このページを旧版の設定記録として参考にしてください。

現在販売されているAFFINGER7では、この記事のデザイン済みデータではなく、「AFFINGER7デザインカード」を使用します。

AFFINGER7デザインカードは、用意されたデータを読み込んだあと、「デザインをセットする」をクリックして初期デザインを反映できます。

関連記事