レスポンシブWebデザインは、デザインを行う上でのルール/制限があり、レスポンシブWebデザインを使いこなすためにはノウハウが必要です。
Webサイトの目的に応じて、設計を行いましょう。
表示したいコンテンツを整理しましょう。
デバイスごとに表示/非表示を切り替えたいコンテンツがないか整理しましょう。
cssでhiddenにするか、サーバーサイドで出し分けるか、レスポンシブWebデザイン以外の実装を模索するかなどを検討しましょう。
設計時から、最適化したいデバイスの大きさを把握しておきましょう。
レスポンシブWebデザインは、ワンソース(1つのhtml)でマルチデバイス対応する手法です。当然ですが、最適化したいデバイスの大きさは把握しておきましょう。
例えば、iPhoneは縦幅1,136px横幅640px、iPadは縦幅2,048px横幅1,536px、MacBookProは縦幅1,800px横幅2,880pxです。既存サイトのアクセス解析データがあれば、ユーザーの閲覧デバイスの確認をし、ターゲットデバイスを決定しましょう。
適切なブレークポイントを設置しましょう。
ターゲットデバイス全てで見やすくなるよう、適切なブレークポイント(デザインの切り替えポイント)を設置しましょう。
cherry-pickのレスポンシブWebデザインサイトを構築する場合、320px, 468px, 568px, 768px, 769px?を基本としており、768px未満のAndroidもあるため、768px以下はスマホ向けのスタイルを反映しています。(タブレット対応要望が少ない場合は、これで十分です)。
設計に不安があれば、お問い合わせください。
cherry-pickでは、レスポンシブWebデザインサイトを安心して実現するための設計コンサルティングを提供しています。例えば、お客様がデザインを担当し、弊社でhtml/css/JavaScriptコーディングやCMS開発を担当する場合はデザイン段階からプロジェクトに参加しノウハウ提供させていただきます。
レスポンシブWEBデザインを実現するしくみって...
なぜレスポンシブWebデザインを選ぶのか、選ばないときの判断基準は？
まずはお気軽にご相談ください。
レスポンシブWebデザインでマルチデバイス対応したWebサイト制作、CMS開発についてお悩みであればまずはお問い合わせください。
お客様のビジネスゴールに応じてご提案させていただきます。
レスポンシブWEBデザインの導入を迷っていらっしゃるならお電話でのアドバイスだけでもお気軽にご相談ください。
