学科 ECサイトデザイン基礎④【オンライン】

1限目
学科 ECサイトデザイン基礎④
Webサイト・LPについて

2限目
学科 ECサイトデザイン基礎④
ワイヤーフレームについて

3限目
学科 ECサイトデザイン基礎④
レイアウトのポイントについて

4限目
学科 ECサイトデザイン基礎④
制作に向けての準備

5限目
学科 ECサイトデザイン基礎④
制作に向けての準備

本日のテーマ

Webサイト制作にあたり、まずは
『ワイヤーフレーム』
の制作のコツを学びましょう。

Webページの作成①
レイアウトのコツ

Webページの作成①

まずはLP（ランディングページ）を作成してみましょう。
1ページのWebページでストーリーを考えつつ
HTMLとCSSの仕組みと文法を理解しつつ
目的をしっかりと意識しつつ
様々な要件定義を整理しながらデザインしていきましょう。

LP（ランディングページ）とは？

Webページで営業をしましょう。

広告の飛んだ先のページのこと
1ページに収まっている商品ページのこと

ストーリーをデザインする

ユーザー（お客さま）の行動や特徴、年齢や性別、地域、都道府県、
様々な条件に合わせてストーリーを考えていく必要があります。
それをデザインしてみましょう。
まずは、最も基本的なページ構成のLP（ランディングページ）の作成です。
LP（ランディングページ）は、上から下にWebページを見せていきます。
ポイントは、上から順番に「掴んでいく」「伝えていく」「魅せていく」です。

①「掴み」掴んでいく

まずはお客さまを掴んでいく「掴み」です。
キラースペースとも呼ばれる部分です。しっかりとお客さまを掴んでいきましょう。

②「説明」伝えていく

前の①で掴んだお客さまに、詳しく説明をしていきましょう。
ビジネスの基本の５W１H、 When（いつ）Where（どこで）Who（だれが）
What（何を）Why（なぜ）How（どのように）を意識するとよいでしょう。

③「魅せる」魅せていく

②の５W1Hの説明が出来たら、売り込みをしてアピールしましょう。
個人的に最低3つぐらいのアピールをして、欲しいと思ってもらいましょう。

前に作成したバナーは、LP（ランディングページ）に誘導する為のモノです。
広告と呼ばれる各媒体からの来たユーザー（お客さま）をしっかりと掴んで、優良顧客として
獲得するために、しっかりと「繋がり」からの「獲得」を意識していきましょう。
また、商業デザイナーとして最も重要視されるスキルである事を意識しアピールしていきましょう。

とにかく「つながり」を意識しましょう。

ワイヤーフレーム・デザインカンプとは？

LP（ランディングページ）などのWebページを作成の手順としてまず
「たたき台」を作成していきましょう。
そのたたき台を「ワイヤーフレーム」と呼んだりします。
ちなみに印刷業界では、「デザインカンプ」と呼んだりもします。

単に「ワイヤー」と呼ぶこともあります。

Webサイトの目的に沿って、「どの情報を」「どこに」「どのように配置するか」をチーム内やクライアントと共有するための重要なものです。
デザインを決める前に作るもので、サイトの骨組みとなるものですのでしっかり設計しましょう。

まずは絵を描くときの下書きのように、手書きスケッチ(ラフ)してみましょう。
いきなりワイヤーフレームを作ったりというケースもありますが、事前にラフを描いておくことでより一層スムーズに制作が進められるようになります。

バナーと同じように、徹底的に真似をしましょう。

ストーリーを考えてみる場合、これも様々な媒体の作品の真似を徹底的にしてみてください。まずどう「掴み」があって、次にその「説明」の伝え方、そしてどう「魅せて」
アピールしているか？をしっかりと分析してみましょう。
LP（ランディングページ）等のWebページだけではなくチラシや雑誌媒体、テレビ
CMや配信の広告動画なども参考になるかもしれません。

１．掴み

アパレルのお店なら、入り口のマネキンです。
いかにお客さまの「ハートを掴む」を考えてみましょう。

2．説明

説明は長すぎると疲れます。
簡潔に解り易く、要約する事も考えてみましょう

３．魅せる

顧客獲得に向けて、しっかりと商品・商材（コンテンツやアイテム）の
売り込み方を考えてみましょう。

準備① 情報を整理する

前項で「掴み」「説明」「魅せる」を軽く説明しましたがその後に、
TELやメール等のお問合せや、カートシステムで購入なのか、イベントなら会場、直接対面での
販売が必要なら実店舗などの最終的な「目的」が必要になります。
その「目的」に必要な電話番号、メールアドレス、WebサイトならURL、SNSならアカウント
カートシステムなら埋め込みなのか外部リンクなのか、イベントなら会場、直接対面での販売で
あれば、アクセスマップや住所の案内が必要になるでしょう。
また、スマートフォンを利用するお客さまがターゲットになるのか？
とにかく会員にする事が重要なのか？
現在の告知なのか？未来の告知なのか？過去の議事録（実績紹介）なのか？
また、説明不足によるクレームなどが起こらないよう「対策」も考えておきましょう。
それと、「写真」を収集しどう使っていくかを考えましょう。
※実務では、撮影に立ち会う事もデザイナーの仕事になります。実際に自分で撮影する人もいます。
とにかく様々な状況を想定して、情報を整理し必要な項目をまとめておきましょう。
そしてワイヤーフレームにその必要な情報を配置してストーリーを整えましょう。

準備② 目的を逆算する

準備③ 目的の誘導について

レイアウトのコツ

STEP①掴み

「掴み」では、企画全体の意味する事をしっかりと伝えましょう！
単純に、全ての意味を込める必要があります。
「目的」に対して現在・過去・未来を明確にしましょう。

例えば、「現在」今どんな事を行っているのか？、「過去」今まではどうだったのか？「未来」これからどうなるのか？
を簡潔にまとめ一目で解るように表現をしましょう。

キラースペースである事

Webページで最も見られる場所であるここは「キラースペース」とも呼ばれます。
当然、そのページの象徴となる文言・写真を使っていきましょう。

キャッチコピーを考える

キラースペースに掲載する文言である為、最も効果的で魅力的な「キャッチコピー」を考えてみましょう。
またWebサイトですので、SEOとして検索キーワードになる事も想定しましょう。

写真・イラスト等で効果的に

キャッチコピーと同じく、キラースペースの写真になる訳ですので、しっかりと目的への印象を与えられるような
写真やイラスト等を利用しましょう。

STEP②説明

「相手にものを伝える。」を改めて考えてみましょう。
解っている相手なら言葉足らずでも伝わりますが、商業デザインとして文字と絵や写真の
デザインで、知らない人に「説明」をしなければいけません。
まずは、ビジネスの基本である５W１Hについて考え、整理してみましょう。

例えば、8月から（When）都内各所（Where）で、タレント○○さん（Who）の主演映画（What）が公開します。
彼の半世を描いた映画ですので、彼のファン（Why）の皆さんは是非映画館で見てください。（How）

① When … いつ（時間）/ Where … どこで（場所）

最初にWhen（いつ）Where（どこで）を伝えることで、時間と場所が明確になり、その先の内容が頭に入りやすくなります

② Who … 誰が（主体）/ What … 何を（物・行動）

次にWho（誰が）とWhat（何を）を伝えることにより、結果が明確になります。
次に説明する過程の前に結論を持ってくることで、伝えたいことが明確になります。

③ Why … なぜ（理由）How … どのように（手段）

最後にWhy（なぜ）、How（どのように）がきます。どのようにその結果に至ったのか過程を説明していきます。

５W1Hをしっかりとまとめることで、信頼性や信用、信ぴょう性や安心感につながります。
逆に、信頼や安心、信用が不足していれば、後のトラブルに繋がります。しっかりとまとめておきましょう。

STEP③魅せる

PRポイントです。その商品・商材の「売り」はなんでしょうか？
個人的に3つぐらい欲しいです。
どんな方におススメしたいのか？自分自身はどう感じるのか？単に良いものなのか？
当然、商品・商材理解が必要ですし、様々な分析をして考えてみましょう。

例えば、ぐるなびでランキング上位になり、評価も高い、レビューも多いのであればそれはアピールポイントです。
更に、ユーザー（お客さま）に対して、お得な特典が付きます。なら興味は高くなり、注目されるでしょう。

① 自信のあるもの

自己発信の、自分が主語として考えた「売り」です。自己満足になってしまわないよう注意は必要ですが、自信を持つことは大切です
ので、様々な角度から分析して魅せていきましょう。

② 実績があるもの

周りの評価や過去の実績です。主語を相手にしますので意見を貰う事や、評価される「受賞歴」「資格が必要」「達成したもの」など
の実績を魅せていきましょう。

③ メリットと感じれるもの

当然として、お得と感じれるものです。単純に「安い」「早い」「上手い」などを魅せていきましょう。

出来る事の棚卸と整理整頓が重要になりますし、ここで次の「目的」に繋がります。
しっかり考えて、どう見せたらより良く「相手に刺さる」かをしっかりと魅せていきましょう。

STEP④目的

ここで、TELやメールでの「問い合わせ」、「カートシステム」への誘導で購入なのか、SNSならフォロワーに、イベントや実店舗への誘導なのか？
目的に合わせて、しっかりと案内（アテンド）を行いましょう。

① TELやメール（お問合せ）

電話番号の掲載・メールフォームの作成・専用サイトへのリンク、実際の経営体制や予算・企画規模等を考えて準備しましょう。

② カートシステムの利用

外部リンクなのか、自社カートで埋め込みなのかで、技術的、経営的な問題が出てきます。
しっかりと確認・準備をしておきましょう。

③ SNSでのフォロワーや専用アプリのインストール

SNSへ誘導し、フォローして頂いたら1ドリンクなどの場合や専用アプリへ誘導しインストールの場合、その説明ページが必要になる場
合があります。こちらもしっかりと準備をしておきましょう。

④ イベント会場や実店舗へのご案内

イベントのチケットを購入したり、お店に予約したのに、そこにたどり着けなければ、本末転倒ですね。
以前作成したアクセスマップです。しっかりとお客さまをご案内できるように作成しましょう。

ここのミスは、特にクレームに直結します。クレームは嫌ですね。。
正しく快適かつ親切にご案内が出来るようにしっかりと考えて作成していきましょう。

対策とその他

後から変更は出来ない

後からあれこれ追加できないと思って、漏れや抜けが無いように考えていきましょう。
また実務での現実問題として、ここでしっかりと企画をまとめる事が出来る人材を企業は求めています。
後からの変更は「無駄」「無理」「無料」の仕事になる場合が多いですので、安易に考えずしっかりと考えていきましょう。

文字やコンテンツのサイズ感を正確に

文字サイズやデバイス画面のサイズを意識しておきましょう。
よくある話で、Webページにしたら「文字がでかい？？」「写真が変？？」「なんか見にくい？？」なんて事があります。
実際のWebページを「スクリーンショット」等をしてサイズバランスを確認しておきましょう。

「対策」フォローアップを想定しておきましょう

「目的」で書きましたが、クレームになるのは絶対NGです。ただ万が一の場合もありますので、「注意書き」や「適切な説明」をしっかり
と行っておきましょう。また、作り手のお仕事をする以上、類似したサイト等の注意喚起の内容を見ておくとよいでしょう。

権利の記載について

著作物は日本の法律ではちゃんと守られるので、コピーライトの記述はあってもなくても、勝手に人のものをコピーしたら違法です。
書かなくても良いというより、法律から見れば書いても意味はないですが無断利用への抑止力となるので記載しておきましょう。

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。
逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。
お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

制作のポイント

・使用ソフトはPhotoshopです。
・まずは色を入れず、白黒で制作しましょう。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・メインイメージなどはブラウザの横幅いっぱいでも構いませんが、文章などのコンテンツ幅は960〜980px程度に収めると良いでしょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える
手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。