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

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

記事更新日：2026-05-24

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

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

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

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

そこでおすすめなのが、AFFINGER6公式で用意されているデザイン済みデータやAFFINGERデザインカードを使って、まずブログ全体の形を整える方法です。

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

この記事では、AFFINGER6のデザインテンプレートを使って、ブログの見た目をまず整える方法を初心者向けにまとめます。

今回紹介するのは、公式デザイン済みデータを使った設定方法です。サクッと全体の流れを知りたい方向けに、できるだけ分かりやすく整理しています。

デザイン済みデータとAFFINGERデザインカードの違い

AFFINGER6でブログの見た目を整える方法には、大きく分けてデザイン済みデータとAFFINGERデザインカードがあります。

どちらもAFFINGER6のデザインを整えるためのテンプレートですが、設定方法や向いている人が少し違います。

最初に見ると「え、どっちを使えばいいの？」と迷いやすい部分なので、ここでざっくり整理しておきます。

どちらが絶対に正解、というわけではありません。

自分の作業しやすさや、どこまで細かく整えたいかで選べば大丈夫です。

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

最初から完璧に選ぼうとすると手が止まりやすいので、「今の自分が設定しやすそうな方」を選ぶくらいで問題ありません。

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

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

AFFINGER6のデザインカードまとめはこちら

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

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

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

そこから、ACTIONシリーズのデザイン済みデータをダウンロードします。

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種テンプレートを見る

AFFINGER6をまだ購入していない方へ

この記事で紹介している公式デザイン済みデータやAFFINGERデザインカードは、基本的にAFFINGER6を購入したあとに使う内容です。

AFFINGER6をまだ購入していない方や、「購入方法やインストールの流れがちょっと不安だな」という方は、先にこちらの記事を確認しておくと全体の流れがつかみやすいです。

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

また、AFFINGER6が自分に向いているか不安な方は、実際に使って感じた本音レビューも参考にしてください。

自分も最初はかなり迷いながら使い始めたので、良かったところだけでなく、少し大変だったところも正直にまとめています。

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

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

のんどりデザインでは、AFFINGER6購入者向け特典として、ブログの初期設定や記事作成でつまずきにくくするための特典を用意しています。

その中のひとつが、少ない記事数でも見栄えを整えやすい簡易カード済デザインフォーマット「Firstly-4種」「Nuafy-4種」です。

また、記事がなかなか書けず、ASP申請前に手が止まってしまう方に向けて、スターターベース記事も特典として用意しています。

のんどりデザインでは、何も分からないところからブログを始めた自分の経験をもとに、初心者の方が途中で止まりにくくなる特典を用意しています。

「最初にこれがあったら、もっとラクだったのに」と感じたものを中心にまとめているので、ブログ立ち上げで不安がある方の助けになれば嬉しいです。

特典の詳しい内容はこちらにもまとめています。

まとめ｜AFFINGER6はテンプレートで土台を整えると始めやすい

AFFINGER6は、カスタマイズできる範囲がかなり広いテーマです。

その分、初心者のうちから一つひとつ自分で設定しようとすると、「え、どこを触ればいいの？」と迷いやすいところもあります。

自分も最初から全部を整えようとしていたら、たぶん途中で手が止まっていたと思います。

そんなときは、公式のデザイン済みデータやAFFINGERデザインカードを使って、まずはブログ全体の土台を整えるのがおすすめです。

• まずはテンプレートで全体の見た目を整える
• 記事を書きながら少しずつ色やパーツを調整する
• 慣れてきたら自分好みにカスタマイズする
• アイキャッチ画像もそろえて統一感を出す

最初から完璧なデザインを目指すと、思った以上に時間も気力も使います。

まずはテンプレートで形を作って、「ここをもう少し変えたいな」と感じたところから少しずつ手を入れていく方が、気持ち的にもかなりラクです。

最初から完璧なオリジナルデザインを目指すより、テンプレートで土台を作ってから育てていく方が、AFFINGER6は使いやすくなります。

ブログは一度作って終わりではなく、記事を書きながら少しずつ整えていくものです。

最初はざっくり整っていれば十分なので、まずは「記事を書ける状態」を作ることを優先してみてください。

購入後の流れや初期設定がまだ不安な方は、こちらの記事も参考にしてください。

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

関連記事