【見習い小僧×技術小僧】5つの事例から学ぶレスポンシブデザイン

見習い小僧

今回は見習い小僧がお届けします。先週のブログで技術小僧のジョーからお知らせがあったように、今回の小僧ブログスマホ対応はレスポンシブwebデザインの技術を使って行うことになりました。それと同時に、前回さらっとレスポンシブデザインについて説明しましたが、もっと簡潔にわかりやすく知りたいという方の為に、今回は更に事例を集めてみました。

 

1. ソニー

ソニー

画面の横幅に合わせてデザインが2段階に変化します。この、デザインが切り替わる横幅サイズは“ブレイクポイント”と呼ばれているのですが、このサイトの場合ブレイクポイントが1カ所あるということになります。いくつ、そしてどの横幅にブレイクポイントを持ってくるのかは、どんなデバイスを基準にするかによって変化します。(このサイトの場合はPCとスマートフォンの大きく分けて2つを基準にしていると言えます。)

 

2. NHKスタジオパーク

NHKスタジオパーク

とても有名な事例で、レスポンシブデザインの事例を集めた様々なサイトで紹介されています。このサイトのポイントは、画面の横幅に合わせてレイアウトが変化する際、各パーツがヌルッと動くようになっていることでしょう。レスポンシブの本来の目的と照らし合わせた場合にこのアニメーションが必要か?という問題はありますが、粋な演出だと言えるかもしれません。

 

3.セブン銀行(海外送金サービス)

セブン銀行(海外送金サービス)

このサイトでは、画面の横幅が狭まった際にメインビジュアルを完全に消してしまっています。レスポンシブデザインに限ったことではありませんが、画面の小さいスマートフォンでの閲覧時には場合によってはビジュアルを極力減らして最低限必要な情報だけを見せるということも有効なようです。また、PCで閲覧した時とスマートフォンで閲覧した時のグローバルナビゲーションが同じデザインで表示されていることもポイントと言えそうです。なぜなら、サイトユーザーの迷いを軽減できるからです。

 

4.メディアジーン

メディアジーン

手前味噌ながら、弊社姉妹会社メディアジーンのサイトです。これは横幅をスマホサイズあたりまで縮めると、グローバルナビがアコーディオン(開閉式)に変わります。これもスマホの画面サイズを意識した仕様で、なるべくメニューで画面領域を奪わないようにという工夫です。1つのHTMLから画面サイズに合わせて様々なデザインを表示するレスポンシブデザインですが、HTMLの方で工夫を加えることでこういうことも出来るんですね。

 

5.インフォバーン

インフォバーン

そして手前味噌その2ですが、弊社の最近リニューアルされたサイトもレスポンシブwebデザインです。このサイトでは、グローバルナビをはじめとする様々なパーツが元々モバイルに適したようなアイコンになっていて、狭い画面幅で見てもデザインのトーンが変わりません。また、パララックスという視覚効果も利用しているのですが、その話はいつか機会があれば技術のジョーに説明してもらいます。

 

以上5つ紹介しましたが、少し調べるとこの他にも沢山事例が出てきます。レスポンシブデザイン、ジワジワと増えているようです!ただし、ワンソース(1つのHTML)で多デバイス対応出来るとはいえ、デザインが偏ってしまったり、実は工数が必要であったりと必ずしもいい点ばかりではないということなので、サイトの目的や条件によって使い分ける必要がありそうです。とはいえひとまず、今回の企画ではレスポンシブで行きますよ!

 

■おすすめ記事

どうせ1人で過ごす花金なので、今夜は7つの魅力的な水族館サイトを見て楽しむ。

コンビニ大手4社のおでんサイトで見る、イチオシ商品のコンテンツ化手法

京都人こそ知りたい、今どきの京都について知ることができるサイトを3つ紹介します

去年の今頃(web制作会社入社1か月)に知った、息抜き系で面白いブログメディア10選(超有名だけどね!)

見習い小僧

ちょうど1年前のこの時期、僕は「ス タ ッ フ ブ ロ グ を 作 れ !」という1stミッションを受け、そこからこの小僧ブログを企画するにあたってテイスト決めにかなり悩みました。その時に「既存のブログなどを参考にしたらいいんじゃないか」というアドバイスをもらい「あぁ、そうか。」と思ったのはいいのですが、当時webでニュースやブログを見るということがそこまで習慣化されていなかった自分には、何を参考にすればいいのかわからなかったのです。(お恥ずかしい・・・)

ちょうど1年経ってそんなことを思い出したものですから、このたび僭越ながらこの場で、当時の自分が「面白いなあ」と思ったブログ10選を紹介したいと思います。とはいっても既にweb業界が長い方やインターネッツ大好きな人には、特に新しい発見はないかと思われます。ご了承くださいね。

 

1.DDN JAPAN

DDN JAPAN

新しい技術、アート、ネタっぽいものの写真だったり動画だったりを、面白おかしく記事にしてくれています。文字が少なくて、疲れた時にもあまり頭使わずに楽しめます。

 

2.らばQ

らばQ

海外で話題のYouTube動画だったり、画像だったりニュースなんかを日本語で紹介してくれます。こちらも文章が短くて直感で理解できるのがおすすめポイント!

 

3.デイリーポータルZ

デイリーポータルZ

ネタ系の記事をたくさん更新してくれるサイトです。何しろネタの規模が凄い。まるでTVの関西ローカル番組を1コーナー作れそうな記事がたくさんあります。すごいの一言。

 

4.ほぼ日刊イトイ新聞

ほぼ日刊イトイ

ご存知糸井重里さんが主宰して運営されているブログです。雑誌のようなインタビューがあったりして、タメになる事も多いサイトです。震災関連のインタビューとか、刺激的でした。

 

5.nanapi

nanapi

ブログ・・・ではないですがユーザー参加型、投稿型のサイトです。「○○をするには」というhow toを「レシピ」と呼び、多くのユーザーが様々なレシピを紹介しています。クスッと笑えるネタ系からタメになる本気系までいろいろあって面白いです。

 

6.pouch

pouch

「どうしようもなく疲弊した時に読んでほしい」と説明に書いてある通り、ゆるーくて読み流せる(いい意味で!)記事をたくさん更新しています。女性がターゲットですが、男性も比較的読みやすいと思います。

 

7.ナリナリドットコム

ナリナリドットコム

マスでは取り上げられない・・・けれど引っかかる人にはめちゃくちゃ引っかかる。そんなニュースを配信してくれているのがナリナリドットコムだと思っています。ネットならではな空気感にお手軽に触れられる感じがいいんです!

 

8.ロケットニュース24

ロケットニュース24

こちらも社会の小さなニュースをネットならではの視点で取り上げています。すごく好きなのがサイト説明に書いてある「あまり新しくないニュースを、早く伝えたいという気持ちだけは負けていないニュースサイトです。」という部分。よくぞ言い切った!!!w

 

9.ねとらぼ

ねとらぼ

こちらもまた、ネットだからこそ取り上げられるニュースを面白く編集してくれているサイトです。

 

10.地獄のミサワの女に惚れさす名言集

地獄のミサワ

LINEスタンプとしても大人気(!?)の地獄のミサワのうっざーい画像が毎日毎日更新されるサイトです。ウザカワですwww

 

以上10サイト紹介しました。中には歴史の長いサイトもあり「こんなの知らないのか」と思われそうですが、意外とこういう有名ブログでも、途中からネットに入ってきた人には敷居が高かったりする気がします。そんな去年の僕みたいな人が見てくれたらいいなあと思ってまとめました。いかがでしたか?

 

■おすすめ記事

TEDxKyotoに行ってきました

【Facebook広告】目を引くキャッチ「俺は、ローラが好きなんだ!」

コンビニ大手4社のおでんサイトで見る、イチオシ商品のコンテンツ化手法

京都の寺社の、見やすい2サイトと動きがかっこいい2サイト+おまけ

見習い小僧

京都といえば歴史と伝統のある寺社。その寺社のサイトにかなりイケてるものがあるようなので、あれこれ眺めていました。そしてせっかくなのでご紹介します。

 

 

見やすいサイト

1 清水寺

清水寺サイト

京都で今一番人気のあるお寺のひとつが清水寺ですね。春には桜で秋には紅葉ですし、なによりことわざにもなっている清水の舞台は、誰にでもわかる凄さがあります。サイトも清らかなイメージの白でシンプル、とても綺麗です。英語、中国語、韓国語にも対応していることもポイントですよね。縦書きのナビゲーションもわかりやすいです。

 

2 石清水八幡宮

石清水八幡宮サイト

清水寺に勝るとも劣らないのが、石清水八幡宮のサイトです。こちらも清潔感のある白系の背景に、縦書きのナビゲーション、写真もきれいなものを使っていて、僕はまだ行ったことがないのですが行ってみたいと思わせてくれます。コンテンツも、基本的な部分はしっかりと抑えてあります。昔から人気のある神社なので、載せるべきコンテンツも多いのでしょうね。

 

 

動きがかっこいいサイト

3 東寺

東寺サイト

東寺のサイトのかっこよさといったらないですよ。サイト開いた瞬間にド迫力の仏像様が登場します。そして物語性のある画像の移り変わり。どの写真もきれいでインパクトがあります。メニューもわかりやすく、東寺についてのアレコレについての表現も、歴史あるお寺らしくされていて好感が持てます。

 

4 相国寺、金閣寺、銀閣寺

相国寺、金閣寺、銀閣寺サイト

こちらはもう、サイトというよりひとつの物語です。相国寺、金閣寺、銀閣寺という3つの人気のあるお寺が力を合わせて作ったサイトなので、その分気合いの入った出来になっています。特に左に並ぶナビはどれを選択しても風流なアニメーションが流れます。動きの多いサイトは好き嫌いあると思いますが、寺社でここまでされているサイトも少ないと思うので、参考になります。

 

 

おまけ(シンプルでかっこいい!!!)

太宰府天満宮

太宰府天満宮サイト

京都ではなく福岡ですが、太宰府天満宮さんのサイトは日経ビジネスでも取り上げられるほど注目もされているサイトなんですよ!清水寺や石清水八幡宮のように見やすいサイトであるだけでなく、神社のサイトであるにもかかわらずアートについてのコンテンツページがあることが特徴的です。本業ではないことを公式サイトのコンテンツにするということはなかなか難しい決断なのですが、果敢にチャレンジされているところが素敵だなと思いました。日経ビジネスでのインタビュー通り、発注者側に強い信念があるからこそ完成したサイトなのだろうなと思います。

以上、寺社のサイトを5つ紹介させていただきました。ここで取り上げたサイトはどこも最近大きくリニューアルしたばかりですが、京都にある観光客に人気の寺社のほとんどはこれからリニューアルしていく時期が来るのだと思います。その際に参考になればいいなと思ってまとめたのですが、むしろ自分ならどうするかな?と想像しながら考えるのが楽しかったです。また、寺社だけでなく和風な感じを表現したい企業のサイトデザインにも参考になりそうですね。

 

■おすすめ記事

紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選

京都人こそ知りたい、今どきの京都について知ることができるサイトを3つ紹介します

Pinterestを使った企業キャンペーン

京都人こそ知りたい、今どきの京都について知ることができるサイトを3つ紹介します

見習い小僧

「京都 情報」とか「京都 観光」とか調べると老舗ポータルサイトは上位に表示されるけれど、もっと新しくて見るのが楽しくて更新されるたびに読みたいなと思えるサイトがあまり出てこないことに気が付きました。京都在住でも意外に京都のことを知らない人は多いんじゃないかと思い、ひとまず僕が知っているおすすめの京都情報サイトを3件だけですがまとめておこうかと思います。

 

1 コトログ京都

コトログ京都

コトログ京都では、京都観光に役立つ基本的な情報が美しい写真とともに紹介されています。暇な日に「散歩でもしようかな」と思ったらまず目的地決定に使うといいと思います。特におすすめのコンテンツが和菓子を紹介しているページで、京都の和菓子が沢山紹介されているんです。その場所でしか食べられないような京菓子を散歩のゴール地点に定めると、散歩の楽しみ倍増です。

 

2 CNTR

CNTR

CENTRは関西のカルチャーについて紹介しているまだ新しいwebメディアです。京都に関する情報は特に頻繁に更新されているので、常にチェックしておくと面白いイベントに巡り合うことがでたりします。7/29日に行われる妖怪アートフリマ「モノノケ夜市」なんて個人的にはかなり興味深いです。

 

3 京の町屋泊まり

京の町家泊まり

町屋って意外に敷居が高くない場所もあるみたいで、時間貸しとかしてくれる場所もこのサイトで紹介してくれています。京都でイベントを企画したりするとか、身内でちょっとしたパーティをするとかいう時にも使えそうです。勿論、東京からせっかく来た時くらい町屋に泊まってみたいという使い方もできますよね。

これくらいしか知らないのですが、京都の今どき情報もっと知りたいので誰か教えてください(笑)

 

■おすすめ記事

紅葉シーズンに向けて気になる、創業100年を超す京都老舗旅館のWebサイト5選

京都の寺社の、見やすい2サイトと動きがかっこいい2サイト+おまけ

インフォバーンKYOTOオフィス移転先からの山鉾巡行が、眺め抜群すぎた件

Pinterestを使った企業キャンペーン

見習い小僧

Pinterestロゴ企業の公式Pinterestページが日本でも増えてきていますね。MAJOLICA MAJORCAファーファドン・キホーテのボードは、それぞれの企業色が出たボードになっていて面白いなと思います。それと、大体どんな写真を載せてもボードとして見ると綺麗に見えるっていうのは、だいたいどんな企業でもコンセプト次第で活かせるということなのかなとも思います。そんなPinterestですが、2012年後半は企業のキャンペーン活用、特にコンテストの場としての活用が広がるかもしれません。

HSNキャンペーンキャプチャアメリカのテレビショップチャンネルHSNが、自社のECサイトキャンペーンとして現在行なっているPinterestキャンペーンがまさにそれに当たります。このキャンペーンではまず、ユーザーはHSN商品から5アイテム+5アイテム(こちらはネット中のどこから拾ってきてもOK)の合計10アイテムの”dream room”ボードを作ります。そのボードに#HSNと #HouseBeautifulという2つのハッシュタグを設定。最後に専用サイトで自分のボード情報などを登録します。その後、インテリアデザイナーのVERN YIPが審査を行い、良いボードにはHSNショップで使える商品券がプレゼントされるという企画です。

HSNキャンペーンでユーザーがすること仕組みとしてはとても単純ですが、特に多くの商品を揃えている企業ならばこれをそのまま行うこともできそうですね。ユーザーとしては、最後のボードを登録したりする作業がとても面倒だなと思うのですが。そこは企業側がハッシュタグ検索とかすればいいのにと思ってしまいます。少なくとも応募段階では。

HSNキャンペーンボードを作ってみた

何はともあれ、Pinterestでのキャンペーン事例もこれからは増えていくでしょうね。

 

■おすすめ記事

どうせ1人で過ごす花金なので、今夜は7つの魅力的な水族館サイトを見て楽しむ。

コンビニ大手4社のおでんサイトで見る、イチオシ商品のコンテンツ化手法

京都人こそ知りたい、今どきの京都について知ることができるサイトを3つ紹介します