場面5：ポートフォリオのメインビジュアルを作る | 画像生成AI活用：視覚表現とコンセプト設計の応用 | AI活用概論

この節で学ぶこと

前の節では、手元の写真の背景を整理したり、別の背景に変えたりする方法を学びました。

今回は、自分の作品やアプリを、ポートフォリオで魅力的に見せるためのメインビジュアルを作ります。

この節で新しく習得する技術は、次の1つです。

自分の作品を“プロっぽく見せる”モックアップ画像を作る

ここでいう「モックアップ」とは、作品を実際に使われているような形で見せるための画像です。

たとえば、自分で作ったアプリの画面を、ただスクリーンショットとして貼るのではなく、

スマートフォンの画面に表示されているように見せる
ノートPCの画面に表示されているように見せる
机の上に作品が置かれているように見せる
ポートフォリオサイトのトップ画像として見せる

というように、作品の見せ方を整えます。

なぜポートフォリオのメインビジュアルが大切なのか

専門学生にとって、ポートフォリオはとても大切です。

就職活動、インターン、制作発表、先生への提出、企業への説明などで、自分が何を作れるのかを見せるために使います。

しかし、よくあるのが次の状態です。

作品は作った。
でも、見せ方が弱い。
スクリーンショットをそのまま並べただけで、少し地味に見える。

これはとてももったいないです。

作品の内容が良くても、最初に見た印象が弱いと、見る人に伝わりにくくなります。

ポートフォリオでは、作品そのものだけでなく、どう見せるかも重要です。

今回作るもの

今回は、次のような画像を作ります。

項目	内容
作るもの	ポートフォリオ用メインビジュアル
使う場所	ポートフォリオサイト、発表資料、作品紹介スライド
題材	自分で作ったアプリ、Webサイト、デザイン課題、制作物
目的	作品をわかりやすく、魅力的に見せる
注意点	実際に作っていない機能や画面を勝手に追加しない

今回のテーマ

授業では、例として次のテーマを使います。

自分で作った家計簿アプリを、ポートフォリオのトップ画像として見せる

このテーマで、次のような画像を作ります。

スマートフォンの画面に家計簿アプリが表示されている。
周囲にはノート、ペン、アイデアメモ、ノートPCが自然に配置されている。
学生が自分でアプリを作ったことが伝わる、清潔感のあるポートフォリオ用ビジュアル。

1. ポートフォリオ画像で大切な3つのこと

1. 作品が主役になっていること

ポートフォリオ画像では、背景や装飾がかっこよくても、作品が目立たなければ意味がありません。

主役は、あくまで自分の作品です。

良い例：
作品画面がはっきり見える
作品の雰囲気が伝わる
背景は作品を引き立てている

悪い例：
背景が派手すぎる
作品が小さすぎる
関係ない装飾が多すぎる
何を作ったのか分からない

2. 実際に作ったものとズレないこと

AIで画像を作ると、勝手に存在しない画面や機能が追加されることがあります。

たとえば、家計簿アプリを作った場合に、実際には作っていないグラフ、ログイン機能、決済機能などが追加されることがあります。

これは注意が必要です。

ポートフォリオでは、自分が実際に作ったものを正しく見せることが大切です。

そのため、プロンプトには必ず次のような指示を入れます。

アプリ画面の内容は元の画像から変更しないでください。
実際に作っていない機能や画面を追加しないでください。

3. 見る人を意識すること

ポートフォリオを見る人は、友達だけではありません。

先生、企業の採用担当者、制作会社の担当者、インターン先の人などが見る可能性があります。

そのため、画像の印象は少し整えておくとよいです。

見せたい印象	画像の方向性
丁寧に作っている	清潔感、余白、整理された構図
学習意欲がある	ノート、メモ、制作過程の雰囲気
実装できる	PC、コード、アプリ画面
デザインも意識している	色の統一、整ったレイアウト
仕事に使えそう	派手すぎず、信頼感のある見せ方

2. まずは作品を用意する

今回の授業では、自分の作品を1つ選びます。

まだ完成していない場合でも大丈夫です。

授業用として、途中段階の作品や架空のサンプルでも構いません。

作品の例

作品	見せ方
自分で作ったアプリ	スマートフォンのモックアップ
Webサイト	ノートPCの画面
デザイン課題	ポスターやカードとして表示
イラスト	展示会風の背景
動画作品	サムネイルや編集画面風
授業レポート	表紙デザイン風
SNS企画	投稿画面のモックアップ

使える素材

次のどれかを用意します。

1. 自分の作品のスクリーンショット
2. 自分の作品写真
3. 自分で作ったアプリ画面
4. Webサイトの画面
5. デザイン課題の画像
6. サンプルとして作った架空の作品画像

自分の作品がまだない場合は、次のような仮テーマでも大丈夫です。

家計簿アプリ
学習記録アプリ
学校イベント告知サイト
カフェ紹介ページ
ポートフォリオサイト
タスク管理アプリ

3. ポートフォリオ用の見せ方を選ぶ

作品の種類によって、見せ方を変えます。

作品の種類	おすすめの見せ方
スマホアプリ	スマートフォン画面のモックアップ
Webサイト	ノートPC画面のモックアップ
UIデザイン	タブレットやスマホに表示
ポスター	壁に掲示された展示風
商品・雑貨	白背景の商品撮影風
イラスト	ギャラリー展示風
動画作品	動画編集画面やサムネイル風

今回の基本は、スマートフォンのモックアップです。

4. 設計メモを作る

いきなり画像を作る前に、設計メモを作ります。

ワークシート1：ポートフォリオ画像の設計メモ

紹介したい作品：

作品の種類：

使う場所：

見せたい相手：

伝えたいこと：

主役：

背景：

雰囲気：

色：

構図：

絶対に変えたくないもの：

入れたくないもの：

画像サイズ：

記入例

紹介したい作品：
自分で作った家計簿アプリ

作品の種類：
スマホアプリ

使う場所：
ポートフォリオサイトのトップ画像、作品紹介スライド

見せたい相手：
先生、採用担当者、クラスメイト

伝えたいこと：
自分でアプリの画面を考え、実装まで行ったこと

主役：
スマートフォンに表示された家計簿アプリの画面

背景：
清潔感のある机、ノート、ペン、ノートPC、アイデアメモ

雰囲気：
清潔感、前向き、学生らしい、少しプロっぽい

色：
白、ライトグレー、淡いブルー、少しグリーン

構図：
中央または右側にスマートフォン。左側にタイトルを入れられる余白

絶対に変えたくないもの：
アプリ画面の色、文字、ボタン、レイアウト、機能

入れたくないもの：
実在ロゴ、企業名、架空の機能、読めない文字、人物の顔

画像サイズ：
16:9

5. 画像をアップロードして編集する場合

すでに自分のアプリ画面や作品画像がある場合は、その画像をアップロードして編集します。

プロンプト例

この画像を使って、ポートフォリオサイトのトップに使えるメインビジュアルを作成してください。

主役は、画像内にある自作アプリの画面です。

アプリ画面の色、文字、ボタン、レイアウト、機能は変更しないでください。
実際に存在しない機能や画面は追加しないでください。

スマートフォンのモックアップとして自然に表示し、周囲にはノート、ペン、ノートPC、アイデアメモを自然に配置してください。

背景は、白、ライトグレー、淡いブルーを中心にした清潔感のある机の上にしてください。

学生が自分でアプリを制作したことが伝わる、前向きで少しプロっぽい雰囲気にしてください。

左側には、後から作品タイトルを入れられる余白を作ってください。

画像内に新しい文字、実在ロゴ、企業名、架空の機能は追加しないでください。
画像サイズは16:9の横長にしてください。

ポイント

このプロンプトでは、作品を守るために次の指示を入れています。

アプリ画面の色、文字、ボタン、レイアウト、機能は変更しないでください。

この一文がとても大切です。

ポートフォリオでは、見栄えだけでなく、正確さも大事です。

6. 作品画像がない場合：テキストだけでモックアップを作る

まだ作品画像がない場合は、テキストだけでイメージ画像を作ることもできます。

ただし、この場合は「実際の完成作品」ではなく、イメージ案として扱います。

プロンプト例

ポートフォリオサイトのトップに使う16:9の横長メインビジュアルを作成してください。

テーマは「学生が制作した家計簿アプリ」です。

中央にスマートフォンのモックアップを配置し、画面には家計簿アプリらしいシンプルなUIが表示されているイメージにしてください。

周囲には、ノート、ペン、ノートPC、アイデアメモを自然に配置してください。

雰囲気は、清潔感があり、前向きで、学生の制作物を少しプロっぽく見せる印象にしてください。

色は、白、ライトグレー、淡いブルー、少しグリーンを中心にしてください。

左側には、後から作品タイトルを入れられる余白を作ってください。

画像内に読めない文字、実在ロゴ、企業名は入れないでください。
実際のアプリとして誤解されるような具体的な機能説明や実績は入れないでください。

注意点

テキストだけで作った画像は、見た目のイメージとしては使えます。

しかし、就職活動のポートフォリオで使う場合は、次のように説明を分ける必要があります。

これは作品のイメージビジュアルです。
実際の画面は別ページで掲載しています。

実際に作っていないものを、作ったように見せないことが大切です。

7. Nano Bananaで画像を生成・編集する

ここから実際に手を動かします。

作業手順

1. Google AI Studioを開く
2. Nano Bananaを使える画像生成・編集モデルを選ぶ
3. 作品画像がある場合はアップロードする
4. プロンプトを入力する
5. 画像を生成する
6. 生成画像を保存する
7. 元画像と比較する

8. 生成画像をチェックする

生成された画像が、ポートフォリオのメインビジュアルとして使えるか確認します。

チェックリスト

確認項目	○ / △ / ×	メモ
作品が主役に見える
作品の内容が変わっていない
実際に作っていない機能が追加されていない
文字やロゴが勝手に追加されていない
見せたい相手に合っている
ポートフォリオらしい清潔感がある
背景がごちゃごちゃしていない
後からタイトルを入れる余白がある
16:9で使いやすい
作品紹介として誤解を生まない

ワークシート2：生成画像の振り返り

良かった点：

気になった点：

作品そのものは変わっていないか：

ポートフォリオに使えそうな理由：

改善したいこと：

記入例

良かった点：
スマートフォンのモックアップとして見やすくなった。
背景が整理されて、ポートフォリオのトップ画像として使いやすそうだった。

気になった点：
アプリ画面の文字が一部変わっていた。
実際にはないグラフのようなものが追加されていた。
左側の余白が少なかった。

作品そのものは変わっていないか：
画面内容が少し変わっていたため、そのまま提出用には使いにくい。

ポートフォリオに使えそうな理由：
雰囲気はよく、作品紹介ページのアイキャッチとしては使えそう。

改善したいこと：
アプリ画面は元画像のままにする。
実在しない機能を追加しない。
左側の余白を増やす。

9. 改善プロンプトを作る

ポートフォリオ画像では、見た目が良くても、作品内容が変わっていたら注意が必要です。

改善プロンプト例

全体の雰囲気は良いです。

清潔感のある机の背景、スマートフォンのモックアップ、白と淡いブルーの色はそのまま残してください。

ただし、アプリ画面の内容が元画像から変わっているため、アプリ画面の文字、ボタン、色、レイアウト、機能は元画像のままにしてください。

実際には存在しないグラフ、ボタン、機能、説明文は追加しないでください。

左側に作品タイトルを入れたいので、左側の余白をもっと広くしてください。

画像内に新しい文字やロゴを追加しないでください。

ワークシート3：自分用の改善プロンプト

残したい点：

直したい点：

絶対に変えたくない点：

改善プロンプト：

10. 2回目を生成する

改善プロンプトを使って、もう一度生成します。

比較表

比較項目	元画像	1回目	2回目
作品の正確さ
見た目の良さ
余白
背景の整理
ポートフォリオ向き
誤解の少なさ

振り返り

2回目で良くなった点：

まだ気になる点：

実際にポートフォリオで使うならどの画像を選ぶか：

その理由：

11. ポートフォリオに入れる文章も考える

画像ができたら、作品紹介文も一緒に考えます。

ポートフォリオでは、画像だけでなく、次の情報も必要です。

項目	内容
作品名	何を作ったのか
制作目的	なぜ作ったのか
使用技術	何を使ったのか
担当範囲	自分が何をしたのか
工夫した点	どこを考えたのか
改善したい点	今後どう直したいのか

作品紹介文の型

作品名：

制作目的：

使用技術：

担当範囲：

工夫した点：

今後改善したい点：

記入例

作品名：
学生向け家計簿アプリ

制作目的：
毎月の支出を簡単に記録し、使いすぎを確認できるアプリを作るため。

使用技術：
Flutter、Firebase

担当範囲：
画面設計、UIデザイン、入力フォーム、支出一覧画面の実装。

工夫した点：
初めて使う人でも迷わないように、入力項目を少なくし、画面をシンプルにした。

今後改善したい点：
グラフ表示や月別集計機能を追加し、より振り返りやすくしたい。

12. 思ってもみない便利な使い方

1. 完成前の作品でも「方向性」を見せられる

まだ完成していないアプリやWebサイトでも、ポートフォリオのイメージ画像を作ることで、完成形の方向性を説明しやすくなります。

ただし、完成していないものは、必ず「制作中」と書きます。

現在制作中のアプリです。
画面設計と一部機能を実装しています。

2. 先生に相談するときの説明資料になる

作品の見せ方に悩んでいるとき、画像生成AIでいくつかの見せ方案を作り、先生に相談できます。

この作品を、ポートフォリオではどのように見せると良いでしょうか。

と相談しやすくなります。

3. 面接で話せる材料になる

ポートフォリオ画像を作る過程も、面接で話せる内容になります。

作品をただ載せるだけでなく、見る人に伝わりやすいように、モックアップ画像や紹介文も工夫しました。

これは、制作物そのものだけでなく、伝え方まで考えられる人という印象につながります。

4. チーム制作の紹介にも使える

グループで作った作品の場合は、自分の担当範囲を分かりやすく見せることが大切です。

画像の横に、次のように書くとよいです。

担当範囲：
UI設計、ログイン画面、トップページの実装

AIで作ったビジュアルと、自分の担当範囲をセットで見せると、伝わりやすくなります。

13. 実習課題

課題内容

自分の作品、またはサンプル作品を1つ選び、ポートフォリオ用のメインビジュアルを作ってください。

作品テーマ例

番号	テーマ
1	自分で作ったアプリ
2	自分で作ったWebサイト
3	授業で作ったデザイン課題
4	文化祭・学校イベントの企画サイト
5	ポートフォリオサイト自体
6	ハンドメイド作品
7	自分で決めた作品

提出するもの

1. 紹介したい作品
2. 作品の種類
3. 使う場所
4. 1回目のプロンプト
5. 1回目の生成画像
6. 改善プロンプト
7. 2回目の生成画像
8. 作品紹介文
9. 実際に作っていない要素を入れないために注意した点
10. まだ直したい点

提出テンプレート

紹介したい作品：

作品の種類：

使う場所：

見せたい相手：

1回目のプロンプト：

1回目の画像を見て良かった点：

1回目の画像で気になった点：

改善プロンプト：

2回目の画像を見て良くなった点：

作品紹介文：

実際に作っていない要素を入れないために注意した点：

まだ直したい点：

14. この節のまとめ

この節では、自分の作品をポートフォリオで魅力的に見せるためのメインビジュアルを作りました。

大切なポイントは、次の通りです。

ポートフォリオでは、作品そのものだけでなく、見せ方も大切。
モックアップとは、作品を実際に使われているように見せる画像のこと。
自分のアプリやWebサイトは、スマホやPCの画面に表示して見せると伝わりやすい。
背景や小物は作品を引き立てるために使う。
実際に作っていない機能や画面を追加しない。
作品画面の文字、色、レイアウト、機能が変わっていないか確認する。
ポートフォリオでは、画像と作品紹介文をセットで用意する。
完成前の作品は、必ず「制作中」として扱う。
見せ方を工夫することで、作品の魅力が伝わりやすくなる。

次の節では、学校行事、サークル、展示会、地域イベントなどに使える架空イベントの告知画像を作ります。イベントの雰囲気を伝えるポスター風画像に挑戦します。

この節で学ぶこと

前の節では、手元の写真の背景を整理したり、別の背景に変えたりする方法を学びました。

今回は、自分の作品やアプリを、ポートフォリオで魅力的に見せるためのメインビジュアルを作ります。

この節で新しく習得する技術は、次の1つです。

自分の作品を“プロっぽく見せる”モックアップ画像を作る

ここでいう「モックアップ」とは、作品を実際に使われているような形で見せるための画像です。

たとえば、自分で作ったアプリの画面を、ただスクリーンショットとして貼るのではなく、

スマートフォンの画面に表示されているように見せる
ノートPCの画面に表示されているように見せる
机の上に作品が置かれているように見せる
ポートフォリオサイトのトップ画像として見せる

というように、作品の見せ方を整えます。

なぜポートフォリオのメインビジュアルが大切なのか

専門学生にとって、ポートフォリオはとても大切です。

就職活動、インターン、制作発表、先生への提出、企業への説明などで、自分が何を作れるのかを見せるために使います。

しかし、よくあるのが次の状態です。

作品は作った。
でも、見せ方が弱い。
スクリーンショットをそのまま並べただけで、少し地味に見える。

これはとてももったいないです。

作品の内容が良くても、最初に見た印象が弱いと、見る人に伝わりにくくなります。

ポートフォリオでは、作品そのものだけでなく、どう見せるかも重要です。

今回作るもの

今回は、次のような画像を作ります。

項目	内容
作るもの	ポートフォリオ用メインビジュアル
使う場所	ポートフォリオサイト、発表資料、作品紹介スライド
題材	自分で作ったアプリ、Webサイト、デザイン課題、制作物
目的	作品をわかりやすく、魅力的に見せる
注意点	実際に作っていない機能や画面を勝手に追加しない

今回のテーマ

授業では、例として次のテーマを使います。

自分で作った家計簿アプリを、ポートフォリオのトップ画像として見せる

このテーマで、次のような画像を作ります。

スマートフォンの画面に家計簿アプリが表示されている。
周囲にはノート、ペン、アイデアメモ、ノートPCが自然に配置されている。
学生が自分でアプリを作ったことが伝わる、清潔感のあるポートフォリオ用ビジュアル。

1. ポートフォリオ画像で大切な3つのこと

1. 作品が主役になっていること

ポートフォリオ画像では、背景や装飾がかっこよくても、作品が目立たなければ意味がありません。

主役は、あくまで自分の作品です。

良い例：
作品画面がはっきり見える
作品の雰囲気が伝わる
背景は作品を引き立てている

悪い例：
背景が派手すぎる
作品が小さすぎる
関係ない装飾が多すぎる
何を作ったのか分からない

2. 実際に作ったものとズレないこと

AIで画像を作ると、勝手に存在しない画面や機能が追加されることがあります。

たとえば、家計簿アプリを作った場合に、実際には作っていないグラフ、ログイン機能、決済機能などが追加されることがあります。

これは注意が必要です。

ポートフォリオでは、自分が実際に作ったものを正しく見せることが大切です。

そのため、プロンプトには必ず次のような指示を入れます。

アプリ画面の内容は元の画像から変更しないでください。
実際に作っていない機能や画面を追加しないでください。

3. 見る人を意識すること

ポートフォリオを見る人は、友達だけではありません。

先生、企業の採用担当者、制作会社の担当者、インターン先の人などが見る可能性があります。

そのため、画像の印象は少し整えておくとよいです。

見せたい印象	画像の方向性
丁寧に作っている	清潔感、余白、整理された構図
学習意欲がある	ノート、メモ、制作過程の雰囲気
実装できる	PC、コード、アプリ画面
デザインも意識している	色の統一、整ったレイアウト
仕事に使えそう	派手すぎず、信頼感のある見せ方

2. まずは作品を用意する

今回の授業では、自分の作品を1つ選びます。

まだ完成していない場合でも大丈夫です。

授業用として、途中段階の作品や架空のサンプルでも構いません。

作品の例

作品	見せ方
自分で作ったアプリ	スマートフォンのモックアップ
Webサイト	ノートPCの画面
デザイン課題	ポスターやカードとして表示
イラスト	展示会風の背景
動画作品	サムネイルや編集画面風
授業レポート	表紙デザイン風
SNS企画	投稿画面のモックアップ

使える素材

次のどれかを用意します。

1. 自分の作品のスクリーンショット
2. 自分の作品写真
3. 自分で作ったアプリ画面
4. Webサイトの画面
5. デザイン課題の画像
6. サンプルとして作った架空の作品画像

自分の作品がまだない場合は、次のような仮テーマでも大丈夫です。

家計簿アプリ
学習記録アプリ
学校イベント告知サイト
カフェ紹介ページ
ポートフォリオサイト
タスク管理アプリ

3. ポートフォリオ用の見せ方を選ぶ

作品の種類によって、見せ方を変えます。

作品の種類	おすすめの見せ方
スマホアプリ	スマートフォン画面のモックアップ
Webサイト	ノートPC画面のモックアップ
UIデザイン	タブレットやスマホに表示
ポスター	壁に掲示された展示風
商品・雑貨	白背景の商品撮影風
イラスト	ギャラリー展示風
動画作品	動画編集画面やサムネイル風

今回の基本は、スマートフォンのモックアップです。

4. 設計メモを作る

いきなり画像を作る前に、設計メモを作ります。

ワークシート1：ポートフォリオ画像の設計メモ

紹介したい作品：

作品の種類：

使う場所：

見せたい相手：

伝えたいこと：

主役：

背景：

雰囲気：

色：

構図：

絶対に変えたくないもの：

入れたくないもの：

画像サイズ：

記入例

紹介したい作品：
自分で作った家計簿アプリ

作品の種類：
スマホアプリ

使う場所：
ポートフォリオサイトのトップ画像、作品紹介スライド

見せたい相手：
先生、採用担当者、クラスメイト

伝えたいこと：
自分でアプリの画面を考え、実装まで行ったこと

主役：
スマートフォンに表示された家計簿アプリの画面

背景：
清潔感のある机、ノート、ペン、ノートPC、アイデアメモ

雰囲気：
清潔感、前向き、学生らしい、少しプロっぽい

色：
白、ライトグレー、淡いブルー、少しグリーン

構図：
中央または右側にスマートフォン。左側にタイトルを入れられる余白

絶対に変えたくないもの：
アプリ画面の色、文字、ボタン、レイアウト、機能

入れたくないもの：
実在ロゴ、企業名、架空の機能、読めない文字、人物の顔

画像サイズ：
16:9

5. 画像をアップロードして編集する場合

すでに自分のアプリ画面や作品画像がある場合は、その画像をアップロードして編集します。

プロンプト例

この画像を使って、ポートフォリオサイトのトップに使えるメインビジュアルを作成してください。

主役は、画像内にある自作アプリの画面です。

アプリ画面の色、文字、ボタン、レイアウト、機能は変更しないでください。
実際に存在しない機能や画面は追加しないでください。

スマートフォンのモックアップとして自然に表示し、周囲にはノート、ペン、ノートPC、アイデアメモを自然に配置してください。

背景は、白、ライトグレー、淡いブルーを中心にした清潔感のある机の上にしてください。

学生が自分でアプリを制作したことが伝わる、前向きで少しプロっぽい雰囲気にしてください。

左側には、後から作品タイトルを入れられる余白を作ってください。

画像内に新しい文字、実在ロゴ、企業名、架空の機能は追加しないでください。
画像サイズは16:9の横長にしてください。

ポイント

このプロンプトでは、作品を守るために次の指示を入れています。

アプリ画面の色、文字、ボタン、レイアウト、機能は変更しないでください。

この一文がとても大切です。

ポートフォリオでは、見栄えだけでなく、正確さも大事です。

6. 作品画像がない場合：テキストだけでモックアップを作る

まだ作品画像がない場合は、テキストだけでイメージ画像を作ることもできます。

ただし、この場合は「実際の完成作品」ではなく、イメージ案として扱います。

プロンプト例

ポートフォリオサイトのトップに使う16:9の横長メインビジュアルを作成してください。

テーマは「学生が制作した家計簿アプリ」です。

中央にスマートフォンのモックアップを配置し、画面には家計簿アプリらしいシンプルなUIが表示されているイメージにしてください。

周囲には、ノート、ペン、ノートPC、アイデアメモを自然に配置してください。

雰囲気は、清潔感があり、前向きで、学生の制作物を少しプロっぽく見せる印象にしてください。

色は、白、ライトグレー、淡いブルー、少しグリーンを中心にしてください。

左側には、後から作品タイトルを入れられる余白を作ってください。

画像内に読めない文字、実在ロゴ、企業名は入れないでください。
実際のアプリとして誤解されるような具体的な機能説明や実績は入れないでください。

注意点

テキストだけで作った画像は、見た目のイメージとしては使えます。

しかし、就職活動のポートフォリオで使う場合は、次のように説明を分ける必要があります。

これは作品のイメージビジュアルです。
実際の画面は別ページで掲載しています。

実際に作っていないものを、作ったように見せないことが大切です。

7. Nano Bananaで画像を生成・編集する

ここから実際に手を動かします。

作業手順

1. Google AI Studioを開く
2. Nano Bananaを使える画像生成・編集モデルを選ぶ
3. 作品画像がある場合はアップロードする
4. プロンプトを入力する
5. 画像を生成する
6. 生成画像を保存する
7. 元画像と比較する

8. 生成画像をチェックする

生成された画像が、ポートフォリオのメインビジュアルとして使えるか確認します。

チェックリスト

確認項目	○ / △ / ×	メモ
作品が主役に見える
作品の内容が変わっていない
実際に作っていない機能が追加されていない
文字やロゴが勝手に追加されていない
見せたい相手に合っている
ポートフォリオらしい清潔感がある
背景がごちゃごちゃしていない
後からタイトルを入れる余白がある
16:9で使いやすい
作品紹介として誤解を生まない

ワークシート2：生成画像の振り返り

良かった点：

気になった点：

作品そのものは変わっていないか：

ポートフォリオに使えそうな理由：

改善したいこと：

記入例

良かった点：
スマートフォンのモックアップとして見やすくなった。
背景が整理されて、ポートフォリオのトップ画像として使いやすそうだった。

気になった点：
アプリ画面の文字が一部変わっていた。
実際にはないグラフのようなものが追加されていた。
左側の余白が少なかった。

作品そのものは変わっていないか：
画面内容が少し変わっていたため、そのまま提出用には使いにくい。

ポートフォリオに使えそうな理由：
雰囲気はよく、作品紹介ページのアイキャッチとしては使えそう。

改善したいこと：
アプリ画面は元画像のままにする。
実在しない機能を追加しない。
左側の余白を増やす。

9. 改善プロンプトを作る

ポートフォリオ画像では、見た目が良くても、作品内容が変わっていたら注意が必要です。

改善プロンプト例

全体の雰囲気は良いです。

清潔感のある机の背景、スマートフォンのモックアップ、白と淡いブルーの色はそのまま残してください。

ただし、アプリ画面の内容が元画像から変わっているため、アプリ画面の文字、ボタン、色、レイアウト、機能は元画像のままにしてください。

実際には存在しないグラフ、ボタン、機能、説明文は追加しないでください。

左側に作品タイトルを入れたいので、左側の余白をもっと広くしてください。

画像内に新しい文字やロゴを追加しないでください。

ワークシート3：自分用の改善プロンプト

残したい点：

直したい点：

絶対に変えたくない点：

改善プロンプト：

10. 2回目を生成する

改善プロンプトを使って、もう一度生成します。

比較表

比較項目	元画像	1回目	2回目
作品の正確さ
見た目の良さ
余白
背景の整理
ポートフォリオ向き
誤解の少なさ

振り返り

2回目で良くなった点：

まだ気になる点：

実際にポートフォリオで使うならどの画像を選ぶか：

その理由：

11. ポートフォリオに入れる文章も考える

画像ができたら、作品紹介文も一緒に考えます。

ポートフォリオでは、画像だけでなく、次の情報も必要です。

項目	内容
作品名	何を作ったのか
制作目的	なぜ作ったのか
使用技術	何を使ったのか
担当範囲	自分が何をしたのか
工夫した点	どこを考えたのか
改善したい点	今後どう直したいのか

作品紹介文の型

作品名：

制作目的：

使用技術：

担当範囲：

工夫した点：

今後改善したい点：

記入例

作品名：
学生向け家計簿アプリ

制作目的：
毎月の支出を簡単に記録し、使いすぎを確認できるアプリを作るため。

使用技術：
Flutter、Firebase

担当範囲：
画面設計、UIデザイン、入力フォーム、支出一覧画面の実装。

工夫した点：
初めて使う人でも迷わないように、入力項目を少なくし、画面をシンプルにした。

今後改善したい点：
グラフ表示や月別集計機能を追加し、より振り返りやすくしたい。

12. 思ってもみない便利な使い方

1. 完成前の作品でも「方向性」を見せられる

まだ完成していないアプリやWebサイトでも、ポートフォリオのイメージ画像を作ることで、完成形の方向性を説明しやすくなります。

ただし、完成していないものは、必ず「制作中」と書きます。

現在制作中のアプリです。
画面設計と一部機能を実装しています。

2. 先生に相談するときの説明資料になる

作品の見せ方に悩んでいるとき、画像生成AIでいくつかの見せ方案を作り、先生に相談できます。

この作品を、ポートフォリオではどのように見せると良いでしょうか。

と相談しやすくなります。

3. 面接で話せる材料になる

ポートフォリオ画像を作る過程も、面接で話せる内容になります。

作品をただ載せるだけでなく、見る人に伝わりやすいように、モックアップ画像や紹介文も工夫しました。

これは、制作物そのものだけでなく、伝え方まで考えられる人という印象につながります。

4. チーム制作の紹介にも使える

グループで作った作品の場合は、自分の担当範囲を分かりやすく見せることが大切です。

画像の横に、次のように書くとよいです。

担当範囲：
UI設計、ログイン画面、トップページの実装

AIで作ったビジュアルと、自分の担当範囲をセットで見せると、伝わりやすくなります。

13. 実習課題

課題内容

自分の作品、またはサンプル作品を1つ選び、ポートフォリオ用のメインビジュアルを作ってください。

作品テーマ例

番号	テーマ
1	自分で作ったアプリ
2	自分で作ったWebサイト
3	授業で作ったデザイン課題
4	文化祭・学校イベントの企画サイト
5	ポートフォリオサイト自体
6	ハンドメイド作品
7	自分で決めた作品

提出するもの

1. 紹介したい作品
2. 作品の種類
3. 使う場所
4. 1回目のプロンプト
5. 1回目の生成画像
6. 改善プロンプト
7. 2回目の生成画像
8. 作品紹介文
9. 実際に作っていない要素を入れないために注意した点
10. まだ直したい点

提出テンプレート

紹介したい作品：

作品の種類：

使う場所：

見せたい相手：

1回目のプロンプト：

1回目の画像を見て良かった点：

1回目の画像で気になった点：

改善プロンプト：

2回目の画像を見て良くなった点：

作品紹介文：

実際に作っていない要素を入れないために注意した点：

まだ直したい点：

14. この節のまとめ

この節では、自分の作品をポートフォリオで魅力的に見せるためのメインビジュアルを作りました。

大切なポイントは、次の通りです。

ポートフォリオでは、作品そのものだけでなく、見せ方も大切。
モックアップとは、作品を実際に使われているように見せる画像のこと。
自分のアプリやWebサイトは、スマホやPCの画面に表示して見せると伝わりやすい。
背景や小物は作品を引き立てるために使う。
実際に作っていない機能や画面を追加しない。
作品画面の文字、色、レイアウト、機能が変わっていないか確認する。
ポートフォリオでは、画像と作品紹介文をセットで用意する。
完成前の作品は、必ず「制作中」として扱う。
見せ方を工夫することで、作品の魅力が伝わりやすくなる。