レスポンシブデザインは増えてきたけど・・・
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカおかもと歯科医院
 |  |
| スマホ | タブレット |
通常のレスポンシブ対応は基本的に要素の並びは一緒なのですが、ファーストビューのコメントの配置の比率を上手に使われています。
スマホ版ではスマートな印象ですが、パソコン版では余白を多めに取ることで温かみのある印象を与えてくれます。
にゃんこ師匠ミツオカCome Heart⁺
 |  |
| スマホ | タブレット |
基本のデザインはスマホ版、パソコン版ともに変わらない、シンプルなデザインです。
Items部は、パソコン版ではマウスを乗せると、服の上にカテゴリーやブランドが現れます。
スマホ版では、長押しすると服の写真の上にカテゴリーやブランドが出てきます。
にゃんこ師匠ミツオカBEYOND CAFE
 |  |
| スマホ | タブレット |
パソコンで、画面のサイズを変えることってないでしょうか？
別のページやフォルダを開く際、画面のサイズを変えると、ある時突然形が変わることがあります。
ガタッと表示が変わるため、ユーザーに負担をかけてしまうのですが、こちらのBEYOND CAFEは、サイズを変更した際のレイアウトの切り替えが非常に滑らかです。
にゃんこ師匠ミツオカ青柳総本家
 |  |
| スマホ | タブレット |
パソコン版では映像や、背景画像をクリックすると説明ページにするなど、動きに富んだサイトです。
しかし、スマホ版では一転、静止画をメインとした最低限の動きに抑えられています。
ユーザーの使用の意図に沿ったデザイン
パソコンで「ういろう」を調べる際、家で時間をかけることの方が多いですよね。
時間をかけて見てもらえる以上、「特別な品」として演出したい意図があり動きやデザインを実現しています。
一方、スマホで調べる際は、お店を探したり、商品をさらっと見たいなど、情報を得たい人の方が多いと思われます。
そのため、動きが少なく情報が見やすい静止画をメインとし、情報を見やすくしています。
にゃんこ師匠ミツオカHATCH
 |  |
| スマホ | タブレット |
タブレットやスマホ版の際に下部や横に表示される、CONTACTやBEST HUBが、必ずフッターやサイドにぴったり収まるように設計されています。
また、事業説明の図も、画面のサイズに合わせてデザインを変えているのも特徴的。
にゃんこ師匠ミツオカGlad Cube
 |  |
| スマホ | タブレット |
白を基調にした、シンプルで直感的に使いやすいサイトです。
スマホ版で縦並びにしても見やすいよう、ページを構成するアイテムをボックスで作成しており、サイズの違う端末でも画一的に見え、コーディングがしやすいのも特徴です。
にゃんこ師匠ミツオカW3G
 |  |
| スマホ | タブレット |
パソコン版、スマホ版ともに見え方がほとんど同じになるように設計されています。
スマホ版とパソコン版でデザインが違うのもオシャレで素敵ですが、どちらから見ても同じように見えるデザインは同じ印象を与えるので、企業ブランディングがしやすいメリットがありますよね。
にゃんこ師匠ミツオカまとめ
レスポンシブデザインの一番のポイントは「画面サイズが変更されても、見やすいサイトにする」こと。
スマートフォンでも、PCでも見やすいのは勿論のこと、それぞれで工夫が違うものがあると、ついついどちらからも閲覧したくなりますよね。
今回は、にゃんこ師匠の主観で選びましたが、まだまだユーザー目線のレスポンシブデザインを施したサイトはたくさんあります。
ぜひ、優秀なレスポンシブサイトを見つけたらシェアしてください！
