ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  • WEBデザイン

スマートフォンの普及に伴って目にすることの多くなったレスポンシブWEBデザイン。デバイス(閲覧端末)に応じてレイアウトが変化するというこの手法は、WEBデザインの定番手法としてすっかり定着しています。さらに最近ではGoogleが、スマホ対応しているかどうかをモバイル検索のランキング要因として使用することを発表したこともあり、あらためて注目を集めています。

そこで、今回のWEBデザイン10選では、レスポンシブWEBデザインを取り上げてみようと思います。黎明期のレスポンシブWEBデザインといえば、複数カラムのPCサイトをスマホでは1カラムにして対応させる…など、ごく単純なものがほとんどでした。しかし、状況は大きく変わってきています。…ということで、進化した「今のレスポンシブWEBデザイン」をピックアップしてお届けします!

メーカー系企業での活用事例

Volkswagen The Beetle

cap01
http://thebeetle.jp/

業種:自動車メーカー
サイトの目的:Volkswagen The Beetleの魅力の訴求
サイトの特徴:ビジュアルが多く、デバイスを選ばず楽しく見やすいレスポンシブWEBデザイン

タレントの所ジョージさんを起用して、VolkswagenのThe Beetleの魅力を多面的に伝えているサイトです。The Beetle自体のデザイン性が高いことを活かし、ビジュアルを中心にその魅力を伝えるように構成されています。PC、タブレット、スマホ…と、それぞれに最適化された表示で、デバイスを選ばすコンテンツをクリックしたくなる作りになっています。

NIXON

cap02
http://www.nixon.com/jp/jp/

業種:腕時計メーカー
サイトの目的:コーポレートサイト、ECサイト
サイトの特徴:コンテンツが多いサイトでありながら、スマホでも見やすいナビゲーションのレスポンシブWEBデザイン

スポーツ系の時計メーカー「NIXON」のオフィシャルサイトです。いわゆるスポーツ腕時計とは一線を画す先進的デザインの時計をつくっているメーカーだけあって、WEBサイトもお洒落でユーザビリティの高いものになっています。アイテム数が多い商品ラインナップですが、スマホ画面でもそれらが探しやすく、使いやすいナビゲーションになっています。

PRAS

cap03
http://pras2015.jp/

業種:スニーカーメーカー
サイトの目的:コーポレートサイト、ECサイト(準備中)
サイトの特徴:コンテンツの絞り込みを行ったシンプルなデザインのサイト

レスポンシブWEBデザインで気をつけないといけないことのひとつに、そもそものコンテンツの内容や量があります。スマホ画面で見た時にスクロールし続けるようでは、ユーザーには使いづらくなってしまいます。このPRASのサイトでは、ブランディングのためのビジュアルイメージはInstagramに集約するなどして、サイト内のコンテンツは必要最小限に絞り込んで構成。シンプルな1カラムサイトでコンパクトにまとめています。

観光関係での活用例

東京會舘 おもてなしの「今」

cap04
http://www.kaikan.co.jp/special/omotenashi/2018.html

業種:施設
サイトの目的:東京會舘、新生本舘の紹介
サイトの特徴:TOPページのレスポンシブWEBデザインの高度な構成

PC版のTOPページを見た時に、このサイトがレスポンシブWEBデザインだと思う人は少ないのではないでしょうか。ぜひ、ブラウザの幅を伸び縮みさせて、デザインが切り替わる動きやしくみを見てみてください。高度に設計されたクオリティの高い仕上がりになっています。下位ページも情報がよく整理され、歴史と新しさをともに感じさせる、信頼感のあるサイトになっています。

小笠原ベストマッチ

cap05
http://www.letsgo-ogasawara.com/

業種:旅行、ツアー
サイトの目的:小笠原ツアーの比較検討
サイトの特徴:ページ遷移のアニメーション

TOPページで、小笠原の自然の魅力を伝える動画がフルスクリーンで再生されているインパクトのあるサイト。ページ遷移の際の、波のようなアニメーションもとても印象的です。特にスマホ画面で見た際には海に潜るような感覚が得られ、小笠原の特徴をよく表したレスポンシブWEBデザインのサイトに仕上がっています。

制作/Webサービス系企業での活用例

goen°

cap06
http://www.goen-goen.co.jp/

業種:制作会社
サイトの目的:goen°のコーポレートサイト
サイトの特徴:レスポンシブWEBデザインには見えない有機的なデザイン

森本千絵さん主宰の制作会社「goen°」のコーポレートサイトです。レスポンシブWEBデザインでは、グリットで区切られたコンテンツがデバイスによって可変するため、ともすれば固いイメージのサイトになりがちですが、このサイトでは多くの要素を有機的に構成してデザイン。また、ビジュアルにあったかわいらしいアニメーションがついているため、とても温かみの感じられるサイトになっています。

KUROKO

cap07
http://ppt.kuroko.me/

業種:WEBサービス
サイトの目的:PPT(パワーポイント)資料作成サービスの紹介
サイトの特徴:モバイルファーストを追求したレスポンシブWEBデザイン

スマホやタブレットなど、モバイルデバイスで見ることをメインにデザインされたサイトです。もちろん、その上でPCでの閲覧時のこともしっかりと考えて設計されています。1ページをスクロールするだけで、コンテンツの内容を理解することができ、それがコンバージョンにつながっていく作りになっています。まだまだPCでの閲覧が中心だと考えられていた、このようなビジネスサポートサービスの分野でも、スマホファーストのWEBサイトが増えてきています。そのような意味でも、参考になるサイトです。

学校関係での活用事例での活用例

京都造形芸術大学 芸術学部 通信教育部

cap08
http://www.kyoto-art.ac.jp/t/

業種:大学
サイトの目的:通信教育部・学部紹介サイト
サイトの特徴:多くの情報を画像、テキストの切り替えでうまく見せている

ターゲットである学生がスマートフォンで閲覧するケースが多いので、学校関係ではレスポンシブWEBデザインに対応したサイトが多くなっています。このサイトも、そのひとつ。非常に多くの情報量が掲載されていますが、「PCの時は画像で、タブレットやスマホではテキストで」などと表示をうまく切り替えることによって、どのデバイスでも見やすくデザインされています。

芦屋大学

cap09
http://www.ashiya-u.ac.jp/

業種:大学
サイトの目的:学校紹介オフィシャルサイト
サイトの特徴:スライドショーを使い、多くの情報をスッキリと見せているレスポンシブWEBデザイン

このサイトも、京都造形芸術大学と同じく情報量は多いのですが、スライドショーを効果的に用いて、どのデバイスでもスッキリと見せる工夫が施されています。また、メインビジュアルからコンテンツにリンクさせていたり、「ピックアップ」として特に読んで欲しいコンテンツをアピールしたり…といった工夫で、ユーザーに訴求したいポイントを明確にしている点なども、よく考えられています。

医療関係での活用事例での活用例

東京西徳洲会病院

cap10
http://www.tokyonishi-hp.or.jp/

業種:病院
サイトの目的:病院紹介サイト
サイトの特徴:ていねいに作られたオーソドックスなタイル状のレスポンシブWEBデザイン

タイル状のコンテンツがデバイスによって組み変わり、最適な見え方になるサイトです。レスポンシブWEBデザインにおいて、もっとも見られることの多いオーソドックスなかたちですが、このサイトは非常にていねいにつくられています。PC閲覧時には情報量がかなり多いサイトですが、スマホでは表示する情報をうまく精査して見やすくするなどの工夫がなされており、どのデバイスでも使いやすく仕上がっています。

今回のまとめ

レスポンシブWEBデザインでサイト制作を行う際には、デバイスごとの表示や切り替えの際の動きが、なかなかつかみにくい場合があります。発注側と制作側で、あらかじめしっかりとイメージを共有しておくことが重要です。レスポンシブWEBデザインと一口に言っても、今回ご紹介したように、さまざまな手法や見せ方がありますので、ぜひサイト制作やリニューアル時の参考にしてみてください。

<関連情報>
【WEBデザイン10選】これはスゴい!クオリティの高い2016年度新卒採用サイトを厳選
【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ
【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  8. 8

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  7. 7

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND