Ameba Ownd編集マニュアル｜画像・CSS・SEOまで7手順で完成

Ameba Owndで「とりあえず作ったけど編集が難しい…」と感じていませんか？　本記事はページ作成からCSS調整、SEO設定、公開後のエラー確認までを7手順に凝縮。画像配置やスマホ最適化のコツ、Analytics連携も網羅し、初めてでも30分でブランドサイトを仕上げられます。

AmebaOwndとアメブロを組み合わせて集客・収益化を加速する具体策が手に入るので、ぜひ最後までご覧ください。

編集画面の基本操作

Ameba Owndの編集画面は、左サイドバーに「ページ」「デザイン」「設定」タブ、中央にライブプレビュー、右にブロック追加のフローティングボタンという三分割レイアウトです。操作はドラッグ＆ドロップが中心なので、まずは「プレビューを眺めながら要素を置く」流れに慣れるとスムーズです。

ポイントは①各ブロックを必ずセクション単位で管理すること、②ブロックを複製して一貫した余白とフォントサイズを保つこと、③変更前に“下書き保存”をクリックし、公開ボタンを押すまでは外部に反映されない仕組みを理解することの三つです。

とくに初心者が陥りやすい「無意識のうちに公開してしまう」トラブルは、下書き保存→プレビュー確認→公開の三段階を徹底すれば防げます。

プレビューはPC・スマホ・タブレットの3アイコンで瞬時に切り替え可能なので、編集段階からレスポンシブ表示を意識しましょう。

• 左サイドバー：ページ管理・デザイン変更・各種設定
• 中央：リアルタイムプレビュー（PC/スマホ切替可）
• 右下：＋ボタンからブロックを追加

手順1：ページ作成とブロック追加

新規ページを作成するには、左サイドバー「ページ」タブで「＋新しいページ」をクリックし、ページタイプ（標準／ブログ／リンク集など）を選びます。作成直後はタイトルとスラッグが自動生成されるため、SEOキーワードと一致する短い日本語URLに変更しておくと検索評価が上がります。

次に右下の「＋」ボタンを押すと、テキスト・画像・YouTube・ボタンなど15種類のブロックが表示されます。ドラッグして好きな位置へドロップすると即反映され、ブロック間に薄い青線が出るので配置ミスも起こりにくいです。

作業スピードを上げるコツは「複数ブロックをまとめたセクションを複製」して使い回すことです。例えば見出し・段落・CTAボタンを1セットで作り、次のセクションへコピペすると余白が均一になり、読者がスクロールに疲れません。また「ブロック設定→余白」のパネルでpaddingを数値入力すれば、px単位で微調整可能。

手順2：画像・テキスト・リンク配置のコツ

画像やテキストをバランス良く配置するには「幅・余白・階層」の三点を意識します。まず画像ブロックはアップロード時に自動で「max-width:100%;」 が付与されますが、縦横比がバラバラだとレイアウト崩れの原因となるため、事前に横1200px・縦比率固定でリサイズしておくと安心です。

テキストは「段落」ブロックよりも「リッチテキスト」ブロックを使うと見出しタグを内部で設定でき、SEOも一括管理できます。リンクを貼る際は、同一ページ内アンカーと外部URLを色で区別するとユーザー体験が向上します。

具体的にはタグに「class=external-link」を追加し、共通CSSに 「.external-link{color:#ff6f61;}」を追記すると外部リンクだけブランドカラーに変わります。

ポイント

• 【プレビュー確認】スマホ表示で改行位置が不自然なら、シフト＋Enterで手動改行を入れると見やすくなります。
• 【画像軽量化】TinyPNGで圧縮→WebP形式でアップロードすると読み込み速度が向上します。
• 【内部リンク】Owndページ間は「サイト内リンク」を選択すると自動でURLが更新され、404エラーのリスクが減少します。

デザインとCSSカスタマイズ

Ameba Owndのテンプレートは初期状態でも整っていますが、既製品のままでは他サイトと差別化できずブランド想起も弱くなります。デザイン調整の中心になるのが「テーマカラー」「フォント」「余白」の3要素です。

まずブランドカラーをサイト全体に統一させると読者がロゴやバナーを一目で記憶しやすくなり、クリック率も平均1.3倍向上します。次にフォント。日本語は游ゴシックが既定ですが、Noto SansやM PLUS 1pに変更すると可読性が上がり、スマホでも文字つぶれが起きにくいです。

最後に余白。ブロックとブロックの間隔を広げると情報が整理され、高級感が増します。これらは「デザイン＞高度な編集＞共通CSS」に数行コードを追加するだけでOK。

さらに@mediaクエリを使えば、PCとスマホでフォントサイズや余白を自動切り替えられ、レスポンシブ対応の手間も最小限です。

手順3：テーマカラーとフォントの変更

テーマカラーを変更するには、左サイドバー「デザイン＞テーマカラー」からパレットを開き、メインカラーをHEXコードで入力します。ブランドロゴが#ff6f61なら、同じコードを登録しリンク・ボタン色を自動反映させましょう。

補色は自動計算されますが、文字色とのコントラストが4.5:1を下回るとアクセシビリティ基準を満たさないため、WebAIMのコントラストチェッカーで確認しておくと安心です。

フォントは「高度な編集」に移動し、headタグの中にGoogle Fontsのlinkタグを貼ります。次に共通CSSに

.site-wrapper{font-family:'Noto Sans JP',sans-serif;}

を追加すると全ページに反映されます。

h1,h2のみ別フォントを使いたい場合は

h1,h2{font-family:'Merriweather',serif;}

を追記すると見出しが強調され、情報の階層が明確になります。

• 【ポイント】ブランドカラーは3色以内に絞ると統一感が生まれます。
• 【注意】フォントを3種類以上混在させると読みづらくなるため避けましょう。
• 【実践例】飲食店サイトは#d35400（オレンジ系）＋Noto Sansで暖かく親しみやすい印象を演出できます。

手順4　共通CSSで余白＆スマホ最適化

余白とスマホ表示を一括で整えるには「共通CSS」への追記が最も効率的です。まず全セクションの上下marginを統一するコードを追加します。

「section{margin:3em 0;padding:0 5%;}」これだけでPCでもスマホでも読みやすい余白が確保されます。次にモバイル専用スタイルを@mediaクエリで設定します。

@media(max-width:768px){
body{font-size:15px;}
h1{font-size:28px;}
h2{font-size:22px;}
.btn{padding:12px 24px;}
}

これによりスマホで文字が大きすぎて折り返す問題が解消されます。さらに画像が画面外にはみ出すのを防ぐには、共通CSSに「img{max-width:100%;height:auto;}」を追記しましょう。

ポイント

• 【NG例】!importantを多用するとテンプレート更新時に崩れやすくなるため、優先度調整は階層セレクタで行いましょう。
• 【便利技】同じ余白設定を複数回書くなら「:root{–space:3em;} section{margin:var(–space) 0;}」と変数化すると保守が楽になります。
• 【完了チェック】変更後は必ずPC・スマホ両方のプレビューでデザイン崩れがないか確認し、下書きを公開に切り替えて完了です。

関連記事アメブロ集客完全ガイド！初心者が効率的に集客するための方法【7ステップ】

2024.07.18

SEO設定と外部ツール連携

Ameba Owndで公開したサイトを検索結果に上位表示させるには、ページごとのメタデータ設定とアクセス解析ツールの導入が欠かせません。基本のSEOは「①タイトル」「②ディスクリプション」「③OGP（SNS用カード情報）」の三つを正しく入力するだけで土台が整います。

検索エンジンはタイトルに含まれるキーワード、説明文に書かれたベネフィット、そしてSNSで共有された際のOGP画像とテキストを総合的に評価します。

さらに、Google Analytics（GA4）とSearch Consoleを接続すれば「どのクエリでクリックされたか」「モバイル表示に問題はないか」を数値で可視化でき、リライトやUI改善の優先順位が明確になります。

アクセスデータを毎週チェックして「滞在時間が短いページはCTA前に離脱が多い」などボトルネックを特定し、先述のデザイン・CSS調整と組み合わせればSEOとUXを同時に改善できるサイクルが完成します。

手順5　タイトル・ディスクリプション・OGP登録

Ameba Owndでは各ページの右上「歯車アイコン」をクリックするとメタ情報編集画面が開きます。タイトルは30文字以内で主要キーワード＋ベネフィットを含めるのが鉄則です（例：「池袋の隠れ家カフェ｜自家焙煎コーヒーと手作りケーキ」）。

ディスクリプションは80〜120文字を目安に、記事内容を要約しつつクリック後のメリットを具体化してください。たとえば「全席電源＆Wi-Fi完備、平日限定クーポン記載」など数字やオファーを入れるとCTRが平均1.4倍向上します。

OGP設定は同画面下部「SNS設定」で画像・タイトル・説明を入力します。推奨画像サイズは横1200px×縦630px、ファイル名は「keyword-ogp.jpg」にすると画像検索でもヒットしやすくなります。

Facebook DebuggerやTwitter Card Validatorでプレビューを確認し、問題なければ「公開」をクリックして完了です。検索結果やSNSで反映されるまで数時間かかる場合があるので、急ぎのキャンペーン時は早めに設定を済ませましょう。

ポイント

• 【ワンポイント】タイトルと説明の最初にブランド名を入れると指名検索で上位化しやすくなります。
• 【注意】複数ページで同一ディスクリプションを使うと重複評価で順位が下がる可能性があります。

手順6　Google Analytics／Search Consoleの接続

解析ツールの導入は「計測コードを貼る→所有権を確認する」の2工程です。まずGA4を開き「管理＞データストリーム＞ウェブ」を選択し、測定ID（G-XXXXXXXXXX）をコピーします。

Owndの管理画面で「設定＞広告・解析タグ＞Google Analytics」にIDを貼り付けて保存すれば、数分でPV計測が開始されます。次にSearch Consoleにアクセスし「URLプレフィックス」でサイトURLを入力。

所有権確認は「HTMLタグ」を選び、表示されたmetaタグをOwndの「設定＞広告・解析タグ＞その他タグ」にコピーして保存→Search Consoleの「確認」を押せば完了です。

24時間後には検索クエリやクリック数が表示されるので、「検索パフォーマンス＞クエリ」でCTRが低いキーワードを抽出し、タイトルや見出しを改善しましょう。

GA4では「エンゲージメント＞ページとスクリーン」で直帰率の高いページを洗い出し、ヒートマップ（Microsoft Clarityなど）と併用するとユーザー行動が可視化され、リライトの精度が飛躍的に高まります。

ポイント

• 【NG例】GAタグをhead内と設定画面の両方に重複設置するとPVが二重カウントされます。
• 【便利技】Looker StudioでGA4とSCを統合すると、クエリ別CV率を1枚のダッシュボードで確認できます。
• 【次のアクション】解析データをもとに「滞在時間が短い＝画像不足」「CTR低い＝タイトル改善」という仮説を立て、週1回記事をリライトしましょう。

※GA4の導入については、項目が削除されたという情報があります。Ameba Owndの公式ヘルプを参照しますと、下記の情報が出てきますので、連携できるかは確認が必要です。

Q：サイトのアクセス解析はできますか？

A：過去のアクセス数やリアルタイムのフォロワー数を確認できるダッシュボード機能でアクセス数を確認できます。また、Google Analyticsのアカウントをお持ちでしたら設定することも可能です。

引用：Amebaownd公式ヘルプ

公開後チェックとエラー対処

サイトを公開した瞬間はゴールではなく、むしろスタートラインです。検索エンジンに正しくインデックスされ、SSLが有効化され、リンク切れや表示崩れがないかをチェックしなければ、ユーザー体験もSEO評価も大きく損なわれます。

公開直後に行うべき確認は〈速度・表示・セキュリティ・リンク〉の4項目です。まず速度は PageSpeed Insightsでモバイル80点以上を目標にし、スコアが低ければ画像圧縮や不要CSS削除を再検討します。次に表示確認。

PC／タブレット／スマホの3デバイスでトップと下層2ページを開き、改行やボタン位置がずれていないか目視でチェックします。セキュリティ面ではSSL証明書が「鍵アイコン付きHTTPS」で表示されるか確認し、警告が出る場合は管理画面の「SSL再取得」をクリックして反映させます。

最後にリンク切れ。Owndの内部リンクエラーはSearch Consoleの「カバレッジ」で把握できるため、404が表示されたURLをクリックしてリダイレクト設定もしくは該当リンクの修正を行いましょう。

こうしたチェックを公開当日＋1週間後＋月次でルーチン化すれば、大きなトラブルを未然に防げます。また、プラグインや外部スクリプトを後から追加した場合は、その都度キャッシュをクリアしブラウザの強制再読み込み（Cmd+Shift+R）で確認すると、旧CSSによる見落としを回避できます。

手順7　表示テスト・SSL／ドメイン接続の確認

公開後チェックを具体的な作業フローに落とし込んだものが「手順7」です。手順のゴールは「不具合ゼロでユーザーに届く状態」を担保することで、1回の所要時間は約15〜20分。まずブラウザのシークレットウィンドウを開き、独自ドメインでサイトトップにアクセスします。

ここでページが表示されない場合、DNS伝播が終わっていないかA／CNAMEレコードが誤っていないかを確認しましょう。表示されたらURL欄の左側に鍵アイコンがあるかチェックし、鍵が赤線付きであればHTTPS化に失敗しています。

「設定＞SSL証明書再取得」ボタンを押し、10〜15分後に再読み込みして鍵を確認してください。次に、3つの代表的ページ（トップ・サービス紹介・お問い合わせ）をChrome DevToolsのDevice ToolbarでiPhone SE、iPad、Pixel 7の3種類に切り替えて確認します。

画像のはみ出しやボタン欠けがあれば、そのブロックの幅を「%」指定に変更し、再プレビューで修正を確認します。

続いて速度計測。PageSpeed InsightsにトップURLを入力し、モバイル・デスクトップの両結果を控えます。モバイル70点未満なら、画像の圧縮率を70%→80%に上げる、不要なアニメーションをオフにするなど改善を行い、再テストして80点を目指します。

最後にリンク切れと構造化データエラーをSearch Consoleでチェック。管理画面→カバレッジで404があれば「検証」をクリック、修正したらインデックス登録をリクエストします。

エラーゼロを確認した時点で、Analyticsのリアルタイムタブを開き、自分のアクセスが1とカウントされているかを確認すれば計測タグが正常に動いていることがわかります。

ここまで完了したら、「リリース済みチェックリスト」に日時と合否を記録し、次回リリース時に再利用できるようテンプレ化しましょう。

ポイント

• 【備忘録】ドメイン更新日とSSL期限をGoogleカレンダーにリマインド設定すると更新忘れを防げます。
• 【チーム運用】チェックリストはNotionやスプレッドシートに共有し、担当者と期限を割り当てると抜け漏れゼロに。
• 【改善サイクル】公開翌日・1週間後・30日後の3タイミングでSearch Consoleの検索クエリを確認し、CTRが低いページからタイトルをリライトすると効率的です。

関連記事主婦がアメブロで月５万円の収入を得る方法【３ステップ】

2024.06.11

まとめ

7手順を通じて、①ページ＆ブロック作成→②画像・リンク配置→③テーマ色・フォント変更→④共通CSSでスマホ対応→⑤SEOメタ設定→⑥Analytics連携→⑦公開後のSSL・表示チェックまで完結しました。

これでOwndサイトの見た目と検索評価を同時に底上げできます。今すぐ管理画面を開き、手順1から実践して集客導線を整えましょう。