サイドバーで商品PRするカスタムしました☆画像がスムーズに入れ替わり多くの商品をPR☆

こんにちは☆もうこんばんは！な時間ですね。
今日は先日ご依頼をいただきましたmuku様のブログへ、追加でカスタムした内容を記事にしました。

muku様はショプを手がけてらっしゃいますのでサイドバーで商品PRをしたいい！
というご希望をいただきまして、早速カスタム開始。

たくさんある商品をコンパクトなスペースでより多く見せたいとのご希望から、今回は
jQeryを使ったパーツカスタムで画像をスムーズに入れ替え、各画像から商品ページへ
リンクするというカスタムを施しました。

早速画像をご覧ください。

実際にカスタムしたブログはこちら→「mukuの小部屋」


画像を沢山読み込むにはソースが長くなっていくので、今回は外部のサーバーを利用しました。
利用したjQueryはcoin-sliderです。


通常のアメブロカスタム以外にも、こんなことできる？こんなコトしたいんだけど？
というご相談いただければ研究して実践していきます！

記事にご協力いただきましたmuku様ほんとうに有難うございました☆

アメブロだから・・できないだろうなぁ～・・。ということもいろいろ実現できたりします。出来なさそうなことができたときの喜びといったら・・これ以上ない喜びです☆

一番良いブログレイアウトは？最も良くページ全体が見られるサイドバーのレイアウト配置について

こんにちは☆
今日はサイドバーの配置についてのお話です。

アメブロに限ったことではないのですが、ブログを作る際に
サイドバーのレイアウトが選べますよね。

大きく分けて5種類。

　　　　

このようにサイドバーの配置が選べます。

さて、ここでどのレイアウトが一番良いのでしょう？
それぞれに長所と短所がありますので、解説していきたいと思います。

解説に当たっての今日のキーワードは「F」です。
「F」とはWEBサイトを閲覧する際の人の目の動きで、ホームページをひらくと、
まず左上からFの字を描くようにサイト全体を眺めていきます。
つまり横⇛縦⇛横という順で見ていくようです。
これは統計データに基づいて分かってきたデータです。

このキーワード「F」を念頭に置きつつ一緒に考えていきましょう！



左サイドバー①/左サイドバー②/右メイン




左にサイドバーを二列並べるレイアウトです。
この形はあまり皆さん使っていないようです。
いろんなブログを見ていますが見かけないですね。
このレイアウトは一番重要なコンテンツが、一番最後に眼に入る配置のために、
せっかく書いている記事があまり読まれないレイアウトかもしれません。
少し勿体無いですね。
左サイドバーに目玉が常にあって必ず見せたい！
という方にはこの配置もありかもしれません。

このレイアウトは私的にはあまりお勧めは致しません。



左メイン/右サイドバー①/右サイドバー②




次に左にメインがあり右にサイドバー二列のレイアウトです。
このレイアウトはメインのコンテンツが直ぐに目に飛び込んでくるので、書いている記事が
引き立つレイアウトです。サイドバーにたくさんの要素を置きたい場合に、右ノサイドバーを
二列に分けることによって、まとまりも出てきますね。
ただ、真ん中のサイドバーにたくさんの広告や外部へのリンクなどを
持ってきてしまうとメインと一番右サイドバーの目の移動距離が長くなるので、
見ている人は疲れてしまうかもしれません。

情報がたくさんある方には良いと思います。



左サイドバー/メイン/右サイドバー




今度は左右にサイドバーがあるレイアウトですが、これはもう皆さん採用しています。
スタンダードな配列です。左に重要なナビゲーションメニューを持ってきて、メインの
記事を読んでもらう。そして、ブログを気に入ってくれた人は全体を見まわし、右サイドバー
の情報にも目を運ぶ。こんなユーザー目線だと思います。

スタンダードタイプなので万能型のレイアウトです。



メイン/右サイドバー




メインが左にあり右に一列サイドバーのレイアウトです。
このタイプも良く見かけます。このタイプはメインとサイドバーの幅に余裕もあり、
全体的にすっきりと見えて読みやすいブログだと思います。幅の観点から言えば、
左に一列サイドバー/右のメインも同じくすっきり見えますが、左にメインがある方が
幅広のメインエリアが最初に目に入るこのレイアウトが一番すっきり見えるでしょう。

コンテンツ重視！という方にはおすすめのレイアウトです。



左サイドバー/メイン




私のブログで採用しているのはこの左一列サイドバー/メインのレイアウトです。
このタイプは一番全体を通してよく見られるレイアウトだと思います。
訪問者が目的としているのは記事なので、記事を探すためにすぐに右に目を移します。
しかし先程のキーワードFの法則に従うと、左のサイドバーも上から下にかけて、
閲覧されていきます。左にナビゲーションを配置してあげることで、メニューボタンが
押される確率は上がりますので、訪問者のサイト内での移動も比較的楽だと思います。

こちらは全体を通してまんべんなく見られるレイアウトです。



ブログを書いている本人は自分のブログなのでくまなく全部に目をやりますが、
意外と訪問者の方は全体を見ていないものです。
配置によっては重要なコンテンツを見逃していることもしばしば。
これは本当にもったいないです。
大切な情報はできるだけ左上に持ってきて、ブログを気に入ってくれた人に、さらに
情報を見てもらうために、右に追加でお知らせしたい情報を乗せるとよいでしょう。

訪問者にとって疲れずにサクサクと読んでいけるような配置を心がけたいたいですね☆

ちなみにGoogleのアドセンス広告は上にあ広告よりも下にある広告が
押される確率が断然高いようです。アメブロの記事フッターにもアドセンスが必ず入りますが、
ちゃんと考えてフッター部分に配置されていますね。

なんでこの位置かというと「押される」からです。

ですから押してもらいたくて、広告を上の方の持ってきても実際にはあまり押されないという
残念な結果に。。すごく目立って興味をそそる広告の場合は、また違う結果かもしれませんが・・。

ブログに様々な要素があります。あえて、このレイアウトにしているんだよ？という方も
いると思いますので、一概に善い悪いを決め付けるのは良くないですが、一般的なブログで
あれば、下記のどれかが良いでしょう。

左サイドバー/メイン/右サイドバー
メイン/右サイドバー
左サイドバー/メイン


あなたのレイアウトは今どうなっていますか？
このレイアウトは・・・と思った方も焦る必要はありません。
内容を充実させながらサイト全体のブラッシュアップしましょう☆

この記事お役に立てたでしょうか？私が考えてみたレイアウトについてのおはなしでしたが、これからもこんな感じで記事書きます！いいね！と思ってただけたら、読者登録お願いしますo＾ー＾o

アメブロデザインカスタム制作実績「株式会社彦山堂本店様」ブログ

彦山堂本店様、ご依頼ありがとうございました！

☆製作したアメブロカスタムデザインはこちら☆
http://ameblo.jp/katu77ganmo/

株式会社彦山堂本店様のご紹介
和・洋・中の有田焼食器を日本全国に販売する食器屋さんです。

FaceBook
http://www.facebook.com/katuhiro.yoshida
Twitter
http://twitter.com/#!/hikosando/



【声】吉田様より制作に関してに感想をお客様の声を現在いただいております。
いただき次第、掲載させていただきます☆

［第一回］WEBデザイナーの制作裏話。どうやってデザインの感性を磨くの？

こんにちは☆新たな連載？！（笑
ということで、WEBデザイナーの制作の裏話をちびちびと書いていこうと思います。
そんなに書くことあるかな？ハハ・・（苦笑

今回はWEBデザイナーの感性の磨き方ですが、至って簡単、単純明快です。
それは

一にサーフィン
二にサーフィン
三四もサーフィン
五にサーフィン

です。

はっ？？

どこの稲村ジェーン？？と言われかねませんがサーフィンはサーフィンでも
ネットサーフィンです。。スイマセン。。
他のデザイナーさんがどうなのかは分からないのですがあくまでスイ式です。


WEBデザインには型がある。

WEBデザインって、実はすごく型が決まっています。それに流行りがものすごくあります。
例えばよく一つの型とされるのはデザインはAPPLEのデザイン。
とてもシンプルで洗練されたデザインで、世界中から評価されていますよね。



APPLEは製品全てにこだわりのAPPLE式デザインを持っています。WEBもモバイル端末も。
私も大好きです。

よくこんなサイトにしてくださいと依頼される中で、APPLEのようなシンプルで洗練された
サイトにしてくださいと言われることがあります。

はい！まさにこれが型です。

●●のようなサイトに～の●●の部分に登場する名前は一つの型を形成しています。

数えきれないほどのWEBサイトが世の中に存在していますが、だいたいいくつかの分類に
分けることができるでしょう。

最近というか、ずっとブログの先端を走っているWordPressですがこれもひとつのデザインの型です。
だいたい、ぱっと見ればWordPressで作られているかどうか分かるんです。
デザインは違えど、システムに癖がありますし、すぐに分かってしまいます。

他には２ｃｈっぽいとかニコ動っぽいサイトも多く見かけます。
たまたまサーフィンしていたサイトでこんなサイトがありました。
パッと開いてみてどの型かわかりますか？

・KEIEIコンビニ様










はい、私はぱっと見て、これは・・・ニコ動！
と感じました。

・ニコ動様










実際に、ニコ動と同じように作ってと制作会社に発注したか、旗また自作したかは
わかりませんが、おそらくそんなニュアンスもあったのかなと・・・。
（違ったら本当にスイマセン。KEIEIコンビニ様）


そんな中で、アメブロにも型があります。
ヘッダーにアメーバのバーがあるので、一目瞭然ですが、システムに依存した
デザインとなるのでアメブロの仕組みから外れた奇抜で突拍子も無いデザインは
極稀にしか見かけません。
たまに見ていて、おおっ！これはすごいカスタムしてる！！
とゾクゾクするする、このカスタムはすごいー！見入ってしまうデザインもあります。

本当は、ではWEBデザインにはこんな型があって、対象サイトのURLは具体的にココとココと・・
と上げていきたいのですが、専門調査機関ではありませんので、ここらへんまでで・・（苦笑


型の話をしたのは、私がたくさんのサイトをネットサーフィンしていて分かってきたことです。
ネットサーフィンをする理由はいろんなサイトから情報を得ること半分、デザインの傾向を見たり
このネタは使えるぞ！とデザインを見たりしているんです☆

あくまで私の話ですが、教科書で学ぶよりも、実際に見て真似して、会得する。
これが一番良いデザインの感性の磨き方かなぁと、あくまでスイ式です。
（大事なことは何度も言います（笑））

逆にこれ以上のことは何もしていません・・・。
（もっと勉強しろよ・・と叱られますね・・）


以上第一回制作の裏話？でした。二回目あるかな・・？（苦笑

スイは本当はデザイナーなんて語れるほどのものではありません。学校に行ったわけでもないですし、ましてや本を買ってきて読んでもいません。あ、何冊かは買いました。全てはネット上で得たものばかりが実情です＾ー＾；こんな私ですがお世話になっている方々、本当にありがとうございます。

かならず500円がもらえるキャンペーンは明日までで終了です☆［ちょっとしたお小遣いに］

こんにちは☆制作の合間を塗って記事投稿です。
前にご紹介した、ブログに貼る手軽な広告のMicroAdですが、明日までが貼るだけで500円もらえる
キャンペーンです。6月15日が最終日。ということで広告のおはなしです。

有名なブログに貼る広告としてGoogleのアドセンスがありますが、それと似たような広告です。
せっかくブログの記事を書くのだからお小遣いくらい貰ってもいいじゃない！という皆様に
是非おすすめですよ。

ちなみに私も左サイドバーの中央付近に貼っています。

マイクロアドBTパートナーはブログやサイトに貼るだけ。お小遣いをゲットしよう！


以前紹介した記事と似た内容ですが、キャンペーンが明日までということで再度投稿！
あ、実はブログを投稿すればするほどアクセスも伸びるので、
小さなことから投稿しているスイです。。（苦笑

ブログに貼る広告は慎重に選んでいます。たくさん貼っても逆効果ですので厳選して！それも良くない広告もあるので、スイが試してみていいものだけをたまにご紹介しますね☆