OLIENT TECH 実践教育プログラム 2026 Spring

作品を届ける

作品の魅力を伝え契約につなげるスライド作成のコツと、ユーザーに訴求するサムネイル画像の作成

Week 5 | 講師: 上津原和弘

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

どんなに優れた作品でも、その存在を知られなければ使ってもらうことはできません。ユーザーに届けるためには、作品の魅力を的確に伝え、「使ってみたい」と思わせるプレゼンテーションが不可欠です。

本講義では、作品の価値を視覚的に伝えるサムネイル画像の作成方法と、聞き手の心を動かすプレゼン資料の作成ポイントを学びます。最終週にふさわしい「届ける力」を身につけましょう。

サムネイル制作入門

参考事例の収集

1. 体験を伝える大切さを知る

Pinterest.com で「アプリプロモーション」と検索してみましょう。優れたプロモーション画像には共通点があります。

機能ではなく「体験」を伝える

機能の一覧を並べるだけでは、ユーザーの心は動きません。そのアプリを使ったときの利用体験をイメージさせることが「使いたい」と思わせる鍵です。

※ 企業向けソフトウェアの場合は「提案資料」で検索すると、適切な参考事例が見つかります。

2. サムネイルテンプレートを探す

Canva 使いやすさ重視

Canva は豊富なテンプレートと直感的な操作が特徴。「アプリ」で検索すると、すぐに使えるサムネイルテンプレートが見つかります。

Figma カスタム重視

Figma は全要素を自由にカスタマイズ可能。コミュニティで「App」または「Thumbnail」と検索すると、プロ品質のテンプレートが見つかります。

スクリーンショットを撮影する

推奨環境

必須ではありませんが、Chrome ブラウザの利用を推奨します。以下の手順は Chrome の DevTools 機能を使用します。

開発者メニューを開く: F12 キーを押してDevToolsを開きます。
デバイスモードに切り替える: DevTools上部にある PC/スマホのアイコン（Toggle device toolbar）をクリックします。
デバイスを選択する: Dimensions のドロップダウンから iPhone 14 Pro を選択します。現行に近い解像度であり、サムネイル用途に適しています。
スクリーンショットを撮る: Ctrl(Cmd) + Shift + P でコマンドパレットを開き、「Capture Screenshot」と入力して Enter を押します。画像がダウンロードされます。

超便利テクニック

このスクリーンショット機能は、今回の資料作成でも多用している非常に便利なテクニックです。任意のデバイスサイズでの表示を高品質に記録できるため、ぜひ覚えておきましょう。

モックアップテンプレートを使う

Webデザインソフト入門を兼ねた解説

以下は Figma の基本操作を兼ねた手順です。モックアップの利用は必須ではありませんが、作品の完成度を大きく高める手法です。

Figmaのセットアップとテンプレートの準備

アカウントを作成する: Figma.com にアクセスし、「Get started for free」からアカウントを作成します（Google アカウントとの連携も可能）。
テンプレートを開く: iPhone mockups のテンプレートを検索して開きます。
自分のアカウントにコピーする: 「Open in Figma」をクリックして、テンプレートを自分のワークスペースにコピーします。

スクリーンショットをモックアップに配置する

Placeholderを選択する: 任意の iPhone の内側を Ctrl(Cmd) + クリック します。「Placeholder」という名前のレイヤーが選択されていれば正しい操作です。
画像を差し替える: 右側パネルの Fill > Image をクリックし、「Upload from computer」で撮影したスクリーンショットを選択して差し替えます。

画像を出力する

iPhoneレイヤーを選択する: Placeholder の2個上にある iPhone レイヤーを選択します（複数選択も可能）。
エクスポート設定を追加する: 右側パネルの Export の右にある + アイコンをクリックします。
画像をダウンロードする: 「Export ○○」ボタンをクリックすると、モックアップ画像がダウンロードされます。

プレゼン資料作成

サムネイルが「第一印象」を決めるものだとすれば、プレゼン資料は作品の価値を論理的に伝え、納得感を生むためのツールです。限られた時間の中で、聞き手に「この作品は価値がある」と思ってもらうための構成を意識しましょう。

発表で伝えるべき4つの要素

1 課題の明確化

誰のどんな課題を解決するのかを、聞き手が共感できる形で提示します。課題が明確であるほど、解決策の価値が伝わります。

2 分析のロジック

なぜその課題に着目したのか、どのような調査や分析を行ったのかを示します。根拠のある課題設定は説得力を高めます。

3 提案の説得力

作品がどのように課題を解決するのか、その仕組みと効果を具体的に示します。デモやスクリーンショットが効果的です。

4 実行と展望

実際に動くものがあること、そして今後どのように発展させていくかを伝えます。将来性は評価のポイントです。

スライド作成のヒント

都市カテゴリの発表スライドなど、過去の優秀なスライドを参考にすることで、効果的な構成やデザインのパターンを学ぶことができます。講師から共有される事例をぜひ活用してください。

今週の課題

必須 発表スライドを作成しよう

作品の魅力や体験のイメージを伝えるためのスライドを作成してください。サムネイル画像やモックアップを活用し、聞き手が「使ってみたい」と感じるプレゼンテーションを目指しましょう。過去の発表スライドも参考にできます。

提出方法

課題提出チャンネルにてURLを共有してください（後から更新可能）。

重要: 提出忘れに注意

提出されたスライドを元に本発表進出作品を選抜します。未提出の場合は選考対象外となりますので、必ず期限内に提出してください。不完全であっても、まず提出することを優先しましょう。

Appendix: もっと知りたい人へ

学習リソース

書籍

これから始めるFigma — 未経験でもプロレベルのWebデザインが作れるようになる一冊。モックアップ制作やサムネイル作成の基礎を体系的に学べます。

オンラインコース

Google Digital Marketing & E-Commerce — インターネットマーケティングを本気で学びたい人向けの本格的な教材。作品を「届ける」ための知識が体系的に身につきます。

用語解説

用語	解説
モックアップ	実世界でのアプリの見え方を再現した画像。iPhoneなどの端末フレームにスクリーンショットをはめ込むことで、実際の利用シーンをイメージさせる。
サムネイル	作品の全体像を一枚の画像にまとめたもの。ストアやポートフォリオでの第一印象を決定づける重要な要素。
Figma	業界標準のWebデザインツール。UIデザイン、プロトタイピング、チーム共同作業に対応したブラウザベースのアプリケーション。無料プランでも十分な機能が利用できる。
Canva	テンプレートや既存素材を活用して、本格的なデザインを手軽に作れるアプリ。プレゼン資料やサムネイル制作に最適。
Placeholder	テンプレート内で画像やテキストを差し替えるための入力欄（仮置き領域）。Figmaのモックアップでは、スクリーンショットの差し替え先として使用する。