株式会社 dowonders

by mochi

レスポンシブデザイン

スタッフのmochiです。
あけましておめでとうございます!
本年もDoWondersをよろしくお願いいたします。
Webサイトの作成や運営に関わったことのある担当者の方は
レスポンシブデザインと言う言葉を一度は聞いたことがあるのではないでしょうか。
スマホ最適化と言う風に覚えている方ももしかしたらいるかもしれません。
今回はレスポンシブデザインがどのようなものかを簡単に説明して行こうと思います。

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

Webサイトの表示をPCやスマートフォン等のサイズの違う画面に適応するための
手法の一つで、1つのHTMLに対してCSSやJavascript等で指示をします。
PCと同じデザインで、スマートフォンやタブレットでも見やすく表示させます。

サイズの話

スマホやタブレットで『見やすく』という点を考えると
PCと同じレイアウトや文字サイズではなく
それぞれの端末に合わせて表示を変えてあげる必要があります。
PCでは綺麗に見れてたのにスマホ等で閲覧すると要素がはみ出たり、
小さかったりして見づらい!なんて事も多いですよね^^;
レスポンシブデザインではCSS(主にWebサイトのデザイン指示をするコード)で、
通常PCで閲覧するためのCSSにタブレット・スマホのレイアウトを指示します。

タブレットでは幅768pxから1024px(一例)で綺麗に見れるように
スマホでは幅320pxから414px(一例)で綺麗に見えるように
といった感じにで数値を指定して必要な変更部分の指示をします。
この点からなんとなくご理解頂けるかもしれませんが、
レスポンシブデザインは全てのデバイスに100%適応されるものではありません。
スマホやタブレットは使うデバイスによって標準規格が異なるためです。
レスポンシブWebデザインは、スマホやタブレットでも
利用するデバイスによって表示が異なるという事を覚えておきましょう。

なぜレスポンシブにするのか

前項でも書きましたとおり、 PCの表示ではスマホやタブレットで表示の不都合が起きたり、
スマホ・タブレット用のHTMLを別で作成すると、
同じページをPC用とスマホ・タブレット用で2~3パターン作成しなければいけなくなります。
内容の編集をする場合はそれぞれのデータももれなく変更する必要があります。
レスポンシブデザインはスマホ・タブレットに表示を合わせられる事と
同じhtmlを使用するので内容の編集をする際に1つのデータを編集すれば
スマホやタブレットで見ても新しい情報が閲覧できる利点があります。
ただPC用のデータをスマホ等でも表示させるので、
利用するデバイスのスペックによっては表示が遅くなるなどのデメリットもあります。
もちろんわざわざレスポンシブにせずとも
デザインによってスマホやタブレットでも見やすくする事は可能かもしれません。
ですがいろいろと凝ったデザインのWebサイト等は
そのままスマホで表示すると見づらい事もあるので
場合によって導入する事を考えるのがいいかと思います。

現在、スマートフォンやタブレットを使用してサイトを閲覧する方が多いので
スマホ等のデバイスで見やすいサイト作りは必須です。
レスポンシブにすることで全ての問題が解決するわけではありませんが
これからサイト作成・リニューアルを考えている方がいれば
頭の片隅に入れておいて損はないと思います。

TEL&Mail

※タップすると電話がかかります。
営業時間:10:00〜19:00
(電話受付時間:10:00〜18:00迄)