2018年4月18日スマートフォンの普及をきっかけに、インターネットはパソコンだけでなく様々な情報端末によって利用されるようになりました。その結果、利用する端末によってはホームページが「上手く表示されない」「見づらい」「使いづらい」といったことが頻繁に起こっています。そこで注目されているのが「レスポンシブデザイン」です。レスポンシブデザインでは、あらゆる端末画面の幅に応じて最適なレイアウトにデザインを変更することができ、ユーザーフレンドリーなWebページを構築することができます。検索結果のランキング要素に加えました。要は、スマホ対応していないホームページは検索エンジンから見つけにくくなったということです。このアルゴリズムの仕様変更がなぜ行われたのかというと、それは世界中の人々がスマホを利用して検索を行うようになったからです。基本的にパソコンに最適化されているWebページはスマホでは見づらいですよね。そこで、Googleは3つの方法で端末に応じて最適なデザインにすることを勧めています。1.レスポンシブデザイン画面の横幅を縮小すると、レイアウトも自動的に最適化させる方法です。横幅に合わせて表示が変化するため、パソコンでもスマホでもタブレットでも見やすいレイアウトとなります。HTMLソースの変更が伴わないため、制作コストを抑えつつスマホ対応を実現できます。2.同URLでの端末に応じたソースの切り替えjavascriptなどを利用してパソコンやスマホなどで出力する情報を切り替える方法です。端末情報を取得してそれぞれに合ったページ情報を出力するので、任意の表示をさせることができるものの、制作の手間はレスポンシブデザインの倍以上かかることもあります。3.別URLでの端末に応じたソースの切り替えパソコンサイトとスマホサイトを分けて制作して、端末に応じて別URLに遷移させる方法です。2.と3.はパソコン表示ではファイルの容量が重くなりすぎる、スマホに最適化するのが困難な場合に良く実行されます。この中ではレスポンシブデザインが最も推奨されています。その理由は以下の6つです。Developers簡単に言ってしまうと、様々な端末のデザイン最適化において、レスポンシブデザインが最も楽で効果的なので、「レスポンシブデザインにしましょう。レスポンシブデザインは万能ではない実はレスポンシブデザインには大きな欠点があります。レスポンシブデザインは端末に応じて可変的にレイアウトが最適化されますが、スマホでもパソコンのページと同じ情報量を処理することになるため、ページの読み込み時間が長くなる傾向にあるのです。ページの読み込み時間が長くなるのはWebサイトにとっては致命的で、ユーザビリティ(利便性)を大きく損なうことに繋がります。1ページあたりの情報量が多すぎるサイトでは、レスポンシブデザイン以外の2つの方法を活用して端末毎のデザイン最適化が行われることも良くあります。(レスポンシブデザインかつ端末に応じて表示を切り替えるハイブリット型を見かけることが多いです。)パソコンならではのWeb表現といったものもあるので、柔軟に対応していきましょう。今ではインターネットを利用するのは、パソコン・スマホ・タブレットが主要な端末ですが、デジタル産業がIoTに注力していく中で今後は主要端末以外のネット端末が普及していきます。身近になりつつある例でいくと、テレビ・時計でもインターネットを楽しむ生活がきており、冷蔵庫・エアコン・洗濯機といった家電をネットに繋いで管理するようにもなってきています。いった状況を踏まえて運営の効率を考えると、やはり画面の幅に応じてデザインを最適化していくのは非常に有効な手段であると考えられますが、将来的には全く別のものに変わっていくでしょう。Webデザインを行っていく際には、様々な端末に対応させることはもちろん、少し先を見据えたデザインを考えていく必要がありますね。Webデザイナーぎしたかフリーランス(歴3年)|フロントエンジニア・Webデザイナー|仕事:Web制作|2019年の目標→エンジニア転向|Webサイトを作ったり記事を書いています。今も紙の本が好きです。