オンラインスクール「デイトラ」の「Webデザインコース」を学習しています。
運営の皆さまの熱意、受講者の皆さまのスキル習得への意欲が素晴らしく、日々勇気づけられています。
教材はボリュームたっぷりで、（難しいながらも）やりがいを感じます。
1年以内の「完走」を目指して取り組んでいます！
ウェブサイトデザインの基礎
【中級編】DAY01
バナー制作実践①
- いよいよWebサイトのデザイン作成に入ります。
- デザインの言語化は、今後のカリキュラムや実務において、とても重要！ 困った時は「初級編」に戻って復習すること。
中級編でできること
- Webサイトの種類を知る
- LPについて理解を深める
- LPをトレースする
- 初めてワイヤーフレームからLPを作成するという経験をする
- 作成したLPをメンターにレビューしてもらう
01. Webサイトの種類を知ろう！～概要編～
- Webサイトの種類の名称を理解しておかないと会話が成り立たない。しっかり把握しておくこと。
Webサイトの種類
代表的なもの（5つ）
- LP（Landing Page・ランディングページ）
- サービスサイト
- コーポレートサイト
- メディアサイト
- ECサイト
02. Webサイトの種類を知ろう！～LP編～
LPとは？
- Webサイトを見たユーザーを 目的のアクション に誘導するための Webページ
- 「目的」は、申し込みや問い合わせ、購入、登録、資料請求など、さまざま。
LPデザインの特徴①：縦長のデザインであること
- 情報を１ページに収めているため、縦に長いデザインになる
- 「目的のアクションを促すため」企業のサイトとは別で用意するもの
- 余計な情報は入れずに、しっかりと情報設計をしてからデザインする
LPデザインの特徴②：営業トークのような流れのあるデザインであること
- 縦に長い分、全体の流れが非常に重要
- LPを見る人の悩み、何を解決したいと思っているのか、何を欲しているのかを把握して、デザインに落とし込む
- 企業の都合だけでなく、「ユーザーにとってのメリット」と「その解決策（促したいアクション）」を書く
- 営業トークのような流れのあるデザインであることが理想
LPデザインの特徴③：目を引くデザインであること
- パッと見でわかりやすく、画像やイラスト、アクセントカラーを意識した目を引くデザイン
- FV（ファーストビュー）で、キャッチコピーを目立たせてユーザーの心を引きつける
- ボタンや、絶対に知って欲しい情報などを目立たせる
- デザインの４原則を意識して、ユーザーの心を掴むデザインを目指す
LPデザインの特徴④：外部へのリンクは最低限
- 出来るだけ他へのリンクは避け、ユーザーの意識を集中させる
- 最初のボタンは、促したいアクションのためのボタンとする
LPの特徴まとめ
LPの特徴
- LPとは、Webサイトを見たユーザーを目的のアクションに誘導するためのWebページ
- 縦長のデザインである
- 営業トークのような流れがある
- 目を引くデザインである
- 外部へのリンクは最低限
03. Webサイトの種類を知ろう！～コーポレートサイト編～
コーポレートサイトとは？
- 自社企業を紹介してユーザーから信用を得ることを目的としたWebサイト
- 自社企業の「名刺代わり」になるWebサイト
- 掲載内容は企業理念やビジョン、代表メッセージ、会社概要、求人情報、プレスリリースの発信など、さまざま。
- 企業にとってのビジネスチャンスを拡大する場所
コーポレートサイトデザインの特徴：企業ブランドを伝えられるデザイン
- ターゲットの範囲がとても広い
（直接利用する消費者だけでなく、投資家や求職者、取引先など様々なユーザーが訪れる）
- 企業の持つカラーや雰囲気、特徴を不足なく伝えるデザイン
コーポレートサイトの特徴まとめ
コーポレートサイトの特徴
- 投資家、求職者、などサービス利用者以外も対象にしたサイト構成
- 企業についての紹介が多く、名刺の役割を果たす構成になっている
- デザインは企業の特徴を捉えてそれを表現するようなものになっている
04. Webサイトの種類を知ろう！～メディアサイト編～
メディアサイトとは？
- ニュースやブログなどのコンテンツがメインのWebサイト
- 記事や動画などの一覧があり、そこからユーザーが自分から情報を調べることを目的とする
- メディアサイトを制作するとき、オウンドメディア（企業が所有している情報発信メディア）が多い
メディアサイトデザインの特徴：企業ブランドが伝わるブログ形式（オウンドメディアの場合）
- 自社のアピールをしつつファンを作るためのブログサイト
- 自社サービスの宣伝以外に、ユーザーの役に立つ情報を提供する「発信」をして「見込み顧客」を「顧客」にするのを目的とする
- 社サービスの認知を拡大させ、そこから集客をして売上向上の流れを作る
- 企業の持つカラーが伝わりやすい、ブランドをしっかりとアピールできるデザイン
メディアサイトの特徴まとめ
メディアサイトの特徴
- 企業の商品・サービスを利用する、もしくは利用する可能性のある顧客に向けた記事を発信
- 行動を起こしたい人向けのお役立ちコンテンツなどの記事が多数あるのが特徴
- 企業がいろいろな心理状態のユーザーに有益な情報を発信
05. Webサイトの種類を知ろう！～ECサイト編～
ECサイトとは？
- インターネット上で商品やサービスを販売しているサイトの総称
- 「自社ECサイト」と「モール型ECサイト」の２種類がある
- 実案件で扱う場合はこ「自社ECサイト」のデザインがメイン
- ECサイトを制作する上で気を付けるポイントや特徴は共通
ECサイトデザインの特徴：買い物をしやすい設計になっていること
- ユーザーが迷うことなく商品を買える導線設計になっていることが最重要
- 商品の特徴を活かしつつ、ユーザーの目線に立って思わず購入したくなるようなデザイン
- 自社ECサイトではトップページ、商品一覧ページ、カテゴリー別ページ、商品詳細ページ、ログインページ、マイページ…といったように非常に多くのページのデザインを要求される
ECサイトの特徴まとめ
ECサイトの特徴
- カテゴリー分けをして商品を探しやすくしている
- 購入までの導線が明瞭である
- どこに何があるかの配置が分かりやすい
06. 本日のまとめ
本日学習したこと
- Webサイトには目的に応じた種類の型がある
- 型によってデザインの特徴が異なる
- どのサイトでも「サイトに訪れるユーザー」を意識することが重要
- ターゲットや目的別にサイトを仕分けて「デザインの言語化」をしておくと役に立つ
- 様々なサイトをたくさん見てアイデアの引き出しを増やす
かなこ
