レスポンシブウェブデザインを作成する4つのテクニック①

レスポンシブウェブデザインを作成する4つのテクニック①

2019.03.18

レスポンシブウェブデザインとは、1つのウェブサイトでスマートフォン、タブレットの画面に対応することです。最近人気になっています。

今日はレスポンシブウェブデザインを作成するための4つのテクニックを紹介します。
1.
レスポンシブレトロフィット古いウェブサイトをレスポンシブに変換する。
2.
レスポンシブモバイルサイトモバイルサイトを作成して、レスポンシブに変換する。
3.
モバイルファーストレスポンシブサイトモバイルファーストでウェブサイトを作成する。(またははプログレッシブエンハンスメントと呼ばれています。)
4.
段階的(Piecemeal) – 古いウェブサイトを少しずつレスポンシブに変換する。

それぞれの方法はどのようなメリットとデメリットが何あるかを見てみましょう。

 


.既存サイトのレスポンシブ化(Responsive Retrofitting)

もともとPCしかサポートしないウェブサイトをレスポンシブでサポートするためにCSS 3 Media Queryを追加します。メジャーな手法で開発者の負担も少ない。ユーザーにとっては不便かもしれない。

 

メリット

  – 早い、やりやすい、別のCSSファイルを追加するだけで、簡単にレスポンシブを対応します。
既存デザインを使うので、ユーザーは混乱しません。

  – デザインリニュアルは必要ありません。そして、お客さんとブランドの問題を再度話し合う必要もありません。なので、デザイン費用はかかりません。

デメリット

   – レスポンシブを対応するためにコードが多くなり、ウェブサイトはPCでもスマホでも両方とも遅くなります。
メディアクエリを対応していないデバイスもあるので、Javascriptを使用しても、サイトが重くなります。
適当な方法で、ユーザーに対応するのは100%ではありません。 

 

2.レスポンシブモバイルサイト

この方法は特定のスマホ画面に対応するために作成されたウェブサイトです。ウェブトップから開くと古いサイトになり、スマホで開くし新しいウェブサイトが見えます。それからタブレットとPCで綺麗に表示されるようにレスポンシブモバイルサイトを少しずつ開発することができます。

BBCなどの国の大規模ウェブサイトもこの方法を使用します。

 

メリット

レスポンシブウェブデザインはユーザーへの影響が少ない点がメリットです。古いウェブサイトが利用可能です。
ウェブサイトを設計するためにDesignerチームが少しずつ学ぶ時間がある。
コンテンツ部門のチームにもコンテンツを調整する時間があります。
不要なデスクトップサイトの要素を消し取ることで、サイズを小さくすることができます。

デメリット

  – メインサイトからのレスポンシブモバイルサイトを分離することはURLリダイレクトやSEOなどで問題を引き起こす可能性があります。コストがかかります。
レスポンシブモバイルサイトを作成しても、古いサイトを代わりに将来の新しいウェブサイトを簡単に開発して、置き換えることではありません。 作業時間や制作チームの技術スキルなどの問題もあります。

また次回残りの2つをご紹介致します。


Top