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

Webページを作る

LP:Webページで営業をする(有料顧客を獲得する)

ストーリーをデザインする

①掴み ②説明 ③魅せる

ワイヤーフレーム・デザインカンプとは

Webページのレイアウトをシンプルな線などで表した設計図
〇バナーと同じように徹底的に真似する

準備① 情報を整理する

・必要な項目をまとめる
・ワイヤーフレームに当てはめていく

準備② 目的を逆算する

目的 ⇒ 魅せる ⇒ 説明 ⇒ 掴み

準備③ 目的の誘導について

レイアウトデザインのコツ

①掴み

企画全体の意味することをしっかりと伝える
「目的」に対して過去、現在、未来

・キラーコンテンツ:そのページの象徴となる文言・写真
・キャッチコピー:つかみになる言葉
・写真・イラストで効果的に

②説明

「相手にものを伝える」を改めて考える

①when─いつ(時間)/ where─どこで(場所)
②who─だれが(主体)/ what─なにを(もの・行動)
③why─なぜ(理由)/ how─どのように

③魅せる

PRポイント、「売り」は何か(最低3つは欲しい)

①自信のあるもの
②実績があるもの
③メリットととれるもの 例)安い、早い、うまい

④目的

①TEL、メール(問い合わせ)
②カートシステムの利用
③SNSでのフォローや専用アプリへの誘導
④イベントが異常や実店舗へのご案内

レイアウトデザインのコツ 対策とその他

・後から変更はできない
・文字やコンテンツのサイズ感を正確に
・「対策」フォローアップを想定しておく
・権利の記載について(コピーライト)

ワイヤーフレーム

まずは思うままに作ってみる(html、cssの意識もしておく)

STEP1 Webサイト全体の理解と整理
STEP2 掲載する情報のリストアップ
STEP3 レイアウトの決定
STEP4 最終的に整える