＜概要＞

⚫︎Webサイト・LPについて
⚫︎ワイヤーフレームについて
⚫︎レイアウトのポイントについて
⚫︎制作に向けての準備

＜講義のまとめ、ポイント、感想など＞

⚫︎LPサイトを作る
LP（ランディングページ）とは？：
検索結果や広告などを経由して訪問者が最初にアクセスするページのこと。
訪問者がホームページに着地する（land）イメージが由来。
LPの目的は、ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」。
LPはWeb広告のリンク先ページ。

★ストーリーをデザインする
LPはユーザー（お客さま）の行動や特徴、年齢や性別、地域、都道府県、様々な条件に合わせてストーリーを考えていく必要がある。
最も基本的なページ構成のLPは、上から下にWebページを見せていく方法。
ポイントは、上から順番に「掴んでいく」 「伝えていく」 「魅せていく」。

→LP（ランディングページ）に誘導をして、そのページから「会員登録」や「カートからの購入」、「メール」や「お電話」等のアクションをしてもらう＝顧客となるように案内するページへ、営業していくことが目的。

※前回勉強したバナー→今回学ぶLPという流れ。
最終的に商品単発の顧客ではなく、企業のファンになってもらう＝コーポレートサイトを見てくれるくらいの顧客になる。という、Webデザインの介入するポイントにも順序がある。

⚫︎ワイヤーフレーム・デザインカンプとは？
LPなどのWebページを作成の手順としてまず「たたき台」を作成していくが、そのたたき台を「ワイヤーフレーム」と呼ぶ。
印刷業界では、「デザインカンプ」と呼んだり、企業や業界ごとに言い方が変わるので注意。

ワイヤーとは「線・針金・電線」を意味する英単語、フレームとは「枠・骨格」を意味する英単語のこと。
つまり、Webページ制作におけるワイヤーフレームとは、「Webページのレイアウトをシンプルな線・枠で表現した設計図」のこと。

【ワイヤーフレームの作り方】
①情報を整理する
上記での「掴み」「説明」「魅せる」のほかに、TELやメール等のお問合せや、カートシステムで購入、もしくはイベントなら会場、直接対面での販売が必要なら実店舗、などの最終的な「目的」が必要になる。
その「目的」に必要な電話番号、メールアドレス、WebサイトならURL、SNSならアカウント、カートシステムなら埋め込みなのか外部リンクなのか、イベントなら会場、直接対面での販売であれば、アクセスマップや住所の案内を揃えておく。
また、スマートフォンを利用するお客さまがターゲットになるのか？
とにかく会員にする事が重要なのか？
現在の告知なのか？未来の告知なのか？ 過去の議事録（実績紹介）なのか？といった状況整理を客観的に行う。
説明不足によるクレームなどが起こらないよう「対策」も考えておく必要もある。
それに加え、「写真」を収集しどう使っていくかも考える。
とにかく様々な状況を想定して、情報を整理し必要な項目をまとめておき、ワイヤーフレームにその必要な情報を配置してストーリーを整えていく。

②目的を逆算する
「情報の整理」がある程度出来てきたら、ストーリーを意識する。

③目的の誘導について
「目的」の誘導は要するに「いかがですか？」のタイミング。
実際のご案内（営業）でも闇雲に「いかがですか？」と言っているだけでは効果は低い。
必要なのは、如何にそれを「必要としている」方、「利用したいと思っていた」方、「使ってみたい」方など
興味のある「優良顧客」と呼ばれるお客さまをどうやって掴む・獲得出来るか考えてみること。

★極端な話、誰でも来てほしいわけではない。
まず入り口で多く人を集めて、掴みで説明を聞いてもらう。
次の説明をしっかりすることで該当しない方は離れてもらう。
更に次の魅せるで、アピールポイントに対して合わないユーザー（お客さま）には更に離れてもらう。
そして、最終的に目的に近い優良顧客を確実に掴める。という流れ。
商業デザインである以上「目的」のノルマがある。
この流れもしっかり意識して、誘導を行う必要がある。

【レイアウトのコツ】

★対策とそのほか
・後から変更はできない
漏れや抜けがないように考える必要がある。
ここでしっかりと企画をまとめることができる人材を企業は求めているというのも事実。
もし後から変更することになれば、それは「無駄」「無理」「無料」となる…。

・文字やコンテンツのサイズ感を正確に
実際にWebサイトになったら違和感を感じるということがよくある。

・フォローアップを想定しておく
クレームになるのは絶対NGだが、万が一を想定して、「注意書き」や「適切な説明」をしっかりと行う。

・権利の記載について
勝手に人のものをコピーすると違法なのは周知の事実。
一方で、コピーライトの記述はあってもなくても法律的な側面からすると関係がないのだが、無断利用の抑止力となるため書くことをお勧めする。
コピーライトはLPであれば最下層部に「© 最初の発行の年 著作権者の氏名」と記す。
（例：© 2018 Samplesdl Inc.）

【実際につくってみる】
①好きなアーティストの来日ライブについてのLP
アーティスト：

構成案：
・アーティストSpotifyページ
・アーティストYouTubeページ
・来日直前インタビュー動画
・アーティスト周辺のインタビュー等記事
・チケット情報
・ライブ会場情報
・アーティストプロフィール
・日程、会場、時間
・どれほどすごいことなのか、最初にライティング
・最下部にコピーライト
・ニュース（最新情報）
・注意書き
・写真ギャラリー
・グッズ情報
・スポンサー情報


②商品を買ってもらうためのLP（マーケティング視点でも考える）

商品：ドメの中小企業が2025年夏のために新発売予定の扇風機

特徴：
・インテリアに溶け込むシンプルさ、かつ機能性も損なわない（見た目を優先して機能性を排除していない）。
・必要以上の機能性はない（機能推しではない）

ブランディングイメージ：
・清潔
・シンプル
・質素
・五感で感じる
・「この扇風機があれば夏も苦しくない！」と商品からさらに広がってユーザーが夏を好きになってくれる
・夏の暑苦しさを感じさせない一方で、夏の太陽の輝きや暑さの中で手に入る「涼」（暑い中で食べるかき氷は美味しい・暑い外から帰ってきた時のクーラーは気持ちが良い・暑ささえも清々しくなる夏祭り、花火 など）という日本人の侘び寂びを目標としている

商品名：佇夏（たたずむなつ）（Gemini使用）

キャッチコピー：（ブレスト）
「夏を感じる」
「暑い夏だから、涼しい風を感じられる」
「（暑い）夏だから、風が涼しく感じられる」
「夏は、風が涼しいと感じられる季節だ。」
「涼むことを感じること。静けさと共に私は夏を知った。」

個人的なこだわり・イメージ
・侘び寂び、日本人の感性に訴えかける、静けさを感じられる
＝「感じる」より「感じられる」の方が合う
・涼む＝静けさが伴うと感じるため、デザインにおいても多くを語らないことで競合と差別化する（そもそも機能性はアピール材料ではないし）
・色々な夏の楽しみ方を写真や映像で魅せる。
そのどのシチュエーションにもこの商品が目立たず溶け込んでいる。
・一見個性がないように見えるが、それが個性。
・あえて商品説明は最後の最後にとっておく
・映画のワンシーンのように、「scene1」「scene2」とシチュエーションを切り替えて商品+色々な家を掲載する
・背景はそのシーンにあった自然の写真や動画（打ち上げ花火、風に靡く草花、木漏れ日と太陽のフレア、氷と水、畳、）
・+α音も入れられたら良い（下駄の音、風の音、打ち上げ花火の音、夏祭りの子供や出店屋の声、コップで氷が溶ける音、など）

構成案：
＜掴み＞
・夏のイメージ動画（画像）が数秒ごとに切り替わる
・最後に畳の部屋に置いてある扇風機のビジュアルに
・その上に浮かび上がる商品名「佇夏（たたずむなつ）」

＜説明＞
・キャッチコピー「」
・2025年夏発売
・どんな空間にも馴染む扇風機という説明
・シンプルさを説明

＜魅せる＞
・タイアップ、コラムなど記事コンテンツ
・もしくはギャラリーで様々な空間に溶け込む商品を魅せる

＜目的＞
・商品の詳細情報（発売日・価格・写真）
・商品公式ページ
・通販サイト
・注意書き

＜最後に＞
・企業情報
・コピーライティング

※デザインイメージ
・全体的に軽く、風で靡く印象を持たせたいので、フェードアウトやページをめくる感じがスクロールの動きで出せると良い