最近、皆が異なる方法でコンテンツを消費している。私の母はネットブックを持っているし、友人は27インチのiMacを持っていて、ガールフレンドと私はスマートフォンを持ち、彼女の母はiPadを持っている。
あなたのコンテンツはこれまでになく多くのデバイスとブラウザで閲覧されており、デザイナーはそのことを頭に入れてデザインしなければならない。画面サイズやオペレーティングシステムに柔軟に対応するデザイン手法は、レスポンシブWebデザインとして知られる。ここで紹介する10のサイトはフレキシブルなWebの未来を見せつけている。
目次
Bread & Pepper
Bread & Pepperは、スパイシーなコードを使ってシンプルなインターフェースを作るソフトウェア会社だ。
UPPERDOg
ブラウザのサイズ調整をする度にリアルタイムでこのサイトもサイズ調整するのは素敵だ（決して跳んだり跳ねたりしない）。
– UPPERDOg
Food Sense
サイズに応じてロゴの位置まで動く。
– Food Sense (via Splashnology)
Jux
異なるアプリを作り出す代わりに、Juxは、iPhone、iPad、デスクトップのような異なるデバイスに優雅に適応するために1つのレスポンシブWebデザインに重点的に投資した。（暴露：私は、TNWの前に彼らと仕事をしていた。）
– Jux
Endloop Mobile
Endloop Mobileのサイトは、レスポンシブWebデザインのWordPressテーマを改変して作られた。
Gravitate
Gravitateはどのサイズでもエレガントに見える。
– Gravitate (via WebDesignDev)
Think Vitamin
Think Vitaminは、小さいサイズではサイドバーを完全に消している。
Clean Air Works
Clean Air Worksは、小さいサイズではメニューを完全にフォーマットし直す。
– Clean Air Works (via WebDesignDev)
CSS Grid
CSS Gridのサイトはフレキシブルなグリッドを使用するという目的を中心に構築されている。
– CSS Grid
Responsive Illustration
メディアクエリを使って作ってある。“これは、レスポンシブWebデザインのテクニックを使ったインタラクティブな体験である。” このサイトについては以前に書いている。
私たちの社会において成長するコネクティビティは、人々をお互いに近づけながら驚異的な量の情報の流れを保ち、いくつか驚くような結果をもたらしている。しかし、この消費の新しい時代にはいくつかマイナス面があり、その中の1つがウェブサイトが現在デザインされているあり方なのだ。
モバイルデバイスを持っている人ならWebを閲覧することがいかに難しいかということを知っているが、そうでなければならないわけではないのだ。ますます多くのデザイナーがレスポンシブWebデザインの技術を活用するようになっていて、全ての新しいWebデザインに期待される手段になる日は近いだろう―まだその日が来ていないのなら！
この記事は、The Next Webに掲載された「10 Beautiful examples of responsive Web design」を翻訳した内容です。
確かに今後はこの流れが効率化のためにも加速化する気はします。SEO Japan的にはこれからはレスポンシブSEOだ！とも先にいっておきましょうか。 — SEO Japan
アイオイクスではSEOを軸としたWebコンサルティングサービスを提供しています。
いわゆるSEOの型に沿った施策ではなく、お客様の事業やWebサイトの構成を踏まえた最適な施策のご提案を重要視しています。SEOにお困りの際はぜひご相談ください。
→SEOコンサルティング サービスページアイオイクスでは一緒に働く仲間を募集しています
アイオイクスのWebコンサルティング事業部では、「一緒に挑戦し、成功の物語を共有する」という理想像を掲げ、本質的な取り組みを推進しています。私たちと汎用性の高いスキルを突き詰め、自由に仕事をしていきませんか。
メールマガジンの登録はこちら
SEOに関連する記事の更新やセミナー情報をお届けします。
