-本日のアジェンダ-
1限目
学科 レイアウトデザイン基礎①
Webサイトについて
2限目
学科 レイアウトデザイン基礎①
ワイヤーフレームについて
3限目
学科 レイアウトデザイン基礎①
課題制作
4限目
学科 レイアウトデザイン基礎①
課題制作
5限目
学科 レイアウトデザイン基礎①
課題制作
本日のテーマ
Webサイト制作にあたり、まずはワイヤーフレームを作成しましょう。
Webサイトとは？
ウェブサイトは、World Wide Web 上にあり、一般に特定のドメイン名の下にある複数のウェブページの集まりのこと。サイトと呼ばれることもある。企業などの団体が自身を紹介するため自ら構築したサイトを、その団体の公式サイトなどと呼ぶ。 ホームページと呼ばれることもあるが、この用法は誤用とされる場合もある。 ウィキペディア
参考サイト
LP（ランディングページ）とは？
ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア
ワンポイントアドバイス
未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。
参考サイト
ワイヤーフレームとは？
ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。
単に「ワイヤー」と呼ぶことも多いです。
制作のポイント
・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
【サイズ例】ページ幅1280px、コンテンツ幅960px
・まずは色を入れず、白黒で制作しましょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、①掲載が必要な内容(情報)を先にしっかりまとめる②情報の順番づけ③レイアウトを考える手順で制作すると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
ワンポイントアドバイス
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。
参考サイト
UI/UX とは？
さまざまデバイスに対応したコンテンツを作るには、環境・時間・空間・性別・年齢・人数…等々
それらを「User Interface：ユーザインターフェイス」や「User Experience：ユーザエクスペリエンス」と
いう言葉で表現されています。ここで活きるのは「体験という経験」になるでしょう。
ワンポイントアドバイス
「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみましょう。
参考サイト
本日の課題
ワイヤーフレームの作成
白黒のワイヤーフレームを作成し、4限目終了までにドロップボックスにUPしてください。5限目に講評を行います。
※ファイル名は、work_xxxx_20220115.jpg