Smartphone スマホ

 
スマホデザイン・UI

【今さらシリーズ第1弾】ここがヘンだよ、レスポンシブwebデザイン!

・すごいと称されるレスポンシブデザイン。その裏にはデメリットが。

・各デバイスに対応するけど、工数も多くコストや管理に問題あり。

・CMSや変換サービスを使うと、よりよいサイト作りができる!

 

今さらですが「レスポンシブwebデザイン」を含むスマホサイト制作手法について考えてみました。

「レスポンシブすごい」

 

「みんなレスポンシブ対応してる」

 

というような話をよく聞くのですが、「レスポンシブ」の定義が人によって曖昧……と個人的に感じる機会が増えてきたことがきっかけです。

 

スマホサイト制作が急務となってきているのはわかりますが、とりあえず、

 

「レスポンシブwebデザイン」はおかしい!!

 

と、思わずにはいられないのですが、みなさまいかがでしょうか。

 

私は、PCサイトフルリニューアルが可能であれば、選択肢のひとつとして素敵な手法だと思いますが、そうでない場合はあまりお勧めできません。

 

今回はその理由について熱く語りたいと思います。

Webデザイナーになると、今日決めた!
AIが敵わない仕事はデザイナーだといいます。デジタル時代の生き方なら、まずはWebデザイナーから

 

基本的な疑問。そもそも、レスポンシブwebデザインって何?

「レスポンシブwebデザイン」とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに、単一のファイルで対応すること。

 

元々は米国のデザイナー、イーサン・マルコッテ(Ethan Marcotte)氏が2010年5月に技術系のブログ記事で発表したものです。

『A List Apart(ア・リスト・アパート)』(英語)

https://www.alistapart.com/articles/responsive-web-design/

もちろんスマホサイトを作る前の段階で、選択肢の1つに入ります。

 

しかし、

 

「周りもみんな取り入れているからうちも……。」

 

という流れで導入すると、

 

「こんなはずではなかった!」

 

ということになりかねません。

 

結構大変です、レスポンシブ。

 

もちろんメリットもあるので、色々な手法と比較してから導入していただきたいと思います。

 

いろいろあります♪スマホサイトの作り方。さあ、どれを選ぶ!?

さて、現在スマートフォンサイトを作る手法はレスポンシブも含め、大きく以下の方法に分類されます。

 

web制作に関わる方であれば、よくご存知のことかと思いますが、改めて見直してみましょう。

 

※ドメインが別になる手法は、SEOやSNSマーケティングの観念からオススメできないので、ここでは省かせていただきます。

スクラッチ

デザインや動作をそれぞれの端末に最適化したHTMLファイルやCSSファイルを複数用意し、HTTPリダイレクトなどでアクセスを振り分ける方法です。

 

レスポンシブwebデザインが出てくる前は、こちらが主流でした。

 

メリットは、各デバイスに最適なコンテンツを提供できること。

 

デメリットは、コンテンツ管理や制作のコストです。

 

PCとスマホ、だけで考えれば単純に2倍で済みますが、ファブレットやタブレット、スマートTVまで視野に入れると、どこかで限界に達します。

 

たくさんの情報を詰め込みたいキャンペーンページなどには向いているかもしれませんが、今後は今よりもっと多種多様なサイズの端末が普及することが予想されるので、間違いなくこの手法は採用されにくくなってくるでしょう。

レスポンシブウェブデザイン

レスポンシブWebデザインは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えて、レイアウトを調整します。

 

少し難しくいうと「フルードグリッド(Fluid Grid)」「フルードイメージ(Fluid Image)」「メディアクエリー(Media Query)」の3つの技術的な要素で構成されます。

 

基本的な作り方は、%やemで各要素の横幅を指定し、表示するブラウザに合わせて自動で大きさを変えたり、表示するブラウザのサイズによって各要素の配置を変えたりします。

【デモ】Google|Responsive Web Design Patterns

https://googlesamples.github.io/web-fundamentals/samples/layouts/rwd-patterns/mostly-fluid.html

メリットは、htmlは1つ用意すればいいので、スクラッチに比べ更新作業が楽になったり、更新漏れの防止ができること。

 

Googleが推奨するマルチスクリーン対応でも言及されているように、内容が重複した複数の異なるURLができることもないので、検索エンジン(SEO)やアクセス解析の面でもメリットがあります。

 

デメリットは以下の通り。

 

PC向けのコンテンツを、スマホで閲覧できるようにレイアウトを切り替える手法ではない

 

既存のPCサイト(日本のサイト設計は古いものが多い)をレスポンシブで作り替えようとすると、要素(例えばテーブルや、見づらい画像とか)を表示・非表示で何とかしようと考えがちです。

 

見え方はレスポンシブに見えても、裏側で膨大なデータをダウンロードするため、表示パフォーマンスが悪くなります。

 

回避方法もありますが、その設定にも工数がかかってしまいます……。

 

デバイスごとにサイト構造を変更できない

 

上記を踏まえ、パフォーマンスをよくするためにはどうしてもモバイルファーストで設計せざるをえません。

 

ディレクトリとページが各デバイスで完全一致となり、構造自体の変更ができないためです。

 

シンプルに設計をし直せるサイトには、向いていると言えますね。

 

イーサン・マルコッテ氏も「シンプルさが大事」と言っています。

 

ゼロから作る場合でも、結構大変

 

配置が切り変わるポイント(=ブレイクポイント)を決めるのが大変!! です。

レスポンシブのブレイクポイントを設定する前に知っておくべきこと|DEAIMOBI

https://deaimobi.com/breakpoint/

レスポンシブウェブデザインの初期設計時のワイヤーフレームは、3~4パターン作るのが通常です。

 

ブレイクポイントごとに作るわけですね。

 

しかしこのブレイクポイントは今のところ、「こうするべき」というものがなく、あらゆるレスポンブウェブサイト制作者が、試行錯誤しているのが現状です。

 

ブレイクポイントを作れば作るほど、運用時の工数がかかる。

 

作らなさすぎても微妙に表示が崩れる…など、悩みどころ満載です。

 

パフォーマンスの問題

 

PCとスマホなどのモバイルデバイス双方で画像をキレイに表示させたい場合、どうすればいいでしょうか?

 

大きなサイズの同じ画像を使い回すか、デバイスに合わせたサイズの画像を配信するかのどちらかです。

 

PCは高速なブロードバンド回線、スマホは3G / 4G回線…相反する環境を想定し、対応しないといけません。

 

では回線の遅いスマホに合わせよう、と考えるのが通常ですが、日本のwebサイトは画像をたくさん使って、見た目をキレイにすることを重要視している方も多いので、ここも頭を悩ませるポイントです。

ではどうしたら⁉ CMSやサービス変換ツールで、悩み解決!

CMSを使いこなす

PCとスマホ用にテンプレートを二つ用意したり、プラグインでも対応できます(Word Pressのプラグインは優秀ですよね)。

デメリットはサービスによって異なりますが、唯一同じなのはランニングコストが発生することです。

【まとめ】どの作り方でも、やっぱりモバイルファーストの視点が大事

レスポンシブウェブデザインを批判する記事のようになってしまいましたが、そうではありません。

 

「レスポンシブウェブデザイン」が提唱されたのは、2010年。

 

今や様々な解決方法があります。

 

画像をCSS3で置き換えたり、高速なCDNのサーバを使ったり、キャッシュを使いこなしてHTTPリクエストを減らしたり。

 

グリッドジェネレーターの便利なツールもたくさんあります。

 

「レスポンシブウェブデザイン」は進化してきました。

 

それなのに、「モバイルファースト」の概念は浸透しておらず、結局PCサイトありきで「レスポンシブ」してしまうサイトがとても多いように感じます。

 

Webデザイナーになると、今日決めた!
AIが敵わない仕事はデザイナーだといいます。デジタル時代の生き方なら、まずはWebデザイナーから

レスポンシブウェブデザインに関わらず、マルチスクリーン対応には「モバイルファースト設計」の考えがとても重要です。

 

スマホサイトを作る前に、一度しっかり設計を考えるところから始めてみてはいかがでしょうか。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事