最近のwebデザインのトレンド手法のひとつとして、「レトロ感」「ヴィンテージ感」のあるwebデザインをよく見かけるようになりました。
webデザインのリンク集などを見ていても、昨年あたりからレトロなデザインのwebサイトの比率が増えてきたことが実感できます。

これらのサイトには、

• 褪せたような色の組み合わせ
• 紙っぽいテクスチャの使用
• リボンや帯（テープ）をモチーフとしたパーツデザイン
• ヴィンテージ感のあるフォントの利用
• ノスタルジックなイラスト表現

などの特徴が挙げられ、それぞれ味のあるデザインになっています。

このような手法がトレンドになった背景として、

1. まず、インフォグラフィック的表現が増えてきたこと。
   参考エントリー：
   楽しく統計データや歴史がわかるインフォグラフィックの事例
2. CSS3の技術が浸透してきて、フォント表現のバリエーションが増えてきたこと。
   参考エントリー：
   Webフォントについてのまとめ
   HTML5やCSS3を駆使した「次世代の可能性」を感じるサイト
3. ページ上に表示させる要素を必要最低限にしぼるミニマルwebデザインが増えてきたこと。

などの複数の要素が影響しているのでしょう。

事例

Urbanoff

スウェーデンのアートディレクター・Urban Sundinのwebポートフォリオ。
背景には、ざらつき感のあるテクスチャを敷き、インパクトのあるレトロなヘッダーロゴも特徴的です。
このヘッダーロゴ以外のテキストで使っているフォントは、全てwebフォントのようです。

Noltedesign

こちらもインパクトのあるヘッダーロゴが特徴的な事例。
"century"っぽいテキストのフォントですが、"TeXGyrePagellaRegular"というwebフォントを利用しているようです。
トップページにポートフォリオが置かれたシンプルな作り。

cabedge.com

海外のwebデザイン関係の会社HP。
ヘッダーのナビゲーションに、レトロwebデザインの代表的な表現である「リボン」のモチーフが使われています。
全体的に、褪せたような配色にし、トップページのイラストやフッターで使用している写真も、昔のイラストや写真に見えるような加工をしています。

Pointless Corp

海外のweb開発会社のHP。
最も特徴的なのは、トップページのイラストですね。昔のアメコミとかに出てきそうな、ノスタルジックなテイストです。

Chappy Barry

インフォグラフィックスをイメージさせるようなイラストや図を多用しているサイト。

その他事例

その他にも、様々なレトロ・デザインを以下のサイトで見ることができます。

• 36 Cool Retro Websites For Inspiration | SpyreStudios
• Showcase Of 25 Retro Themed Website Designs | SpyreStudios
• 50 Retro and Vintage Web Designs to Inspire You | Inspiration

レトロなデザインに利用できるフォント

Photoshop VIPさんのエントリーで、レトロ・デザインに利用できるフリーフォントが紹介されていました。
利用に関するライセンスもまとまっていて便利だったので、ご紹介します。

Photoshop VIP - レトロ、ビンテージデザインに活用したいフリーフォント35個まとめ

ここ数年で海外メディアを中心によく目にするようになったインフォグラフィックについて、2回に分けて事例を紹介してきました。

• 1回目：楽しく統計データや歴史がわかるインフォグラフィックの事例
• 2回目：人々を行動に移させるようなメッセージ性の強いインフォグラフィックの事例

今回のエントリーは、その3回目（最終回）です。

1. 統計データ
2. 歴史
3. 脅威と呼びかけ
4. 生活に役立つ知識
5. 物事の順序・流れ（今回）
6. 特徴からの分類（今回）
7. その他（今回）

web上ではいつ頃から注目されているか

冒頭で「ここ数年でよく目にするようになった」と書いてきましたが、どれくらい増えてきているのでしょうか？
以下の図は、Googleで「infographics」をトレンド検索した時のグラフです。

2009年初め頃から発生し、昨年にはそれまでの約3倍くらいまで一気に増え、今年に入ってからもまださらに伸び続けている模様です。
インフォグラフィックは今年も、webの大きなトレンドの一つとして、様々な表現が増えていくのでしょう。

海外ではこんなサイトも

海外では、インフォグラフィックのみを集めたサイトがいくつもありました。
その中のひとつをご紹介します。

Visual.ly
http://visual.ly/

会員登録をすると自分で作品をアップロードできるため、その作品数は10,000点を優に超えています。
圧巻の作品数です。興味がある方は、一度見てみてください。

それでは、少し話が逸れてしまいましたが、本題の事例紹介にいきたいと思います。

事例

5．物事の順序・流れ

「HOW DO I OPTIMIZE MY LEGAL DEPARTMENT?」

▲画像をクリックすると、元データが見れるページに移動します。

企業内のどの部署とも連携している"法務部"。この法務部が企業にとって重要なコンポーネントであり、そこの機能を最適化することによって、全体的な機能が底上げされる　という内容の作品。
複雑な業務な流れで、混乱や無駄な作業が発生してしまい、高いコストがかかってしまっている現状と、
解決したあとの未来像、その解決するためのステップなどがまとまっています。

「QUICKSTART GUIDE SOCIAL MEDIA FOR BUSINESS」

▲画像をクリックすると、元データが見れるページに移動します。

ビジネスでソーシャルメディアを使い始める時のガイドの役割をした作品。
1.ゴールを設定します
2.顧客はどこにいますか？
3.影響力のあるインフルエンサーを特定します
4.関係者内での責任領域を分担します
5.どのソーシャルメディア（チャンネル）にするか選定します
・
・
・
などの流れが、"研究所（ラボ）"をモチーフとしたイラストでまとめられています。
抜けがないかチェックにも使えます。

6．特徴からの分類

「Conversations in Social Media」

▲画像をクリックすると、元データが見れるページに移動します。

世の中のソーシャルメディアを、コミュニケーションの特徴ごとに分類した作品。

「The Periodic Table Of SEO Ranking Factors」

▲画像をクリックすると、元データが見れるページに移動します。

SEOランキングに影響する要素を、元素周期表のようなイメージでまとめている作品。
サイト内の要素／サイト外の要素／違反要素などで分類されていて、
同じグループの中でも影響力の強い要素・弱い要素が、色の濃淡で分けられています。

「Constitutions of Classic Cocktails」

▲画像をクリックすると、元データが見れるページに移動します。

昔からあるカクテルを、ベースとなるお酒／何で割るか／入れる容器／飾り付けるモノ
などで結び付けながら分類しているユニークな作品です。

7．その他

「How Long Do Animals Live?」

▲画像をクリックすると、元データが見れるページに移動します。

「動物はどれくらい生きるのか？」というタイトルのこの作品。どうやら1930年代に作られた作品だそうです。
ものすごいシンプルで、わかりやすい。赤い動物が哺乳類、黒が鳥類、青が魚類・爬虫類・両生類、黄色が虫や貝類で分けられてます。

「A History Of Graphic Design」

▲画像をクリックすると、元データが見れるページに移動します。

最後にご紹介するのが、インフォグラフィックの歴史を示したインフォグラフィックです。
（正確には、インフォグラフィックを中心としたグラフィックデザインの歴史を示した作品）
前々回のエントリーのwikipediaからの引用で、"先史時代、人類は洞窟壁画という最初のインフォグラフィックを生み出し"とご紹介しましたが、それ以降の歴史が描かれています。（前半は、紀元前100年→紀元後1454年と、一気に飛んでますが...）

今後も、定期的に良事例をご紹介していこうと思うので、その際は是非ご覧ください。

関連エントリー

• 人々を行動に移させるようなメッセージ性の強いインフォグラフィックの事例
• 楽しく統計データや歴史がわかるインフォグラフィックの事例

参照サイト

• visual.ly
• the Public Returns - 続・広報の視点
• NAGLLY.COM
• GIGAZINE

など

前回のエントリーに続き、様々なインフォグラフィックの事例をご紹介します。

1. 統計データ
2. 歴史
3. 脅威と呼びかけ（今回）
4. 生活に役立つ知識（今回）
5. 物事の順序・流れ
6. 特徴からの分類
7. その他

（リストの順番とラベルを、前回から少し変更しています）

今回は、3.脅威と呼びかけ／4.生活に役立つ知識　に関するインフォグラフィックについて。

単純に数値をキレイにかっこよく見せるだけではなく、見ている人たちに考えさせ実際の行動に移させるような、"他人ごと"ではなく"自分ごと"に引き込む強い想い・メッセージ性をもったインフォグラフィックの事例をご紹介します。

事例

3．脅威と呼びかけ

「みんなで分け合えば、できること。」

▲画像をクリックすると、元データが見れるページに移動します。

そろろそ発生から1年が経ちますが、昨年東日本大震災が起きたばかりの時、人々の間で物資が取り合いとなったことは記憶に新しいと思います。
このインフォグラフィックは、スーパーなどで品不足が起きた当時、いち早く投げかけられた呼びかけで、TwitterやFacebookなどのソーシャルメディアを通じて一気に広がった作品です。
「ひとりで独占」より「みんなでシェア」のメッセージが込められています。

「スリ被害に遭わないためのヒント」

▲画像をクリックすると、元データが見れるページに移動します。

ヨーロッパ旅行でスリ被害に遭わないために、日本人旅行者に注意喚起をしている作品。
日本人旅行者が多いヨーロッパ渡航先、スリ被害が多い場所、スリに遭わないための対策、万が一スリに遭ってしまった時の「とっさの一言」なども載っていて、とっても助かりますね。
突然の事故・被害などもある旅行。事前に備えて、楽しいバケーションにして欲しいという作者のメッセージが伝わります。

「EVERY DROP COUNTS 10 WAYS TO STOP WASTING WATER」

▲画像をクリックすると、元データが見れるページに移動します。

水の無駄遣いをなくす10通りの方法をまとめた作品。こんなことをしたら、これくらい節水できる、というのがわかります。
水はなくなると最も困る資源のひとつですが、それだけに日常的になりすぎていて、意識するのも難しいかもしれません。
こんなかっこいいと、プリントアウトして家の中に貼っておきたくなりますね。

「NO MORE FISH IN THE SEA」

▲画像をクリックすると、元データが見れるページに移動します。

魚の消費量の増加と、それに伴う漁獲量の減少を、年毎の変化と合わせてまとめた作品。
"1.統計データ"の中に入れようと思いましたが、「いつか魚がいなくなってしまいますよ」という呼びかけなので、ここで紹介しました。

「Piggy Trouble」

▲画像をクリックすると、元データが見れるページに移動します。

豚インフルエンザの脅威を示した作品。感染経路、被害のあった国、死者数などがまとまってます。
うーん、こわい。

4．生活に役立つ知識

「The Information Blanket」

▲画像をクリックすると、元データが見れるページに移動します。

ママたちの中でも、特に初めての育児を体験する方は、やらなければいけないことや覚えなければいけないこと、初めて経験することが多くてとても大変です。それは、特に情報が入ってこない地域などではなおさら。
この作品は、育児に関する基本知識がプリントされた、赤ちゃん用のブランケット。生地素材も環境にやさしい米ノースカロライナ製のコットンを使用しているそうです。
情報を与えるだけでなく、安心を与えてくれる、優しさに溢れた素晴らしい作品です。

以下は、このインフォグラフィックを見つけたグリーンズさんのサイトからの引用です。

"このブランケットは、子育ての知識が十分行き届いていない国や地域の母親に向けて、その基本をわかりやすく伝えようと、広告代理店「Beattie McGuinness Bungay（BMB）」によってデザインされたもの。とりわけ、ウガンダは、新生児の死亡率が最も高い国で、新生児1,000人のうち平均77人が1歳未満で亡くなっているそうです。そこで、このプロジェクトでは、最初の取り組みとして、現地のNPO「The Shanti Uganda Society」と提携し、ウガンダのママと赤ちゃんに「The Information Blanket」を届ける活動を展開。2011年5月下旬、第一便となる1,000枚がウガンダに贈られました。"

「HOME'S 引っ越しカレンダー」

▲画像をクリックすると、元データが見れるページに移動します。

新しく住む家が決まってから、引っ越し当日までのスケジュールや、引っ越し後にやることなどがまとまっている作品。これは助かる。力が抜けたイラストもかわいい。

関連エントリー

• 楽しく統計データや歴史がわかるインフォグラフィックの事例

参照サイト

• GOOD
• グリーンズ
• HOME'S

など

前回のエントリーで、サークル・円の形を活用したwebサイトのデザインが増えている傾向にあり、その事例をカテゴリに分けて紹介しました。

この事例、特に「データのアウトプットとしてサークルデザインを取り入れている事例」をまとめている時に感じたのが、"まるで動きが加わったインフォグラフィックだな"という印象でした。

また、同エントリーに、

"円ベースのデザインが増えている傾向って、そもそもインフォグラフィックス的表現が増えたことともリンクしているんだろうね。"

というコメントをもらったのもあり、
今回のエントリーでは、ここ数年で海外メディアを中心によく目にするようになった「インフォグラフィック（infographics）」の事例について、カテゴリに分けてまとめてみました。

インフォグラフィックとは

wikipediaからの引用によると、

"情報、データ、知識を視覚的に表現したものである。インフォグラフィックは情報を素早く簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの形で使われている。また、計算機科学や数学、統計学においても、概念的情報を分かりやすく表現するツールとしてよく用いられる。科学的情報の可視化にも広く適用される。"

とされていて、

"先史時代、人類は洞窟壁画という最初のインフォグラフィックを生み出し、後に地図を生み出した。地図作成は文字による筆記が行われるよりもずっと早く行われ、チャタル・ヒュユクの地図は紀元前7500年ごろに作成されている。"

と歴史的にも古くから使われています。

皆さんも、日頃のビジネスで使う文書資料はもとより、小学校の課題で出た歴史年表作りや、人に道を説明する時の地図など、少なくとも一度は何らかの形で経験があるのではないでしょうか。

このように、文字では扱いにくい「情報」という形のないものを視覚化するインフォグラフィックは、日常的に存在し利用されています。

事例

インフォグラフィックはその使い方も多岐に渡るため、一概にカテゴリに分けることは難しいと思いますが、インターネット上に存在する作品のうち数点を、以下の6カテゴリ（＋その他）でまとめてみました。
複数の要素が含められていますが、メインの目的に合わせて分類しています。

1. 統計データ
2. 歴史
3. 特徴からの分類
4. 脅威・呼びかけ
5. 生活に役立つ知識
6. 物事の順序・流れ
7. その他

数が多いので、3回くらいに分けようと思います。
今回のエントリーでは、1.統計データ／2.歴史　に関するインフォグラフィックを紹介します。
どのエントリーで紹介している事例も、情報整理や配色アイデア、表現方法の参考になりますので、是非ご覧ください。

1．統計データ

「Android Market Growth」

▲画像をクリックすると、元データが見れるページに移動します。

Androidアプリが100億ダウンロードを達成したときの、関連した統計データをまとめている作品。
Androidマーケットの成長具合、どのカテゴリのアプリのDLが多いか、どこの国のダウンロードが多いか
などの情報がつまっています。

「iPad Data Visualized」

▲画像をクリックすると、元データが見れるページに移動します。

iPadに関するいろいろな統計データをまとめている作品。 iPadの使用理由、売れ行きなどの情報がつまっています。

2．歴史

「THE BOOM OF SOCIAL SITES」

▲画像をクリックすると、元データが見れるページに移動します。

ソーシャルメディア・ブームの歴史と、各ソーシャルメディアの利用者数を年表にした作品。
FacebookとMYSPACEの大きさが目立ちます。

「クリエイティブな履歴書」

▲画像をクリックすると、元データが見れるページに移動します。

アメリカなど海外では、失業率が高く、特にデザイナー業界などは狭き門になっているようです。そのため、他応募者の履歴書より採用担当者の目を引くようなクリエイティブな履歴書が増えてきているようです。
ブログ「ソーシャルリクルーティングの世界」で、他にも様々な履歴書が紹介されていました。
見ているだけで楽しい！デザインの優れたインフォグラフィック履歴書10選！＆知っておくべき作成ルール

「The Largest Bankruptcies in History」

▲画像をクリックすると、元データが見れるページに移動します。

1980年代後半～2010年頃までに倒産してしまった巨大企業を、沈没した船に喩え、年表にした作品。
リーマン・ブラザーズが世界に及ぼした影響が一目でわかります。それにしても大きい。。。

関連エントリー

• 人々を行動に移させるようなメッセージ性の強いインフォグラフィックの事例

参照サイト

• GOOD
• TechCrunch Japan
• ソーシャルリクルーティングの世界

webデザインの2012年のトレンドのひとつとして、「サークル（円）」を使ったデザインを取り上げている記事をよく目にします。

Web Design Ledger | Web Design Trends in 2012
http://webdesignledger.com/tips/web-design-trends-in-2012

たしかに昨年くらいから、いろいろな形式でサークルを活用したwebサイトのデザインが増えてきている印象です。
CSS3で"円"を表現・装飾できるようになったり、Google＋のサークル機能などからも影響を受けているんでしょうか。
単純にサイトデザインのワンポイントではなく、ナビゲーション／ギャラリーのサムネイル／サイト全体のモチーフなどでサークルが使用されるようになってきているようなので、今回のエントリーでは、サークルデザインを取り入れている参考になりそうなwebサイトのデザイン事例をカテゴリに分けてまとめてみました。

①ギャラリーのサムネイルとしてサークルを取り入れている事例

調べていて、最も多かった活用事例です。

RaNa design associates, inc.
http://www.ranadesign.com/

2種類の大きさの円をきれいにレイアウトしたwebサイト。
クリックしたあとの、スムースなスライドの動きが気持ちいいです。

StompStamp
http://www.stompstamp.com/

Mickael Larcheveque
http://dotmick.com/

以前のエントリー『HTML5やCSS3を駆使した「次世代の可能性」を感じるサイト』でも取り上げたサイト。

Portfolio Of Antoine Wette
http://www.aw-digital.com/

こちらも、以前のエントリーで取り上げたサイト。

Always With Honor
http://alwayswithhonor.com/

BOMBASTISK
http://www.bombastisk.dk/

サムネイルを単純に円形にくりぬいたのではなく、独特の円形を表現しています。面白い工夫です。

vlog.it
http://vlog.it/

ひとつひとつが円の形をしているわけではなく、全てのサムネイルを合わせてひとつの円を表現。

②データのアウトプットとしてサークルを取り入れている事例

対象となるデータを、サークルを使った形にビジュアライズしてアウトプットしている事例です。

Citicles
http://www.citicles.com/

こちらも、以前のエントリーで取り上げたサイト。世界中の各都市の情報を、独自にビジュアライズ。

Honda | dots by internavi
http://www.honda.co.jp/internavi-dots/#/now

日本全国のクルマの走行データをビジュアライズ。

③サイト全体のモチーフとしてサークルを取り入れている事例

Styiens - Label Musical
http://www.styiens.com/

レコードをモチーフに、円を取り入れている。

C'EST MOI WEB SITE
http://www.cest-moi.co.jp/

Sodra Pulp Labs
http://www.sodrapulplabs.com/

Collection Epoque "D. Cordier 1886"
http://www.cordier-1886.com/en/

④ナビゲーションとしてサークルを取り入れている事例

Chupa Chups Universe Licensing
http://www.chupachupsuniverse.com/

別のカテゴリ分けも

海外のサイトでは、以下のようなカテゴリ分けをしてました。

Web design Ideas and Tips in Using Circles
http://naldzgraphics.net/tips/web-design-using-circles/

1. 複数のレイヤーで重ねたサークル
2. 半透明のサークル
3. かなり大きなサークル
4. ナビゲーション用のサークル
5. ヘッダに使うサークル
6. 複数のカラーを使ったサークル
7. 繊細なサークル
8. 背景に使う数多くのサークル
9. ギャラリーに使うサークル
10. クリエイティブなサークル
11. レトロなサークル
12. テクスチャと一緒に使うサークル
13. ラベルに使うサークル
14. アクションに使うサークル
15. パターンを使ったサークル

これらは、コリスさんのエントリー「実例から学ぶ、円・サークルをウェブデザインで効果的に使う15のTips」で各ポイントを意訳されていたので、参考になりました。

webデザインの表現の選択肢として、このトレンドを検討してみてはいかがでしょうか？

参考にしたサイト

• Web Design File
• Web Design Clip
• Web design Ideas and Tips in Using Circles
• 実例から学ぶ、円・サークルをウェブデザインで効果的に使う15のTips

webサイトを構成する要素の中で、最も重要な要素のひとつに「ナビゲーションメニュー」があります。
グローバルナビゲーション、フッターナビゲーションなど、
サイト利用者を、利用者が目的としているコンテンツにスムーズに案内するためのメニュー機能です。

今回のエントリーでは、この「ナビゲーションメニュー」について、
昨年よく目にしたデザイン手法があるので、その事例を紹介したいと思います。

情報を1ページにまとめる＋固定したナビゲーションメニュー

昨年いろいろなwebサイトを見ていてよく目にした手法が、この手法です。

どういうことかというと、
一般的によく見かけるwebサイトでは、ナビゲーションメニューをクリックすると、該当するコンテンツのページに移動します。（下図A）
それに対し、上述の手法を使用しているwebサイトでは、同じページに情報を集約し、縦（もしくは横）に長いページになっています。
加えて、ナビゲーションメニューを固定することで、いつでも目的のコンテンツに辿り着けるようにしています。（下図B）

コンテンツの量によって向き・不向きがもちろんありますが、
webサイトをシームレスに利用できる気持ちよさを実現するには有効的です。

事例

上述の手法を用いているwebサイトをいくつか集めたので、ご紹介します。
単純にナビゲーションメニューを固定しているだけでなく、面白い工夫を加えている事例を集めてみました。

【スクロールするとパラパラ漫画のようにアニメーションするwebサイト】

Volkswagen Beetle

• ページ冒頭部分、スクロールすると、ビートルが走り抜けていくようなビジュアルアニメーションをする。
  
• 縦方向にスクロールするだけでなく、横方向にもコンテンツが展開。（メニュー「Interieur」など）

Fat-Man Collective = Thinkers, Designers & Developers.

• スクロールすると、サイトシンボル（？）のキャラクターが歩くようなアニメーションをする。
  

Nizo for iPhone

• スクロールすると、バラバラに分解されたiPhoneのパーツが集まってくるようなアニメーションをする。

【様々な方向にコンテンツが展開するwebサイト】

Imaginista Branding Inc.

• 縦方向ではなく、横方向にスクロール。

Loysel's Toy • The Coffee Crafters

• 縦方向でも横方向でもなく、斜めにスクロール。（正確には、斜めにスクロールしているように見える）
  
• 横方向にもコンテンツが展開。（ページ右下「MORE THIS WAY→」をクリック）

【その他】

Netontwerp

• スライダーも合体させた仕組みに。

webサイトの見せ方の一つとして、参考になればと思います。

参照サイト

• 22 Examples of Fixed Position Navigation in Web Design

昨年の最も大きな出来事といえば、やはり誰もが「東日本大震災」を思い浮かべるでしょう。
それでは、IT業界に絞るとどうでしょう？
IT業界の大きな変化の一つに「スマートフォンの急速な普及」が挙げられるのは間違いないのではないでしょうか。
国内の各キャリアでは、昨年の夏モデルくらいからスマートフォン中心のラインナップになり、従来の携帯電話（フィーチャーフォン、ガラケー）からスマートフォンへシフトした年でした。
2012年ではこの急速な普及がさらに加速され、スマートフォンの販売台数は、携帯電話全体の6割を占めると予想されています。

そんな中、上記の変化はwebサイトの構築手法にも影響してきています。

webサイトのマルチデバイス化が必須に

どういうことかといいますと、webサイトは今やパソコンだけで閲覧されるものではなく、iPhoneやAndroidなどのスマートフォン、iPadなどのタブレット端末、様々なデバイスで閲覧されています。
そのため、webサイトも閲覧環境に応じてページレイアウトを柔軟に切り替えられるようにマルチデバイス化が必須になってきますが、デバイス毎にレイアウトの違うHTMLファイルを複数用意しているとコストが非常に多くかかりますし、コンテンツ管理も大変です。

そこで、新しい手法として国内・海外で注目を集め始めているのが、「レスポンシブwebデザイン」という手法です。

レスポンシブwebデザインとは

「レスポンシブwebデザイン」とはどういう手法かというと、
デバイスをwebサイト表示の判断基準にするのではなく、
ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調整できる手法です。

現在一般的には、デバイス毎のレイアウトが違うHTMLファイルを複数用意することが多いと思いますが、
「レスポンシブwebデザイン」では、1つのHTMLファイルを、CSS3（Media Queries）で制御し、
ブラウザの横幅サイズに応じてページのレイアウトデザインを調整できます。

≠リキッドデザイン

いわゆる「リキッドデザイン」と似たような感じですが、違いは、

◆リキッドデザイン：ブラウザの横幅サイズに応じて可変するが、レイアウトは同一
◆レスポンシブwebデザイン：ブラウザの横幅サイズに応じて、レイアウトも含めて可変する

です。

事例

レスポンシブwebデザイン手法を取り入れているwebサイトをいくつか集めたので、ご紹介します。
（スクリーンショット下の数値は、ブラウザの横幅サイズです）

3200tigres

Earth Hour | WWF France

Leica Explorer

320 and up

ribot

TeeGallery - A collection of designer T-shirts

Colbow Design - Freelance Web Designer

Sony USA

各ブラウザサイズで、レイアウトをどのようにし、どのコンテンツを表示（非表示）するかなど、webサイトの綿密な設計が必要になりますが、一つのHTMLファイル・スタイルシートの調整だけで実現できる手法なので、今後さらに注目を集めそうです。

参照サイト

• ASCII.jp：スマホ対応の新潮流「レスポンシブWebデザイン」とは？

3月の地震による原発事故の影響で、今年は「節電の夏」なので、エアコン以外でも"涼"をとる方法がいろいろ試されていますね。

そこで今回は、飲料（主に炭酸）のFacebookページの事例を集めてみました。

＜海外編＞

■Coca-Cola
http://www.facebook.com/cocacola
ジャンル：食品/飲料品
ファン数：33,194,500（2011年8月7日現在）

世界で最も有名な炭酸飲料「コカ・コーラ」のFacebookページ。
このFacebookページ、もともとは企業が作成したものではなく、ファンである一般人（2人）が作成し、今も管理者として運営に参加しているという話は有名な話です（下図）。

左メニューを見ると、コンテンツがとても多いのがわかります。
ここまでコンテンツが多いのはコカ・コーラくらいではないでしょうか。

■Sprite
http://www.facebook.com/Sprite
ジャンル：食品/飲料品
ファン数：4,122,167（2011年8月7日現在）

同社の炭酸飲料「スプライト」のFacebookページ。

■Red Bull
http://www.facebook.com/redbull
ジャンル：食品/飲料品
ファン数：21,804,732（2011年8月7日現在）

ユニークなCMでお馴染みの「Red Bull」のFacebookページ。
ここのウェルカム・ページ（下図）は、事例としていろいろなところで紹介されている有名なデザインなので、ご存知の方も多いのではないでしょうか？

■Dr Pepper
http://www.facebook.com/DrPepper
ジャンル：食品/飲料品
ファン数：10,307,217（2011年8月7日現在）

独特な味わいの「Dr pepper」。隠れたファンも多いかもしれません。

■Mountain Dew
http://www.facebook.com/mountaindew
ジャンル：食品/飲料品
ファン数：5,855,494（2011年8月7日現在）

日本ではあまり知名度は高くありませんが、海外では定番の炭酸飲料「マウンテン・デュー」。
ファン数もものすごいですね。

■Diet Pepsi
http://www.facebook.com/dietpepsi
ジャンル：食品/飲料品
ファン数：227,056（2011年8月7日現在）

インパクトのあるデザインの「ダイエット・ペプシ」のFacebookページ。
かっこいいデザインのFacebookページとして紹介されているのを、たまに見かけます。

■Pepsi Max
http://www.facebook.com/pepsimaxUSA
ジャンル：食品/飲料品
ファン数：723,781（2011年8月7日現在）

日本では見ない商品ですが、アメリカ本国ではダイエット・ペプシよりファン数が多い「ペプシMAX」。
カロリーがゼロにも関わらず、カフェインや高麗人参といったエナジー系の成分を含むのが特徴の商品のようです。

＜国内編＞

■オロナミンC（大塚製薬）
http://www.facebook.com/oronaminc
ジャンル：食品/飲料品
ファン数：3,379（2011年8月7日現在）

"元気ハツラツ"のキャッチコピーで、日本国内でも最も有名な栄養ドリンク「オロナミンC」のFacebookページ。
7月からオープンしたようです。日本中に元気を広げよう！というコンセプトの「元気差し入れプロジェクト2011」をメインにしたコンテンツ展開になっていて、ウォールも精力的に投稿されている印象です。

■ポカリスエット
http://www.facebook.com/pocarisweat.jp
ジャンル：食品/飲料品
ファン数：80,044（2011年8月7日現在）

スポーツや風邪をひいた時の定番ドリンク「ポカリスウェット」のFacebookページ。
当ブログの7月3日の記事でも、このFacebookページの新しいメニューアイコンの使い方について取り上げました。
「ポカリIQチェック」という診断系コンテンツをメインに、「ポカリが生まれたお話」「ポカリならできること」などのコンテンツを展開しています。

（たしか）7月1日からオープンしたのですが、わずか数日で20,000人のファンを超えるという、ファン数増加の驚異的なスピードが記憶に残っています。

■チョコラBBスパークリング
http://www.facebook.com/bbsparkling
ジャンル：健康/美容
ファン数：4,336（2011年8月7日現在）

「はじけまして！」というセリフで、井上真央さんがCMに出演している「チョコラBBスパークリング」のFacebookページ。
コンテンツは、「日本のツカレ子ちゃん（疲れている女性）を癒す」というコンセプトで、Flashのミニコミックをメインに展開されていて、ジャンルも「食品/飲料品」ではなく「健康/美容」で登録されていますね。

＜番外編＞

炭酸飲料でも、アルコールの方のFacebookページもありましたのでいくつかご紹介します。

■Carlsberg Japan カールスバーグ
http://www.facebook.com/Carlsberg.Japan
ジャンル：食品/飲料品
ファン数：1,096（2011年8月7日現在）

デンマークのビール「カールスバーグ」の日本語Facebookページ。
ウェルカムページのデザインがカッコイイですね。

■GUINNESS - THE PUB - [ギネス公式ページ]
http://www.facebook.com/GuinnessJapan
ジャンル：食品/飲料品
ファン数：2,880（2011年8月7日現在）

アイルランド生まれのビール「ギネス」の日本語Facebookページ。
「ギネス、お店、ユーザーみんなで作っていくFacebook上のパブ」をテーマに、8月30日に正式（？）オープンするようです。
もちろん、オープン前の今でも「いいね！」は押せて（ファンになれて）、オープン前からファンになってた人の中から抽選でプレゼントが当たるキャンペーンも行っていますね。

体を冷やすのは飲料だけではありません。そう、アイスもありますよね！
ひとつだけですが、事例としてご紹介します。

■コールド・ストーン・クリーマリー
http://www.facebook.com/coldstone.jp
ジャンル：会社
ファン数：858（2011年8月7日現在）

歌を唄いながらアイスを作る店員のパフォーマンスが印象的な「コールド･ストーン・クリーマリー」の日本語Facebookページ。
アメリカ生まれだけあって、パンチが効いたボリュームのあるアイスですが、ウェルカムページも商品を前面に出したインパクトのあるページになっています。どーーーん。

ウェルカムページなど、Facebookユーザーが最初に見るページで、「暑い夏にグビッと飲みたい！」と連想させるようなビジュアルが意外と少ないな、とまとめていて思いました。

参考になれば幸いです。
水分補給はしっかりして、暑い夏を乗り切りましょう！

今回の記事では、プロフィール画像／コンテンツ／写真以外にカスタマイズできるFBページのパーツとして、「メニューアイコン」をとても面白く活用しているFBページを発見したので、ご紹介します。

◆その前に、「メニューアイコン」って何？

FBページの左サイド（上図赤枠エリア）に、各FBページ毎のメニューがありますよね。
ここで使われているアイコンのことです。

◆カスタマイズできるアイコン／できないアイコン

自作のオリジナルページやオリジナルアプリのアイコンは、
開発者ページ（アプリ設定）から自由にカスタマイズすることができます。

反対に、
"ウォール"や"基本データ"など、Facebookから提供されている基本コンテンツや、
"youtube"や"SlideShare"など、サードパーティアプリから作られるコンテンツのアイコンは
固定となっているため、変更することができません。

◆いろんなパターンのアイコン

・デフォルトアイコン
自作のオリジナルページやオリジナルアプリのアイコンは
カスタマイズをせずとも、Facebookから提供されいているデフォルトのアイコンがあります。
例えば、↓このようなアイコン。見覚えがある方もいるのではないでしょうか。

・カスタマイズアイコン
カスタマイズしたアイコンは、例えば↓このようなもの。

企業のロゴマークや、ブランドを連想させるマークなどが設定されています。

・さらに工夫されたアイコンの活用
今回の記事でご紹介したかった「メニューアイコンをとても面白く活用しているFBページ」が、
2011年7月1日にオープンしたばかりのポカリスウェットのFBページです。

このFBページのメニューを見てみると、↓このようにカスタマイズされています。

ひとつひとつのアイコンデザインはバラバラですが、
このようにメニューとして並べると、ポカリスウェットの商品画像になっているんですね。

今まで、海外・国内のいろいろなFBページを観察してきましたが、
海外を含めてもアイコンでこのように面白い工夫をしているFBページは初めて見たかもしれません。

今後もこのような面白い工夫をしている事例を見つけたら、ご紹介します。
ご参考になれば幸いです。

伊藤ハム / ITOHAM FOODS inc.
http://www.facebook.com/itoham

伊藤ハムのFBページは、「ハム係長」というソーシャルメディア専用の公式キャラクターが運用をしています。
癒し系な見た目、ため息混じりのちょっと弱気なコメント、「ぷふぅ～」というユニークな口癖、人間味のあるウォールでのやり取りなど、脱力系の"ゆるキャラ"が話題になって、4月1日のFBページ開設から2ヶ月足らずでファン数が約3,500人に。そこからさらに1ヶ月、テレビなどで紹介されたのもあり、2011年6月26日現在ではファン数が約8,500人に達しています。

このハム係長、ずっと同じプロフィール画像でいるわけではなく、
ごくまれに表情が変わったり、なんと外出をしてしまったり、運営サイドの面白い演出があるのです。

細やかなウォール対応以外にも、感情や行動の"動き（変化）"をプロフィール画像を活用してうまく表現することで、さらに人間味が増しますよね。
ファンも、企業やキャラクターとのつながりが実感できて嬉しいと思います。

Nike Running Japan
http://www.facebook.com/nikerunjp

Nikeの最新ランニング情報を発信している、こちらのFBページ。
今年の4月から5月にかけて、トレーニングシューズ「NIKE FREE」の特設ページ（http://nike.jp/nikefreevoice/）と連動して、プロフィール画像が週1回～隔週1回くらいのペースで変化していました。

トレーニングシューズ「NIKE FREE」の特設ページ

初めは「変わったなぁ」としか思いませんでしたが、スポーツ選手やスポーツ好きのタレントなど著名人を起用していたのもあり、回を重ねるごとに「次は誰になるんだ？」と、ワクワクに変わっていました。

Nokia Italia
http://www.facebook.com/nokiaitalia

最後に紹介するのは、「Nokia Italia」。
プロフィール画像と、コンテンツページの画像を、↓このような感じで面白く見せていました。

「見せていました」と過去形で書いたのは、私が以前確認した時はそうなっていたのですが、
残念ながらプロフィール画像が変わったようで、現在の該当ページでは見ることができません。。。

プロフィール画像ひとつを取っても、ファンを「もてなす」、「楽しませる」方法は様々ですね。
ご参考になれば幸いです。

この機能は、検索結果の中で、自分が気に入った情報や、友達にオススメしたい情報があった時にこのボタンを押すと、Googleアカウントでつながりのあるユーザー間でその情報を共有することができる機能です。Facebookの「いいね！」ボタンと似てますね。
（英語版「Google.com」のみの限定公開で、日本語版は未実装。）

［参考記事］
グーグル、検索結果や広告をオススメ＆共有できる　「＋1」ボタンを提供：MarkeZine（マーケジン）

その「＋1」ボタンを、ブログやWebサイトに設置できるよう一般公開されたので、弊社で運営しているブログ（当Tips*Blog、マーケティングブログ「市場のお手入れ」、キュレーションブログ「Social Media Curator」）にも設置してみました。

以下に、設置方法をまとめたので、ご参考にしてみてください。
とっても簡単ですよ。

「＋1」ボタンの設置方法

①まずは、設置コードを取得するためにこちらのページに移動します。

②ボタンの「サイズ」と「言語」を選択します。

［サイズ］

4つのサイズから選択することができます。
各サイズの原寸の一覧が、↓こちらです（当ブログは、標準サイズを設置してます）。

［言語］

計44の言語から選択することができるので、「Japanese」を選ぶと、↓こちらのように「＋1」ボタンにマウスオーバーした時のメッセージが日本語になります。

③ページ下段にコードが書き出されますので、ボタンを設置したいページや、ブログのテンプレートに貼り付けます。

head要素 or body要素内に貼り付けるコード　と、「＋1」ボタンを設置する場所に貼り付けるコード　に分かれているので、画面の指示通り両方とも対応してください。

これで設置は完了です。当ブログのページ上下でも実際のボタンが見れるので、確認してみてください。

また、カウンター（クリックされた数）の非表示設定、「＋1」ボタンを読み込むタイミングなど、カスタマイズも可能です。ドキュメンテーション（英語）も公開されているので、興味のある方はこちらからご覧ください。

冒頭で書かせていただいた通り、現在のところ英語版「google.com」でしか確認できませんが、近いうちに日本語版のGoogleでも「＋1」ボタンが見れるでしょう。（いつかは分かりませんが。。。）
また、当然といえば当然ですが、この「＋1」ボタンのクリック回数が多いことで、検索結果で高い評価を得られる可能性が高いようです。
つまり、SEO対策にとって重要となる要素が多く含まれていますよね。

今後の展開が楽しみですね。

［追記：2011/6/30］
日本語版のGoogleでも「＋1」ボタンが実装されているのを確認しました。

［おまけ］
「＋1」ボタンの説明動画も公開されていたので、ご参考までに。