学んでおきたい『レスポンシブデザイン』のこと

WEBデザイナーが技術的に必要なものとして、

adobeのソフト「Illustrator」と「Photoshop」を使えるようになることと、

「HTML」と「CSS」の基礎を身に着けることを挙げましたが、

もうひとつ追加したいのが、「レスポンシブデザイン」のスキルです。

Webサイトを利用する機器がPCかスマホかによってディスプレイの大きさが変わるため、

どんな画面サイズでもわかりやすい画面表示が必要ですよね。

できればコストをかけPCとスマホを別々のデザインで製作するのが理想的なのですが、

製作者としてはWebサイト更新時のコストが2倍になり、

運用を継続するのは難しくなりがちなので、レスポンシブデザインのスキルがあるかないかで大きな差があるのです。

【スマホ表示の対応方法とその違い、メリット・デメリット】

スマホ表示に対応する主な方法は

「レスポンシブWebデザインでの対応」と「スマホ専用ベージの制作」の2種類あります。

作成するHTMLファイル数やページのURLアドレスの数の比較

レスポンシブWebデザインでの対応だと、

PC表示用とスマホ表示用を兼ねることができますが、

スマホ専用ベージの製作ではPC表示用とスマホ表示用を別々に制作しなくてはなりません。

メリットとデメリット

レスポンシブWebデザインでの対応だと、Google検索により優位になり(SEO対策)、

ページ作成や更新の手間が減りますが、制御するCSSが複雑になり、デザインレイアウトの制約が若干あります。

スマホ専用ベージを製作する場合は、比較的自由なデザインレイアウトが可能ですが、レスポンシブに比べ作業量は倍になります。

レスポンシブWebデザインの作り方は難しい印象がありますが、
やり方自体はとてもシンプルで、多くの場合、次の2ステップで実現可能です。

①HTMLファイルなどのヘッダー部分にmeta viewportタグを追加する

これで、利用者がアクセス時に使用した機器について、画面サイズなどの情報を入手したり、

この情報にある画面の横サイズから、PC向けかスマホ向けかを判断し、

具体的な指示(別ファイルのCSSなど)に従ってWebサイトの表示がPCとスマホで切り替えられます。

②CSSファイルで、PC用とスマホ用の表示方法の違いを記述する

適用されるCSSの指示内容を画面サイズによって切り替えできることができる「メディアクエリ」を使うと、

PCとスマホで異なる表示やレイアウトができるようになります。

※実際の作業では表示画面を見ながら検証するため、細かな調整が必要です。

また、タブレット端末や高解像度に対応するRetinaディスプレイなどにも、同様の対応が必要です。

検索すれば、レスポンシブWebデザイン対応するテンプレートの紹介ページがありますので、

そこを参考にして、効率的に魅力のあるWebサイトを制作してください。

ちなみに、この作業はスキルと慣れが必要なので、

それはちょっと…という方にはレスポンシブWebデザインに対応したWordPressの仕組みを活用する手もあります。

WordPressのテンプレート(テーマ)でレスポンシブWebデザイン対応のものを選択するだけでなので、誰でも比較的簡単に実現できると思います。

アプリケーションや言語は日々バージョンアップしていく領域ですので、

常に新しい情報にアップデートすべく学んでいる姿勢をアピールする意味でも、このスキルは会得しておいた方がいいと思い、紹介させていただきました。

最新情報をCheck!
>Webサイト制作の事なら何でもおまかせください!

Webサイト制作の事なら何でもおまかせください!

Webサイト制作をする楽しさや、お客様に喜ばれる嬉しさを知り、この仕事に専念したいと思いフリーランスになりました。些細なことでも、お気軽にお問い合わせください。ご相談だけでも可能です。

CTR IMG