-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎④
Webサイト・LPについて
LP（ランディングページ）とは？
検索結果や広告などを経由して訪問者が最初にアクセスするページ
LP（ランディングページ）の目的は、ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」です。LPはWeb広告のリンク先ページです。
特に「デザイン」を作ってから、どう「コーディング」するの？
とならないように、計画的にしっかりとデザインを考えていきましょう。
LPではストーリーをデザインすることが大切
LP（ランディングページ）は、上から下にWebページを見せていきます。
ポイントは、上から順番に「掴んでいく」 「伝えていく」 「魅せていく」です。
ワイヤーフレーム・デザインカンプとは？
Webページのレイアウトを決める設計図。
LP（ランディングページ）などのWebページを作成の手順としてまず
「たたき台」を作成していきましょう。
そのたたき台を「ワイヤーフレーム」と呼んだりします。
ちなみに印刷業界では、「デザインカンプ」と呼んだりもします。
まず、真似してみる。
どう「掴み」があって、次にその「説明」の伝え方、そしてどう「魅せて」アピールしているか？をしっかりと分析してみましょう。
LP（ランディングページ）等のWebページだけではなくチラシや雑誌媒体、テレビCMや配信の広告動画なども参考になるかもしれません
準備① 情報を整理する
前項で「掴み」「説明」「魅せる」を軽く説明しましたがその後に、
TELやメール等のお問合せや、カートシステムで購入なのか、イベントなら会場、直接対面での販売が必要なら実店舗などの最終的な「目的」が必要になります。
また、説明不足によるクレームなどが起こらないよう「対策」も考えておきましょう
準備② 目的を逆算する
準備③ 目的の誘導
広告バナーなどの入口
掴み（ここからＬＰ）
説明
魅せる
目的
2限目
学科 ECサイトデザイン基礎④
ワイヤーフレームについて
3限目
学科 ECサイトデザイン基礎④
レイアウトのポイントについて
レイアウトのコツ STEP①
掴み
「目的」に対して現在・過去・未来を明確に
レイアウトのコツ STEP②
説明
「相手にものを伝える。」を改めて考えてみましょう。
解っている相手なら言葉足らずでも伝わりますが、商業デザインとして文字と絵や写真の
デザインで、知らない人に「説明」をしなければいけません。
まずは、ビジネスの基本である５W１Hについて考え、整理してみましょう。
どこで何をどのように
レイアウトのコツ STEP③
魅せる
PRポイントです。 その商品・商材の「売り」はなんでしょうか？
個人的に3つぐらい欲しいです。
どんな方におススメしたいのか？ 自分自身はどう感じるのか？ 単に良いものなのか？
当然、商品・商材理解が必要ですし、様々な分析をして考えてみましょう。
自信・実績・メリット
レイアウトのコツ STEP④
目的
① TELやメール（お問合せ）
② カートシステムの利用
外部リンクなのか、自社カートで埋め込みなのか
③ SNSでのフォロワーや専用アプリのインストール
目的に合わせて、しっかりと案内（アテンド）を行いましょう。
ここのミスは、特にクレームに直結します。
④ イベント会場や実店舗へのご案内
後から変更は出来ない
文字やコンテンツのサイズ感を正確に
「対策」フォローアップを想定しておきましょう
権利の記載について
コピーライト。法律から見れば書いても意味はないですが無断利用への抑止力となるので記載しておきましょう。
4限目
学科 ECサイトデザイン基礎④
制作に向けての準備
5限目
学科 ECサイトデザイン基礎④
制作に向けての準備
本日のテーマ
Webサイト制作にあたり、まずは
『ワイヤーフレーム』
の制作のコツを学びましょう。
ワンポイントアドバイス
未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。
WEBサイト制作の流れ
◆ヒアリング、ワイヤーフレーム制作◆
↓↓↓
デザインラフ制作
↓↓↓
コーディング
ワンポイントアドバイス
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。
逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。
お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。
制作のポイント
・使用ソフトはPhotoshopです。
・まずは色を入れず、白黒で制作しましょう。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・メインイメージなどはブラウザの横幅いっぱいでも構いませんが、文章などのコンテンツ幅は960〜980px程度に収めると良いでしょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える
手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。
本日の課題
ワイヤーフレーム作成に向けての準備
白黒のワイヤーフレーム作成に向け、世の中のサイトを参考に情報収集しながらレイアウトを考え、手書きでスケッチ（ラフ）を作成しましょう。
次回の「ECサイトデザイン実習④」で実際にPCを使って作成します。
本日学んだこと
ワイヤーフレームについて
LPについて
ワイヤーフレームとデザインカンプの違い
感想
本日はLP作成に向けてワイヤーフレームのラフを書きました。
初めて勉強する内容だったので少し難しく感じました。また勉強するようになって広告などは意識が向くようになっていたのですが、LPに関してはこれがLPだという意識で見ることがこれまでなかったなと感じました。
先生によるとファーストビューは高さなど意識したらよいとのことでしたが、そのほかの構成は割と自由だということだったのですが、逆に自由すぎると難しいなとも感じました。
何気なく見ていたブラックフライデーのサイトなども意識してみることで構成がどのようになっているのかなど勉強していきたいです。