デザイン制作ツールキット
未経験からでも、ポートフォリオに載せられる作品をつくるための「お題」のセットです。お題はすべて、化粧品・食品・飲料などの架空の商品を「売るため」のデザイン。架空の依頼主からの依頼書・素材・作業用ファイル（Figma用とAdobe用。3DCGは三面図などの素材一式）がそろっていて、実際の仕事と同じ流れで制作を進められます。
依頼主・商品・人物・住所・数値はすべて架空のものです。素材は、実際の仕事に近い写真（Pexels の無料の写真。撮影者はキットに記載）と自前のイラスト・商品の画像です。このお題の作品づくりと、ポートフォリオ・SNSへの掲載に利用できます（素材そのものの再配布・販売、写真をロゴに使うことはできません）。
使い方
- お題を選ぶ目指す職種のお題から始めましょう。職種ごとに見られるところは 職種別の構成ガイド へ。
- 依頼書を読む依頼の背景・課題・ターゲットを確かめます。
- ファイルを入手するFigma か Adobe（Photoshop・Illustrator・After Effects）の、使う方を選びます。
- 進め方にそって作るラフを3案作り、選んだ理由も残しておきます。
- ポートフォリオに載せる依頼の課題・考えたこと・工夫を、作品説明の下書きツール で説明文にまとめます。手に持った写真や売り場のイメージは 作品の撮り方・モックアップのガイド を参考に。
グラフィックデザイン
チラシ・パンフレット・ポスターなど、印刷して配る・貼るもの
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題1
美容液の新聞折込チラシ（A4・両面）
- グラフィックデザイン
- 初級
- 目安 2週間（実働 15時間ほど）
うるおい美容液の「初回限定トライアル」を申し込んでもらうための、A4両面のチラシを作ります。
- 依頼主
- みなもスキン（架空） 港町・みなと市で生まれたスキンケアのブランド。通販（Web・電話）と、駅ビルの小さな店で売っている。
- 作るもの
- チラシ 表（A4・210×297mm）、チラシ 裏（A4・210×297mm）
- 素材
- ロゴ（みなもスキン）、ロゴ（白・写真や色の上用）、商品の画像：美容液（背景透明）、写真：日の光がきらめく水面、写真：美容液とクリームの質感、写真：スポイトと手、アイコン：セラミド、アイコン：ヒアルロン酸、アイコン：海藻エキス、QRコード（見本・読み取れません）
かんたんな進め方
- 依頼書を読むターゲットが新聞を開いてチラシを手にとる場面を想像し、3秒で伝えることを1行で書く
- 情報に順位をつける価格・申し込み方法・商品のよさを、表と裏のどちらに置くかを決める
- ラフを3案主役（商品・価格・キャッチコピー）を変えた3案を、A4で印刷して見比べる
- 仕上げる選んだ案を仕上げ、注記・塗り足し・文字の位置を確かめる
- 作品ページにまとめる表と裏・ラフ・手に持った写真（合成）を並べ、工夫と期待する成果を書く
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題2
レトルトカレーの三つ折りパンフレット
- グラフィックデザイン
- 中級
- 目安 2週間（実働 20時間ほど）
店頭と通販の箱に入れる、3種のレトルトカレーと冬ギフトを紹介する三つ折りパンフレット（A4）を作ります。
- 依頼主
- 港町キッチン ばんや（架空） みなと港のそばにある、創業40年ほどのカレーの食堂。店の味をレトルトにして、店頭と通販で売っている。
- 作るもの
- 外面（表紙・裏表紙・内側に折り込む面）、中面（3種の紹介と冬ギフト）
- 素材
- ロゴ（ばんや）、ロゴ（白・色地用）、商品の画像：牛すじカレー、商品の画像：ごろごろ野菜カレー、商品の画像：スパイスキーマカレー、写真：牛すじカレー、写真：ごろごろ野菜カレー、写真：スパイス（キーマ）、写真：木のテーブルとスパイス、写真：野菜、ギフトの箱（のしつき・背景透明）、店までの地図、QRコード（見本・読み取れません）
かんたんな進め方
- 折って確かめるA4の紙を巻き三つ折りにし、開く順番に面の番号と役割を書きこむ
- 情報を分ける表紙・裏表紙・折り込む面・中面に、何を置くかを決める
- ラフを3案表紙の主役を変えた3案を作り、1案を選んだ理由を書く
- 仕上げる印刷して折り、折り線と文字の位置・塗り足しを確かめる
- 作品ページにまとめる外面と中面・折った状態の写真（合成）を並べ、工夫を書く
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題3
クラフトソーダの新発売の店頭ポスター（B2）
- グラフィックデザイン
- 初級
- 目安 2週間（実働 15時間ほど）
スーパーや駅の売店の冷蔵の棚の近くに貼る、新発売の缶ソーダ3種のB2ポスターを作ります。
- 依頼主
- みなとソーダ（架空） みなと市の港町で、地元の果物を使ったクラフトソーダを作っている小さな飲料メーカー。スーパー・駅の売店・公式ストアで売っている。
- 作るもの
- B2ポスター（515×728mm）1枚
- 素材
- ロゴ（みなとソーダ）、ロゴ（白・写真や色の上用）、商品の画像：瀬戸内レモンソーダ（缶）、商品の画像：ゆずソーダ（缶）、商品の画像：白桃ソーダ（缶）、写真：夏の空と海、写真：輪切りのレモン、写真：グラスに落ちるレモン、写真：水滴、水しぶき（背景透明）、水滴（背景透明）
かんたんな進め方
- 売り場を見るスーパーの飲料の売り場を観察し、5m離れて目に入るポスターと、その理由を書き出す
- 情報に順位をつける遠くから見せる情報（何の商品か・新発売）と、近くで読む情報（価格・味）に分ける
- ラフを3案背景と缶の見せ方を変えた3案を、A4で印刷して離れて見比べる
- 仕上げる選んだ案を仕上げ、塗り足しと文字の位置を確かめる
- 作品ページにまとめる売り場に貼ったイメージ（合成）も作り、工夫を書く
パッケージデザイン
缶のラベルや食品の袋など、売り場で手に取られるもの
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題4
レトルトカレーのパウチ（しずる感の写真合成）
- パッケージデザイン
- 中級
- 目安 3週間（実働 25時間ほど）
店の味のレトルトカレー「牛すじカレー」のパウチ（表・裏）を作ります。料理の写真に湯気などを合成して、おいしそうに見せる（しずる感）のがテーマです。
- 依頼主
- 港町キッチン ばんや（架空） みなと港のそばにある、創業40年ほどのカレーの食堂。店の味をレトルトにして、店頭と通販で売っている。
- 作るもの
- パウチ 表（130×180mm）、パウチ 裏（130×180mm）、立体に見せたパウチの画像（売り場や通販で使う）
- 素材
- ロゴ（ばんや）、ロゴ（白・色地用）、写真：牛すじカレー（主役の候補）、写真：煮込んだ牛肉のアップ、写真：白い背景のカレー（切り抜きの練習）、写真：スパイス、写真：野菜、湯気（背景透明）、アイコン：湯せん、アイコン：電子レンジ、バーコード（見本・実在しない）
かんたんな進め方
- 売り場を見るスーパーのレトルト食品の棚を観察・撮影し、目に入る順番と選ばれ方を書き出す
- 写真を選ぶ素材の料理の写真から主役を選び、切り抜いて湯気・スパイスを合成する（しずる感）
- ラフを3案写真の大きさと商品名の見せ方を変えた3案を作り、1案を選んだ理由を書く
- 裏を作る一括表示・作り方・バーコードを、読みやすい順に並べる
- 作品ページにまとめる表と裏・合成の前と後・立体に見せた画像を並べ、工夫を書く
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題5
クラフトソーダの缶のラベル（果物としずくの写真合成）
- パッケージデザイン
- 中級
- 目安 3週間（実働 25時間ほど）
クラフトソーダ3種（瀬戸内レモン・ゆず・白桃）の缶のラベルを作ります。果物の写真に水しぶき・水滴を合成して、冷たくておいしそうに見せる（しずる感）のがテーマです。
- 依頼主
- みなとソーダ（架空） みなと市の港町で、地元の果物を使ったクラフトソーダを作っている小さな飲料メーカー。スーパー・駅の売店・公式ストアで売っている。
- 作るもの
- 缶のラベル（展開図・207×110mm）3種、缶に巻いた画像（3種を並べたもの）
- 素材
- ロゴ（みなとソーダ）、ロゴ（白・色地用）、写真：輪切りのレモン、写真：水に落ちるレモン（白い背景・切り抜きの練習）、写真：水面に浮かぶレモン、写真：葉つきのゆず、写真：切った桃、写真：木になった桃、写真：水滴（冷たさの参考）、水しぶき（背景透明）、水滴（背景透明）、リサイクルのマーク（見本）、バーコード（見本・実在しない）
かんたんな進め方
- 棚を見るコンビニやスーパーの冷蔵の棚を観察し、3m離れて目に入る缶と、その理由を書き出す
- しずるを作る果物の写真を切り抜き、水しぶき・水滴を合成する。冷たく見える光と色を考える
- ラフを3案正面の見せ方を変えた3案を作り、缶に巻いた画像で見比べて1案を選ぶ
- 3種に広げる選んだ案を3種に広げ、そろえるところと変えるところを確かめる
- 作品ページにまとめる展開図・合成の前と後・3種を並べた缶の画像と、工夫を書く
グッズデザイン
キャラクターを使ったキーホルダーなど、ノベルティや雑貨
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題6
キャラクターのクリスマスのアクリルキーホルダー
- グッズデザイン
- 初級
- 目安 2週間（実働 15時間ほど）
公式キャラクター「ぷくまる」を使った、クリスマスのノベルティ（3本買うともらえるアクリルキーホルダー）と台紙・告知画像を作ります。
- 依頼主
- みなとソーダ（架空） みなと市の港町で、地元の果物を使ったクラフトソーダを作っている小さな飲料メーカー。スーパー・駅の売店・公式ストアで売っている。
- 作るもの
- アクリルキーホルダーの入稿データ（60×60mm以内・絵柄・白版・カットライン）、台紙（60×100mm）、キャンペーンの告知画像（1080×1080px）
- 素材
- キャラクターの設定画（きまり）、ぷくまる：正面（背景透明）、ぷくまる：手をふる（背景透明）、ぷくまる：サンタの帽子とプレゼント（背景透明）、ひいらぎ（背景透明）、星（背景透明）、雪の結晶（背景透明）、ベル（背景透明）、ロゴ（白・色地用）、ロゴ（みなとソーダ）、商品の画像：瀬戸内レモンソーダ（缶）、商品の画像：ゆずソーダ（缶）、商品の画像：白桃ソーダ（缶）、写真：金色の光のぼけ、写真：あたたかい色の光のぼけ、写真：赤いオーナメント、写真：プレゼントとオーナメント、写真：クラフト紙で包んだプレゼント
かんたんな進め方
- 設定画を読むキャラクターのきまりを読み、ほかの会社のキャラクターのグッズを観察して、持ちたくなる理由を書く
- ラフを3案ポーズ・小物・形を変えた3案を描き、1案を選んだ理由を書く
- 入稿データを作る絵柄・白版・カットラインをレイヤーに分けて作り、60×60mmに収める
- 台紙と告知画像台紙と告知画像を作り、キーホルダーを付けた見え方を確かめる
- 作品ページにまとめるラフ・入稿データ・キーホルダーの完成イメージ（合成）・告知画像を並べ、工夫を書く
UI/UXデザイン
通販アプリなど、使う人が操作して買い物をする画面
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題7
スキンケアの通販アプリの画面（3画面）
- UI/UXデザイン
- 中級
- 目安 3週間（実働 25時間ほど）
スキンケアの通販アプリの、ホーム・商品の詳細・カートの3画面を作ります。定期便とまとめ買いを選んでもらう工夫がテーマです。
- 依頼主
- みなもスキン（架空） 港町・みなと市で生まれたスキンケアのブランド。通販（Web・電話）と、駅ビルの小さな店で売っている。
- 作るもの
- ホーム（375×812）、商品の詳細（375×812）、カート（375×812）
- 素材
- ロゴ（みなもスキン）、商品の画像：美容液、商品の画像：化粧水、商品の画像：クリーム、写真：日の光がきらめく水面、写真：美容液とクリームの質感、アイコン：ホーム、アイコン：さがす、アイコン：お気に入り、アイコン：カート、アイコン：マイページ、アイコン：お知らせ、アイコン：クーポン、アイコン：戻る
かんたんな進め方
- 利用者を知るターゲットを2人（はじめての人・リピーター）の人物像にし、買うときに迷う点を書く
- 画面の流れを描くホーム → 商品 → カート → 購入 の流れと、それぞれで決めてほしいことを書く
- ワイヤーフレーム3画面のワイヤーフレームを作り、家族や友人に操作してもらう
- 仕上げる見た目を仕上げ、文字の大きさと押す場所の大きさを確かめる
- 作品ページにまとめる流れの図・ワイヤーフレーム・完成の画面と、直したことを書く
Webデザイン
LP（申込ページ）やバナーなど、画面で見て申し込む・買うもの
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題8
美容液のトライアル申込LP
- Webデザイン
- 中級
- 目安 2週間（実働 20時間ほど）
美容液の「初回限定 7日間トライアル」を申し込んでもらうためのLPを、スマホとPCで作ります。
- 依頼主
- みなもスキン（架空） 港町・みなと市で生まれたスキンケアのブランド。通販（Web・電話）と、駅ビルの小さな店で売っている。
- 作るもの
- LP 1ページ（スマホ：幅375px）、PCのファーストビュー（幅1440px）
- 素材
- ロゴ（みなもスキン）、ロゴ（白・写真や色の上用）、商品の画像：美容液（背景透明）、写真：日の光がきらめく水面、写真：美容液とクリームの質感、写真：スポイトと手、アイコン：セラミド、アイコン：ヒアルロン酸、アイコン：海藻エキス
かんたんな進め方
- 依頼書を読むターゲットを1人の人物像にし、広告を見てから申し込むまでの気持ちの流れを書く
- 構成を考える情報の順番を決め、スマホのワイヤーフレームを描く
- ラフを3案ファーストビューの見せ方を変えた3案を作り、1案を選んだ理由を書く
- 仕上げるスマホを仕上げ、PCのファーストビューも作る。ボタンの押しやすさを確かめる
- 作品ページにまとめる課題・考えたこと・工夫・期待する成果と、ワイヤーフレームを載せる
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題9
レトルトカレーの冬ギフトLP
- Webデザイン
- 中級
- 目安 2週間（実働 20時間ほど）
お歳暮の季節に向けて、レトルトカレー「3種6食のギフトセット」を注文してもらうLPを、スマホとPCで作ります。
- 依頼主
- 港町キッチン ばんや（架空） みなと港のそばにある、創業40年ほどのカレーの食堂。店の味をレトルトにして、店頭と通販で売っている。
- 作るもの
- LP 1ページ（スマホ：幅375px）、PCのファーストビュー（幅1440px）
- 素材
- ロゴ（ばんや）、ロゴ（白・写真や色の上用）、ギフトの箱（のしつき・背景透明）、商品の画像：牛すじカレー、商品の画像：ごろごろ野菜カレー、商品の画像：スパイスキーマカレー、写真：牛すじカレー、写真：ごろごろ野菜カレー、写真：スパイス（キーマ）、写真：木のテーブルとスパイス、アイコン：煮込む時間、アイコン：のし・包装、アイコン：お届け
かんたんな進め方
- 依頼書を読む「贈る人」と「受けとる人」を1人ずつ人物像にし、贈る人が気にすることを書き出す
- 構成を考える情報の順番を決め、スマホのワイヤーフレームを描く
- ラフを3案ファーストビューの主役を変えた3案を作り、1案を選んだ理由を書く
- 仕上げるスマホを仕上げ、PCのファーストビューも作る
- 作品ページにまとめる課題・考えたこと・工夫・期待する成果と、ワイヤーフレームを載せる
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題10
クラフトソーダの公式ストアのバナー一式
- Webデザイン
- 初級
- 目安 1週間（実働 10時間ほど）
公式ストアの「飲みくらべ12本セット」を売る広告のバナーを、サイズ違いで3つ作ります。
- 依頼主
- みなとソーダ（架空） みなと市の港町で、地元の果物を使ったクラフトソーダを作っている小さな飲料メーカー。スーパー・駅の売店・公式ストアで売っている。
- 作るもの
- SNS広告 横長（1200×628px）、正方形（1080×1080px）、ディスプレイ広告（300×250px）
- 素材
- ロゴ（みなとソーダ）、ロゴ（白・写真や色の上用）、商品の画像：瀬戸内レモンソーダ（缶）、商品の画像：ゆずソーダ（缶）、商品の画像：白桃ソーダ（缶）、写真：水滴、写真：青緑の背景に輪切りのレモン、写真：氷と黄色いソーダ、写真：夏の空と海、水滴（背景透明）
かんたんな進め方
- 依頼書を読む誰に・何を一番伝えるかを1行で書く
- いちばん大きいサイズから1200×628 で配置を決める
- ラフを3案背景・缶の大きさ・価格の見せ方を変えた3案。1案を選んだ理由を書く
- ほかのサイズへ正方形と 300×250 に展開し、小さいサイズで読めるか確かめる
- 作品ページにまとめる3サイズを並べ、それぞれで工夫したことを書く
映像デザイン
SNS の動画広告など、動きで伝えるもの
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題11
クラフトソーダのSNS縦型動画広告（15秒）
- 映像デザイン
- 中級
- 目安 2週間（実働 20時間ほど）
公式ストアの「飲みくらべ12本セット」を売る、SNS の15秒の縦型動画広告を作ります。絵コンテから書き出しまで。
- 依頼主
- みなとソーダ（架空） みなと市の港町で、地元の果物を使ったクラフトソーダを作っている小さな飲料メーカー。スーパー・駅の売店・公式ストアで売っている。
- 作るもの
- 縦型の動画 15秒（1080×1920・30fps・MP4）、絵コンテ（4カット）
- 素材
- ロゴ（みなとソーダ）、ロゴ（白・写真や色の上用）、商品の画像：瀬戸内レモンソーダ（缶）、商品の画像：ゆずソーダ（缶）、商品の画像：白桃ソーダ（缶）、写真：グラスに落ちるレモンと水しぶき、写真：輪切りのレモン、写真：水面に浮かぶレモン、写真：氷と黄色いソーダ、写真：水滴、写真：夏の空と海、水しぶき（背景透明）、水滴（背景透明）
かんたんな進め方
- 伝えることを決める依頼書を読み、見た人に一番伝えたいことを1文にする
- 絵コンテを描く4カットの画面・秒数・動き・文字をひな形に書く
- 動きを試す最初の1秒のつかみを3案作り、1案を選んだ理由を書く
- 仕上げて書き出すMP4 で書き出し、音を消してスマホで見て、文字が読めるか確かめる
- 作品ページにまとめる絵コンテ・代表のコマ・動画の URL を並べ、工夫を書く
CGデザイン
3DCG の商品画像など、立体で見せるもの
-
仕上がりイメージ（見本） 
入っている素材（写真とイラスト） お題12
美容液のボトルの3DCG商品ビジュアル
- CGデザイン
- 中級
- 目安 3週間（実働 25時間ほど）
発売前の美容液のボトルを、三面図をもとに3DCGで作り、通販の商品画像と広告のキービジュアルを仕上げます。
- 依頼主
- みなもスキン（架空） 港町・みなと市で生まれたスキンケアのブランド。通販（Web・電話）と、駅ビルの小さな店で売っている。
- 作るもの
- 通販の商品画像（白背景・2000×2000px）正面と斜め45°の2枚、広告のキービジュアル（1920×1080px）1枚
- 素材
- 三面図（寸法入り）、ラベルの絵柄（26×40mm）、ロゴ（みなもスキン）、写真：水の底にゆれる光（光の参考）、写真：水面（キービジュアルの雰囲気の参考）、写真：日の光と影の中のガラスのびん（光と影の参考）、写真：美容液の質感（中身の参考）
かんたんな進め方
- 資料を読む依頼書と三面図を読み、身の回りのガラスのびんを観察・撮影して参考にする
- モデリング三面図の数字（実寸）に合わせて、本体・首・キャップ・スポイトを作る
- 質感すりガラス・金属・ゴム・液体のマテリアルを作り、ラベルを貼る
- 光とカメラ商品画像（白背景）とキービジュアルの光とカメラを決め、レンダリングする
- 作品ページにまとめるワイヤーフレーム表示・質感の比較・完成の画像を並べ、工夫を書く