-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎④
Webサイト・LPについて
2限目
学科 ECサイトデザイン基礎④
ワイヤーフレームについて
3限目
学科 ECサイトデザイン基礎④
レイアウトのポイントについて
4限目
学科 ECサイトデザイン基礎④
制作に向けての準備
5限目
学科 ECサイトデザイン基礎④
制作に向けての準備
Webページの作成①
まずはLP（ランディングページ）を作成。
1ページのWebページでストーリーを考えつつHTMLとCSSの仕組みと文法を理解しつつ目的をしっかりと意識しつつ様々な要件定義を整理しながらデザインしていく事。
LP（ランディングページ）とは？
Webページで営業をする事
バナーでデザインを理解し、HTML・CSSを学んだので、まずLPを作ってみる事
ランディングページ（Landing Page）とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのこと。
訪問者がホームページに着地する（land）イメージからこの名前がついた。
略してLPとも呼ばれる。
LP（ランディングページ）の目的は、ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」。
LPはWeb広告のリンク先ページ。
前にご説明したWeb広告と連動させて運用するものですので、バナーはこのLPなどの「誘導先のページ」をしっかりと意識をして作成する事。
また、HTMLの文法、CSSで表現できることを意識してデザイン。
特に「デザイン」を作ってから、どう「コーディング」するの？とならないように、計画的にしっかりとデザインを考えていくこと。
ストーリーをデザインする
ユーザー（お客さま）の行動や特徴、年齢や性別、地域、都道府県、様々な条件に合わせてストーリーを考えていく必要がある。
まずは、最も基本的なページ構成のLP（ランディングページ）の作成。
LP（ランディングページ）は、上から下にWebページを見せていく。
ポイントは、上から順番に「掴んでいく」 「伝えていく」 「魅せていく」。
①「掴み」掴んでいく
まずはお客さまを掴んでいく「掴み」。
キラースペースとも呼ばれる部分。
②「説明」伝えていく
前の①で掴んだお客さまに、詳しく説明をしてくこと。
ビジネスの基本の５W１H、 When（いつ）Where（どこで）Who（だれが）What（何を）Why（なぜ）How（どのように）を意識。
③「魅せる」魅せていく
②の５W1Hの説明が出来たら、売り込みをしてアピール。
個人的に最低3つぐらいのアピール。
誘導先のページLP（ランディングページ）
LP（ランディングページ）や、商品ページの特定のページに誘導をして、そのページより、「会員登録」や「カートからの購入」、「メール」や「お電話」からの顧客となるように案内をしたりをするページへ、しっかりとご案内。
LP（ランディングページ）について
ランディングページ（Landing Page）とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのこと。訪問者がホームページに着地する（land）イメージからこの名前がついた。
略してLPとも呼ばれる。
LP（ランディングページ）の目的は、ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」。
LPはWeb広告のリンク先ページ。
ここまでご説明したWeb広告と連動させて運用するものですので、バナーはこのLPなどの「誘導先のページ」をしっかりと意識をして作成すること。
きしょうてんげつを意識
結論が一番上だとよい
ワイヤーフレーム・デザインカンプとは？
LP（ランディングページ）などのWebページを作成の手順としてまず「たたき台」を作成。
そのたたき台を「ワイヤーフレーム」と呼んだりする。
ちなみに印刷業界では、「デザインカンプ」と呼んだりする。
ワイヤーフレームとは？
ワイヤーフレーム とは、3次元形状のモデリングやレンダリングの手法のひとつで、立体の辺だけから成るような線
の集合で表現するものである。
3DCG黎明期より、3次元モデルを2次元の描画面に投影する場合の最も基本的な手法がワイヤーフレームであった。
ワンポイントアドバイス
バナーと同じように、徹底的に真似をしましょう
ストーリーを考えてみる場合、これも様々な媒体の作品の真似を徹底的にしてみること。
まずどう「掴み」があって、次にその「説明」の伝え方、そしてどう「魅せて」アピールしているか？をしっかりと分析。
LP（ランディングページ）等のWebページだけではなくチラシや雑誌媒体、テレビCMや配信の広告動画なども参考になる。
準備① 情報を整理する
前項で「掴み」「説明」「魅せる」を軽く説明しましたがその後に、TELやメール等のお問合せや、カートシステムで購入なのか、イベントなら会場、直接対面での販売が必要なら実店舗などの最終的な「目的」が必要。
その「目的」に必要な電話番号、メールアドレス、WebサイトならURL、SNSならアカウントカートシステムなら埋め込みなのか外部リンクなのか、イベントなら会場、直接対面での販売であれば、アクセスマップや住所の案内が必要になる。
また、スマートフォンを利用するお客さまがターゲットになるのか？とにかく会員にする事が重要なのか？現在の告知なのか？ 未来の告知なのか？ 過去の議事録（実績紹介）なのか？
また、説明不足によるクレームなどが起こらないよう「対策」も考えておく。
それと、「写真」を収集しどう使っていくかを考える。
※実務では、撮影に立ち会う事もデザイナーの仕事になります。実際に自分で撮影する人もいます。
とにかく様々な状況を想定して、情報を整理し必要な項目をまとめておく。
そしてワイヤーフレームにその必要な情報を配置してストーリーを整える。
準備② 目的を逆算する
「情報の整理」がある程度出来てきたら、ストーリーを意識。
上手なストーリーを考え方のコツとして、「目的」を逆算。
例えば… 飲食店で、客単価5,000円のお店で1日（週末）Webからのお客さま100名来店を目指すキャンペーンを行う。
目的：100名の予約システムからの受注が出来るように準備を整える
↓
魅せる：Web予約で1品サービス、 ５％OFF、18時前に来店なら１０％OFF
↓
説明：居酒屋さんで○○駅徒歩5分、やきとりなど鶏料理と日本酒が自慢のお店
↓
掴み：焼き鳥、日本酒が自慢Web予約でお得なキャンペーン実施中
「目的」に対して、必要な「魅せる」のアピールポイントを考え、実現出来る「説明」をしっかりと行って、それを意味する「掴み」というように「目的から逆算」して考える。
その考案の中で実現不可能な事柄や違和感などをしっかりと整理して、ストーリーを整えられるように考えていく。
準備③ 目的の誘導について
「目的」の誘導は要するに「いかがですか？」のタイミング。
実際のご案内（営業）でも闇雲に「いかがですか？」と
言っているだけでは効果は低い。
必要なのは、如何にそれを「必要としている」方「利用したいと思っていた」方「使ってみたい」方など興味のある「優良顧客」と呼ばれるお客さまをどうやって掴む・獲得出来るか考えてみること。
左の図のように、上の入り口は大きくし、絞り込みを
行って、優良顧客を最終的に目的に到達させる。
正しい並びは
掴み→説明→魅せる→目的
レイアウトのコツ STEP①
掴み
「掴み」では、企画全体の意味する事をしっかりと伝える。
単純に、全ての意味を込める必要がありる。
「目的」に対して現在・過去・未来を明確に。
例えば、「現在」今どんな事を行っているのか？、「過去」今まではどうだったのか？「未来」これからどうなるのか？
を簡潔にまとめ一目で解るように表現。
キラースペースである事
Webページで最も見られる場所であるここは「キラースペース」とも呼ばれる。
当然、そのページの象徴となる文言・写真を使用。
キャッチコピーを考える
キラースペースに掲載する文言である為、最も効果的で魅力的な「キャッチコピー」。
またWebサイトですので、SEOとして検索キーワードになる事も想定。
写真・イラスト等で効果的に
キャッチコピーと同じく、キラースペースの写真になる訳ですので、しっかりと目的への印象を与えられるような写真やイラスト等を利用。
レイアウトのコツ STEP②
説明
「相手にものを伝える。」を改めて考える。
解っている相手なら言葉足らずでも伝わりますが、商業デザインとして文字と絵や写真のデザインで、知らない人に「説明」をしなければいけない。
まずは、ビジネスの基本である５W１Hについて考え、整理。
① When … いつ（時間）/ Where … どこで（場所）
最初にWhen（いつ）Where（どこで）を伝えることで、時間と場所が明確になり、その先の内容が頭に入りやすい。
② Who … 誰が（主体）/ What … 何を（物・行動）
次にWho（誰が）とWhat（何を）を伝えることにより、結果が明確。
次に説明する過程の前に結論を持ってくることで、伝えたいことが明確。
③ Why … なぜ（理由）How … どのように（手段）
最後にWhy（なぜ）、How（どのように）がきます。どのようにその結果に至ったのか過程を説明。
レイアウトのコツ STEP③
魅せる
PRポイントです。 その商品・商材の「売り」はなにか？
個人的に3つぐらい欲しい。
どんな方におススメしたいのか？ 自分自身はどう感じるのか？ 単に良いものなのか？当然、商品・商材理解が必要ですし、様々な分析をして考える。
① 自信のあるもの
自己発信の、自分が主語として考えた「売り」です。自己満足になってしまわないよう注意は必要ですが、自信を持つことは大切ですので、様々な角度から分析して魅せる。
② 実績があるもの
周りの評価や過去の実績。
主語を相手にしますので意見を貰う事や、評価される「受賞歴」「資格が必要」「達成したもの」などの実績を魅せる。
③ メリットと感じれるもの
当然として、お得と感じれるもの。
単純に「安い」「早い」「上手い」などを魅せる。
レイアウトのコツ STEP④
目的
ここで、TELやメールでの「問い合わせ」、「カートシステム」への誘導で購入なのか、SNSならフォロワーに、イベントや実店舗への誘導なのか？目的に合わせて、しっかりと案内（アテンド）を行う。
① TELやメール（お問合せ）
電話番号の掲載・メールフォームの作成・専用サイトへのリンク、実際の経営体制や予算・企画規模等を考えて準備。
② カートシステムの利用
外部リンクなのか、自社カートで埋め込みなのかで、技術的、経営的な問題が出てくる。しっかりと確認・準備。
③ SNSでのフォロワーや専用アプリのインストール
SNSへ誘導し、フォローして頂いたら1ドリンクなどの場合や専用アプリへ誘導しインストールの場合、その説明ページが必要になる場合がある。
④ イベント会場や実店舗へのご案内
イベントのチケットを購入したり、お店に予約したのに、そこにたどり着けなければ、本末転倒。
以前作成したアクセスマップ。しっかりとお客さまをご案内できるように作成。
レイアウトのコツ 対策とその他
・後から変更は出来ない
・文字やコンテンツのサイズ感を正確に
・「対策」フォローアップを想定しておきましょう
・権利の記載について