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

前回の復習

  • LPを作成する手順

本日の訓練内容

  • LPはWebデザイナーとして就職するためのスキルとして重要
  • バナー作成が最低限・LP作成はさらに求められる
  • コーディングの前にデザインができることが重要
  • LPデザイン→LP作成→バナー作成
  • LP作成の手順
  • ワイヤーフレーム
ストーリーをデザインする
掴み・説明・魅せる
  • 掴み
    • 来訪者を足止めする※最重要
    • グラフィックデザインの技術はここで使う実務ではワイヤーフレームを作成したらクライアントとの確認作業となる。ワイヤーフレームで確実に「掴み」の効果が出るデザインにする。
  • 説明
    • 足止めした来訪者に詳細を説明する
    • 来訪者のニーズに合っているかの確認など
  • 魅せる
    • 自己PRポイント
    • 特に優れている点を示す
準備③ 目的の誘導について
  1. 広告バナーなどの入り口
    広告宣伝費のコストがかかっている
  2. 掴み(ここからLP)
    ここで引き止めをすることが費用に対する効果の重要ポイント
  3. 説明
    必要な情報を確実に与える
  4. 魅せる
  5. 目的
準備② 目的を逆算する

LPのワイヤーフレームを作成しよう

  • Photoshopを使用し、jpeg形式で保存
  • サイズはPC基準(例:width1280px, contents width 960px)
  • まずは白黒で作成

メモ

  • 目的の誘導は就職活動・ポートフォリオ作成と流れの構造は同じ
  • 最初にわかりやすいあいさつ文
  • 対象を足止めするネタ
  • 就職後3年後・5年後のビジョンを明確にし、採用者が採用後のプランを思い浮かべられるようなアピールを行う
学科 レイアウトデザイン基礎① | DEAUアカデミー WEBデザイナー養成科(短時間)A教室

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

コピーライトとは?

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

参考サイト

前回のおさらい

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

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

参考サイト

ワイヤーフレームとは?

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

制作のポイント

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

ワンポイントアドバイス

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

参考サイト

本日の課題

ワイヤーフレームの作成

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