学科 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を使って作成。