レスポンシブデザインはモバイルファーストかPCファーストか

最近、運用業務の中で、既存のPCページを流用してスマホページ化する案件がありまして。

レスポンシブデザインではないんですが、そのうちレスポンシブ対応という話が出てきそうな雰囲気があったので、個人的に勉強中。

色々と調べながら試しにコーディングしているのですが、その過程で気になったところをメモ。

Media Queries非対応のブラウザに対応する必要は?

Media Queries非対応ブラウザというとIE6~8がパッと浮かびます。IE6はPCサイトでもフォローしなくて良いんじゃないかと思ったりしますが、その辺りは置いておいて。個人的には、対応しなくて良いと思います。

これはレスポンシブデザインの考え方によるでしょう。私は、ワンソースでモバイル(スマホ)やタブレットの表示を最適化するためのデザインがレスポンシブデザインだと考えているので、わざわざJSでMedia Queries非対応ブラウザに対応する必要はないかと。

全画面表示しているウィンドウを縮小したらレイアウトが変わる。違和感ないですか?私は違和感がものすごくあります。ですから、スマホ・タブレット表示のためにレスポンシブ対応するのであれば、IE6~8は除外します。IE6~8は読み込めないだけなので、Media Queries以外の箇所で普通に表示はされますからね。

もし、クライアントの要望で、IE6~8にも対応しなければいけない場合、Respond.jsを使えば良いでしょう。

画像テキストの対応がやっかい

これは既存のPCページを流用してスマホページ化する際に感じたこと。PCサイトってテキストを装飾して画像化しているものは多いです。これをスマホページに流用する場合、面倒くさいので注意。

基本的にPCよりも半分以下の画面サイズになるので、思いの外フォントサイズが小さくなります。スマホは解像度が高いとはいえ、フォントサイズが小さくなると、見づらさが出てきますし、外のテキストとのバランスがとれなくなったりもします。

最初からレスポンシブデザインで組む場合、背景に画像をしていする画像置換で解像度によって背景画像を入れ替えることで対応するかと思います。それでもやはり同じこと。PCは画像置換で、スマホの場合はテキストで対応という形で、切り替える方法をとったほうが良いと思います。

スマホ表示の場合、装飾テキストは画像ではなく直のテキストで対応するほうが楽ちんです。スマホの場合はCSS3で装飾できる幅は広いので、問題ないんじゃないでしょうか。

画面設計(ワイヤーフレーム設計)はモバイルファーストで

よくレスポンシブデザインの場合は、モバイルファーストでと言われています。画面設計(ワイヤーフレーム設計)に関しては、モバイルファーストで考えたほうがやりやすいです。

単体で見た場合、スマホサイトよりもPCサイトのほうがレイアウトの自由度は高い。PCサイトのワイヤーを先に作って、次にスマホのワイヤー設計に進むと苦労します。

というか、コーディングがわからないディレクターさんが自由気ままにワイヤーを作ると、モバイルファーストだろうがPCファーストだろうがコーディング段階で苦労します。この場合は、必ずコーディング作業者がワイヤーの設計段階で確認するようにしましょう。本当に大変です……。

現段階では、レスポンシブデザインの基本のレイアウトは限られています。グローバルナビゲーションやメインビジュアルの見せ方が違ったとしても、大枠のレイアウトはPC=複数レイアウト→スマホ=1カラムレイアウト。厳密に言うと、モバイルファーストの考え方というより、基本的なレイアウトを知っておくことが必要かなと。

コーディングはPCファーストで

コーディングは、画面設計と逆でPCファーストのほうがやりやすいかと。

まず、PC用のレイアウトをCSSで指定してき、Media Queriesで指定解像度以下の場合にスマホ用・タブレット用のCSSを上書きしていく感じで。そうすることで、Media Queries非対応ブラウザでも問題なく表示されます。

IE6~8でMedia Queriesを対応しない場合、モバイルファーストのコーディングをしてしまうと表示が大変なことに……。Media Queriesで指定した中にPC用のCSSが記述されていて、それが読み込まれないので。IE6~8に対応するしないは別にして、どちらでも対応できるような記述の仕方を身につけておいたほうがやりやすいんじゃないでしょうかね。

とりあえず、今のところは画面設計(ワイヤーフレーム設計)はモバイルファーストで、コーディングはPCファーストでというのが一番やりやすい方法かと思います。

公開:2013/03/25 | 更新:2013/12/16