レスポンシブデザインとフラットデザインの時代

ホームページ(最近ではWebサイトやWebページという場合が多い)がいまだスマートフォン、タブレット端末などのそれぞれの画面サイズに最適化していない企業が多いことにとても驚く。といっても、これがITとは関係のない中小企業ならいざしらず、モバイルソリューションやクリエイティブを主事業としているベンチャー、WEBデザイン制作会社までが、モバイルサイトを軽視していることが多い。

現在のインターネット事情は、まずPCからモバイルへとパワーシフトがあり、同時にモバイル上ではブラウザ、つまりWebからスマホアプリによるコンピューティングが大勢を占めるようになっている。だから企業側もモバイルブラウザでの情報発信について、あまり気を配らなくなっているのかもしれない。
タブレットやスマホが台頭して久しいのに、パソコン用に作られたWEBはスマホでもそのままでも見ることはできるが、小さな画面からはみ出したり表示速度が重くてストレスを感じさせたりで適合しない。

もうすでにレスポンシブWebデザインが主流となりつつある。レスポンシブWebデザインは「応答型デザイン」とも訳される。

レスポンシブWebデザイン / responsive web design

様々な種類の機器や画面サイズに単一のファイルで対応するWebデザインの手法の一つ。

WebサイトやWebページをパソコンやスマートフォン、タブレット端末など複数の機器や画面サイズに対応させる際、内容が同じでもデザインや動作をそれぞれに最適化した複数のHTMLファイルやCSSファイルを用意し、HTTPリダイレクトなどでアクセスを振り分ける手法がよく用いられてきた。

しかし、レスポンシブデザインではこのような対応はせず、表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、次のようなメリットがある。

  • すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。
  • 検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。


(画像:ASCII Web Professional)

フラットデザイン FLAT DESIGN

レスポンシブWebデザインに対し、もうひとつフラットデザインというものを聞くようになった。AppleのiPhone。つまり凹凸が少なく、陰影もなく、比較的円形や四角いデザインが明るくはっきりしたカラーリングで表現されるデザイン。スマホのアイコンが並んだホーム画面といえばわかるだろう。

数年前のガラケー時代には、PCのデスクトップ用Webサイトとケータイ用のWebサイトをデザインもURLもわけてつくることが通常だったが、フラットデザインによるWebサイトは、基本的にレスポンシブWebデザインと相性が良いので、最初からひとつのURLで、アクセスしてくるデバイスのサイズをみて自動的に最適化することが当たり前になるかもしれない。

次の項目であるが、主体がPCで、タブレット、スマホはサブだとする発想自体が時代遅れになりつつある。

WEB第三の流れ~モバイルファーストからモバイルオンリーへ

引用:レスポンシブWebデザインとフラットデザインの時代を引き寄せよう
小川 浩(シリアルアントレプレナー)2013年08月12日

Follow me!

レスポンシブデザインとフラットデザインの時代

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トップへ戻る