ブログデザイン Archive

どのページにいっても、ページのどこをみていても、下の方に表示されるフッターをつけているサイトをたまに見ます。そこにはよくメニューなんかが表示されていたりするのですが、Dr. Nicのサイトではここに求職情報が現れるようですｗ。

↑ どこに行っても「仕事探しているよ！」というメッセージが。

ちょっとしつこいといえばしつこいですが、確かに効果的なのかもしれませんね。実際に動いている様子は以下からどうぞ。

» Dr Nic

■ 関連記事

• フッター新聞でメールをぐっと身近に | SiMPLE*SiMPLE
• あなたのブログの目的は何？ | SiMPLE*SiMPLE
• ちょっと浮いた感じのフッター | SiMPLE*SiMPLE

ブログのインターフェースも多種多様になってきています。ヘッダー部分も主種様々な工夫がなされていたりしますよね。今日はその中の一つをご紹介。

Gizmodo Japanのヘッダーには人気の記事一覧がおり込まれています。

また、lifehack.orgでは最新記事一覧が表示されます。

ブログの記事一覧はサイドバーに設置するのが一般的ですが、訪れたらまずはじめに目がいくヘッダーにも設置することで、どういった記事を書くブログなのか、初めての人にもアピールしやすくなります。

それにヘッダーって常に目に付く場所ですから、いきなり個別記事ページを訪れた人に対しても他の記事をアピールすることができます。

他にもヘッダーやフッターなどをうまく使ったブログレイアウトがあったらご紹介していきますね。

• Gizmodo Japan
• lifehack.org

fortuitousというブログには、ちょっと楽しい小細工が。

本文の下のほうに行くと文字や画像がFade Outしていきます。フッターのメニューがうかびあがってくるように見えてユニークです。

ちょっと実現方法がユニークなので皆さんも考えてみてください。

実はこれ、CSSやJavascriptを一切使わず、画像をちょこっといじっただけで実現しています。

なんと上半分を白の透過画像にしているだけなのです。わかってしまうと、「あー、なんだ。」と思ってしまいますが、意外と思いつかない発想かも。

たったこれだけでもブログやサイトにアクセントを加えることができる、他にもいろいろとお手軽な手法が転がっていそうですね。

» fortuitous

■ 追記（2007-05-27）：

コメント欄でも指摘がありましたが、透過画像とCSSにて実現されているテクニックでした・・・ごめんなさい。上記の「CSSやJavascriptを一切使わず」を訂正します。

Press Escのブログはコメントの表示にオプションが付けられてちょっとうれしい。

• 表示方法　－スレッド状orフラット
• 表示する順番　－新しい順or古い順
• 1ページに表示できるコメント数

など選択できます。

しかも”Save settings”とある通り、クッキーかなんかに保存して次回訪れたときもその設定が反映されるみたいです。

今はなぜか機能していませんが、人それぞれの設定で見え方が変わるブログというのも新しいですね。

» Press Esc

いろんなウィジェットが世の中に出回っていますが、ウィジェットのポータルサイトであるsnipperooのブログでは、ブログのウィジェットを生成できるようになっています。

↑ 「Widgetize this blog」というものがサイドバーにあります。

↑ ここでは3種類のウィジェットを生成することができるようです。

例えばここで「web widget」を選ぶと、snipperooのRSSフィードを表示するウィジェットが生成できます。

↑ ブログ等に貼り付けられるツールを作ることができるMuseStormを使っています。

ブログを広めるための新しい手法の一つとしても、ウィジェットが使えるかもしれませんね。

ニュースブログMashableで見つけた、リンクをしやすくするためのちょっとした工夫です。

↑ 記事の最後にエントリーのURLが。ワンクリックで選択できます。

こうした固定URLは普通「固定リンク」などと表示されていますが、「Link to This Post」と提案的な感じもいいですね。ちょっとリンクしてみるか、となるかもしれません。

もう少し進めて、記事のタイトルまで一緒にコピーなどできたらさらにいいかもしれませんね。ちょっとした工夫ですが、細部まで気をくばるのは重要ですね。

mixiにログインすると、まずは誰が訪問してくれたのか、あしあとをチェックしたくなりませんか。

そんな「あしあと」機能をSNSだけでなく、ブログにも広げたのがMyBlogLogです。

» MyBlogLog

たとえばRead/Write Webでは、↓のような感じ。

↑ どこかで見たような人がちらほらと・・・ｗ。

なお、表示されているブロガーをクリックすると、そのブロガーのMyBlogLogのページが見れます。そのブロガーがどんなブログを運営しているのか一目瞭然です。

自分がよく見ているブログのオーナーも見ているんだ！と新しい発見がありそうですね。また「著名なブロガーに訪問されているブログは良いブログ」という公式も成り立ちそうなそうでないような・・・。ブログオーナーの方は試されてみてはいかがでしょうか。

» MyBlogLog

さてデザイナーでもなんでもないのでかなり個人的な主張ですが、「Web 2.0っぽいデザイン」の次を考えてみました。

名づけて『Web 2.1のデザインパターン』ｗ。

個人的には「角丸の次って何よ？」と常々思っていたので、最近新しく出てきたサイトに共通するいくつかの特徴をまとめてみました。

かな～り主観なので「そうかぁ？」と思われる方もいらっしゃるとは思いますが・・・間違いを恐れずにメモ書き程度にエントリーです。

では早速。僕が感じている「次っぽいデザイン」の特徴は4つ。

【1】 極太ストライプ（Bold Stripe）

ストライプはWeb 2.0っぽいデザインでも流行っていますが、それをもちょっと太くしたやつを最近よく見ます。

↑ タイトルと背景が太いストライプに。

↑ 細いストライプはWeb 2.0っぽかったですが、最近はちょっと太めが流行りかな。

【2】 極太枠線（Bold Border）

枠線も最近太くなっているような気がします。目立ちますよね。

↑ 目立たせるところは太い枠線で。

↑ 37sinalsでも採用されていますね。

【3】 ふきだし（Bubble or Cloud）

手書きとまではいかないのですが、曲線でやわらかい形状、つまりふきだしとかをよく見ます。枠線は太いのが多いかな。

↑ こんな感じでやわらかく、かつ、大胆に。

↑ 日本の2xUpでもこんな感じがロゴになっていますね。

【4】 はがす（Peel）

局所的ですが、「はがす」メタファーをたま～に見ます。確かにちょっと触りたくなります。なお、この効果をPhotoshopで作るためのチュートリアルもありますね。

↑ こんな感じ。ちょっとめくってみたいですよね・・・。Yahoo!の認証画面とかもこれ、使われていますね。

【5】 放射（Radiate）

真ん中から「どぎゃーん！」とｗ。これも良く見ますね。

↑ なんかポップでいい感じ。

↑ CSS Cartのロゴ候補になっていた画像から。

以上、最近もやもやと思っていることをもやもやとまとめてみました。みなさんも「最近こういうデザインよく見るよ！」というのがあれば教えてくださいな。

・・・なんかしまらないエントリーですが・・・まぁ、たまにはいいですか。ほんと、次はどんなデザインが来るのでしょうかね。

最近RSSリーダーでよく見るようになったこの注意書き。

↑ 記事の本文の前に注意書きが。

RSSリーダーでは動画を貼り付ける際の<object>タグがスルーされてしまいます。

そこで本文の前に「もしRSSリーダーで読んでいるならちゃんとサイトに行ってね。動画があるんで」みたいな注意書きをつけるのが流行しているようです。

これって親切なのでなんとか自動でやってくれないだろうか・・・と思うのは僕だけですかね・・・？

すぐに解決してくれる方法は今のところなさそうなので（あったりしますかね？）、動画をよく貼り付ける人はこのように注意書きをつけておくといいかもしれないですね。

どなたか他にエレガントな解法があれば教えてくださいませ・・・・。

これはインパクトがある。

AccuWeather.comのブログでは、プロフィール画像が動画になっているのだ。

↑ About Meのところに動画が表示されている。

ブログの信頼性のためには、プロフィールが重要になってくる。

最近は動画共有サイトが流行っていますが、プロフィールにも動画が使えそうですね。