【2019年前期版】優秀なレスポンシブデザインのサイト7選

広告メディア事業部

2021.12.20

レスポンシブデザインは増えてきたけど・・・

にゃんこ師匠

PCにもスマホにも対応したレスポンシブデザインは当たり前になったにゃ～

ミツオカ

でも、うちのおじいちゃんが「スマホに変えたのに、阿部寛のホームページは昔のまんまじゃ！」て驚いて腰抜かしてました！

にゃんこ師匠

おお…あれは一生変わらない人類の宝なんじゃ…。ともあれ、スマホの普及率が80％超えて、ますますスマホ対応したWebサイトデザインは重要になってきてるのじゃ

ミツオカ

でも、パソコンで見たときは綺麗なデザインだったのに、スマホで見たら崩れているというサイトはまだまだ多いですよね…

にゃんこ師匠

あるにゃぁ…だがその一方で、閲覧するユーザーのことを考えた優秀なレスポンシブデザインも沢山あるのにゃ

ミツオカ

ほ〜！参考にしたいのでにゃんこ師匠がいいなと思ったサイト教えてください！

おかもと歯科医院


スマホ	タブレット

通常のレスポンシブ対応は基本的に要素の並びは一緒なのですが、ファーストビューのコメントの配置の比率を上手に使われています。

スマホ版ではスマートな印象ですが、パソコン版では余白を多めに取ることで温かみのある印象を与えてくれます。

にゃんこ師匠

スタッフブログは3段階のレスポンシブ対応するなど、コンテンツごとに閲覧するユーザーを考えたデザインが施されておるにゃ

ミツオカ

おかもと歯科医院の公式サイトはコチラ

Come Heart⁺


スマホ	タブレット

基本のデザインはスマホ版、パソコン版ともに変わらない、シンプルなデザインです。

Items部は、パソコン版ではマウスを乗せると、服の上にカテゴリーやブランドが現れます。

スマホ版では、長押しすると服の写真の上にカテゴリーやブランドが出てきます。

にゃんこ師匠

デバイス毎の異なる操作方法をうまく解決して、同じような動きを実装しているサイトじゃにゃ

ミツオカ

Come Heart⁺の公式サイトはコチラ

BEYOND CAFE


スマホ	タブレット

パソコンで、画面のサイズを変えることってないでしょうか？

別のページやフォルダを開く際、画面のサイズを変えると、ある時突然形が変わることがあります。

ガタッと表示が変わるため、ユーザーに負担をかけてしまうのですが、こちらのBEYOND CAFEは、サイズを変更した際のレイアウトの切り替えが非常に滑らかです。

にゃんこ師匠

ストレスのない、ユーザー目線のレスポンシブ対応といえるにゃ

ミツオカ

BEYOND CAFEの公式サイトはコチラ

青柳総本家


スマホ	タブレット

パソコン版では映像や、背景画像をクリックすると説明ページにするなど、動きに富んだサイトです。

しかし、スマホ版では一転、静止画をメインとした最低限の動きに抑えられています。

ユーザーの使用の意図に沿ったデザイン

パソコンで「ういろう」を調べる際、家で時間をかけることの方が多いですよね。

時間をかけて見てもらえる以上、「特別な品」として演出したい意図があり動きやデザインを実現しています。

一方、スマホで調べる際は、お店を探したり、商品をさらっと見たいなど、情報を得たい人の方が多いと思われます。

そのため、動きが少なく情報が見やすい静止画をメインとし、情報を見やすくしています。

にゃんこ師匠

見るユーザーに合わせて『動的』『静的』の切り替えがされているところが素敵じゃにゃ

ミツオカ

青柳総本家の公式サイトはコチラ

HATCH


スマホ	タブレット

タブレットやスマホ版の際に下部や横に表示される、CONTACTやBEST HUBが、必ずフッターやサイドにぴったり収まるように設計されています。

また、事業説明の図も、画面のサイズに合わせてデザインを変えているのも特徴的。

にゃんこ師匠

スマホだとリンクが近いと誤タッチがおきやすい。閲覧するユーザーを考えたサイト内導線を実装しているといえるにゃ

ミツオカ

HATCHの公式サイトはコチラ

Glad Cube


スマホ	タブレット

白を基調にした、シンプルで直感的に使いやすいサイトです。

スマホ版で縦並びにしても見やすいよう、ページを構成するアイテムをボックスで作成しており、サイズの違う端末でも画一的に見え、コーディングがしやすいのも特徴です。

にゃんこ師匠

これからWebデザインを作成する際にお手本となるようなサイトといえるにゃ

ミツオカ

Glad Cubeの公式サイトはコチラ

W3G


スマホ	タブレット

パソコン版、スマホ版ともに見え方がほとんど同じになるように設計されています。

スマホ版とパソコン版でデザインが違うのもオシャレで素敵ですが、どちらから見ても同じように見えるデザインは同じ印象を与えるので、企業ブランディングがしやすいメリットがありますよね。

にゃんこ師匠

要素を中央配置にし、コンテンツ部は同じレイアウトの繰り返しにすることで、統一感を持たせておるにゃ

ミツオカ

W3Gの公式サイトはコチラ

まとめ

レスポンシブデザインの一番のポイントは「画面サイズが変更されても、見やすいサイトにする」こと。

スマートフォンでも、PCでも見やすいのは勿論のこと、それぞれで工夫が違うものがあると、ついついどちらからも閲覧したくなりますよね。

今回は、にゃんこ師匠の主観で選びましたが、まだまだユーザー目線のレスポンシブデザインを施したサイトはたくさんあります。

ぜひ、優秀なレスポンシブサイトを見つけたらシェアしてください！

書いた人はこんな人

広告メディア事業部

「好きを仕事にするエンジニア集団」の（株）ライトコードです！

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎！

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit