プレゼン・発信

W5 作品を届ける

技術力だけでは買いたたかれる。LP(ランディングページ)で作品の魅力を伝え契約や評価につなげる考え方・事例・制作Tips・v0ハンズオン・今週の課題までを網羅した回

最終更新：2026年6月30日

Week5LPプレゼン発表

作品の魅力を伝え、契約につなげるランディングページ作成のコツを学ぶ回です。担当は上津原和弘。「良いものを作れば自然に売れる」という考え方では通用しません。技術力だけでは価値が正しく伝わらず、本来の評価を得られないまま安く買いたたかれてしまいます。本講義では、作品を「届ける」ことの重要性から、LPの基礎・効果・優秀事例・制作Tips、そして v0 を使った実際のLP制作までを扱います。

この週の構成は次のとおりです。

作品紹介ページ(LP)制作入門
今週の課題
Appendix（もっと知りたい人へ）

選ばれるためには知られる必要がある

どれだけ優れた作品でも、その存在や魅力が相手に伝わらなければ選ばれません。「選ばれるためには、まず知られる必要がある」というのが、この回を貫くテーマです。

作品紹介ページ(LP)制作入門

このセクションでは、以下の流れで「作品を届ける」ための考え方と技術を学びます。

MIT : 作品を届ける重要性
ランディングページ(LP)とは
LPの効果 / 参考作品
LP制作のTips
v0を使ったLP制作ハンズオン

講義の起点となるイメージとして、Appleの紹介ページを一度開いてみてください。

Appleの紹介ページ：強いメッセージと明確な行動誘導

💡 Apple の Web サイトを見て、思わず衢動買いしそうになったことはありませんか…？強いメッセージと明確な行動誘導が、この回で学ぶLPの本質です。

MIT : 作品を届ける重要性

このセクションのMIT(Most Important Thing / 最も重要なこと)は「作品を届ける重要性」を理解することです。テーマは価値の最大化。技術力だけでは買いたたかれてしまう、という問題意識からスタートします。世界トップ大学である MIT(マサチューセッツ工科大学)の、「自分たちでユーザーに届ける」文化を例に紹介します。

Demo or Die（動くものを見せろ）

	内容
従来	圧倒的な技術力で、中身にこだわる
弱点	本来持つ価値を伝えることができず、投入した努力よりも安い価格で買いたたかれてしまう
理想	利用者にとってのメリットをアピールし、適正価格で評価してもらえる

Deploy or Die（社会に届けろ）

	内容
従来	授業やコンテスト以外の、非技術者にサービスを届ける機会が不足している
弱点	与えられた課題をこなす「労働者」としての構図が定着し、給料や取り組む課題を自ら決められない
理想	開発者が利用者と接点を持ち、自らの行動が利用者のメリットや自分の給料に反映される

💡 「Demo or Die」から「Deploy or Die」へ。単に動くものを見せるだけでなく、社会に届けて利用者と接点を持つことが、開発者自身の評価・報酬・取り組む課題の自由度につながります。

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

ランディングページ(LP)とは、サービスを初めて利用する人に、特定の行動を取ってもらうことに特化した一枚のWebページです。例えるなら「24時間、世界中の人に作品の魅力を伝える営業マン」のような存在です。

LPの特徴

ページを開いた瞬間に、直感的に伝わる強いメッセージがある
利用者に取らせたい行動が明確で、主に以下の要素で「行動する理由」を提供する

行動する理由を提供する要素

利用者にとってのメリット
- 消費者向けなら直感的なメリット
- 企業向けなら金銭的なメリット
行動しない理由への反論
- Q&Aセクション
- 導入企業のレビュー

💡 例えば、Apple の Web サイトを見て、思わず衢動買いしそうになったことはありませんか…？強いメッセージと明確な行動誘導が、LPの本質です。

LPの効果 : 実例から学ぶ

Dropbox - 完成前に7万人超のユーザー獲得

Dropbox は、製品がまだ完成していない段階で大きな成果を上げました。

製品はまだ完成していなかった
しかし、3分のデモ動画** + メール登録ボタンしかない簡素なLP**で、7万人超のユーザーが事前登録(2007年)

2007年公開のDropboxデモ動画の一場面

Dropboxの事例から学べること

プロダクトが未完成でも、伝え方次第で人は動く
作品のURLやスライドを渡されるよりも、実際に人間が使っている所を動画でイメージさせる方が、魅力が伝わる

💡 2007年に公開された Dropbox のデモ動画が、この事例の決め手でした。Week 5 の資料を見る前に考えていた「伝え方」と違いはあったでしょうか…？

Airbnb - 写真を変えるだけで、予約率が2～3倍に

Airbnb は当初、予約が伸び悩んでいました。

投資家の助言で、ホテルオーナー(物件のホスト)に直接会って写真を撮ることにした
同じ値段・同じ部屋でも、物件の写真をプロが撮影するだけで予約率が2～3倍になった

Airbnbの事例から学べること

消費者にとっては、見た目こそがお金を払うかどうかを判断する決め手になる
テキストだけの情報と、画像付きのLPでは、伝わり方が全く違う
「良い物を作れば自然に売れる」という考え方では通用しない

💡 あなたの作品では、自分からの評価と他人からの評価にどれほどの乖離がありますか？伝える工夫で、その差を縮めることはできるでしょうか…？

優秀作品紹介

Code Auxiliary

完成度が高すぎて、メンターがリンクの貼り間違いと勘違いした、いわば伝説の作品です。

Code AuxiliaryのLPファーストビュー

ランディングページに必要な3つの要素がすべて揃っていて、完成度も実際のプロダクトに負けないレベル
LPを見ただけで、サービスの特長や使うメリットが、初めての人にも正しく伝わる

💡 Code Auxiliary のように「本当に君が作ったの？」と疑われるレベルのLPを目指しましょう。

ありあけあぶりっじ

ロゴとチーム名づくりが秀逸な事例です。

ロゴを一目見るだけで、サービスの目的が分かる
「ありあけ」と「けあ」をかけた、分かりやすいチーム名

ロゴ・サムネイル活用のポイント

ロゴは、SNS共有のサムネイルやアイコンとして使うことで、ブランドのイメージを定着させられる重要なアピール材料になる
サムネイルで魅力をアピールすることで、見た人がサイトを訪れて使う確率が遥かに上がる
ロゴは「NanoBanana」や「ChatGPT」を用いて作成可能 → 実際にやってみましょう
ロゴをスライド内で活用したり、表紙スライドをサイトのサムネイルとして用いたりして、一貫したイメージを伝えられる

LP制作Tips : スクロールせずに見える範囲が重要

LPを開いた人の70%以上はスクロールせずに離脱します。だからこそ、スクロールせずに目に入る「ファーストビュー」が大切です。

ファーストビュー例：キャッチコピー・CTAボタン・ビジュアル

ファーストビューに含めたい要素

キャッチコピー : メリットを伝える一行の文章
- 漢字 / ひらがなのバランスや、対比を意識するのがコツ
- 例) 「心おどるMac。うれしいプライス。」(apple.com)
CTAボタン : 利用者に取ってほしい行動を促すボタン
ビジュアル : プロダクトの画面や、利用イメージの画像・動画

LP制作Tips : デザイン原則

スライド制作にも活かせるデザイン4原則を押さえましょう。

デザイン4原則（近接・整列・反復・対比）のNG/OK比較

デザイン4原則

原則	内容
近接	関連性のあるものを近くに置いて伝える
整列	情報を並べることで、ノイズを減らす
対比	情報の優先順位を、濃淡や太さで伝える
反復	一貫性を、デザインの使いまわしで伝える

その他デザインTips

Google Fonts : 無料で使えるフォント
カラーパレット : 視覚的に自然な色の一覧

【任意】収益につなげる(マーケティング基礎)

収益化のコツは、デモを見せる人を最大化し、購入までの各ステップ(サイト内)での脱落率を最小化することです。

マーケティングファネル：認知→興味→評価→購入→リピート

マーケティングファネル

ステップ	内容
認知	SNSの投稿 / ブログ / 動画の視聴回数
興味・関心	「たまたま見た」→「もっと知りたい」に変化する
比較・検討	他の選択肢より良いことに納得する
購入	実際にサービスに対してお金を払う
リピート	サービスに満足し、継続利用する

💡 リピートは購入回数だけでなく、紹介経由の利用者増加も見込めます。

デジタルマーケティングTips

Google Analytics : 簡単にアクセス記録を残せ、データを元に判断できる
- 本発表前に設定しておくと、記録を確認できて面白いかもしれません

企画書を元にv0でLPを作ってみよう！

v0 を使ったランディングページ作成の流れは次のとおりです。

v0を使ったLP作成の流れ

企画書を元に、キャッチコピーや利用者にとってのメリットなどの要点を箇条書きにまとめる
- すでに簡潔にまとまっている場合は、そのまま送信してもOK
作品URLなどの重要なリンクを箇条書きにまとめる
デザインやレイアウトの特徴を、第三者に伝わるようなキーワードを使って表現する
「以下の情報を元にランディングページを作成してください」+ 整理した情報を v0 に入力する

以下の情報を元にランディングページを作成してください

# キャッチコピー / 利用者のメリット
- （要点を箇条書き）

# 重要なリンク
- 作品URL: ...

# デザイン・レイアウトの特徴
- （第三者に伝わるキーワードで表現）

💡 本日のデモではもう少し簡略的に、「プロンプト + 数行のサービス概要」でLPを作ってみましょう。

LPを作ってみましょう！

作成したら、Discord(お題提出のスレッド)に投稿してください。

今週の課題

必須 : 3/26の本発表

★ 3/26の本発表！(スライド提出、プロダクト提出)
東京 / オンラインの両方で開催します
スライド / LPは、プログラム終了後も実践教育公式サイトで掲載予定です

【任意】オンラインで作品の魅力を伝えるLPを作成しよう（LP提出）

本発表後も残る特設サイトに、皆さんのランディングページを掲載する予定です
サムネイルやロゴを共有していただければ、サイトに掲載できる可能性があります

提出方法

Google Form で課題を提出し、Discord で担当メンターに告知する
必要があれば、共有 Google Drive を活用する

守ってほしいこと

期限内なら再提出可能です
提出忘れを防ぐために、早めに提出しましょう

アンケートへの回答をお願いします

講義をより良くするためには、皆さんの意見が必要不可欠です。

Google Formはこちらからの回答をお願いします
form 以外でも、Zoom のチャットや Discord のチャンネルなどで、たくさん呿いてほしいです
実践教育プログラムをより良くしていくために、皆さんの感想をお待ちしています

Appendix : もっと知りたい人へ

このセクションでは、学習リソース・用語解説・書籍を紹介します。

学習リソース紹介

これから始めるFigma : 未経験でも、プロレベルのWebデザインが作れる、デザインの基礎が詰まった一冊
Google Digital Marketing & E Commerce : インターネット上のマーケティングについて本気で知りたい人におすすめ

用語解説

用語	説明
サムネイル	作品の全体像を一枚の画像にまとめた物
Figma	業界標準のWebデザインソフト
Canva	テンプレートや既存素材を組み合わせて、本格的なデザインを手軽に作れるアプリ
Placeholder	入力欄