WEBPocketTweetレスポンシブデザインを一言で説明するとPC、タブレット、スマホでページを表示した時に画面サイズに合わせてレイアウトが変形するデザインです。Googleも推奨するレスポンシブデザインですが企業サイトやWordPressのテーマでも採用され、注目を浴びています。今日は通常のWEBサイトやブログのレイアウトを変える時に役立つレスポンシブデザインの基本構造を分かりやすくご紹介!スポンサードリンクレスポンシブデザインとは?元々PCの大画面用に最適化されているWebサイトをユーザーがスマホやタブレットで閲覧した場合、視認性や操作性が悪くなります。これを解決すべく提唱されたデザインがレスポンシブデザイン。技術的な面ではPC、タブレット、スマホ、アンドロイドの画面サイズに合わせて、1つのファイルで表示の最適化を行います。通常のWEBサイトとの違いって?大きな違いはファイルの数です。通常のWEBサイトはPCとスマホでファイルを区別します。/sp/top.htmlとなります。PCとスマホのtop.htmlはそれぞれルート直下とsp下に設置され、別階層になります。デバイスによって表示を切り分けるから。外注でホームページの制作を依頼する場合、スマートフォン最適化の項目で別途費用がかかるのは、PCとは別にスマホ用ファイルを作成する工程が発生するからです。ブレークポイントでCSSを切り分けるレスポンシブデザインで必ず必要なブレークポイント。端末の画面サイズによってCSSを切り分けるポイントをブレークポイントと呼びます。一般的なブレークポイントは480pxと768pxを境界とし、3種類の表示に切り分けて考えます。768px〜この3点が僕がよく使用するブレークポイント。CSSではこのような記述をします。}レスポンシブデザインではこの3パターンの表示レイアウトを事前に決めなければなりません。ここでは3つのブレークポイントを設定しました。ブレークポイントにはこれが正解という指針がないため、設計者の都合に合わせていくつでも設定可能です。画像は使わず極力CSSで対応1つのファイルでスマホ/タブレット/PCの表示をまかなう為、ファイル容量が大きくなり、スマホユーザーでは表示の遅延が発生しがちです。アイコンフォント(CSSでアイコンを表示する技術)やCSSスプライト(複数の画像を一つの画像にまとめる技術)の導入で、ファイル容量を軽減し、ユーザーにストレスを与えない工夫が必要です。レスポンシブデザインのメリットとデメリットメリットレスポンシブデザインの最大のメリットはメンテナンスのしやすさです。作成するファイルが1つなので、作業工程が大幅に軽減できます。デザイン面ではスマホ〜タブレット〜PCまで一貫したデザインを簡単に作成できます。デメリットデメリットには、設計の難しさが挙げられます。ブレークポイント、デバイス毎のレイアウトはコーディングを始める前に決定しなければならないので、設計の段階で多くの時間を費やします。ソース上の問題で、デバイスによって表示や非表示を切り分ける条件分岐の記述が多くなります。何も考えないでコーディングを始めると、根本的な仕様変更が発生した時、最初からコーディングをやり直すはめになるのでご注意を。レスポンシブデザインでは構造上、レイアウトの自由度が制限されます。雑誌風な自由なレイアウト、子供向けのイラストを多用したサイトは作成しずらいです。EVERNOTEのオフィシャルサイトで使用されている、水戸黄門型と呼ばれるデザインが多いのもレスポンシブデザインの特徴です。Web業界ではこのようにヘッダ画像の下に3つのブロックが横並びになるレイアウトを水戸黄門型と呼んでいます。水戸黄門レイアウト:EVERNOTEまとめいかがでしたか。レスポンシブデザインは最初の設計が一番重要です。構造を理解できれば、コーディングは比較的簡単です。制作会社にレスポンシブデザインを依頼しようとしているあなた。以下の2点に注意しましょう。tomo09648908プロフィールzou本業は企業のPRデザイナー。Webサイト、動画、屋外広告を含めたプロモーションの企画立案から体験設計、ビジュアル開発などの実制作まで手掛ける。個人では主に個人事業主や中小企業向けにプロモーションに関わる制作をワンストップで行っています人気記事おしゃれな名刺デザイン35選。