京都では祇園祭のシーズンです。7/14の宵宵宵山から7/17の山鉾巡行にかけて、必ず雨がふることで有名です。
さて、今回は、アメブロカスタム事例をご紹介します。アメブロことAmeba Blogなどのレンタルブログのカスタマイズサービスは、ホームページ修正価格表等にも掲載しておらず、基本的にはサービス提供しておりません。しかしながら、「裏メニュー」的に友人知人などからのみ何度かカスタマイズを行った事があります。
弊社では、企業のWebマーケティングにおいては、正式なホームページ（ウェブサイト）の運用とWordPressなどのCMSによるサイト内オウンドメディアを推進させていただいているため、基本的にレンタルブログ関係のみでの運用はおすすめしておりません。
アメブロ「デザイン（テンプレート）」の制作・作成
「ホームページが欲しいけど、あまりお金もかけられないのでアメブロから始めようと思う」
友人知人などからはそのような声が多いような印象があります。
仕方なくアメブロを運用するということでしたので、「せめてデザインだけでも」という要望があったため、低価格でアメブロの「CSS編集用デザイン」を元にオリジナルテーマを作成しました。
CSS編集用デザイン
アメブロはある程度の制限があるものの、デザインはCSSである程度の編集ができるため、少し無理やりながらもオリジナルデザインのテンプレートを制作しました。
「少し無理やり」と表現したのは、基本となるHTMLが固定的だからです。
HTMLも完全に編集できるのであれば、スマートにブロック要素を挿入できるのですが、編集可能なのがサイドバーのフリースペースやフリープラグインなどと、CSSだけなので、ブロック内にID付けした「ブロック要素」をCSSで無理やり要素のポジションを操作する必要があります。
ヘッダースライドショーとオリジナル横並びボタン
弊社のアメブロのようなヘッダースライドショーを実装するため、スライドショーに用いる画像をアメブロにアップロードしつつ、フリープラグインにスライド用jsを設置、何とか画像のパスを見つけてフリースペースにスライドショー用ソースと呼び出す画像のパスを挿入して実装完了です。
同時にアメブロのヘッダースライドショー下にオリジナル横並びボタンの設置をするため、横並びボタン用のHTMLをフリースペースに挿入しました。
フリースペースは通常サイドバーに配置されるため、そのままだとサイドバーにしか表示されません。ヘッダー部のスライドショー直下に横並びボタンを設置するため該当ブロック要素をCSSで無理やりヘッダー部に回りこむようにしました。
配色の変更
また、標準的な「CSS編集用デザイン」は配色が無機質的なため、アメブロ全体の配色を希望通りに編集しました。
これで概ね希望通りのデザインに仕上がったようです。
アメブロカスタムの際に、「レイアウト関連」のCSSを初心者が操作するとレイアウト崩れなどの原因にもなりますが、カラーの変更ならばそれほどリスクもないでしょう。
オリジナル画像を設置したり配色を変更するだけでアメブロのイメージはぐっと変わりますね。
最近では画像加工もスマートフォンアプリなどでできますし、そうしたアプリで文字入れなどもできるので、こだわった画像を組み込んで「デザイン」のイメージを変更してみると、それなりのデザイン（テンプレート）に仕上がります。
こうして友人のアメブロは「普通のブログ」よりは大分と一般的なホームページっぽく仕上がりました。
アメブロ「デザイン」は完成したが、様々な問題が…
アメブロの「デザイン」はCSSである程度の編集が可能なため、「CSS編集用デザイン」でなくても、CSSが編集可能な限り、ある程度のカスタマイズは可能です。
しかしやはり様々なソースを見る限り、あまり公式サイト的な扱いとしてはおすすめできません。
オンラインブランディングとしての問題やSEOの問題など、アメブロは無料で始められる分（有料でも広告の非表示といった程度の変化です）、様々なマイナスポイントがあります。レンタルブログ自体が元々個人の趣味の範囲での利用を前提として始まったと推測ため致し方ないでしょう。
オンラインブランディング的な問題
やはり、公式サイトがない状態でブログだけが検索結果に表示された時には、事業体としてのオンラインブランディングにおいてマイナスイメージに繋がる可能性もあります。
アメブロはブロガー同士の交流という側面があり、ソーシャルネットワーク的な機能を持っているので、個人を全面に押し出す事業体であれば、それほど影響はないかもしれませんが、一般的な企業であれば、アメブロを主体とするのはブランディングには不向きでしょう。
SEO的な問題
アメブロはSEOに有利という情報もあるようですが、ameblo.jpのドメインパワーのために、初期段階では若干有利だという程度で、長期運用する場合はSEOに様々な問題があります。
まず、トップへのリンクがh1そしてエントリータイトルにもh1、今ではHTML5のようですので、H1の複数使用は特に問題ではありませんが、主要クエリが分散してしまうような気も少しします。
あとアメブロのSEOで致命的なのは、メタデータの設定ができないことです。
アメブロはページごとのメタデータ設定もできませんし、インデックス制御などもできません。
基本的に無料の外部サービスなので仕方ないでしょう。
アメブロでSEOを意識して記事を増やしたりするよりも、WordPressなどに変更したほうが圧倒的にSEOに有利であることは言うまでもありません。
スマホ版は？
アメブロの「デザイン」完成とともに、「スマホ版は？」というクレームを頂きました。
残念ながらアメブロは、PC表示の場合はhttps://ameblo.jp/、スマートフォンからのアクセスの場合にはhttps://s.ameblo.jp/とサブドメインがついて別サイト扱いになり、jsが実行されないなど、様々な制限があります。
これはスマートフォン表示に合わせたモバイルフレンドリー仕様へと、アメブロ自体が自動的に変更されるといったイメージです。
「カスタムしたアメブロのスマホ版は？」というクレームに対しての回答は、
「手が及ぶ範囲ではございません」
「何とかなりませんか？」
「なりません」
という形になってしまいます。
私たちも、アメブロ自体が外部サービスのため、制限や仕様変更などについて責任をもつことができません。
Google Analyticsのトラッキング
Google Analyticsのトラッキングも行うことができますが、友人知人などからアメーバ内の「アクセス数」のPVと数字が合わないという声もよく聞きます。
おそらく、スマートフォンからのアクセスの際にはサブドメイン「s」へと振り分けられることと、スマホ版アメブロでは、Google Analyticsのトラッキングコードがjsのため、スマホ版アメブロの制限によりjsが実行されておらず数値のカウントができないのではないかと推測されます。
アメブロのアクセス数
Google Analyticsなどの高度なアクセス解析では、ホームページへのアクセスの分類として、セッション数やユーザー数、PV数といった概念があり、それぞれアクセス解析データによる分析の際の目安としての特性が異なります。
一方アメブロの「アクセス数」は、単純にPV数（ページビュー数）にあたるため、アクセスユーザーの数などではなく、アメブロの記事が「何ページ見られたか」という数値になります。
一人のユーザーであっても複数のページを閲覧していれば、アメブロのアクセス数はカウントされていきます。自分でアメブロを見ていてもカウントされるので、実際のアクセス数を確認することには不向きと言えるでしょう。
急にアメブロのアクセスが増えたと思ったら、編集している時に自分でページを参照していた分がカウントされていただけ、という事がありませんように…
長期的なホームページ活用を検討する場合
また、よく「アメブロ活用セミナー」などが開催されているようですが、Webマーケティングのために長期的なホームページ活用を検討する場合、アメブロ等単体の利用はおすすめしておりません。
本格的なオウンドメディア構築の前段階として、コンテンツの蓄積には良いかもしれませんが、アメブロ単体では中長期的な視点に立った時には、必ずウェブの活用としてはマイナスになります。
一方的な情報発信に近い「ホームページ（ウェブサイト）」よりも幾分ブロガー同士の距離が近いという意味で、アメーバ、アメブロはソーシャル的な要素が強いため、サブツールとしての運用をおすすめさせていただきます。
「無料のアメブロで効果がなかったから、ある程度費用をかけて公式ホームページを作っても同じような結果になるだろう」
そんな印象だけは避けたいところです。
「無料のアメブロと通常のホームページ（ウェブサイト）は性質が違う」
その本質をどこまでお伝えすることができるか、それが私たちホームページ制作会社の使命の一つだと考えています。
今回は普段取り扱っていない「裏メニュー」的なアメブロデザイン作成、アメブロデザインカスタマイズについてお伝えさせていただきました。
（初回投稿日 2016年7月16日）
