カテゴリから探す
Geekly
コラム
技術・
テクノロジー
職種・
ポジション
Web・
ゲーム
転職準備
転職活動
  1. HOME
  2. Geekly Media
  3. Web・ゲーム
  4. レスポンシブデザインとは!基礎知識からメリット、作り方まで徹底解説!
  • Web・ゲーム

レスポンシブデザインとは!基礎知識からメリット、作り方まで徹底解説!

インターネットの利用にはスマートフォンを使うことが多くなりました。それに合わせてブログやオウンドメディアのサイトはどんな画面でも見やすいサイト構築を行なっています。これがレスポンシブデザインです。今回は、何気なく利用しているレスポンシブデザインとは何なのかを、基礎知識やメリット、作り方を交えて徹底解説します。

 

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

 

 

レスポンシブデザインとは、マルチスデバイス(様々な端末)に対応するためのサイトデザインです。

スマートフォンが普及する以前は、インターネットサイト閲覧の主な方法はPCがメインでした。しかし、それぞれの端末が独自のスクリーンサイズを持つようになり、PCを基準にデザインされたサイトは使いにくいものになってしまったのです。

サイトをスマートフォーンで表示すると、画面上のオブジェクトや文字が小さくなったり、サイトデザインそのものが崩れて表示される場合があるのです。

スマートフォンよりも大きな画面での表示を前提として設計していますので、極端に小さい画面ではうまく表示できなくて当然ですね。

しかし現代は、主流の端末はスマートフォンやタブレットです。PCの画面サイズを基準とした設計だけでは立ち行かなくなってしまいました。

 

レスポンシブデザインの基礎知識

 

基礎知識として必要なものは、CSSの知識と各デバイスのスクリーンサイズです。

 

CSSの知識

 

 

CSSは、HTMLなどで構築されたサイトの各オブジェクト(スクリーンサイズを含む)を定義するファイルで、スタイルシートとも言われます。

現在私たちが目にするブログやオウンドメディアのデザインは、HTMLとCSSを利用して構成されているのです。

HTMLではサイトに必要なオブジェクトをプログラミンし、CSSではサイト表示の配置やサイズを定義します。HTMLはCSSを読み込むことで、デザインしたサイトが表示され、私たちが見るデザインへと形作るのです。

CSSに様々なスクリーンサイズを想定してのプログラミングが肝となります。

 

スクリーンサイズの種類

 

 

マルチデバイス(様々な端末)に対応するためには、それぞれのスクリーンサイズを知る必要があります。世の中に普及しているある程度の端末を網羅したスクリーンサイズを考慮しなければなりません。

また、従来通りにPCからの表示も意識する必要がありますので、設計段階からあらゆるスクリーンサイズを想定しておく必要があるのです。

スクリーンサイズの種類を知り、CSSへ各サイズを対応させることでレスポンシブデザインを実現できます。

 

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

 

 

マルチデバイスでストレスなく利用できるだけでなく、開発側にもメリットがあります。

 

様々な端末に対応したサイトを構築できる

 

一つのサイトがマルチデバイスに対応し、PC・スマートフォン・タブレットを問わず、ストレスのないサイトを表示できるようになります。

特にスマートフォンからの閲覧が多い昨今では、スマートフォンサイズのサイト構築は必須と言えるでしょう。

 

メンテナンスが容易

 

サイトのメンテナンスや保守が非常に容易になります。これまで、PC用のサイトやスマートフォンなどのサイトは、画面サイズに合わせた別々のソースで管理していました。一部の画面不具合が出た場合の改修には2倍の工数がかかったのです。

しかし、レスポンシブデザインを導入したサイトでは、一部の画面不具合に対して改修すべき部分は、共通して利用しているHTMLやCSSのみです。一つのファイルを改修することで対応している全てのデバイス用のソースを修正したことになるので、工数は飛躍的に減ります。

 

サイトのアクセス数に影響を与える

 

 

PCやスマートフォン用にサイトを構築していると、それぞれのURLは異なったものになります。しかしレスポンシブデザインであれば、フロントとなるHTMLは統一され、アクセスされるURLもひとつに統一されます。

これにより、サイトのアクセス数も必然的に統合されます。

また、google推奨のスマートフォンからの検索順位というルールにも有利に働きます。

 

ユーザーが利用しやすい

 

開発側だけでなく利用するユーザーにとっても利点があります。

普段PCを利用している人でも、電車などの移動中はスマートフォンに頼りますよね。また、最近ではPCをではなく、その他の端末をメインに使っている人も多いのです。

もし、PCとスマートフォンサイトが分けて構築されていると、利用する端末によってはオペレーションも変わります。小型スクリーン端末では情報量が違うからです。

しかし、統一されたサイトならば、PCと同じサイトがアクセスしている端末の画面サイズに合わせてスイッチされますので、情報量も変わらずに利用可能になるのです。

 

 

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

 

 

小さな画面では情報量やボタンの大きさなどを考慮しなければならないというデメリットもあります。

 

設計に工数がかかる

 

サイト設計に工数がかかります。マルチデバイスへのバランスを考慮しなければならないからです。

画面サイズがそれぞれ違うということは、表示位置や情報量に対して、それぞれのサイズをCSSへ定義しなければなりません。

また、それぞれの画面に合わせた配置も考慮するため、サイズごとの画面設計も必要になります。

 

PC以外では読み込みが遅くなる可能性がある

 

PCを基準に作ってしまうと、PCのスクリーンより小さい端末で表示した時に情報量が多すぎたり、画像サイズが大きすぎると表示が遅くなります

PCから表示した場合には速くても、その他小さなスクリーンで表示した時には非常に時間がかかってしまうという現象が起きるのです。ですので、画面の小さいものから設計していくことが重要です。

しかし、あまりにも情報を少なくしてしまうと、今度はPCで表示した時にバランスの悪いデザインになってしまいます。

読み込みのスピードや情報量を緻密に考慮したデザインが重要な要素になるのです。

 

レスポンシブデザインの作り方

 

 

マルチデバイスに対応するサイズをCSSへ記載します。また、アクセス元の画面サイズもCSSで判断し、表示するサイズを決定します。

具体的に以下のものを設定します。

 

・viewport(ビューポート)の設定

・画面サイズ別の条件設定

・media(メディアクエリー)の設定

 

【viewport(ビューポート)と画面サイズの具体例】

最も重要なのがビューポートです。

・meta name=“viewport”:ビューポート設定

・width=device-width:様々な幅に対応する

・initial-scale=1.0:「0.1」がズーム率

 

<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>

 

【media(メディアクエリー)でデバイス別のサイズを指定するの具体例】

メディアクエリは、対応するデバイスごとに分けてします。PC・スマートフォン・タブレットであれば、最低3種類のメディアクエリーが必要です。

・media:メディアクエリ

・min-width: スクリーンの幅px:画面の幅を設定

 

@media screen and (min-width: 画面の幅px)

 

まとめ

 

 

私たちはPCでもスマートフォンでもタブレットでも、見やすいサイトを提供できるようなりました。また、ユーザーにとっても苦にならないデザインで閲覧できます。

今後も様々なサイズのスクリーンを搭載した端末が発売されるでしょう。

今後もレスポンシブデザインは、技術者にとってはなくてはならない技術であり、メディア運営にとってはSEO対策としても有効な手段となるでしょう。

佐久森

Geekly Media
ライター

この記事が気に入ったら
シェアしよう!

  • twitter
  • facebook
0

関連記事

求人数×IT業界での紹介実績数で、納得の転職をサポート。IT業界専門だからこそできる提案力を実感してみてください。