アメブロ「デザイン(テンプレート)」の制作 ホームページ制作実績・事例 番外編

アメブロ「デザイン(テンプレート)」の制作 ホームページ制作実績・事例 番外編


京都では祇園祭のシーズンです。7/14の宵宵宵山から7/17の山鉾巡行にかけて、必ず雨がふることで有名です。

さて、今回は、アメブロカスタム事例をご紹介します。アメブロなどのレンタルブログのカスタマイズサービスは、価格表等にも掲載しておらず、基本的には提供していないのですが、「裏メニュー」的に友人知人などからのみ何度かカスタマイズを行った事があります。

弊社では、企業のWebマーケティングにおいては、正式なホームページ(ウェブサイト)の運用とWordPressなどのCMSによるサイト内オウンドメディアを推進させていただいているため、基本的にレンタルブログ関係のみでの運用はおすすめしておりません。

アメブロ「デザイン(テンプレート)」の制作・作成

アメブロ「デザイン(テンプレート)」の制作・作成

「ホームページが欲しいけど、あまりお金もかけられないのでアメブロから始めようと思う」

友人知人などからはそのような声が多いような印象があります。

仕方なくアメブロを運用するということでしたので、「せめてデザインだけでも」という要望があったため、低価格でアメブロの「CSS編集用デザイン」を元にオリジナルテーマを作成しました。

アメブロはある程度の制限があるものの、デザインはCSSである程度の編集ができるため、少し無理やりながらもオリジナルデザインのテンプレートを制作しました。

「少し無理やり」と表現したのは、基本となるHTMLが固定的だからです。

HTMLも完全に編集できるのであれば、スマートにブロック要素を挿入できるのですが、編集可能なのがサイドバーのフリースペースやフリープラグインなどと、CSSだけなので、ブロック内にID付けした「ブロック要素」をCSSで無理やり要素のポジションを操作する必要があります。

ヘッダースライドショーとオリジナル横並びボタン

弊社のアメブロのようなヘッダースライドショーを実装するため、スライドショーに用いる画像をアメブロにアップロードしつつ、フリープラグインにスライド用jsを設置、何とか画像のパスを見つけてフリースペースにスライドショー用ソースと呼び出す画像のパスを挿入して実装完了です。

同時にオリジナル横並びボタンの設置をするため、横並びボタン用のHTMLをフリースペースに挿入しました。

フリースペースは通常サイドバーに配置されるため、そのままだとサイドバーにしか表示されません。ヘッダー部のスライドショー直下に横並びボタンを設置するため該当ブロック要素をCSSで無理やりヘッダー部に回りこむようにしました。

配色の変更

また、標準的な「CSS編集用デザイン」は配色が無機質的なため、アメブロ全体の配色を希望通りに編集しました。

これで概ね希望通りのデザインに仕上がったようです。

「デザイン」は完成したが、様々な問題が…

アメブロのデザインは完成したが、様々な問題が

アメブロの「デザイン」はCSSである程度の編集が可能なため、「CSS編集用デザイン」でなくても、CSSが編集可能な限り、ある程度のカスタマイズは可能です。

しかしやはり様々なソースを見る限り、あまり公式サイト的な扱いとしてはおすすめできません。

オンラインブランディング的な問題

やはり、公式サイトがない状態でブログだけが検索結果に表示された時には、事業体としてのオンラインブランディングにおいてマイナスイメージに繋がる可能性もあります。

SEO的な問題

トップへのリンクがh1そしてエントリータイトルにもh1、今ではHTML5のようですので、H1の複数使用は特に問題ではありませんが、主要クエリが分散してしまうような気も少しします。

あと致命的なのはメタデータの設定ができないことです。

基本的に無料の外部サービスなので仕方ないでしょう。

スマホ版は?

「デザイン」完成とともに、「スマホ版は?」というクレームを頂きました。

残念ながらアメブロは、PC表示の場合はhttp://ameblo.jp/、スマートフォンからのアクセスの場合にはhttp://s.ameblo.jp/とサブドメインがついて別サイト扱いになり、jsが実行されないなど、様々な制限があります。

これはスマートフォン表示に合わせたモバイルフレンドリー仕様へと、アメブロ自体が自動的に変更されるといったイメージです。

「カスタムしたアメブロのスマホ版は?」というクレームに対しての回答は、

「手が及ぶ範囲ではございません」

「何とかなりませんか?」

「なりません」

という形になってしまいます。

私たちも、アメブロ自体が外部サービスのため、制限や仕様変更などについて責任をもつことができません。

Google Analyticsのトラッキング

Google Analyticsのトラッキングも行うことができますが、友人知人などからアメーバ内の「アクセス数」のPVと数字が合わないという声もよく聞きます。

おそらく、スマートフォンからのアクセスの際にはサブドメイン「s」へと振り分けられることと、スマホ版アメブロでは、Google Analyticsのトラッキングコードがjsのため、スマホ版アメブロの制限によりjsが実行されておらず数値のカウントができないのではないかと推測されます。

長期的なホームページ活用を検討する場合

また、よく「アメブロ活用セミナー」などが開催されているようですが、長期的なホームページ活用を検討する場合、アメブロ等単体の利用はおすすめしておりません。

本格的なオウンドメディア構築の前段階として、コンテンツの蓄積には良いかもしれませんが、アメブロ単体では中長期的な視点に立った時には、必ずウェブの活用としてはマイナスになります。

一方的な情報発信に近い「ウェブサイト」よりも幾分ブロガー同士の距離が近いという意味で、アメーバ、アメブロはソーシャル的な要素が強いため、サブツールとしての運用をおすすめさせていただきます。

「無料のアメブロで効果がなかったから、ある程度費用をかけて公式ホームページを作っても同じような結果になるだろう」

そんな印象だけは避けたいところです。

「無料のアメブロと通常のホームページ(ウェブサイト)は性質が違う」

その本質をどこまでお伝えすることができるか、それが私たちホームページ制作会社の使命の一つだと考えています。

今回は普段取り扱っていない「裏メニュー」的なアメブロデザイン作成、アメブロデザインカスタマイズについてお伝えさせていただきました。


「アメブロ「デザイン(テンプレート)」の制作 ホームページ制作実績・事例 番外編」のカテゴリ Web制作・Web関連
タグ:


ホームページ制作、サイトカスタマイズなどのお問い合わせ・ご依頼はこちら