2025年1月より、オンラインスクール「デイトラ」の「Webデザインコース」を学習しています。
運営の皆さまの熱意、受講者の皆さまのスキル習得への意欲が素晴らしく、日々勇気づけられています。
教材はボリュームたっぷりで、（難しいながらも）やりがいを感じます。
1年以内の「完走」を目指して取り組んでいます！
ウェブサイトデザインの基礎
【中級編】DAY04
WEBサイトの基礎について理解しよう③
【目的】
- サイトに訪れたユーザーにとっての使いやすさにフォーカスしてWebサイトの基礎知識を確認すること
01. Webアクセシビリティ
- サイト訪問者にとっての使いやすさ
- ターゲットとする年齢層に合わせてデザインすること
色のコントラスト
- 背景色と文字色のコントラスト差で、読みやすさが決まる
- コントラストが強すぎると、目が疲れやすく、読みづらくなる
- 慣れるまではプラグインを使って計測する
（Able：2つのオブジェクトを選択し、コントラスト値などを評価する）
| タスク | 完了 |
|---|
| 動画視聴（2:09） | 2025/02/20 |
| Figmaプラグイン「Able」 | 2025/02/20 |
文字の読みやすさ
| PC |
|---|
| セクション見出し | 40～50px |
| 見出し | 24～32px |
| テキスト | 14～18px |
| スマホ |
|---|
| セクション見出し | 28～32px |
| 見出し | 20～24px |
| テキスト | 14～18px |
- 読みやすい行間、文字間
- 特徴的なフォントは、本文には使用しないこと
- 本文はゴシック体が読みやすい
- 英字の場合は、読み間違いを生じさせないフォントを選ぶ
きちんと読んで欲しい箇所には、読みやすいフォントを使う
| タスク | 完了 |
|---|
| 動画視聴（4:20） | 2025/02/20 |
使える機能を認知させる
- Webデザインにおいては、「デザインによって Webサイトの機能を認知させる」ことが重要
- 「ボタン」は、「ボタンである」と判別できるデザインにする
- 「下線」がついていると「リンク」と誤認する
- アクション内容が異なるときは、デザインに差をつける
| タスク | 完了 |
|---|
| 動画視聴（1:32） | 2025/02/20 |
02. PCデザインとSPデザイン
- 「PCデザイン」と「SPデザイン」のポイントについて確認する
PCデザインの特徴
- スマホデザインに比べて横幅がある
- マウスで操作するため、ホバーアクションが可能
スマホデザインの特徴
- 横幅が無く画面が小さい
- パソコンに比べて、タッチ領域を大きくしなければいけない
- マウスホバーができない
- 縦長のサイトになってしまうので、アコーディオンなどをうまく使ってスクロール量を抑える工夫が必要
SPファースト
- スマホの普及により、老若男女、誰もがスマホでサイトを見るようになった
- スマホからの閲覧率が、PCからの閲覧率を上回っている
- スマホでもストレスなく利用できるデザインにする必要がある
- 「SPデザイン」から制作していく
| タスク | 完了 |
|---|
| 動画視聴（3:03） | 2025/02/21 |
モバイルファースト
- スマートフォンやタブレットで閲覧する際の使いやすさを重視すること
- モバイルファーストがGoogleの検索結果にまで影響を与えるようになってきている
- 最近では、モバイル版のデザインをそのまま埋め込むようなデザインがトレンドになっている
| タスク | 完了 |
|---|
| 参考サイトの確認 | 2025/02/21 |
| ギャラリーサイトの確認 | 2025/02/21 |
Webサイトに訪問するユーザー（ターゲット）を軸に考えよう！
- ユーザーの属性・ニーズ・状況に合わせて、最適化されたWebサイトをデザインする事が重要
- すべてのサイトをモバイル中心に考えるのではなく、訪問するユーザーがPCメインと想定できるのであれば、PC版を優先してデザインする
- モバイルファーストがGoogleの検索結果にまで影響を与えるようになってきている
- 最近では、モバイル版のデザインをそのまま埋め込むようなデザインがトレンドになっている
03. ランディングページの基本
- ランディングページ（LP）の基本を押さえつつ、制作のステップを確認する
LPとは？
- 検索や広告などを経由してユーザーがアクセスする縦に長いページ
- 主な流入経路
a. 検索エンジン
b. リスティング広告
c. SNS
d. その他（メルマガ、紙媒体など）
LPの特徴
- 縦長のレイアウト
- LPのゴール＝コンバージョン（購入、登録、お問い合わせなど）
- 他のページへのリンクは極力減らす
→ゴールに向けて、基本的に1つのアクションに特化している
- セールストークを1枚のページに再現したようなイメージ
LPのメリット
- ページ遷移が無いので離脱が少ない＝コンバージョン率が高い
- 1ページですべての情報を網羅している
- 企業側の意図通りに魅力を訴求してコンバージョンに結びつけることができる
- 流入経路ごとに訴求内容を最適化できる
LPのポイント
- スマホ対応は必須！
→最近はPCよりスマホデザインを優先することも増えている
- 一度公開したら分析して改善していくことも大事
→LPを改善していく施策のことをLPO（Landing Page Optimizaiton=LP最適化）という
LP作成のステップ
- 目的とターゲットを明確にする
・訪問者にどんなアクションを起こしてほしいのか？
・ターゲットは誰か？
・ペルソナは誰か？
- 全体のワイヤーを作成する
・ユーザーがコンバージョンしやすいようなストーリー性のある構成を考える
- デザイン作成
１．魅力的なファーストビュー（FV）を作成する
⇒ ユーザーはFVを見て、その後スクロールするか判断する
２. 共感セクションで心を掴む
⇒ ユーザーの悩みや困りごとに共感することで「自分ごと化」してもらう
３. ユーザー視点での特徴・ベネフィット
⇒ なぜ、そのユーザーがアクションするべきなのかを明確にする
４. ユーザーの声・FAQ
⇒ 具体的な事例や良くある質問に答えることで安心感を得る
| タスク | 完了 |
|---|
| 動画視聴（17:44） | 2025/02/21 |
動画内に登場する用語集
リスティング広告
ユーザーが検索エンジンにて検索したキーワードに連動して配信される広告
CTA（コールトゥアクション）
LPの目的である行動を実際に促す箇所
LP上に複数個所配置、特に「ファーストビュー」へのCTAの配置はマスト。
LP構成の例
かなこ
