Webデザインのポートフォリオ作品説明はどう書く？バナー・LPの例文

10/08/2026

Webデザインのポートフォリオに作品を載せるとき、「画像のほかに何を書けばよいのか」と迷うことがあります。

「見やすくしました」「おしゃれにしました」だけでは、何を考えて制作したのか、自分がどの作業を担当したのかを伝えにくいかもしれません。

作品説明では、制作目的・対象者・担当範囲・工夫した点を、作品画像と結び付けて書きましょう。自主制作の場合は、架空の設定と、実際に行った作業を分けて伝えることも大切です。

この記事では、作品説明に書きたい項目、バナー・LPの説明例、文章をまとめる手順、公開前の確認ポイントを紹介します。

ポートフォリオの作品説明は、制作の前提と判断を伝える文章

作品画像からは、配色や配置、文字の大きさなどを確認できます。

一方、画像だけでは、誰に向けた制作物なのか、何を優先したのか、どこまで自分で作ったのかが分からない場合があります。

作品説明は、その判断材料を補う文章です。

Nielsen Norman GroupのUXデザイン向けポートフォリオの記事でも、完成画像だけでなく、取り組んだ課題、自分の役割、制作過程などを伝える考え方が紹介されています。

参考：Nielsen Norman Group「5 Steps to Creating a UX-Design Portfolio」（英語）

この記事では、その考え方を踏まえ、未経験者のバナー・LPの自主制作で書ける内容を整理します。実際に行っていない調査や、測定していない成果を加える必要はありません。

ポートフォリオ全体の構成については、Webデザイン副業のポートフォリオについての記事も参考にしてください。

プロフィールと、作品ごとの説明を分ける

プロフィールでは、対応できる制作物や使用ツール、連絡時間など、自分についての共通情報を伝えます。

作品説明では、その作品で実際に行ったことを伝えます。

例えば、プロフィールに「Photoshopでバナーを制作できます」と書いた場合、作品説明では、どの画像加工やレイアウト調整を行ったのかを具体的に示します。

すべての作品に同じ自己紹介を繰り返すより、作品ごとの条件と工夫を整理しましょう。

共通の自己紹介を整えたい方は、Webデザイン副業のプロフィールについての記事で例文を紹介しています。

自主制作の設定と、実際に行ったことを分ける

自主制作では、制作目的や対象者を自分で設定できます。

ただし、その設定を、実際の依頼者から受けた条件や、調査で確認した事実のように書かないことが大切です。

例えば、次のように区別します。

「架空の講座を想定した自主制作です」
「対象者は、整理収納を初めて学ぶ社会人と設定しました」
「写真と文章の配置、文字サイズの調整を行いました」
「実際の広告配信や申し込み数の測定は行っていません」

スクール課題で条件が指定されていた場合は、課題で与えられた条件と、自分で考えた部分を分けます。

テンプレートや用意された素材を使った場合も、何を利用し、どこを自分で調整したのかが分かるようにしましょう。

作品説明に書きたい6つの項目

作品説明は、制作の記録から必要な情報を選んでまとめます。

この記事では、次の6項目を整理の出発点にします。必ずすべてを同じ長さで書く必要はありません。

項目	書く内容
1．作品の概要	制作物の種類、自主制作・課題・実案件の区別
2．目的と対象者	何を伝えたい制作物か、誰を対象にしたか
3．担当範囲	自分が行った作業と、担当していない作業
4．使用ツールと制作条件	ツール、サイズ、素材や原稿の準備方法など
5．工夫した点	目的に合わせて、何をどう調整したか
6．改善した点と確認結果	修正した内容、確認できたこと、残っている課題

制作時間を載せる場合は、記録がある範囲で書きます。

画像探しや原稿作成、修正、書き出し後の確認を含むのかなど、時間の数え方も添えると誤解を防ぎやすくなります。

正確な記録がない場合は、無理に数字を入れないようにしましょう。

目的と対象者は、デザインの前提として書く

「講座のバナーを作りました」だけでは、どの情報を重視したのかが伝わりにくくなります。

例えば、次のように前提を具体的にします。

「架空のパン作り体験の開催案内として制作しました。初めて参加する人が、体験内容と開催日時を確認できることを目的にしています。」

そのうえで、目的とデザインのつながりを説明します。

体験内容を伝えるために、完成したパンの写真を配置した
開催日時を確認しやすくするために、情報を一つのまとまりにした
申し込み先を見つけやすくするために、案内部分の周囲に余白を取った

対象者を具体的に設定しても、調査していない好みを断定する必要はありません。

「この年代はこの色が好き」と書くより、どの情報を伝えるために、その色や配置を選んだのかを説明しましょう。

担当範囲と使用ツールは、実際の作業に結び付ける

「LPを制作しました」という表現だけでは、構成・文章・デザイン・実装・公開のすべてを担当したように受け取られる場合があります。

デザインのみであれば、その範囲を明記しましょう。

例えば、次のように書けます。

担当：構成案、ワイヤーフレーム、デザイン
原稿：自主制作のため、自分で作成
写真：素材を利用。写真撮影は未実施
実装：HTML・CSSのコーディング、フォーム設定、公開作業は未実施
使用ツール：Figmaで構成とレイアウトを作成

ツール名を並べるだけでなく、どの工程で使ったのかを書くと、作業内容が伝わりやすくなります。

複数人で制作した作品は、チーム全体の担当範囲と、自分の担当範囲を分けて記載してください。

工夫と改善は、「目的・変更・理由」で説明する

工夫した点を書くときは、次の順番で整理してみましょう。

何を伝えたい、または確認しやすくしたいと思ったか
そのために、どこをどう調整したか
なぜ、その方法を選んだか

例えば、「見やすくしました」を具体化すると、次のようになります。

「開催日時が写真の上に重なっていたため、文字の背景に帯を追加しました。写真の明暗に左右されず、日時を確認しやすくすることを意図しています。」

ここで伝えているのは、変更した内容と意図です。実際に確認していない限り、「誰にでも読みやすくなった」と断定しないようにしましょう。

修正前後の画像を載せる場合は、変更箇所を示すと説明との対応が分かりやすくなります。

実際の依頼で修正を受けた場合の確認方法は、Webデザイン副業の修正依頼についての記事でも紹介しています。

バナー・LPの作品説明例

以下は、この記事用に作成した架空の自主制作の説明例です。筆者や特定の制作者の実績を紹介するものではありません。

自分の作品に使う場合は、目的・担当範囲・工夫した点を、実際に制作した内容へ書き換えてください。

作品の条件をこれから考える方は、副業向けのWebデザイン制作課題の記事も参考にしてください。

バナーの説明例：架空のパン作り体験の開催案内

写真と開催情報を配置した、自主制作のバナーを想定しています。

作品概要

架空の「週末のパン作り体験」の開催案内バナーです。実際の店舗からの依頼ではなく、情報の優先順位と文字の配置を練習するために制作しました。

目的と対象者

初めてパン作りを体験したい人が、体験内容・開催日時・申し込み先を確認できることを目的に設定しました。

担当範囲と使用ツール

自分で用意した原稿と写真素材を使い、Photoshopで写真の切り抜き、明るさの調整、文字と画像の配置、画像の書き出しを行いました。写真撮影や実際の広告配信は行っていません。

工夫した点

体験内容が最初に伝わるよう、講座名とパンの写真を大きく配置しました。開催日時は一つのまとまりにし、申し込み先の案内とは余白で区切っています。

改善した点と確認結果

初稿では日時の文字が写真と重なっていたため、背景に帯を追加しました。書き出した画像を縮小して確認し、日時の改行も調整しています。

実際の参加者による確認や、申し込み数の測定は行っていません。

この例を使う場合も、切り抜きや縮小表示の確認を実際に行っていなければ、その記述をそのまま使わないでください。

作品画像には、どこが講座名・開催日時・申し込み案内なのかを説明と対応させます。必要に応じて、全体画像に加えて該当部分の拡大画像を添えましょう。

LPの説明例：架空のオンライン整理収納講座

講座の内容を紹介する、デザインのみの自主制作LPを想定しています。

作品概要

架空のオンライン整理収納講座を紹介するLPデザインです。制作目的と掲載情報を自分で設定した自主制作で、実際のサービスとして公開・運用したものではありません。

目的と対象者

整理収納を初めて学ぶ社会人が、講座の内容と受講方法を確認し、申し込みを検討できるページを目指しました。

担当範囲と使用ツール

原稿、構成案、ワイヤーフレーム、デザインを作成しました。Figmaを使用し、パソコンとスマートフォン向けの画面を制作しています。

コーディング、申し込みフォームの設定、公開作業は行っていません。掲載した写真は素材を利用しています。

工夫した点

ページは、講座の概要、学べる内容、受講方法、申し込み案内の順に構成しました。見出しだけでも各部分の内容を把握しやすいよう、項目名と余白をそろえています。

スマートフォン向けの画面では、横に並べた項目を縦に配置し、長い文章の改行を調整しました。

改善した点と確認結果

初稿で分散していた受講方法の説明を、一つの部分にまとめました。説明と申し込み案内を続けて確認できるよう、掲載順も見直しています。

実装後の端末表示、利用者による操作、申し込み率は検証していません。

スマートフォン向けのデザインを作ったことと、実装したページが各端末で動くことは別です。

デザイン画面だけを制作した場合は、「スマートフォンで動作確認済み」と書かないようにしましょう。

LP全体ではなく、最初の画面だけを制作した場合も、その範囲を作品名や概要に明記します。

作品説明をまとめる3つの手順

最初から完成した文章を書こうとするより、制作の記録を集めてから整理すると進めやすくなります。

1．制作メモから、説明に使う事実を拾う

作品ごとに、次の記録を確認します。

制作時に設定した目的と条件
自分で作ったものと、用意されていたもの
使用したツールと作業内容
初稿から変更した箇所
自分や第三者が確認した内容
まだ確認できていないこと

記録が足りない場合は、現在の作品を見直して分かることから整理します。

制作当時の考えが思い出せないときは、理由を後から作り上げないようにしましょう。「現在見直して気付いたこと」として記録する方法もあります。

AIに文章の整理を手伝ってもらう場合は、作業の事実を先に渡し、出力された文章に未実施の調査や架空の成果が加わっていないか確認してください。

2．短い概要を書いてから、画像と説明を対応させる

まずは、作品の種類・制作目的・担当範囲を短くまとめます。

例えば、バナーなら次のような概要です。

架空のパン作り体験の開催案内バナーです。講座内容と日時を確認できることを目的に、Photoshopで画像加工とレイアウトを制作しました。

そのあとに、詳しい説明を加えます。

文章の長さに固定の正解はありません。重要な情報を先に書き、工夫した点は作品画像を見ながら理解できる位置に置きましょう。

読みやすく整理する方法には、次のようなものがあります。

概要、担当範囲、工夫した点を見出しで分ける
一つの段落で説明する内容を絞る
全体画像と拡大画像の役割を分ける
修正前後の画像には、それぞれの状態を明記する
同じ作品の説明を、複数の場所で長く繰り返さない

3．作品説明と、画像の代替テキストを分けて考える

Webページに作品を掲載する場合は、作品説明の本文と、画像の代替テキストを分けて考えます。

本文では、制作目的や担当範囲、工夫した点を伝えます。

代替テキストでは、画像がそのページで伝えている内容を、周囲の文章との関係も踏まえて表します。長い作品説明を、そのまま画像の代替テキストに入れる必要はありません。

W3Cの画像に関する案内でも、情報を伝える画像の代替テキストは、画像が伝える意味や内容を表すものとされています。

参考：W3C WAI「Informative Images」（英語）

例えば、LPの構成を紹介する画像なら、「架空の整理収納講座LP。講座概要、学べる内容、受講方法、申し込み案内を縦に配置したデザイン」のように、その画像で伝える内容を具体化できます。

これは一例です。画像の目的と、本文ですでに説明している内容に合わせて考えましょう。

また、作品内の文字が小さくて読めない場合は、代替テキストだけで補おうとせず、拡大画像や本文の説明も用意します。

公開前は、作品画像・説明・応募文の一致を確認する

説明文を書いたら、作品画像と見比べて確認しましょう。

プロフィールや応募文にも同じ作品を紹介する場合は、担当範囲や使用ツールの記述が一致しているかを見直します。

応募時の作品紹介は、Webデザイン副業の応募文についての記事も参考にしてください。

確認すること	見直しのポイント
作品の種類	自主制作・スクール課題・実案件の区別が分かるか
目的と対象者	架空の設定を、実際の依頼条件や調査結果のように書いていないか
担当範囲	担当していない原稿作成・撮影・実装などを含めていないか
工夫した点	説明した変更を、画像上で確認できるか
確認結果	実際に確認した内容と、期待する効果を分けているか
公開する情報	作品・素材の掲載条件や、依頼者の情報の扱いを確認したか
表示	スマートフォンでも画像と説明を読めるか