WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

レスポンシブデザイン制作の基礎。高単価WEBデザイナーを目指すなら必須スキル

レスポンシブデザインは必須スキル

WEBデザイナーとして高額の給料を目指すのであればレスポンシブデザインは必須のコーディング技術です。仕事としての実績があれば高単価のフリーランス案件も狙えます。

WEBデザイナーの給料と技術力はほぼ比例の関係です。一定水準を超えると一気に高所得になります。その境界線が現在はレスポンシブデザインの経験だと感じています。レスポンシブのコーディングをできるようになるはもちろんですが、多くのデバイスに最適化したデザインを作ることができるのかがWEBデザイナーとっては重要です。

実務レベルでデザインカンプを作れるWEBデザイナーは多くありません。

レスポンシブ対応必須の3つのデバイス

レスポンシブデザインの対応デバイス

PC・タブレット・スマートフォンの3つです。対応するデバイスが多いほど開発工数との相談になりますが、この3つはどのレスポンシブデザインの案件でも必ず要件に入っています。よって初めてレスポンシブデザインのコーティングを行うWEBデザイナーはこの3つのデバイスに対応できるように勉強しましょう。

Photoshopでデザインカンプを起こす

Photoshopでレスポンシブデザインを作る

レスポンシブデザインは1つのHTMLを複数のCSSですべてのデバイスに最適化する技術です。よってPhotoshopでデザインする段階でどのようにHTMLを書き、CSSでレイアウトを整えるを考える必要があります。

これを業務レベルで行うのはかなりの経験とHTML・CSSの深い理解が必要です。PhotoshopでデザインするWEBデザイナーがレスポンシブコーディングができないとデザインカンプを作ることすらできません。

スマホのみデザインを起こし、コーティングしてからPCのデザインを最適化する手法もありますが、PC・タブレット・スマホの3デザインをデザインの段階からバッチリと設計できるWEBデザイナーはかなりハイレベルです。

レスポンシブデザインの基本設定

レスポンシブデザインをコーディングする場合、HTMLをデバイスごとに最適化し、横幅に合わせて読み込むCSSを分ける必要があります。黎明期は色々ななコードが乱立しましたが、現在はある程度ルールが出来上がってきているので、レスポンシブデザインを行うためのテンプレートを1つ作っておきましょう。

HTMLでviewportを指定する

Dreamweaverでviewportを挿入すると自動で挿入される設定です。viewportはウェブページを表示する指定するメタタグです。content=”width=device-width”を指定することでiPadやiPhoneなどデバイスの横幅に合わせて表示させることができるようになります。

initial-scaleは文字の通り表示倍率を設定します。スマホやタブレットではピンチによって表示領域を拡大することができますので、読み込んだ時点でどの倍率で表示するかを指定します。

CSSでメディアクエリを使用する

上から順番にPCレイアウト・タブレットレイアウト・スマホレイアウトと表示領域の大きいものから順番にCSSを書いていくのが一般的です。

PCのレイアウトのCSSをタブレットやスマホ用のCSSで上書きしていく

レスポンシブデザインのCSSは、慣れないうちはPCのレイアウトから作っていくことをおすすめします。PCのレイアウトの方が3カラムなど複雑になりやすく、横幅が狭いスマホほどシンプルになるからです。

メディアクエリを使用しても、最初に書かれたCSSは引き継がれますのでレイアウトが崩れるプロパティは適宜打ち消していくことになります。たとえばPCで2カラムレイアウトでfloatを使用した場合、スマホでの表示が崩れてしまうため、同じHTMLのクラスにfloat:noneを書き込んで、floatを打ち消します。

メディアクエリでCSSを打ち消していく

width:inhertなど、PCやスマホのみでは使用しないCSSのプロパティを使用しますので、いくつかレスポンシブコーティングをして慣れることが必要です。

PCでタブレットやスマホのレイアウトを確認する方法

Google Chromeのデバイス切り替えツールを使用する

Google Chromeの検証ツールを使用します。ブラウザのどこでもいいので右クリックを選択して【検証】を選択します。

検証ツールのタスクバーの左にデバイス選択アイコンがありますので、こちらを選択します。するとレスポンシブ・iPad・各種スマホでの横幅を指定することができます。念のため一度リロードをしましょう。

スマホでのレイアウトを確認する

この場面でメディアクエリによってCSSが切り替わりレイアウトが最適化されているかの確認をすることができます。最終的にはiPhoneやiPadで実機検証が必用ですが、まずはGoogle Chromeでレイアウト崩れがないレベルまで、CSSをコーディングしていきます

レスポンシブデザインはハイレベルなコーディング技術の証明

フリーランスのWEBデザイナーでも高単価案件の必須事項にあげられるほど需要があるレスポンシブデザイン。HTMLとCSSの基礎ができてアルバイト採用されたら真っ先に勉強するコーディング技術です。

独学でもレスポンシブデザインを経験すると、コーディング技術レベルアップによりスマホサイトの構築は容易になりますし、PhotoshopでのWEBサイトデザインも、HTMLとCSSを考慮したハイレベルなものに進化します。

レスポンシブデザインの設計とコーディングができると派遣社員・正社員の採用率が跳ね上がります。WEBデザイナーの方は実務ではなくてもよいので挑戦する価値は十分にあります。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST