1400 更新日

レスポンシブWEBデザインとは?特徴・メリット・デメリット

レスポンシブWEBデザインとは?特徴・メリット・デメリット

レスポンシブWEBデザインの特徴

レスポンシブwebデザインの例

一言で言うと上記アニメーション画像の様に幅により可変するWEBページのことです。

がっくり青ざめるfoolfool

最初僕はレスポンシブルと読んでいました、「レスポンシブ」なんですね、最近では略してRWDなんて呼び方もあります。恥ずかしい〜

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

  • 管理が楽
  • スマホ・PCどちらも1つのソースで対応
  • ディバイスが変わっても崩れない
  • 検索エンジン大手推奨

本当は複数呼び名があります。フレキシブル・リキッドWEBデザインとも似ていますが、最近は全ディバイスに向けた1ソースで管理するWEBデザインをレスポンシブと呼ぶ傾向があります。

スマートフォン対応の今と昔

レスポンシブが主流になる前はスマートフォン専用のソース、PC用のWEBページ用のソースの2つが必要でした。

レスポンシブと従来のWEBページのソースの違い
笑顔のfoolfool

つまり、何らかの更新があった場合は昔は2つのソースの変更が必要だったのですが、レスポンシブは1つの更新で良くなったのでミスも少なく楽になりました。

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

  • 工数がかかる
  • ソースが長くなる
  • cssの豊富な知識が必須

最近では本当に主流になり、昔は制限が結構ありましたが、通常サイトと同一の動作も可能になった分、高度なコーディング(WEBページ化)技術が求められます。CSS(WEBデザインのスタイルを指定する言語)のより深い知識が無いと膨大なソースになって読み込みスピードに影響を与えてしまいます。

なぜ、レスポンシブが主流になったのか?

レスポンシブが主流になった背景にはWEBサイトを見るほとんどの人がスマートフォンからのアクセスになったからの様です。

つまり、スマホが主流=効率よく管理できて崩れないデザインが必要になった。という経緯があるのかもしれません。

スマートフォンの画面の大きさは機種によって異なるし、ipadなど様々なディバイスがあるため、可変する1ソースで管理できる効率のいい、WEBページが必要になったのです。

超笑顔のfoolfool

僕のこのブログもレスポンシブデザインで作成しています。

今後の主流はAMPとRWDの複合WEBページ

AMP(Accelerated Mobile Pages )とは、googleが中心に開発しているモバイル環境でも高速にWEBページを読み込む仕組みです。

スマートフォンがなくならない限り、AMPページが主体になる可能性が高く、更に進化していくことでしょう。

今後プログラミングの知識もある程度有するWEBデザイナーが活躍すると感じています。

考えるfoolfool

僕が転職仕立ての頃はHTML5がで始めた時で、レスポンシブは流行っていなかったのですが、独学で習得しました。実を言うとチコデザもAMP対応済みです。
わずか数年の間にどんどん進化していますね〜

この記事をシェアする

fool fool

「探しているイラストがない!」そんな時はイラスト相談・制作依頼


新規イラスト制作1カット3000円(税別)〜
大きい画像・ベクター形式は
1カット500円〜バラ売り可

商用利用ライセンス3000円(税別)〜

  • 「自分だけの
    イラストを作りたい」

    キャラクター・立ち絵アイコンサンプル

    snsで利用するキャラクターアイコン、自分だけの可愛いキャラクター・カットイラストなどご要望を詳しくお聞きし、あなただけのイラストを制作致します!

  • 「商用利用目的の
    イラストを作りたい」

    Tシャツ・トートバッグ・カップ、本とイラスト

    「Tシャツ・グッズにしたい」「トロフィーのデザイにしたい」「看板や販売するデザインに利用したい」など商用利用ライセンス3000円(税別)〜販売中!

  • 「フリー素材のベクター・
    高解像度画像がほしい」

    チコデザフリーイラストのイラストナンバーの位置

    フリーイラストのillust.NOをお教えください!png・jpg・ai・epsなどご希望の形式で1枚500円〜販売致します。※商用ライセンスも別途ご案内可能。

※ご依頼内容により価格・納期が異なります。
まずはご相談下さい!