学科 レイアウトデザイン基礎②

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
レイアウトデザイン 練習

2限目
学科 レイアウトデザイン基礎②
レイアウトデザイン 練習

3限目
学科 レイアウトデザイン基礎②
課題制作

4限目
学科 レイアウトデザイン基礎②
課題制作

5限目
学科 レイアウトデザイン基礎②
課題制作

本日のテーマ

コーディングを意識したレイアウトの練習です

練習問題

ドロップボックス
資料>【4】コーディング>レイアウトデザイン 練習問題>「レイアウトデザイン 練習問題①」をダウンロードしましょう。

まずはHTMLのマークアップ練習です。

第4回成績考査(予告)

7月29日の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。

今後の予定

・7/19(火):レイアウトデザイン 練習①(本日・オンライン)
・7/20(水):レイアウトデザイン 練習②(オンライン)

・7/25(月):デザインラフ作成に向けた準備(オンライン)
・7/26(火):●デザインラフ作成①
・7/27(水):レイアウトデザイン 練習③ (オンライン)
・7/28(木):レイアウトデザイン 練習④(オンライン)
・7/29(金):成績考査 (●デザインラフ作成②)

学科 レイアウトデザイン基礎①

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎①
コピーライトについて

2限目
学科 レイアウトデザイン基礎①
課題制作

3限目
学科 レイアウトデザイン基礎①
課題制作

4限目
学科 レイアウトデザイン基礎①
課題制作

5限目
学科 レイアウトデザイン基礎①
課題制作・講評

本日のテーマ

LP(ランディングページ)のワイヤーフレームを作成しましょう。

コピーライトとは?

「コピーライト」とは、英語「Copyright」を原語とするカタカナ語で、「著作権」の訳語です。 著作権とは知的財産権の一つで、文芸、学術、音楽など文化的な著作物を保護する権利です。 ですので、著作権に違反すると罰金や懲役の処罰を受けることもあります。

参考サイト

前回のおさらい

LP(ランディングページ)とは?

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

参考サイト

ワイヤーフレームとは?

ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。
単に「ワイヤー」と呼ぶことも多いです。

制作のポイント

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

ワンポイントアドバイス

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

参考サイト

本日の課題

ワイヤーフレームの作成

白黒のワイヤーフレームを作成し、
5限目までにドロップボックスにUPしてください。講評を行います。
※ファイル名は、work_xxxx_20220718.jpg