EKKEN♂

このブログは http://ekken.blog1.fc2.com/ に移転しました

見やすいと思うテンプレ

2005-08-23 | WEBにまつわる話
 ブログのデザインについてです。
あなたが見やすいと思うブログはどんなテンプレートを使っていますか?

文字の大きさ、色、かたち,ブログの構成、画像、その他。思いも寄らぬことがあるかも知れませんね。ぜひぜひお寄せください。
sugar pot 【私設トラックバックテーマ】見やすいテンプレートの条件とは?【FC2ブログの歩き方連動企画】

 僕は凝りまくっているデコレーションケーキのようなデザインよりも、大福餅のようなシンプルなデザインのほうが好きです。
 僕が使っているgooブログの既成テンプレで言えば、「シンプルの右メニュー」か、「パセリ倶楽部のモノトーン1」ですね。
 共に文字の大きさが、指定なしの可変タイプで、105%と100%。僕はブラウザの標準文字サイズを「中」に設定しているのですが、この時の見た目で「文字サイズがやや大きい」と感じるサイズです。僕はブログの主体はテキストにあると思っているので、小さいサイズで書かれた長文を読むのは苦手。可変サイズにしてあれば、自分で文字の大きさを変えることが出来るものの、わざわざサイズを変えることなく適度に見やすいサイズであることが望ましいです。何もいじっていない状態のブラウザ( IE )では、「中」に設定されているはずなので、できればこの状態で見たときに可視性の高いものが望ましいです。 色については、僕自身は背景色に白を使っているものの、見やすいかどうかということだけを考えると、実は白よりもグレーがかったもの(#CCCCCCくらい)の方が好きです。
こんな感じのヤツですね。
白は光の加減によって読みにくいこともあると思います。
個人的には、この背景色に黒い文字が読みやすいですね。使っているテキストエディタ、HTMLエディタの背景色もこれに合わせていますし。
それでも現在のこのブログの背景色を白にしているのは、単にAmazonのリンクを貼った時に、その親和性が高いからです。

 以前使っていたCSSをあてたものはこんなかんじ
 背景色以外の色については、なるべくたくさんの種類を使わないようにしているつもりです。リンクタグ部分を灰がかった青を使っているのと、たまに強調色として赤と青を使う以外は、モノトーンでまとめています。単にモノトーンがセンスの悪さをごまかしやすいから、というのもありますけど。
 それとちょっとこだわっているのが、サイドバーの位置です。僕の自宅PCのモニターは液晶の15インチです。買った当時は、まぁ普通サイズだったんですけど、今では17インチが主流ですよね。ブラウザを立ち上げている時、左端に「おきにいり」を表示させている状態だと、3カラム(両サイドバー)のデザインは、ちょっと読みにくいです。記事の文字サイズを小さくしたら3カラムは格好良いのですが、コンテンツ以外の情報を載せられるスペースが多いと、つい欲張っちゃってごちゃごちゃさせてしまいがち。そんなわけで3カラムデザインは敬遠しています。
 で、片側サイドバーのものなんですが、どういうわけか、オーソドックスなのは、バーが左側にあるものですね。実はこれもできれば避けたいデザインです。
 サイドバーの幅にもよるのですが、これを幅広くとり、尚且つブラウザを最大化しない場合、可変幅設定のブログでは、記事表示部分が狭くなりすぎるし、固定幅設定のブログでは、本来読む必要のない部分が優先的に表示され、肝心の本文を読む為に、横スクロールさせる羽目になります。
 これを解消したいと考えたので、僕のブログは右サイドバーを採用しています。
 なぜかあまり人気のないスタイルだとは思いますが。
 
 他の部分については、あまり拘りはありません。
 サイドバーにブログパーツを乱雑につけてさえいなければ、本文さえ読みやすければOK。
 一番気になるのは文字の大きさと、文字色と背景色のコントラストですね。→参考:背景色とモニタの輝度問題
 あと、できれば引用している部分については、それがどこからどこまでなのか明確にして欲しいです。できれば、引用タグにもスタイルシートで、枠線などの定義付けして欲しいです。
 そんなところ。

関連記事
このブログのデザインについて:今回の内容とあまり変わりないかも。
背景色とモニタの輝度問題
引用した時の記述、どうしてます?:この当時は、gooブログでCSSをいじることができませんでした。



最新の画像もっと見る

23 コメント

コメント日が  古い順  |   新しい順
ムムム・・・ (ともっち)
2005-08-24 10:03:45
私ってば、えっけんさんと似てるカモしんない・・・



見やすくて、尚且つ自分が気に入るテンプレを作るのって難しいです。

また、新しいのを作りたいんですケド、私の場合、作るのに丸2日ほどかかっちゃうので、未だに手を出せずにいます。

秋になる頃には変えよう・・・

返信する
Unknown (えっけん)
2005-08-24 12:41:48
サイドバーについては、「自分が便利になる為のもの」と割り切れば、何でもいいのですけどね。

闇雲に重くなければ。



こうさぎの一つくらいついていても、そんなに重くは無いのですけど、とりあえずあれに記事を投稿させたりコメントさせるのを見ると、激しく萎える。
返信する
サイドバー (むっしゅ)
2005-08-24 14:18:28
サイドバーに「Recent Entry」がないですよね。

けっこうソイツがないと不便なのですが。

あれ? そう思ってるのはむっしゅだけ?
返信する
●むっしゅさん (えっけん)
2005-08-24 14:35:53
>あれ? そう思ってるのはむっしゅだけ?



少し前に駅のひとにも、同じ事を言われました。

僕自身は巡回先をRSSリーダーからジャンプする事が多いので、なくても良いかな、と思っているのですが、前向きに検討します。



同じ意見が10人集まれば即、直しますよ?
返信する
Unknown (LSTY)
2005-08-24 15:21:23
 引用の部分のコントラストが弱いですね。少し読みにくい。



 えっけんさんもデザインには余りこだわらないようですが、私もそうです。読みやすいか否かだけ。

 BlogPetにしてもそうですが、デザインに、殊更その「にぎやかし」に興味のある人とは、たぶんブログ運営の目的が違うのだと思っています。

 デザインにどの程度重きを置くか、というのはブロガーにとって、実はかなり根本的な問題だと思うのですよ。
返信する
じゃあ (Lefty)
2005-08-24 15:21:24
3人目ということで…。
返信する
Unknown (Unknown)
2005-08-24 15:44:55
個人的に譲れない?のは、以下の3点かな。



1. 横幅可変

2. フォント固定はなし

3. 左側にメニューなし(これは譲れないという程じゃないか)



1と2は「見る人が勝手に変えればいいじゃん」という思想から。



記事の横幅なんて、見る人が見やすいようにすれば良い。また、サンプルコードを載せることもあるので、横幅が可変じゃないと見難くてしょうがないってのもあるけど。



フォントサイズ固定は論外。Operaのようにサイズ固定されたフォントでも拡大・縮小して表示できるブラウザならいいんだけど、ブラウザの機能で文字を拡大・縮小しにくい時点で「読むな」といってるようなもの。

後は、フォントフェイス(フォントファミリー)固定も嫌い。あなたの読みやすいフォントが私の読みやすいフォントではない。フォントフェイス固定が「必要」なのは「ロゴ」だけなので、そんなものは「画像」にしちゃえばいいんです。



3の左側メニューが嫌いなのは、左側には常にRSSリーダのSageがいるから(をぃ)。まぁ何がいるかは人それぞれだけど、左側って色んなものが置いてない?

同じような理由で、ブログタイトルの高さが低いのもが好きです。基本的に記事を読みたいのであって、全ての記事に表示される「タイトル」を毎回読みたい訳じゃないから。



ということで、「シンプル系テンプレート右」を「横幅可変」に変更し「フォントファミリー削除」したものがお気に入りです。

# 個人的には、本文文字色とリンク文字色も外しますけど



既製テンプレートでは、「ダイニング」の「氷水」、「レインボーカクテル」、「イエロースパイス」、「グリーンスパイス」、「ホットスパイス」あたりでしょうか。 画像のために左側余白が広いのが残念なんですけど。
返信する
しまった (かつを)
2005-08-24 15:45:40
Unknown (Unknown)野郎です…
返信する
Unknown (えっけん)
2005-08-24 18:22:32
●Leftyさん

>3人目ということで…。



よくわからんのですが、それは綾波さんのパロディでしょうか?

(実はエヴァンゲリオンは全く見ていない)





●LSTYさん



>引用の部分のコントラストが弱いですね。少し読みにくい。



善処します。

確かに使っているモニターによっては読みにくいかもしれません。

家のモニタで見たとき、他所のモニタで見たときは、見え方が全然違ったりしますね。



>えっけんさんもデザインには余りこだわらないようですが、私もそうです。読みやすいか否かだけ。



失礼なッ!!!

拘っているぞッ!



……読みやすいかどうかというデザインに。



ちなみに僕はゲイツ主義ではないのですが、IE以外でのチェックはしていません。

なぜなら、僕にはFirefoxが使いにくかったから。



BlogPetについては、現在「はてD」のほうで運用中です。

こうさぎイラネ論を書くに当たって、もうちょっとヤツの事を知っておこうと思いまして。

はてDでは記事やコメントの投稿は出来ないようですが、これをやらなければそんなに邪魔者でもないですね。要る・要らないの話では、「やっぱり要らなさそう」なんですけど。余談ですが、こうさぎに覚えさせているRSSは、はてDのものではなく、ここのものです。

「メタ」とか「コメント?」といったメタブロガーなこうさぎ(猫にしているけど)になってるようです。





●かつをさん



先ほどはコメントの多重投稿、失礼しました。(管理者が削除すればよい、との考えから、削除するコメントの数を増やす「お詫び」のみのコメントはしない事にしています、すみません)

反映されていなかったのではなく、送信ボタンを押せた感覚がなかったので、気付かずに送信したようです。



>横幅可変



たぶん可変幅の方が喜ばれるのでしょうねぇ。

見る人が変えられるほうがユーザービリティが高いとか言いますしね。

ただ、3カラムで記事部分が可変のものは、お気に入りを表示させた状態では、幅が狭くなりすぎて読みにくい場合が多いです。

あと、僕のように改行が少ないブログでは、いたずらに一行が長くなり、幅を大きくした時に読みにくさを感じますね。いや、以前は可変だったのですが、自分で読みにくさを感じたので、今のスタイルにしました。先日、掲示板の方で、一行の巾が狭すぎという指摘を受けたので、40PXだけ広くしたんですけど、気付きました?

全体幅が840PXなんですけど、お気に入りを表示させている状態では、全部表示できない人もいるんでしょうね。ま、それでも良いようにと右サイドバーにしているんですけど。



>フォントファミリー削除



あ、これは気付かなかったです。

確かに僕も嫌いなフォントがありますね。

最近はあまり見ないのですが、丸ゴ指定が嫌いでした。明朝体も読みにくいです。

その一方、typeholic.org:http://typeholic.org/ の碧さんが、

あえてインストールされている事が少ないフォント(あくあPという、フリーフォント)を指定し、それで表示された人を喜ばせるという、面白い事をしていますね。

このブログの題名部分は、「おっぱいフォント」というフリーフォントで作成した画像です。これを作った当初、透過pngがうまく作れなくて、黒背景に白文字の画像です。だからヘッダの部分は黒から変えられないのです。

返信する
Unknown (えっけん)
2005-08-24 18:49:36
引用部分だけ変えてみた。

文字→黒(#000000)

ちょっと濃いかな。
返信する