responsive-web-design

今さら人に聞けない!「レスポンシブウェブデザイン」と「モバイルファースト」って?モバイル端末への最適化手法について勉強しました。

| 0件のコメント

Pocket
LINEで送る

読了時間5分

こんにちは。ソシャマノートのこのみです。
スマートフォンのユーザーが爆発的にふえた今、Webサイト・Webサービスにはモバイル端末への最適化が必須となりました。例え直接コーディングをするような機会が無くても、その概念を知っておくことは必要ですよね。そこで今日は最近よく聞くレスポンシヴデザインやモバイルファーストといった考えについて、芝辻さんが勉強しまとめてくださいました!基本的な単語の意味や、事例も一通り載っているのでレスポンシヴデザインやモバイルファーストというワードがまだよくわからないという方はぜひご一読ください!



 

最近よく耳にする「レスポンシブウェブデザイン」


最近よく耳にする「レスポンシブウェブデザイン」って言葉。みなさんも一度は聞いたことがあるのではないでしょうか?私自身最近スマートフォンで記事などのウェブサイトを見ることが多いですが、文字が小さかったりしてスワイプしないといけなかったりだとか、画像が重たいせいか読み込みが遅くてイライラすることがよくあります。そんな問題を解決してくれるのが「レスポンシブウェブデザイン」という制作手法。
スマートフォンやタブレット、PCなど多くのブラウザに対応する制作手法の一つとして注目されています。今日はそんな「レスポンシブウェブデザイン」について調べてみました。

1.「レスポンシブウェブデザイン」ってそもそも何?

“レスポンシブウェブデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法”のこと。

デバイスやスクリーンサイズごとにページを振り分けることはせずに、CSSでレイアウトを調整することで、スマートホンやタブレット、PCのブラウザに対応したWEBサイトを制作できるんです。

簡単にメリット・デメリット

メリット

    • 1.メンテナンスが容易
      一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。
    • 2.今後出るデバイスの種類に柔軟に対応可能

例えばスマートフォンのアンドロイド携帯はたくさん種類が出ていて、一々それ専用に作っていたら大変ですね。

    • 3.UXを高めることができる

デバイスごとに調整可能なため、「ページの読み込みに時間がかかる」「もっとサクサク動いてほしい」「入力ミス・操作ミスを起こしやすい」
などのユーザーの不満を解消することが可能です。

デメリット

  • 1.CSS3のMedia Queriesの知識が必要
    これを使ってディスプレイサイズに応じてデザインを変更します。
  • 2.レイアウトや画像を柔軟に対応できる様にする。
    画像サイズや解像度などの細かい指定が必要であれば、更新作業が発生します。
  • 3.開発コストの増
    スクリーンごとのレイアウト設計などウェブデザインのコストが増加したり、あらゆる端末の解像度、スクリーンサイズ、OS、UAを調査して、それぞれに適したHTMLやCSSを用意する必要があります。

※開発に関して詳しいことは下記記事などをご覧ください。
レスポンシブwebデザインで制作する時のポイント
Web制作者は知っておきたいwebサイトのレイアウト7選
–2015/8/29追記–
レスポンシブデザイン: 動画紹介
※なぜWebサイトをレスポンシブデザインにする必要があるのかが解説されています。
–追記END–

2.例えばどんなサイトがあるの?

国内外それぞれ3つずつ、なるべく幅広いジャンルを集めてみました。

【海外】

1.Starbucks

やはりやってましたね、スターバックス!!

2.Sasquatch! Music Festival

アメリカで4日間に渡り行われている野外コンサートです。

3.Obama Biden

やはりあのオバマ大統領もシレっとやっていたようですね。


【国内】

1.面白法人KAYAC

さすがカヤックさん!!やってると思いました!!

2.GREE

日本が誇るソーシャルゲームのけん引役!!

3.NHKスタジオパーク

我等が公共放送!!!

もっと見たいという方は下記サイトをご覧ください。
・海外のまとめ系記事
10 Beautiful examples of responsive Web design
Responsive Web Design: 50 Examples and Best Practices
Responsive Web Design

・国内
Responsive Web Design JP(国内のレスポンシブウェブデザインがたくさんまとめられています)
国内のレスポンシブWebデザインに対応したWebサイトまとめ8つ
ウェブ制作者必見。国内のレスポンシブウェブデザインまとめ

3.「モバイルファースト」と「レスポンシブウェブデザイン」

あのGoogleやFacebook、Adobe、Apple、Microsoftもそのコンセプトを取り入れ始めたという「モバイルファースト」。これはWEBサイトを作る際はまずモバイルから作成しましょうよと言う考え方です。
つい先日スマートフォンの出荷台数がPCのそれを抜くと言うデータが出ました。

これからのウェブサイト(ウェブサービス)を考える上で、モバイル(特にスマートフォン)はますます無視できない存在になってきました。スマートフォンをはじめとした、モバイルユーザーにとって本当に必要な情報や機能は何なのか?コンテンツをモバイルサイト中心に考えていくべきではないか?そうしたユーザー中心の考え方から現れたキーワードが「モバイルファースト」です。

ユーザーはモバイルでサービスを使う?

今まではどちらかと言うと、先にPCサイトを構築後、モバイルサイトを作成すると言った流れでした。ですが、ユーザーは実はPCではなくモバイルでの利用が多かったりしています。FacebookもPCベースでサービスが設計されていますが、事実にユーザーの半分以上がモバイルアプリもしくはモバイルWEBサイトを介してアクセスされています。

最近オープン化を発表したLINEですが、国内で主要ソーシャルメディア(facebook、mixi、GREE、モバゲー)がユーザー数2000万人を達成するのにかなりの時間を要しているのに対して、LINEはそれよりも比較にならないスピードでユーザー数を伸ばしています。

このLINEと言うサービスはモバイルをベースにサービスが設計されています。

モバイルで設計されたサービスはシンプルで分かりやすい?

facebookとLINEの機能を比較してみると、感覚的にもLINEがシンプルに設計されていることが分かると思います。nanapiさんがまとめている使い方ガイドを見ても、facebookの機能はLINEのそれに比べると非常に多いです。(参考:Facebook(フェイスブック)の使い方ガイドLINEの使い方ガイド

以前、私の友人がfacebookのモバイルアプリをダウンロードし利用しようとしましたが、何をどうすればよいか分からなかったそうです。それに対してLINEはやることが明確で機能もUIも非常にシンプルです。

モバイルという、PCよりも機能が制限され、画面の大きさも小さい環境においてユーザーのことを考えることにより、ユーザーのためになる優先順位の高い(大切な)機能に絞られ、より洗練されたサービスを考えやすくなるのだと思います。

モバイルファーストでサービスを考え直す

上記のように、モバイルファーストという考え方を導入すると、本当にユーザーに伝えたいコンテンツやサービスにフォーカスがあたるため、新しくサービスを設計することに限らず、既存のサービスを再構築する上でも、本来のWebサイトの目的や役割を再確認することができます。

モバイルファーストと言う考え方によってサービスを構築もしくは再構築した場合、PCやタブレットへの機能やUIにも大きく影響を及ぼすことになるでしょう。

あれ?これって上で話した「レスポンシブウェブデザイン」と同じじゃないですか!?

そう!この「モバイルファースト」は、「ワンソースから各デバイスに対応していく考え方」もポイントになっているんです。

なるほど!!繋がりましたね。
今後新しくサービスを考える際は「モバイルファート」と「レスポンシブウェブデザイン」がキーワードになりそうですね。

4.あとがき

今回はいろいろと勉強になりました。ちょっと前のミログさんのデータでAndroidで最も使われるアプリはブラウザであると言うデータが出ており、モバイルユーザーはブラウザでサイトやサービスを見ているということが明らかになりました。確かに私自身、スマートフォンにインストールしたアプリよりもブラウザを多く使う傾向にあるなと思います。
こうした背景も考えると、モバイルファーストやレスポンシブウェブデザインのような考え方は新しいサービスを作る上で重要だなと思いました。

またいろいろと勉強していきます。

株式会社フーモア 代表取締役社長 兼 漫画家 芝辻幹也
HP:http://whomor.com/
Fb:https://www.facebook.com/MikiyaShibatsuji
Tw:https://twitter.com/#!/mikiya_4822
————————————————————-

なるほど!どちらの手法も、「サービスの本質とは何か?」をつきつめなければ実現できないということで共通している。制限の多いモバイル端末だからこそ、バリュー・コンセプト・使いやすさが洗練されていなければいけない。逆にそれをつきつめることができれば成長の可能性も大きく、スピードも加速する事につながるんですね!勉強になりました!

 

参考記事:
レスポンシブWebデザインとは
wikipedia-Responsive Web Design
これからの企業サイトは「レスポンシブ・ウェブデザイン」であるべきだ

レスポンシブwebデザインで制作する時のポイント
Web制作者は知っておきたいwebサイトのレイアウト7選
レスポンシブ・ウェブデザインの功罪とモバイルファースト
アップルとマイクロソフトが採用をはじめた“モバイルファースト”とは?
スマホ対応の新潮流「レスポンシブWebデザイン」とは?
10 Beautiful examples of responsive Web design
Responsive Web Design: 50 Examples and Best Practices
Responsive Web Design JP
Responsive Web Design

Comments

comments

作成者: shibatsuji

株式会社フーモア所属。漫画家担当。イラスト制作などをしながら自社サービスを開発中。

コメントを残す

必須欄は * がついています



*

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

3DCG、Spine制作ならフーモア!

プロの漫画制作ならフーモア!