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

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

2019.04.15

モバイルファーストレスポンシブサイト

モバイルファーストレスポンシブウェブサイトの方法は、最初からウェブを作成します。デザイナーがスマートフォンにサポートする事を中心します。読み込みが早くさせるために、スマホ用のCSSと重要な要素だけを使います。Media Queryを使用せずに、PC版を開発し、PC用のCSSを追加します。
 
この方法では、スマートフォンはMedia Queryを対応しなくても、SP版で表示されます。PCで開くユーザーにも、パソコン画面に追加されたコンポーネントだけを読み込まれます。SPで開いている人は軽く、早く表示します。パソコンで開いている人は普通の速さになります。

モバイルファーストレスポンスウェブサイトの利点
– 最初からサイトを制作するのはデザイナーもプログラマーもやりやすくなります。
– メディアクエリーは必要ありません。
– スマホで早く表示させる速さを調整しやすい。
– 各画面サイズを対応します。
– PC版に開発することをしやすくなります。

モバイルファーストレスポンスウェブサイトのデメリット
– 公開するまで時間がかかります。
– プログラマーにスキルが必要。
– 最初ユーザーが慣れない場合があります。

ピケミアル

この最後の方法では、各部分のサイトを徐々にレスポンシブに変換します。二つのパターンがあります。

一つ目 – ページごとのページ
ページごとにレスポンシブページを作成する:最初にトップページからレスポンシブに変更して、ユーザーに公開します。
他のページがまだレスポンシブを対応していません。


ページごとのページのメリット
 
– ユーザーがよく使うページから作成することができます。
 
– 作業者にとって少しずつ作業できます。
 
– 全体を完成させなくても、サイトを利用することができます。


ページごとのページののデメリット
 
– SPで利用するユーザーがまだ完成していないページを開くと、違和感があります。




二つ目 – コンポーネントごと

要素を1つずつレスポンシブに変更する方法です。(最初のヘッダーからフッターを作成するなど)。


コンポーネントごとのメリット
 
– 要素を少しずつを変更すると、ユーザーも少しずつ慣れます。
 
– デザインに合わせて、プログラマーにとってやりやすくなります。
 
– 各部分で詳しく確認できます。
コンポーネントごとのデメリット
 
– 作業中でもユーザーが利用することができますので、完成していないところに違和感を感じます。




レスポンシブとはどのようなを選択しますか。

全ての方法がメリットとデメリットがあります。

大切なのは
 
– 開発する時間
 
– 開発する予算
 
– 案件の内容
 
– チームのスキル
で考えましょう。


Top