学科【オンライン】2025.10.29

授業内容

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

習得内容

• Webサイト・LPについて

■Webページの作成①
1ページのWebページでストーリーを考え、HTMLとCSSの仕組みと文法を理解しながら目的をしっかりと意識し様々な要件定義を整理しながらデザインしていく。

■LP（ランディングページ）とは？
Webページで営業を仕掛けられるページ。ランディングページ（Landing Page）とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのこと。提供するもの（商品やイベントなど）が1種類で余計な情報は入れない。リンクもほとんどない。

■LP（ランディングページ）の目的
LP（ランディングページ）の目的は、ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」。LPはWeb広告のリンク先ページ。前にご説明したWeb広告と連動させて運用するもの。
また、HTMLの文法、CSSで表現できることを意識してデザインをしていこう。
特に「デザイン」を作ってから、どう「コーディング」するの？とならないように、計画的にしっかりとデザインを考えていこう。

■コンバージョン（Conversion）について
コンバージョンとは、Webサイトに来訪したユーザーが資料請求、会員登録、購入など利益につながるアクションをすること。 「転換」などを意味する英単語「Conversion」のことで、デジタルマーケティングでは「成果」を表す言葉の1つとして使われている。CVともいう。
CVボタンは何個も表示すると消費者はしつこく感じてしまう。

■誘導先のページLP（ランディングページ）
LP（ランディングページ）や、商品ページの特定のページに誘導をして、そのページより、「会員登録」や「カートからの購入」、「メール」や「お電話」からの顧客となるように案内をしたりをするページへ、しっかりとご案内しよう。

■LP（ランディングページ）を作るポイント
・バナーよりも制作に時間が必要
・企画意図の理解を見せるのが重要
・ページの構成力見せて技術力を証明
バナーのリンク先のWebページであるLP（ランディングページ）を作れると「バナーが作れます」より高いレベルのデザインが考えられるというアピールになる。

• ワイヤーフレームについて

■ワイヤーフレームとは？
ワイヤーフレームは、Webページのレイアウトを決める設計図。Webサイト制作・アプリ開発に欠かせないもの。
ワイヤーとは「線・針金・電線」を意味する英単語、フレームとは「枠・骨格」を意味する英単語のこと。つまり、Webページ制作におけるワイヤーフレームとは、「Webページのレイアウトをシンプルな線・枠で表現した設計図」のこと。モノクロで表現する。

■ワイヤーフレーム・デザインカンプとは？
LP（ランディングページ）などのWebページの作成の手順としてまず「たたき台」を作成していこう。
そのたたき台を「ワイヤーフレーム」と呼んだりする。ちなみに印刷業界では、「デザインカンプ」と呼んだりもする。
※制作業界で、その言葉がちょっと曖昧。企業ごとに呼び方が違う場合もある。柔軟に対応していこう。
Web業界ではワイヤーフレームを制作後デザインカンプ、デザインラフの制作になりその後はＬＰ制作→コーディングという流れになる。

• レイアウトのポイントについて

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

■ワンポイントアドバイス
バナーと同じように、徹底的に真似をしよう。
ストーリーを考えてみる場合、これも様々な媒体の作品の真似を徹底的にしてみる。まずどう「掴み」があって、次にその「説明」の伝え方、そしてどう「魅せて」アピールしているか？をしっかりと分析してみよう。LP（ランディングページ）等のWebページだけではなくチラシや雑誌媒体、テレビCMや配信の広告動画なども参考になるかもしれない。
「ワイヤーフレーム」「ＬＰデザイン」で検索して色々なデザインを見ることもできる。
構成は割とどれも似ている。それは成果が出たレイアウトを参考にしてデザインするため。

■レイアウトのコツ

▢STEP①　掴み
「掴み」では、企画全体の意味する事をしっかりと伝えよう！
単純に、全ての意味を込める必要がある。「目的」に対して現在・過去・未来を明確にしよう。例えば、「現在」今どんな事を行っているのか？、「過去」今まではどうだったのか？「未来」これからどうなるのか？を簡潔にまとめ一目で解るように表現をしよう。
▲キラースペースである事
Webページで最も見られる場所であるここは「キラースペース」「ファーストビュー」とも呼ばれる。
当然、そのページの象徴となる文言・写真を使っていこう。
▲キャッチコピーを考える
キラースペースに掲載する文言である為、最も効果的で魅力的な「キャッチコピー」を考えてみよう。
またWebサイトですので、SEOとして検索キーワードになる事も想定しよう。
▲写真・イラスト等で効果的に
キャッチコピーと同じく、キラースペースの写真になるので、しっかりと目的への印象を与えられるような写真やイラスト等を利用しよう。
キラースペースのイメージはバナー広告からの誘導になるので、デザインは親和性（繋がり）もお忘れなく。

▢STEP②　説明
「相手にものを伝える。」を改めて考えてみよう。
解っている相手なら言葉足らずでも伝わるが、商業デザインとして文字と絵や写真のデザインで、知らない人に「説明」をしなければいけない。まずは、ビジネスの基本である５W１Hについて考え、整理してみよう。

例えば、8月から（When）都内各所（Where）で、タレント○○さん（Who）の主演映画（What）が公開します。彼の半世を描いた映画ですので（Why）、彼のファンの皆さんは是非映画館で見てください。（How）

① When … いつ（時間）/ Where … どこで（場所）
最初にWhen（いつ）Where（どこで）を伝えることで、時間と場所が明確になり、その先の内容が頭に入りやすくなる。
② Who … 誰が（主体）/ What … 何を（物・行動）
次にWho（誰が）とWhat（何を）を伝えることにより、結果が明確になる。
次に説明する過程の前に結論を持ってくることで、伝えたいことが明確になる。
③ Why … なぜ（理由）How … どのように（手段）
最後にWhy（なぜ）、How（どのように）がくる。どのようにその結果に至ったのか過程を説明していく。

５W1Hをしっかりとまとめることで、信頼性や信用、信ぴょう性や安心感につながる。
逆に、信頼や安心、信用（情報）が不足していれば、後のトラブルに繋がる。記載内容はしっかりとまとめておこう。

▢STEP③　魅せる
PRポイント。 その商品・商材の「売り」はなにか？3つぐらい欲しい。どんな方におススメしたいのか？ 自分自身はどう感じるのか？ 単に良いものなのか？当然、商品・商材理解が必要、様々な分析をして考えてみよう。

例えば、ぐるなびでランキング上位になり、評価も高い、レビューも多いのであればそれはアピールポイントになる。更に、ユーザー（お客さま）に対して、お得な特典が付くなら興味は高くなり、注目される。

① 自信のあるもの
自己発信の、自分が主語として考えた「売り」。自己満足になってしまわないよう注意は必要だが、自信を持つことは大切なので、様々な角度から分析して魅せていこう。
② 実績があるもの
周りの評価や過去の実績。主語を相手にするので意見を貰う事や、評価される「受賞歴」「資格が必要」「達成したもの」などの実績を魅せていこう。
③ メリットと感じれるもの
当然として、お得と感じれるもの。単純に「安い」「早い」「上手い」などを魅せていこう。

出来る事の棚卸と整理整頓が重要になるので、ここで次の「目的」に繋がる。しっかり考えて、どう見せたらより良く「相手に刺さる」かをしっかりと魅せていこう。

STEP④　目的
ここで、TELやメールでの「問い合わせ」、「カートシステム」への誘導で購入なのか、SNSならフォロワーに、イベントや実店舗への誘導なのか？目的に合わせて、しっかりと案内（アテンド）を行う。

① TELやメール（お問合せ）
電話番号の掲載・メールフォームの作成・専用サイトへのリンク、実際の経営体制や予算・企画規模等を考えて準備しよう。
② カートシステムの利用
外部リンクなのか、自社カートで埋め込みなのかで、技術的、経営的な問題が出てくる。
しっかりと確認・準備をしておこう。
③ SNSでのフォロワーや専用アプリのインストール
SNSへ誘導し、フォローして頂いたら1ドリンクなどの場合や専用アプリへ誘導しインストールの場合、その説明ページが必要になる場合がある。こちらもしっかりと準備をしておこう。
④ イベント会場や実店舗へのご案内
イベントのチケットを購入したり、お店に予約したのに、そこにたどり着けなければ、本末転倒である。
以前作成したアクセスマップでしっかりとお客さまをご案内できるように作成しよう。

ここのミスは、特にクレームに直結する。正しく快適かつ親切にご案内が出来るようにしっかりと考えて作成していこう。

▢対策とその他
▲後から変更は出来ない
後からあれこれ追加できないと思って、漏れや抜けが無いように考えていこう。
また実務での現実問題として、ここでしっかりと企画をまとめる事が出来る人材を企業は求めている。後からの変更は「無駄」「無理」「無料」の仕事になる場合が多いので、安易に考えずしっかりと考えていこう。聞き漏れがないようにクライアントからしっかりとヒアリングする。これがしっかりしていないと後から追加になる場合が出てくる。
▲文字やコンテンツのサイズ感を正確に
文字サイズやデバイス画面のサイズを意識しておこう。
よくある話で、Webページにしたら「文字がでかい？？」「写真が変？？」「なんか見にくい？？」なんて事がある。実際のWebページを「スクリーンショット」等をしてサイズバランスを確認しておこう。
▲「対策」フォローアップを想定しておきましょう
「目的」で書いたが、クレームになるのは絶対NG。ただ万が一の場合もあるので、「注意書き」や「適切な説明」をしっかりと行っておこう。また、作り手のお仕事をする以上、類似したサイト等の注意喚起の内容を見ておくとよい。
▲権利の記載について
著作物は日本の法律ではちゃんと守られるので、コピーライトの記述はあってもなくても、勝手に人のものをコピーしたら違法。書かなくても良いというより、法律から見れば書いても意味はないが無断利用への抑止力となるので記載しておこう。

▲コピーライトを書く理由
・著作権者を明記し主張することで、無断利用への抑止力となる
・そういう慣習になってしまっているから
▲コピーライトの書き方
© 最初の発行の年 著作権者の氏名（例：© 2018 Samplesdl Inc.）

• 制作に向けての準備

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

② 目的を逆算する
「情報の整理」がある程度出来てきたら、ストーリーを意識しよう。上手なストーリーの考え方のコツとして、「目的」を逆算してみよう。

「目的」に対して、必要な「魅せる」のアピールポイントを考え、実現出来る「説明」をしっかりと行って、それを意味する「掴み」というように「目的から逆算」して考えてみよう。その考案の中で実現不可能な事柄や違和感などをしっかりと整理して、ストーリーを整えられるように考えていこう。

③ 目的の誘導について
「目的」の誘導は要するに「いかがですか？」のタイミング。実際のご案内（営業）でも闇雲に「いかがですか？」と言っているだけでは効果は低い。
必要なのは、如何にそれを「必要としている」方、「利用したいと思っていた」方、「使ってみたい」方など興味のある「優良顧客」と呼ばれるお客さまをどうやって掴む・獲得出来るか考えてみること。
ただ闇雲にユーザー（お客さま）を集めればいいという企画は無い。まず入り口で、多く人を集めて、掴みで説明を聞いてもらう。次の説明をしっかりすることで該当しない方は離れてもらう。更に次の魅せるで、アピールポイントに対して合わないユーザー（お客さま）には更に離れてもらう。そして、最終的に目的に近い優良顧客を確実に掴めるという流れ。商業デザインである以上「目的」のノルマがある。この流れもしっかり意識して、誘導を行ってみよう。