アメブロを、サービスの顔として育てたい方へ
サービスの魅力が伝わり、 申込み先まで 迷わせないアメブロへ。
24種類の完成デザインを土台に、背景・ヘッダー・記事・サイドバー・ボタンまで、PC版ブログ全体をまとめて調整できます。 装飾6ツールと導線10ツールも含まれ、記事内の申込み案内まで同じ印象でつなげられます。
- 24ブログ全体の
完成デザイン - 330+記事内パーツの
基本デザイン - 17種類の
会員版ツール
月払い 3,480円（税込） 年払い 34,800円（税込）
年払いは月払い12回分より2か月分お得
最低利用期間なし・申込み完了後、案内メールから利用開始
※ブログデザイン用CSS作成ツールは、PCブラウザ版のCSS編集用デザインが対象です。
実際の設定画面
作成後のPC版ブログ
色・余白・角・影も選択
- 1環境を合わせる
- 2土台を選ぶ
- 3見た目を調整
- 4細部を設定
- 5CSSを貼る
記事の外側で起こりやすいこと
記事を丁寧に書いても、
ブログ全体の印象までは揃いません。
見出しや囲み枠を使って記事を読みやすくしても、背景・ヘッダー・サイドバーなどが初期状態のままでは、サービスの雰囲気を表しにくい場合があります。
-
01
ブログを開いた瞬間に、何のサービスか伝わりにくい
記事を読む前の画面からは、発信テーマやサービスの特徴をつかみにくい。
-
02
記事とブログ全体で、色や雰囲気が揃っていない
記事内のパーツは整っていても、ヘッダーやサイドバーとの一体感がない。
-
03
見てほしい記事やサービスへの入口を見つけにくい
ヘッダーやサイドバーの見せ方が合っておらず、必要な情報を探す負担が残る。
-
04
CSSを一つずつ調べると、完成までに時間がかかる
色・余白・角丸・影・見出しなどを個別に考え、コードを書く必要がある。
完成前・完成後
書く内容は同じでも、
ブログ全体の印象は
変わります。
情報を増やすのではなく、背景・ヘッダー・記事・サイドバーの見た目を同じ方向に揃えます。
記事の内容と、ブログ全体の印象が分かれている
見た目の方針が揃っていない状態
記事内にはサービス内容や料金が書かれていても、外側のデザインからは発信テーマをつかみにくい状態です。
- 初期状態に近い背景とヘッダー
- 記事とサイドバーの印象が異なる
- 見出しやボタンの方針が揃っていない
ブログを開いた瞬間から、同じサービスの印象へ
色・余白・パーツを一つの方針へ
背景・ヘッダー・記事・サイドバー・ボタンを一つの方針で調整し、記事内の案内までつなげます。
- サービスに合う色と余白
- 記事カードとサイドバーを統一
- 見出しやボタンまで同じ雰囲気
PROで変えられる範囲
背景・ヘッダーから、
記事・サイドバーまで一つの方向に。
色だけを変えるツールではありません。完成デザインを土台に、ブログ全体を構成する主な部分をまとめて調整できます。
1
2
3
4
5
6
- 01
ページ全体
背景、本文文字、淡い文字、リンク、余白
- 02
ヘッダー
画像、ブログタイトル、説明文、配置、サイズ
- 03
ナビゲーション
背景、文字、区切り、ホバー時の見え方
- 04
記事エリア
記事カード、タイトル、見出し、角丸、影
- 05
サイドバー
カード、見出し、背景、余白
- 06
ボタン
通常・強調・フォローボタンの色と形
必要な方は上級設定を開き、40項目以上の詳細設定から細部を調整できます。
PRO限定ツール
CSSを一から書かなくても、
PC版ブログ全体をデザイン。
現在のAmebaデザイン形式と公式レイアウトを確認し、ブログの用途と完成デザインを選択。画面内のプレビューを見ながら調整し、AmebaのCSS編集欄へ貼り付けるコードを作成します。
実際のPRO限定ツール画面
24種類の完成デザイン
背景・記事カード・サイドバー・見出し・ボタンまでまとめて切り替えます。
選択しながらプレビュー
全体・ヘッダー・記事・サイド・ボタンを切り替えて確認できます。
CSSをコピー・保存
作成したCSSをコピー、またはCSSファイルとして保存できます。
ブログ全体の完成デザイン
背景からボタンまで揃う、
24種類の完成デザイン。
完成デザインを選ぶと、背景・記事カード・サイドバー・見出し・ボタンなどがまとめて切り替わります。完成形に近い土台から始められます。
実際に作れるブログ全体の一例 24種類の完成デザインを見る
※掲載しているのは完成デザインの一部です。色・余白・角丸・影・ヘッダーは、選んだあとに調整できます。
ブログの用途を選ぶと、24種類の候補が用途に合う順へ並び替わります。記事の文章や内容が自動で書き換わる機能ではありません。
完成デザインを選んだあとに
色コードが分からなくても、選択肢から自分らしく調節
完成デザインを土台に、よく使う調整を選択式で変更できます。細かなCSSを一つずつ書く必要はありません。
- ブランド色
- 用意された色のほか、ご自身のブランドカラーも指定できます。
- 雰囲気
- サービスに合わせて、画面全体の印象を調整します。
- 角
- カードやボタンを、直線的またはやわらかな印象へ。
- 余白
- 情報量や読みやすさに合わせて、各部の間隔を調整します。
- 影
- カードやボタンの立体感を、控えめまたは強めに変更します。
選ぶたび、全体プレビューへ反映
ブログの入口をつくる
画像とタイトルで、
サービスらしいヘッダーへ。
ヘッダー画像のURL、サイズ、位置、繰り返し、ブログタイトルの配置や大きさなどを調整できます。ブログを開いたとき、何を発信している場所か分かりやすい入口を目指せます。
※ヘッダー画像はツールへ直接アップロードする形式ではありません。https://で始まる画像URLを入力します。
貼り付ける前に
全体も、各パーツも。
プレビューで確認できます。
全体・ヘッダー・記事・サイド・ボタンの5つの表示を切り替えられます。最終画面では、主な文字色と背景色を確認してからCSSをコピーできます。
※確認機能は、サイト全体のアクセシビリティを保証するものではありません。公開前に実際のブログ画面もご確認ください。
実際のツール画面
環境確認からCSSのコピーまで。
5つの流れで完成します。
ツール画面の7項目を、作業内容が分かりやすい5つの流れにまとめてご紹介します。
-
1
PHASE 1
現在の環境を合わせる
Amebaデザイン形式と公式レイアウトを確認
現在利用しているデザイン形式とレイアウトを選びます。ツール内で選んだだけではAmeba側の設定は変わらないため、両方を同じ状態にします。
デザイン形式と公式レイアウト -
2
PHASE 2
ブログ用途と土台を選ぶ
用途に近い完成デザインを選択
ブログ用途を選ぶと、24種類の完成デザインが見つけやすい順へ並び替わります。プレビューを見ながら、目指す印象に近い土台を選びます。
ブログ用途を選択 
完成デザイン候補 -
3
PHASE 3
色・余白・形を整える
色・雰囲気・角・余白・影を選択
よく使う設定は選択式で変更できます。プレビューを見ながら、ブログの印象に合う色や余白、角、影を選びます。
かんたん調整 -
4
PHASE 4
ヘッダーと細部を設定する
画像・タイトル・必要な上級設定を調整
ヘッダー画像やブログタイトルを設定します。必要な方だけ上級設定を開き、ブログ全体の細部まで調整できます。
ヘッダー・上級設定 -
5
PHASE 5
CSSを確認して貼り付ける
最終プレビューから、コピー・保存へ
主な文字色と背景色を確認し、完成CSSをコピーまたは保存します。Amebaの「デザインの設定」から「CSSの編集」を開き、生成したCSSを貼り付けます。
最終確認とCSS生成 
CSSをコピー・保存
CSSを一から書く必要はありません。現在の設定を確認し、完成デザインを選び、必要な項目を調整すると、Amebaへ貼り付けるCSSを作成できます。
お使いになる前に
対象画面と反映方法を、事前にご確認ください。
CSS作成ツールは、Amebaの公式機能を利用してPC版ブログの見た目を変更するツールです。
- 対象は、PCブラウザ版のCSS編集用デザインです
- スマホ版・アプリ版はAmeba側で別に管理され、同じ見た目にはなりません
- ツール内で選んだ公式レイアウトは、Ameba側でも同じ設定にしてください
- 変更前に、現在のCSSを保存し、デザイン形式と公式レイアウトも記録してください
- 生成したCSSは、AmebaのCSS編集欄へ手動で貼り付けます
- 広告やAmeba運営表示を隠すCSSは生成しません
- 公式レイアウトを強制的に組み替えるCSSは生成しません
- 公開前に、実際のブログ画面で表示をご確認ください
記事内ツールもすべて
ブログ全体だけでなく、
記事の中もこのプラン一つで。
導線デザインPROには、装飾ツールパックの6ツールと、導線ツールプラスの10ツールもすべて含まれています。
装飾6ツール
- 01見出し話題を分かりやすく区切る
- 02囲み枠・ボックス要点を本文から分ける
- 03吹き出し声や補足をやわらかく伝える
- 04線・罫線・区切り線話題の切り替わりを示す
- 05ボタン次に見てほしいページへ案内
- 06メニューバー複数ページへの入口をまとめる
導線10ツール
- 01申込み導線・CTAセット申込み・予約・相談先を案内
- 02サービス内容対象者・内容・得られること
- 03実績・事例カード実績やお客様の声を比較
- 04ビフォーアフター利用前後の変化を見せる
- 05料金表・メニュー表料金と内容を一覧・比較
- 06手順・ステップ申込み後の流れを順番に案内
- 07チェックリスト対象者や準備物を確認
- 08FAQ・Q&Aカード申込み前の疑問を解消
- 09特典・キャンペーン特典・期間・受取方法を案内
- 10注意事項・確認事項条件や注意点を事前確認
※記事内パーツは、装飾146種類＋導線187種類＝実装上333種類です。LPでは「330種類以上」と表記します。色・余白・サイズ・項目数などの設定違いは基本デザイン数に含めません。ブログ全体の完成デザイン24種類は別の種類です。
PROだからできる組み合わせ
記事の中から、ブログ全体まで。
同じサービスの印象でつなぎます。
ブログ全体の背景・ヘッダー・記事カード・サイドバーを揃え、その中の記事にはサービス内容・実績・料金・FAQ・申込み案内を配置できます。
- 01ブログを開くヘッダーと背景からサービスの雰囲気を受け取る
- 02見てほしい記事を選ぶ記事カードやサイドバーからサービス記事へ
- 03内容を確認するサービス内容・実績・料金を確認
- 04疑問や条件を確認するFAQ・利用の流れ・注意事項を確認
- 05申込み先へ進む内容を読んだあとに申込み案内を見つける
「ブログの見た目」と「記事の内容」を別々に考えるのではなく、読者が見る一つの体験としてつなげられます。
デザインを変える、その先へ
内容・導線・見た目が、
同じ方向を向く
ブログへ。
開いた瞬間から、発信テーマを示しやすくなる
ヘッダー・背景・色をサービスに合わせ、記事を読む前の印象を揃えます。
記事とブログ全体の見た目がつながる
記事内パーツと、その外側のデザインを同じ方向へ揃えられます。
毎回ゼロから考える時間を減らせる
24種類の完成デザインを土台に、よく使う項目を選択式で調整できます。
見てほしい情報への入口をつくりやすくなる
ヘッダー・記事カード・サイドバー・記事内CTAを一つの案内として考えられます。
見た目を華やかにすることだけが目的ではありません。
サービスの内容を読み進めやすくし、必要な情報への入口を分かりやすくするためのデザインです。
おすすめの方
アメブロを
仕事の案内に
使っている方へ。
記事を読みやすくするだけでなく、ブログを開いた瞬間から記事内の申込み案内まで、同じサービスの印象でつなぎたい方に合うプランです。
- 商品・講座・相談・施術・レッスンなどを案内している
- 記事は書いているが、ブログ全体は初期状態に近い
- 背景・ヘッダー・記事・サイドバーの雰囲気を揃えたい
- CSSを一から調べて書く時間を減らしたい
- 料金表・FAQ・申込み案内も同じプランで作りたい
- PCで見る読者にも、サービスに合う印象を届けたい
料金
ブログ全体まで
揃えたい方へ。
導線デザインPRO。
月払いと年払いで利用できるツールは同じです。利用スタイルに合わせて、お支払い周期をお選びください。
どちらのお支払い方法にも含まれるもの
17装飾6＋導線10＋
CSS作成ツール
330+記事内パーツの
基本デザイン
24ブログ全体の
完成デザイン
お申込み前にご確認ください
- 最低利用期間はありません
- 申込み完了後、案内メールに記載されたログインページから利用開始できます
- サービス全体として、特定の推奨端末・ブラウザの指定はありません
- 個別サポートはありません（CSS作成代行・操作案内を含みます）
- CSS作成ツールは、PCブラウザ版のCSS編集用デザインが対象です
すでに会員プランをご利用中の方へ
新規申込みの前に、既存会員向け案内をご確認ください。現在の利用状況によって、お手続き方法が異なる場合があります。
よくある質問
申込み前の疑問に
お答えします。
Q導線デザインPROでは何が使えますか？
装飾ツール6種類、導線ツール10種類、ブログデザイン用CSS作成ツール1種類の、合計17ツールをご利用いただけます。記事内パーツは330種類以上、CSS作成ツールにはブログ全体の完成デザイン24種類を収録しています。
Q導線ツールプラスとの違いは何ですか？
導線ツールプラスは、装飾6ツールと導線10ツールを利用できるプランです。導線デザインPROでは、その16ツールに加えて、PC版ブログ全体の背景・ヘッダー・記事・サイドバー・ボタンなどを調整するCSS作成ツールも利用できます。
QCSSを自分で書く必要がありますか？
CSSを一から書く必要はありません。現在のデザイン形式とレイアウトを確認し、完成デザインや各設定を選ぶと、Amebaへ貼り付けるCSSを作成できます。反映前には、現在利用しているCSSを必ず保存してください。
Qブログのどの部分を変更できますか？
背景、本文やリンクの色、ヘッダー、ブログタイトル・説明文、ナビ、記事カード、記事タイトル、サイドバーカード・見出し、ボタン、余白、角丸、影などを調整できます。利用するデザイン形式によって、見え方や設定対象は異なります。
Qスマホ版・アプリ版にも反映されますか？
本ツールは、PCブラウザ版のCSS編集用デザインが対象です。スマホ版・アプリ版の表示はAmeba側で別に管理されているため、同じ見た目にはなりません。
Q申込み後、いつから利用できますか？
申込み完了後、案内メールに記載されたログインページから利用を開始できます。
ヘッダー・背景
記事・見出し
サイドバー・ボタン
入口から記事、サイドバー、ボタンまで、ひとつの方針で揃えられます。
導線デザインPRO
初期デザインのブログから、サービスらしい印象のブログへ。
PC版ブログの配色・ヘッダー・記事カード・サイドバー・ボタンをまとめて調整。記事内の装飾や申込み導線も同じプランで作れるため、ブログを開いた瞬間から申込み先まで、サービスに合う見た目でつなげられます。
今すぐ申し込む月払い3,480円（税込）／年払い34,800円（税込）・2か月分お得
最低利用期間なし・申込み完了後、案内メールから利用開始