スポンサーサイト

   

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
    カテゴリ : スポンサー広告

2008年09月29日

【意見】大物ブログに学ぶ効率的なレイアウト

   

現在のこのブログレイアウトは、結構色々なブログからインスパイアを受けてレイアウトされていたりします。
というわけで、大物ブロガーのブログのレイアウトから実際に自分が学んだブログレイアウトの小ネタを少々書き綴りたいと思います。
今回参考にしたブログはGIGAZINEさんとアキバBlogさんと*ホームページを作る人のネタ帳さんと404 Blog Not Foundさん。
初めに断っておきますが、個人的な意見ですので、あくまで参考程度に流し読みしてくださいね。

GIGAZINEに学ぶシンプルさ
ニュースブログといえば…と聞いたときまずインターネットを触る人間の頭の中にはGIGAZINEが浮かぶのではないでしょうか?
GIGAZINEはベーシックな3カラムですが、基本的なコンテンツは左の最新ニュース30件と右上のサイト内検索とドロップリスト式のアーカイブです。
メールフォームもなければタグリストや、まとめ記事一覧などもありません。
そのシンプルな構成はとても頭に残りやすく、印象的であるかと思うのですが、何よりこのレイアウトで意味があるのはのびのびと使われた左の「最新ニュース30件」です。
これは記事を読んでいるうちに自然に左の最新ニュースに目が行き、1記事だけ読んで読者が去るといった状況を少なからず抑止してくれる効果があるように思えます。

 →レイアウトはシンプルに。最新記事の一覧を目の届く範囲に置け。

アキバBlogに学ぶサイドバーのまとめ方
このブログのレイアウトはかなりアキバblogさんにインスパイアされていたりします。その一つが、アキバblogさんのサイドバー。
今までは、テキストで「~まとめ」見たいにサイドバーに表記していたのですが、そのワンポイントに画像をつかうことで視覚的に読者に訴えかけることが出来ました。友人もGJ!とか言っていたので3者的な視点から見ても良いみたいです。
←(多分)この部分にあるやつね。
これは非常に効果的で、小さめの画像を使うことで、ブログ内のボリュームを出しながらも引き締まった印象を与えてくれます。
できればサイドバーの文字サイズも若干小さめにした方が見栄えが良いかも知れません。

 →サイドバーのまとめ記事にはワンポイントで小さめの画像を

GIGAZINEアキバBlogに学ぶ配色
GIGAZINEもアキバblogさんも統一された配色にはとても目を引くものがあります。
 黄色オレンジ
使いこなすのは難しいですが、特徴的、印象的な色を自分のブログのトレードマークとして利用することが出来れば、読者の頭の片隅に残るでしょう。
残念ながらこのブログの配色は統一されてはいますが、地味なグレーなのでなんともいえませんが…利用するなら暖色系ですよね。

 →特徴的な配色を

*ホームページを作る人のネタ帳さんに学ぶTOP
現役Web屋の方ということですので、学ぶ所はたくさんあります。

その一つにTOP絵の配置。何もネタ帳さんだけではないのですがTOPの左にタイトル画像を配置して右側を自由に使うスタイル。
TOPには自然と目のいくところですので何もTOPにデカデカとTOP画像を貼る必要性はありません。
TOP左にピョコっと貼ってもでっかく貼っても読者に与える印象にさして変わらないでしょう。
それでしたらTOPは小さくして残りを自由に使うというのが賢い使い方ではないでしょうか?

 →TOP画像が大きい必要性はなし、小さく使って残りは有効活用

ちなみにネタ帳さんの場合、記事の後ろに最近のエントリーを持ってきています。GIGAZINEさんのように表示できるスペースがない場合こちらでも非常に効果がありそうですよね。流石に両方表示するのはくどいですが…

404 Blog Not Foundさんに学ぶ記事での画像のつかい方
ブログで画像を使うとき、記事TOPに画像を持ってくるか記事サイドに画像を持ってくるか悩むところです。
GIGAZINEさんはその記事の内容を画像をみた読者に一発で訴えかけられるようにTOPの配置をしているようですが、そうではない場合、つまりはその画像に対しての説明であったり、記事の具体的な内容である画像の場合、GIGAZINEのような画像の使い方をするとかえって記事スペースをとってしまいます。
その場合はやはり404 Blog Not Foundさんのような画像の配置は素晴らしいかもしれません。
やはり一まとめにするとスッキリ見えます。
また画像の周りに余白を作ることで記事が見にくくなるといったことも避けられます。
ただ、画像のサイズに合わせて記事を書いた場合、見るブラウザによっては画像から一行だけ文がはみ出すといったこともあるので注意が必要かも知れません。

 →読者に直接訴えかける必要のない画像はサイドに表示

この一年間、ブログをやっていて実際に学んだブログレイアウトのコツでした。
自分は、Webデザイナーでも何でもないので、実際の効果や色彩といったものはわかりませんが、それでも何か自分に訴えかけるものにはそれなりの理由があったりするんですよね。
    カテゴリ : opinion コメント (2) トラックバック (0)

コメント

自分が気に入るデザインにするのは本当に難しいですよね。
404 Blog Not Foundさんや*ホームページを作る人のネタ帳さんは本当にすごいと思います。

私もシンプルかつきれいで軽くて見やすくてRSSを購読したくなるような広告をクリックしたくなるようなデザインを目指しています。(正直無理です)

>Taichiさん

本当にそうですよね、このブログもこのデザインにくるまで何度変わったことか…
でも、目指す意欲があれば、いずれしっくり来るデザインにめぐりあえますよきっと…

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://deepneter.blog109.fc2.com/tb.php/909-f12d24fa
まとめ系記事
New!!
ウイルスソフト無料体験版2009
追記


>>ReadMore

DWIサイト集

>>ReadMore

Saiチュートリアル

>>ReadMore

BOXアイコン集

>>ReadMore

厳選25Tools

>>ReadMore

PSPCFW画像ビュワー

>>ReadMore

WebRSSレビュー

>>ReadMore

火狐3.0対応skin集

>>ReadMore

Category
Mailfoam
相互リンク、その他連絡は以下より。
情報・タレコミ募集中

名前:
件名:
本文:

月別アーカイブ
05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08 
SEO対策

Appendix


相互リンクさまRSS更新情報
管理人:TAMA
最新情報とミクと萌えをこよなく愛する管理人TAMAが気まぐれで更新するブログ。
現在は更新休止中。
相互リンクは受付終了しました。

smart.fm:dntama
twitter:dTAMA
skype:tama-deep
ヒトコト
今まで見てくれた人ありがとう!
今後はdeepweblogでひっそりと…
最近の20記事
Links
tags
フィギュア(#3)Key(#6)漫画(#1)海外(#1)ドラゴンクエスト(#1)【GAME】(#5)デザイン(#1)photoshop(#1)アングラ(#1)K-1(#1)コミックマーケット(#1)Fc2(#1)【特集】(#1)OVA(#1)VOCALOID(#1)truetears(#1)音楽(#1)狼と香辛料(#5)かんなぎ(#1)デスクトップ改造計画(#2)アップデート(#1)絶望先生(#1)ニュース(#1)touch(#1)メガデモ(#1)パソコン(#1)とある科学の禁書目録(#1)Lunascape(#1)変わったフォント(#1)新聞(#1)テレビ(#2)SEO対策(#1)PCテクニック(#2)コミケ(#1)シゴフミ(#1)【NEWS】(#1)愚痴(#1)ファイナルファンタジー(#1)巡音ルカ(#1)携帯電話(#2)ミク(#1)【漫画】(#2)FF13(#1)修理(#1)東方(#2)ブルーレイ(#1)CLANNAD(#8)Pixiv(#2)涼宮ハルヒちゃんの憂鬱(#2)βversion(#1)Apple(#2)瀬戸の花嫁(#1)ネットオークション(#1)Niceboat(#1)Googlechrome(#1)【日記】(#5)便利なWebサイト(#1)涼宮ハルヒの憂鬱(#3)西又葵(#1)【オタク】(#2)ジャンプ(#1)筋トレ(#1)ブラウザ(#2)【アニメ】(#2)藤林杏(#1)ワールドイズマイン(#1)映画化(#1)AmazonUK(#1)CLANNAD(#1)CD(#2)水樹奈々(#1)ソフトバンク(#1)流出(#1)CIRCUS(#1)拡張子アイコン(#1)工作(#1)グッズ(#4)ネット(#1)PSP(#5)Abode(#1)ウサビッチ(#1)IE8(#2)Twitter(#2)熱い、とても熱い(#1)【ネタ】(#3)企画(#1)2ch(#2)本(#1)浅川悠(#1)イオシス(#1)痛車(#1)ai(#2)Firefox(#2)聖地(#1)電波(#1)博打(#1)mp3(#1)【2ch】(#1)なのは(#1)Windows(#1)俺の妹がこんなに可愛いわけがない(#1)iPhone(#2)sp@se(#1)火狐テーマ(#1)ネタ(#1)test(#1)ダンボー(#1)お得(#1)まとめ(#1)りりカルなのは(#1)【News速報】(#1)アップロ-ダー(#1)JASRAC(#1)イベント(#3)初音ミク(#7)らき☆すた(#1)Netbook(#1)テンプレ(#1)ipod(#1)神ツール(#2)壁紙(#1)グッスマ(#1)けいおん!(#3)ラノベ(#1)ハヤテのごとく!(#1)【動画】(#1)Lenovo(#1)任天堂(#1)Firefox3(#2)声優(#2)マンガ(#1)咲(#3)SH-04A(#1)携帯(#3)DVD(#1)アニメ(#17)Key(#1)フェンリル(#1)popicon(#1)相互リンク(#1)閉鎖(#1)folderico(#1)配布(#1)テイルズ(#1)【レビュー】(#3)excel(#1)eBoostr(#2)ウイルス(#1)サイト(#1)Simple(#1)ブラック★ロックシューター(#1)【本】(#1)Amazon(#1)FLASH(#1)ipodtouch(#1)コラ(#1)adobe(#1)神自作ゲーム(#1)Google(#4)amazon(#1)コスプレ(#1)ミス(#1)Winny(#1)ウイルス対策ソフト(#1)豆知識(#2)特集(#1)松岡修造(#1)アニメ化(#8)google(#1)FFXIII(#1)ある意味、神ツール(#1)【CD】(#1)アプリ(#2)sp@ce(#1)マウス(#2)オタク(#2)ブログ(#2)PSPゲーム(#2)
Freespace
フィードメーター - DeepNeter

Powered by SEO Stats
with Ajax Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。