本日のテーマ

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

Webページの作成①

LP（ランディングページ）とは？Webページで営業をしましょう。

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

①「掴み」掴んでいく②「説明」伝えていく③「魅せる」魅せていく

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

準備① 情報を整理する

「目的」に必要な電話番号、メールアドレス、WebサイトならURL、SNSならアカウントカートシステムなら埋め込みなのか外部リンクなのか、イベントなら会場、直接対面での販売であれば、アクセスマップや住所の案内が必要になるでしょう。

、説明不足によるクレームなどが起こらないよう「対策」も考えておきましょう。

それと、「写真」を収集しどう使っていくかを考えましょう。

準備② 目的を逆算する

1　目的　2　魅せる　3　説明　4　掴み

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

1　広告バナーなどの入り口　2　掴み（ここからLPです。）3　説明　4　魅せる　5　目的

レイアウトのコツSTEP　①掴み

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

レイアウトのコツSTEP　②説明

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

①When … いつ（時間）/ Where … どこで（場所）②Who … 誰が（主体）/ What … 何を（物・行動）③Why … なぜ（理由）How … どのように（手段）

レイアウトのコツSTEP　③魅せる

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

①自信のあるもの　②実績があるもの　③メリットと感じれるもの

レイアウトのコツSTEP　④目的

①TELやメール（お問合せ）②カートシステムの利用　③SNSでのフォロワーや専用アプリのインストール　④イベント会場や実店舗へのご案内

STEP① ワイヤーフレームまずはワイヤーフレームを作ってみましょう

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「デザインの考え方」の教科書⑥.pdf」　

【動画】

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

ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア

参考サイト

ワンポイントアドバイス

未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。

WEBサイト制作の流れ

◆ヒアリング、ワイヤーフレーム制作◆
↓↓↓
デザインラフ制作
↓↓↓
コーディング

ワイヤーフレームとは？

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

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

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

参考サイト

ワンポイントアドバイス

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

制作のポイント

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

本日の課題

ワイヤーフレーム作成に向けての準備

白黒のワイヤーフレーム作成に向け、世の中のサイトを参考に情報収集しながらレイアウトを考え、手書きでスケッチ（ラフ）を作成しましょう。
次回の「ECサイトデザイン実習④」で実際にPCを使って作成します。