×閉じる

レスポンシブWebデザインってどんなもの?

Pocket

PC

 

こんにちは、支援員の岩崎です。

 

みなさん、レスポンシブWebデザインって言葉、ご存知ですか?

 

ちなみに私はルーツに入るまで知りませんでした!笑

 

Web制作におけるデザインの手法の1つなのですが、これがとてもすごい!

 

今回の記事では、レスポンシブWebデザインについて、そもそもどんなものなのかというお話や、メリットとデメリットなどについてのお話を書かせていただきたいと思います!

 

 

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

 

そもそも、レスポンシブWebデザインって何なのか、Google先生に聞いてみました。

 

それによると…

 

「ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)レンダリングを変えることができます」

 

とのこと。

 

つまりどういうことかというと、1つのWebページを、昨今流通しているいろいろな種類の端末(パソコン、タブレット、スマートフォンなど)に合わせて最適化させて表示させることができるのが、このレスポンシブWebデザインなのです。

 

言われてみれば、昔は同じホームページでもパソコン向けのページとモバイル向けのページが別々になっているのが普通でしたよね?

 

PCサイトビューアという機能が搭載された携帯電話でパソコン向けのページを見たらすごく見づらい…なんてこともありました。

 

それが、最近は同じページで、レイアウトが画面の大きさに合わせて変わるようなものが主流になってきています。

 

画面の大きさが変わることによってレイアウトが崩れたり、表示エラーが発生したりといったことが無くなるわけです。

 

昔と比べたらとても画期的!!

 

さて、そんな画期的なWebデザインの方法も、もちろん良いことばかりではありません。

 

ここからはメリットとデメリットについて書いていきたいと思います。

 

 

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

 

まずはメリットのお話から。

 

先ほども書いた通り、レスポンシブWebデザインのメリットとしては、1つのWebページをいろいろな種類の端末に合わせて最適化して表示できる点が挙げられます。

 

これは裏を返せば、Webページを制作する際に各端末ごとにページを作成するのではなく、全て同一のファイルを利用して作成できるため、管理が非常に簡単になり、端末ごとの表示エラーを減らせるということです。

 

見る側からしてもレイアウトが崩れず、作る側としても管理がとても楽になるわけですね!

 

 

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

 

レスポンシブWebデザインのデメリットの多くは、スマートフォンでページを表示する際に起こります。

 

パソコン用のページの情報をスマートフォンで読み込む場合、パソコンよりもスペックが劣るスマートフォンではデータの読み込みなどに相応ほ負荷がかかり、結果として読み込みに時間がかかってしまいます。

 

「読み込み遅っ…もういいや閉じよう…」なんて風に、ページを見る前に閉じてしまった経験がある人も多いのではないでしょうか?

 

こんな風に、ユーザーが待ちきれなくなることもあるため、読み込み時間の問題はかなり重要です。

 

また、ページ内のテキストや画像の量が多いと、読み込みに時間がかかる上にスマートフォンなどで上手く表示できなくなるなどの問題も発生します。

 

これらを解決するために、レスポンシブサイトはシンプルなデザインにすることが重要です。

 

余談ですが、レスポンシブサイトの制作には普通のサイトの制作に比べて工数がかかる場合が多いため、シンプルなデザインの方が作る側としても楽だったり…

 

シンプルなデザインほどセンスが要求されるので、そういう意味では大変なんですけどね!笑

 

 

終わりに

 

ここまでレスポンシブWebデザインについてまとめさせていただいたわけですが…

 

ルーツではレスポンシブの学習も可能です!

 

IMG_0783
(写真はルーツで扱っているテキスト)

 

興味はあるけど全くの未経験…なんて人でも、別の記事で紹介させていただいたHTMLとCSSの基礎テキストから入って、段階的にステップアップしながら学習していただけます!

 

ホームページの制作などに興味のある方は、ぜひお問い合わせください!

 

 

FacebookいいねとLINE@の登録もしてね!

就労移行支援事業所ルーツにはFacebookページがあります。
イベントや情報、普段の様子などを公開していますので、
もしあなたがオフィスに来ようと思ってくださったのなら、
まずご覧になって雰囲気、詳細を知ってみてくださいね。

 

ぜひ、いいね!も宜しくお願いします。

 

>>>Facebookページはこちら<<<

 

連絡先、場所などはこちらまで!!
↓↓↓

 

お問い合わせroots-06

 

新宿・四ツ谷の障がい者の就職・社会復帰支援の場所
就労移行支援事業所ルーツ
東京都新宿区三栄町29-6 Fビル 5階
最寄り駅︰東京メトロ丸ノ内線 四ツ谷三丁目駅/都営新宿線 曙橋駅
ルーツの公式LINEからもお問い合わせできます!
友だち追加