レスポンシブデザイン フラットデザイン

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

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

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

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

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

Screenshot_6-300x157
(画像:ASCII Web Professional)

フラットデザイン FLAT DESIGN

screenshot-579x382

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

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

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

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

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

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る