訓練日誌-2024/2/7（レスポンシブルWebデザインについて）

レスポンシブWEBデザイン（RWD）
viewportについて
Media Queriesについて
ポイント

レスポンシブWEBデザイン（RWD）

PC、タブレット、スマートフォンなど、デバイスの画面サイズよってデザインを変えること
ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを
用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

【メリット】
・1つのHTMLファイルで複数デバイスに対応できる。
・更新・修正やサイト制作の作業工数の軽減出来る。
・各デバイスのURL統一化SEO対策に効果的になる。

viewportについて

表示領域のこと
デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになる。
下記のMetaタグを入れると、デバイスの画面サイズに合わせた数値で表示されるようになります。
headの中にこのコードを必ず書く
<meta name=”viewport” content =”width=device-width,initia-scale=1.0,viewport-fit=cover”>
Googleのサージコードで文字のサイズなどが適しているか確認出来る。

Media Queriesについて

CSS スタイルに適用できるシンプルなフィルタのこと。
画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容
易に変更できる。

ポイント

pc版（1120px）とスマホ版（640px）は必須。タブレット版はあったらいいくらい
タッチデバイスを意識したボタン（リンク）
タッチデバイスではボタンの領域を広く取りましょう。
ポインターが無いので、リンク箇所のデザインルールを変えてみましょう。
迷子にさせない導線
画面の面積が少ないデバイスでは、解りやすい導線を組みましょう。
1クリックの動作で、1割のユーザーが離れると言われているので、重要なことは１ページに収める
ファーストビューで「最優先のコンテンツ」フッターで「各ページ」へ
ページの表示スピード対策
画像は重たいので表示に時間がかかるため、2倍のサイズの画像を用意し50%のサイズで指定する
jQueryやJavaScriptは重たいため、最小限に。またCSSで出来ることはCSSでやる。
imgとbackground-imageの違い
imgはGoogle検索にヒットする　※altで画像の名前をつけないと意味ない
background-imageはGoogleでヒットしない
そのため、意味のある画像はimgで、背景など意味のないものはbackground-imageで
誤ったプログラムも表示スピードの低下に繋がる。
使い易さの追求
WEBフォントの利用：無料で使える「源ノ角ゴシック」「源ノ明朝」が国内でも多く広まっているため使用しよう少し重たいがjQueryを使用しよう
Googleアナリティクスの利用：ページのアクセス数や表示スピード、滞在時間等のデータを分析出来る。
　　　　　　　　　　　　　　数字から解析しより良いコンテンツを作成しましょう。