アメブロのヘッダーやメニューバーを変更したのに、スマートフォンで見ると以前のまま。パソコンではきれいに表示されているため、設定に失敗したのではないかと不安になることがあります。
この場合、カスタマイズ自体に問題があるとは限りません。
アメブロは、パソコン、スマートフォンのブラウザ、Amebaアプリでデザインの扱いが違います。どの画面で見ているかを確認しないまま修正を続けると、正常な設定を消してしまうこともあります。
まず確認したい3つの表示方法
「スマホで反映されない」ときは、スマートフォンの機種より、どの方法でブログを開いているかを見ます。
アメブロには、主に次の3つの表示があります。
| 見る方法 | 主な特徴 | デザインの扱い |
|---|---|---|
| パソコンのブラウザ | ヘッダーやメニューバーを含む全体表示 | PC用の設定が反映される |
| スマートフォンのブラウザ | SafariやChromeなどから開く | スマホ用の設定が反映される |
| Amebaアプリ | アプリ内で記事を開く | 個別に設定したブログデザインは反映されない |
Ameba公式ヘルプでは、パソコンとスマートフォンブラウザのデザインは連動しておらず、それぞれ個別に設定する必要があると案内されています。
また、スマートフォン用に設定したデザインも、Amebaアプリ内では反映されません。アプリからブラウザ表示へ切り替えた場合に、スマートフォンブラウザ用のデザインを確認できます。
つまり、パソコン用のヘッダーを設定したあとにAmebaアプリで確認し、「表示されていない」と判断しても、設定ミスとは限りません。
アメブロのカスタマイズがスマホに反映されない主な理由
Amebaアプリで確認している
最初に見るべきなのは、ブログをAmebaアプリ内で開いていないかです。
Amebaアプリでは、ブログごとに設定したパソコン用デザインやスマートフォンブラウザ用デザインがそのまま表示されません。
次のような状態でも、アプリでは簡素な表示になることがあります。
- オリジナルのヘッダーを設置している
- メニューバーを追加している
- 背景色を変更している
- サイドバーの見出しを変更している
- CSSで文字やボタンの形を整えている
スマートフォンでデザインを確認するときは、SafariやChromeでブログURLを直接開きます。
パソコン用の設定しか変更していない
パソコンでCSSを編集した場合、その設定がスマートフォンへ自動でコピーされるわけではありません。
アメブロのパソコン版には、背景やヘッダーなどを変更する簡単カスタマイズと、より細かく変更するCSSカスタマイズがあります。どちらも、スマートフォンブラウザのデザインとは分けて考える必要があります。
パソコンで表示されている次の部分は、スマートフォンでは同じ形にならないことがあります。
- 横長のヘッダー画像
- 横並びのメニューバー
- サイドバー
- メッセージボード
- 背景画像
- サイド見出し
- フォローボタンの位置
パソコンとスマートフォンでは画面の幅が大きく違うため、同じデザインをそのまま縮小すると文字や写真が見づらくなります。
スマートフォン用デザインを設定していない
パソコン側を変更しただけでは、スマートフォンブラウザ側の見た目は変わりません。
スマートフォンブラウザでブログを開き、スマートフォン用のデザインがどうなっているかを別に見ます。
ここで確認したいのは、パソコン版と完全に同じかどうかではありません。
- ブログ名が分かるか
- プロフィール画像が合っているか
- 記事一覧が読みにくくないか
- 色の雰囲気が大きくずれていないか
- 必要なページへ移動できるか
パソコン版のヘッダーやメニューバーが表示されなくても、ブログの印象を近づけることはできます。
以前の画面が残っている
設定を保存した直後は、開いたままのページに以前の表示が残っていることがあります。
次の順番で見直します。
- 設定画面で保存が完了しているか見る
- ブログのページを再読み込みする
- 一度ブラウザを閉じて開き直す
- 別のブラウザでブログURLを開く
- パソコンとスマートフォンの両方で見る
それでもパソコン側にも反映されていなければ、使っているデザインやCSSの内容を見直します。
CSSを編集できないデザインを使っている
アメブロで細かなCSSカスタマイズを行うには、対応したデザインを選ぶ必要があります。
Ameba公式ヘルプでは、「カスタム可能」からCSS編集用デザインを選び、適用したあとにCSS編集画面を開く流れが案内されています。
別のデザインへ変更すると、それまでのCSSが想定どおりに表示されなくなることもあります。
すでにカスタマイズ済みのブログを直す場合は、デザインを安易に変更せず、現在の設定を保存してから作業します。
PCとスマホを完全に同じデザインにはできない
パソコンとスマートフォンで、見た目を完全に同じにする必要はありません。
大切なのは、どこから見ても同じブログだと分かり、必要な情報へ迷わず進めることです。
パソコンで見せやすいもの
パソコンは画面が広いため、ブログ全体の雰囲気を伝えるデザインに向いています。
- 横長のヘッダー
- メニューバー
- サイドバー
- メッセージボード
- 複数の案内バナー
- 背景画像
- プロフィールやサービス一覧
教室、サロン、カウンセリング、ハンドメイドなど、写真や色で世界観を伝えたいブログでは、パソコン画面を整えることで全体の印象を変えられます。
スマートフォンで優先したいもの
スマートフォンでは、記事本文を読みやすくすることを優先します。
- 記事タイトル
- 記事の最初に表示される画像
- プロフィール画像
- 読みやすい文字サイズ
- 短い段落
- 分かりやすい見出し
- 問い合わせや案内ページへの移動方法
パソコン用の横長ヘッダーだけを作り込んでも、スマートフォンの読者には見えないことがあります。
スマートフォンからの見え方を整えたい場合は、ブログ全体のデザインだけでなく、記事の最初に置く画像や文章の書き方も一緒に考えます。
アプリでもブログの印象をそろえる方法
Amebaアプリでは、パソコン用のカスタマイズをそのまま見せることはできません。
そのため、アプリでも表示される部分を使って印象をそろえます。
プロフィール画像を統一する
プロフィール画像は、小さく表示されても分かるものを使います。
写真を使う場合は、背景が複雑なものより、顔や商品がはっきり見えるものが向いています。ロゴを使う場合も、細かな文字を詰め込まず、形と色で判別できるようにします。
記事の最初に画像を入れる
パソコン用ヘッダーが表示されない場所では、記事の最初にある画像がブログの印象を左右します。
ヘッダーと同じ色や書体を使った記事画像を用意すると、見る場所が変わっても雰囲気をそろえやすくなります。
毎回まったく違うデザインにするのではなく、次の部分を固定します。
- 背景色
- 文字色
- 書体の雰囲気
- 写真の明るさ
- タイトルの位置
- 装飾の形
ブログタイトルと説明文を整える
画像が表示されない場所では、ブログタイトルと説明文が内容を伝える役割を持ちます。
「○○の日記」のような名前だけでは、初めて来た人に何のブログか伝わりません。
次の内容を短く入れます。
- 誰のためのブログか
- 何について発信しているか
- どの地域や分野で活動しているか
- 読むと何が分かるか
タイトルや説明文を長くしすぎると、スマートフォンで途中までしか見えないことがあります。伝える内容を一つか二つに絞ります。
記事内の案内を分かりやすくする
パソコン用のメニューバーが見えない場合に備え、記事内から必要なページへ進めるようにします。
たとえば、記事の最後に次の案内を置きます。
- プロフィール
- サービス内容
- 予約方法
- お問い合わせ
- よくある質問
- 最新のお知らせ
案内を増やしすぎると、どこを押せばよいか分からなくなります。記事の内容に関係するリンクを優先します。
女性向けブログは「可愛い」だけで決めない
女性向けのアメブロでは、ピンク、花、筆記体などを使えばよいとは限りません。
同じ女性向けでも、対象によって合うデザインは変わります。
| ブログの内容 | 合わせやすい雰囲気 |
|---|---|
| ベビー・子育て | 明るい色、丸みのある装飾、やわらかい写真 |
| 美容サロン | 白を多く使い、清潔感のある写真と細い文字 |
| カウンセリング | 落ち着いた色、読みやすい文字、余白の多い配置 |
| ハンドメイド | 商品写真を中心にした素朴なデザイン |
| 講師・コンサル | 信頼感のある色、内容が分かるメニュー |
| 婚活・恋愛 | 上品なピンクやベージュ、華やかすぎない写真 |
依頼時に「大人可愛くしてください」とだけ伝えると、作る側と依頼者で完成イメージがずれることがあります。
「甘すぎないピンク」「花柄は使わない」「高級感より親しみやすさを優先する」など、避けたい表現まで伝えると方向が定まりやすくなります。
アメブロカスタマイズを依頼する前に決めること
デザイン制作を依頼する前に、写真と文章をそろえます。
制作が始まってからヘッダーの文章や写真を変更すると、文字の位置や画像の加工をやり直すことがあります。
ヘッダーに入れる文章
ヘッダーへ入れる文章は、次の3つ程度に絞ります。
- ブログ名
- キャッチコピー
- 活動名や肩書き
サービス内容、実績、プロフィール、連絡先をすべて入れると、文字が小さくなります。
スマートフォンではヘッダーが表示されない場合もあるため、ヘッダーだけで説明を完結させず、プロフィールや記事本文にも必要な情報を入れます。
使用する写真
ヘッダーに使う写真は、申し込み前に決めておきます。
撮影前の状態で依頼を始めると、あとから写真の向きや余白が合わず、デザインを作り直すことがあります。
確認する項目は次のとおりです。
- 横長に切り取れるか
- 文字を置く余白があるか
- 画質が足りているか
- ブログの雰囲気と合っているか
- 使用許可を確認できているか
人物写真を使う場合は、顔のすぐ横まで切れている写真より、左右に余白がある写真のほうが文字を配置しやすくなります。
メニューバーの項目
メニューバーは、よく見てもらいたいページを並べる場所です。
項目を考えるときは、名前だけでなく移動先のURLも用意します。
例としては、次のような項目があります。
- はじめての方へ
- プロフィール
- サービス内容
- お客様の声
- よくある質問
- お問い合わせ
まだページが完成していない場合は、先に記事や固定ページを作るのか、仮のリンクで制作するのかを決めます。
希望する色と避けたい色
希望色だけでなく、使ってほしくない色も伝えます。
「ピンク希望」でも、淡いピンク、青みのあるピンク、くすみピンクでは印象が違います。色名だけでは伝わりにくいため、参考画像を2、3枚用意すると話が早く進みます。
参考画像は、全体を同じにしてほしいという意味ではなく、次のように見る場所を伝えます。
- この画像の色合い
- このヘッダーの文字配置
- このブログの余白
- この写真の明るさ
- このメニューの分かりやすさ
どの画面を優先するか
依頼前に必ず伝えたいのが、パソコンとスマートフォンのどちらを重視するかです。
アメブロでは、PC用カスタマイズがスマートフォンやアプリへ同じように反映されるわけではありません。
次のように希望を整理します。
- パソコン閲覧時の世界観を整えたい
- スマートフォンの記事画像も統一したい
- アプリから見てもブログ内容が伝わるようにしたい
- メニューバーから予約ページへ移動できるようにしたい
- PCとスマホで完全に同じ表示にする必要はない
「スマホ対応」という言葉だけでは、スマートフォンブラウザを指すのか、Amebaアプリを含むのか分かりません。どの画面で、何を表示したいかまで伝えます。
納品時は3つの画面で確認する
カスタマイズが完成したら、パソコンだけで確認を終わらせません。
次の3つを別々に開きます。
- パソコンのブラウザ
- スマートフォンのSafariまたはChrome
- Amebaアプリ
確認する内容も分けます。
パソコンで見るところ
- ヘッダーの文字が切れていないか
- メニューバーのリンクが合っているか
- サイドバーが崩れていないか
- 背景と文字の色が見やすいか
- フォローボタンが押せるか
スマートフォンブラウザで見るところ
- ブログ名が読めるか
- 記事一覧が見やすいか
- 写真が横にはみ出していないか
- 必要なページへ移動できるか
- 文字が小さすぎないか
Amebaアプリで見るところ
- プロフィール画像が合っているか
- ブログタイトルで内容が分かるか
- 記事の最初の画像が表示されるか
- 記事内の案内リンクが使えるか
- パソコン用デザインが出ないことを前提にしても内容が伝わるか
修正を頼むときは、「スマホで表示されません」だけで済ませず、使用した端末、アプリかブラウザか、該当ページのURL、見えている画面の画像をまとめます。
作業のためにアメブロのパスワードを共有した場合は、完成後に変更します。
まとめ
アメブロのカスタマイズがスマートフォンに反映されないときは、最初にブログをどこで開いているかを見ます。
パソコンとスマートフォンブラウザのデザインは別々に設定され、Amebaアプリには個別のブログデザインが反映されません。パソコンでヘッダーやメニューバーが表示されていても、アプリで同じ画面にならないのはアメブロの表示方法によるものです。
カスタマイズを依頼する場合は、デザインの雰囲気だけでなく、パソコン、スマートフォンブラウザ、アプリのどこで何を見せたいかを整理します。
すべての画面を同じにするのではなく、ヘッダー、プロフィール画像、記事の最初の画像、ブログタイトル、案内リンクを使い分けることで、見る場所が変わっても同じブログだと伝わる状態を作れます。
