multidevice

ワンソース・マルチデバイス対応!レスポンシブWebデザイン Part1

ワンソース・マルチデバイス対応!レスポンシブWebデザイン Part1の記事

この記事と同じカテゴリ

ARTNOC記事


1つのURLでPC、タブレット、スマートフォンに対応するワンソース・マルチデバイス対応のWebサイトが増えてきています。レスポンシブデザインとも呼ばれるこの手法は、表示されている画面のピクセル数に応じて最適な表示レイアウトに自動的に切り替わります。
今回は、そんなWebサイトの中から12個を選定しご紹介します。

MOSSA

ケータリング事業を行う日昇商事株式会社さんのサービスサイト。要素はほぼそのままに、レイアウトが変わる仕様の為、マルチデバイス対応を前提としたシンプルなデザインです。

mossa

 

株式会社クロスカンパニー

アパレルのクロスカンパニーさんのコーポレートサイト。ビジネスのターゲット層からしてもスマホユーザ率も高そうなので、スマホ版でもビジュアル面にこだわった作りです。

crosscompany

 

IMN ISETAN MEN’S NET

伊勢丹メンズ館さんのWebサイト。各デバイスでも背景の独特のひし形デザインを活かした作りが特徴です。

imn

 

SANYO 株式会社三陽商会

アパレルの三陽商会さんのWebサイト。要素をうまく配置し、ミニマルでスタイリッシュなデザイン性は各デバイスに反映されています。

SANYO

 

トヨタ自動車株式会社

意外
トヨタさんのコーポレートサイトもマルチデバイス対応。サイズが狭くなるに伴い、メニューに文字ではなく分かりやすいアイコンを使用するなど、幅広いユーザ層を持つ企業ならではの対応が光ります。

toyota-co-jp

KDDI株式会社

auでおなじみのKDDIさんのコーポレートサイト。若者から支持される企業らしく、カラーリングやポップな要素が各デバイスで目立ちます。各情報がブロック要素で組まれており、レスポンシブを意識したデザイン。

KDDI

三菱地所レジデンスラウンジ

三菱地所さんの住まい情報サービスサイト。高級感のあるハイソな雰囲気が特徴ですが、情報量の多いサイトだけに、画面幅が短い場合の情報整理が参考になります。

lounge

富士急行株式会社

富士急行さんのコーポレートサイト。コアターゲットとなる女性の旅を意識したさわやかで優しい雰囲気のデザインです。どの画面サイズでもデザイン性が統一されています。

fujikyu

 

日本コカ・コーラ株式会社

日本コカ・コーラさんのコーポレートサイト。若者のファンが多い印象ですが、サイトも単純な企業情報というよりは、メディア系サイトのような情報の見せ方が多く、各デバイスでも記事の読みやすさが特徴的です。

Coca-Cola Journey

 

株式会社アイ・エム・ジェイ

IMJさんのコーポレートサイト。デジタル系の企業に相応しく、単純なPC・タブレット・スマホではなく、細かく横幅のサイズに対応する作り。

株式会社アイ・エム・ジェイ

LUMINE MAGAZINE

ルミネさんの展開するWebマガジンサイト。若者向けのサイトらしく、スマホでもPCとそん色ない情報を入手可能。こちらもマルチデバイス対応前提で、情報ブロックが設計されている。

LUMINE MAGAZINE

 

UTRECHT

南青山で書店をベースにしたアート系のセレクトショップUTRECHTさんのWebサイト。どのデバイスで見てもおしゃれです。

UTRECHT

 

いかがでしょうか?
意外にも有名企業のコーポレートサイトでもレスポンシブによるマルチデバイス対応を実装したサイトが多いです。
今やユーザが情報取得に使用するデバイスが多岐にわたるご時世ですから、発信者側でも情報を一元管理できるレスポンシブ機能を実装するサイトが増えてきていると思われます。

【補足】
ユーザの閲覧画面サイズに応じて自動的にデザインが切り替わる為、便利ですが反面PCなどで画面サイズを変えた場合も、デザインが変わってしまいます。その為、大画面で端の方にブラウザ小さいく配置しながらサイト見ているユーザからすると、自動的にタブレット用やスマホ用にデザインが変わってしまい、煩わしい場合もあります。
自身のサイトに訪問するユーザのデバイス割合や、ターゲットの性質をよく調べてから、実施する必要がありそうです。

ARTNOC.COMではその他にもワンソース・マルチデバイスのサイトを集めていますので参考にしてください。
ワンソース・マルチデバイスWebサイト一覧

 

パート2はこちらから

ワンソース・マルチデバイス対応!レスポンシブWebデザイン パート2

この記事と同じカテゴリ

ARTNOC記事

この記事と同じタグ

WebサイトURL
http://www.art-noc.com/multidevice-3633.html
Webサイト説明
(Description)
1つのURLでPC、タブレット、スマートフォンに対応するワンソース・マルチデバイス対応のWebサイトをご紹介します。