みなさんこんにちは、株式会社エイト、ウェブデザイナーのMiyaと申します。

 

 

 

先日までのデザインの4大原則についての記事、よんでいただけましたでしょうか?

 

 

 

今回は、今流行・・・というよりも、今使われるのがほぼ当たり前になってきているというレスポンシブデザインについて更新したいと思います。

◆急速なスマートフォンの普及

 

 

ここ数年間の間に、スマートフォンやタブレットの使用率が大幅にアップしました。

 

 

 

若者に限らず、老若男女全ての人がスマートフォンを持っています。
最近では、「ポ●モンGO」なんてはやっていて、大人気だそうですね!私はもう飽きてきましたけど・・(笑)

 

 

また、スナップチャットやVineのように、スマホで手軽に楽しめる動画投稿アプリやサイトも以前からかなりの人気みたいですね。

 

 

 

・・・これらのように、スマートフォンは、私たちの日常の中に当たり前のようにとけ込んでいます。

 

 

 

◆レスポンシブデザインとは?

 

 

今までは、PC上で見る事を想定されたサイトがほとんどでした。

 

 

 

スマートフォンやタブレットが急速に普及した事により、スマートフォンで見たときの画面、タブレットで見たときの画面、それぞれに合わせたサイズになるよう、Webサイトを書き換える必要が出てきた訳です。

 

 

それが、私も現在業務で中心的に行っている、レスポンシブデザインです。

◆レスポンシブデザインのメリットとデメリット

◇レスポンシブデザインのメリット

・スマホやタブレットでの操作が格段に楽になる。

 

スマートフォンでPC画面をピンチイン(日本の指の間隔を狭める事)、ピンチアウト(2本の指の間隔を広くする事)で操作するのって正直大変なんですよね。

 

それに対してスマホ用のサイトを作ってさえおけば、スワイプ(画面に触れ、その指先をスライドさせる)だけの操作で出来ちゃう訳です。

 

あと、登録フォームとか最悪ですよね。

 

登録フォームに入力しにくすぎて、途中で断念したりしてしまう経験がある方も、今記事を読んで下さっている中にもいると思うんです。

 

それらを入力しやすくするっていうのも、レスポンシブデザインのメリットかと思います。

 

 

 

 

・文字が見やすくなる。情報が理解しやすくなる。

前述の通り、ピンチアウトしたり、ピンチインしてサイトを閲覧していると、何となく内容が頭に入ってきにくい事無いですか?

 

「あれ、どこまで読んだっけ?」ってなると、「このサイト使いにくいなー。」に直結します。

 

“ユーザビリティが悪いサイト”という事になってしまう事も考えられますね。

◇レスポンシブデザインのデメリット

・CSSの記述が多くなりすぎる。

レスポンシブデザインをするときに一番めんどくさいのがCSSなんですよね。膨大な量の記述をしなければいけないので、かなり大変な作業です。

 

 

・普通のCSSを書くよりも、何倍も時間がかかる。

普通のCSSなら、PC用の画面にCSSを書くだけで十分なのですが、レスポンシブデザインだと、それに合わせて、スマホ用のpxの記述、タブレット用の記述など、多くの事を書かなければいけません。
時間がかかるんですね〜。

また、既存のサイトをレスポンシブに変更しようとする場合は、pxの指定をremに変換し、ブラウザのサイズに合わせたフォントサイズ、パディング、マージンにする必要も出てきます。

私もここんところ計算機たたきまくりです。

 

 

 

 

では、こんなところで、レスポンシブについての概要でした。

次回は、レスポンシブに変換する時に必須のツールをご紹介します。

 

 

Miya