-本日のアジェンダ-
1限目
学科 ユーザーインターフェイス基礎③
Webサイト・LPについて
2限目
学科 ユーザーインターフェイス基礎③
ワイヤーフレームについて
3限目
学科 ユーザーインターフェイス基礎③
レイアウトのポイントについて
4限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備
5限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備
本日のテーマ
Webサイト制作にあたり、まずはワイヤーフレームの制作のコツを学びましょう。
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「デザインの考え方」の教科書⑥.pdf」
【動画】
- Webページの作成① LP(ランディングページ)作成のポイント
https://youtu.be/wamCaxsVt3Y (7:08) - ストーリーをデザインする
https://youtu.be/FJvZsUtzAU0 (10:13) - 「ワイヤーフレーム」「デザインカンプ」とは・制作のポイントと準備①情報の整理
https://youtu.be/eyXRPg8djrM (8:28) - 準備②目的を逆算する
https://youtu.be/8BZOTDIcptA (7:20) - レイアウトのコツ STEP１/ STEP２ / STEP３
https://youtu.be/VGGJHf412pQ (10:42) - レイアウトのコツ STEP４/ 対策とその他
https://youtu.be/cmLvO1jJutI (9:15)
LP（ランディングページ）とは？
ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア
参考サイト
ワンポイントアドバイス
未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。
ワイヤーフレームとは？
ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。単に「ワイヤー」と呼ぶことも多いです。
参考サイト
ワンポイントアドバイス
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。
制作のポイント
・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・まずは色を入れず、白黒で制作しましょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える 手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。
本日の課題
ワイヤーフレーム作成に向けての準備
白黒のワイヤーフレーム作成に向け、世の中のサイトを参考に情報収集しながらレイアウトを考えましょう。
手書きでメモしておくと良いです。
9月28日（木）の学科 レイアウトデザイン基礎①から実際に作成します。