デイトラWebデザインコース 中級編 の学び ～その2～

ウェブサイトデザインの基礎

【中級編】DAY02
Webサイトの基礎について理解しよう①

【目的】

• サイトのデザインを考える際に重要な、基礎知識やパーツの役割、構成を学ぶこと

01. 画面幅とレイアウトの種類

• 「レイアウト」とは、何をどこに配置するか、どのように配置するかという配置方法のこと
• それぞれの特徴、目的や用途に応じた使い分けを学ぶ

① ソリッドレイアウト（固定レイアウト）

• 全てのコンテンツのサイズを固定
• デバイスの画面幅によって横スクロールが発生し、ユーザーに使いづらさを感じさせる
• あまり一般的では無くなってきている

タスク	完了
参考サイトの確認	2025/02/19

② リキッドレイアウト

• コンテンツを画面幅に合わせて表示
• 「幅 〇％」 というように可変サイズで指定
• FVの画像などが、極端に大きい画面幅でも縦横比を保ったまま大きくなるので、画面に収まりきらなくなる場合がある

タスク	完了
参考サイトの確認	2025/02/19

③ フレキシブルレイアウト

• 「ソリッドレイアウト」と「リキッドレイアウト」のいいとこ取り
• PCサイズに「横幅の上限値」を設定
• 基本的には「フレキシブルレイアウト」で デザインする

タスク	完了
参考サイトの確認	2025/02/19

02. グリッドレイアウトとカラム

グリッドレイアウト

• 要素を格子状に要素を組み合わせて構成するレイアウト
• 情報量が多くても内容がわかりやすい、理解しやすい

タスク	完了
参考サイトの確認	2025/02/19

カラム

• 「カラム」とは「縦の列」のこと
• 「シングルカラム」＝ 1列で構成
• 「マルチカラム」＝ ２列以上で構成

シングルカラム

• サイドバーが無く、メインコンテンツだけを１列で表示
• 内容に集中してもらいやすい
• 商品やサービスを紹介するサイトやLPに向いている
• メディアサイトやECサイトには向かない（縦に長くなりすぎる）

マルチカラム

• メインコンテンツの他に、サイドバーを表示
• ページ内の情報量を増やし、回遊率を上げる効果がある
• メディアサイトやECサイトでよく使われる
• メインコンテンツに集中しづらい
• スマホサイズでは見づらくなってしまうので、デバイスサイズに合わせたデザインが必要

03. レイアウトと視線誘導

Webサイトの視線誘導について

• サイトの種類に関わらず、視線誘導は重要な要素
• 「Z型」「F型」がよく利用される
• 重要なボタンは、視線が止まる位置を意識して配置する
• グリッドレイアウトでは、「Z型」「F型」の配置を作りづらいので、大きさを変えたり、要素の色をまとめたりして視線を誘導する

04. デザイン制作におけるコンテンツ幅

• Webサイトは、どんなデバイスでも崩れなく表示されることが理想
• サイトの目的やターゲットによっては、スマホサイズを中心にデザインすることも多い

ディスプレイ幅とコンテンツ幅

• 「ディスプレイ幅」とは、ブラウザで表示される画面のサイズのこと
• 「コンテンツ幅」とは、メインコンテンツを表示している領域の幅

デザイン作成時のコンテンツ幅

• デザイン制作時には、基本的に「PC版」と「SP版」の２パターンか、「タブレット版」を加えた３パターンを作成する
• コンテンツ幅のレイアウトは「フレキシブルレイアウト（PC版で横幅の最大値を設定）」で作成する
• 背景やあしらいはコンテンツ幅からはみ出し、ディスプレイ幅に合わせて設定することも多い
• デバイスごとのコンテンツ幅の目安

デスクトップ	950～1100px
タブレット	700～800px
スマホ	335～350px

• サイトの用途をしっかり把握して、特徴を踏まえてデザインすること
• どのデバイスサイズにも対応しているWebサイトは、クローラによる情報収集において高評価を得やすい（Google公式推奨）
• サイトが公開され、運用されていく過程も意識してデザインすること