Webデザインのポートフォリオの作り方|未経験の自主制作と作品説明
※本記事にはPRを含む場合があります。
こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。
Webデザインを学び始めると、「ポートフォリオに載せる作品がない」「架空のサイトでもよいのか」「見た目を整えたのに、何を書けば伝わるか分からない」と迷うことがあります。参考作品をたくさん見るほど、最初の一作が大きくなり、完成が遠のいてしまう方もいるのではないでしょうか。
最初のポートフォリオは、誰のどんな行動を助けたいかを決め、小さな自主制作を完成させ、その判断の理由まで説明するところから始めましょう。完成画像だけでなく、対象者、目的、担当範囲、情報の並べ方、比較した案、改善した点を添えると、作品を読む人が制作の考え方を理解しやすくなります。
この記事では、未経験から副業や転職を考える方に向けて、自主制作の課題選び、情報設計と配色の判断、改善前後の記録、作品説明の例文、公開前の確認まで具体化します。題材や制作例は説明用の架空課題で、実在する顧客の依頼や採用実績、売上改善を示すものではありません。必要な作品数や形式は応募先の指定を優先してください。
主に扱うのは、Webページの見せ方とデザインの説明です。プログラミングの機能実装やコードの見せ方とは分けて考えます。公式資料の確認日は2026年10月3日です。本文の判断表、課題、説明文は独自の練習用見本で、各章の画像は生成イメージです。実際の制作画面や実在作品のスクリーンショットではありません。
Webデザインのポートフォリオで、何を判断してもらうかを決める

作品を並べる前に、目指す仕事を一つ選ぶ
バナー制作を頼みたい人と、サービスサイト全体の設計を頼みたい人では、最初に知りたいことが違います。前者なら、限られた面積で伝える情報を絞る力や、複数のサイズへ展開する考え方が分かると判断しやすくなります。後者なら、ページ内の情報の順序、スマートフォンでの見せ方、申し込みまでの導線などが重要な材料になります。
まずは、自分が次に応募したい仕事を一つ仮置きします。例えば、地域の小規模な事業者向けに一ページの案内を作る仕事、商品紹介のバナーを作る仕事、既存サイトの一部を更新する仕事です。すべてをできるように見せるより、最初の制作物で何を確かめてもらうかを絞る方が、課題と作品説明がつながります。
転職を目指す場合は、応募先が求める提出方法、掲載情報、担当領域を確認します。副業で案件へ応募する場合も、募集内容に合う作品が必要です。一般的なポートフォリオの型だけを守っても、相手の指定から外れていれば見てもらいにくくなります。作る前に提出先の条件を見る習慣を付けましょう。
完成画像と、制作の考え方を一組にする
きれいな完成画像は、作品の雰囲気を伝える入口になります。ただ、画像だけでは、どんな課題に対して作ったのか、自分がどこを担当したのか、どの部分を考えて決めたのかが分かりません。目的や判断の説明を添えることで、見た目を選んだ理由が伝わります。すべての操作手順を書く必要はなく、重要な選択へ絞って説明します。
例えば、イベント案内ページで開催日を大きくしたとします。「目立つようにしました」だけでは、装飾の好みと区別しにくくなります。「日程を確認してから参加を検討する人を想定し、最初の画面で日時と対象者を確認できる配置にしました」とすれば、情報の優先順位と想定行動がつながります。実際の調査をしていない場合は、想定であることを明示します。
制作の経緯を全件分そのまま見せるのも、読み手には負担になります。何十枚ものラフを並べるより、違いが分かる二案と、採用した理由を一つ示す方法があります。完成画像を見て興味を持った人が、必要に応じて判断の過程を読める順序にすると、短時間で見る人にも詳しく知りたい人にも対応しやすくなります。
※表は横にスクロールできます。
| 目指す仕事 | 作品で伝えたいこと | 説明に添える材料 | 不足しやすい点 |
|---|---|---|---|
| バナー制作 | 情報の優先順位とサイズ展開 | 目的、掲載先、別サイズでの変更点 | 装飾だけで意図が分からない |
| 一ページの案内制作 | 読む順序と行動へのつながり | 対象者、構成、見出し、導線 | 長い画像だけで判断理由がない |
| Webサイトの更新 | 既存の見せ方との整合 | 変更箇所、ルール、影響の確認 | 自分の担当範囲が見えない |
| 画面設計を含む仕事 | 操作の流れと状態の違い | 画面遷移、入力状態、エラー時の考え | 正常な一画面しか用意していない |
担当範囲と制作区分は、最初から分かるように書く
自主制作、スクール課題、実案件、チーム制作は、作品の冒頭で区別します。「架空の地域イベントを想定した自主制作。企画、文章、情報設計、デザインを担当。実装は未対応」のように書けば、何を見ればよいかが分かります。架空の依頼主や成果を付け加えて、実案件のように見せる必要はありません。
チームで作ったものは、自分が担当した部分を明示します。ほかの人の文章やコードを含む場合、作品全体を一人で作ったと誤認されないようにしてください。教材の完成例を参考にした課題なら、教材の指示どおりの部分と、自分が変更した部分を分けます。見た目を少し変えただけで、すべて独自の設計をしたと説明しないことが大切です。
使用ツールも、名前だけを大きく並べるより、何に使ったかを添えます。図形や文字を配置できることと、利用者の課題から画面を設計できることは別の能力です。「画面案の作成」「画像の補正」「プロトタイプでの操作確認」のように、作品内での用途を示すと、道具と担当作業の関係が見えます。
作品数より、説明できる完成状態を作る
最初に何点必要かは、一律には決められません。応募先の指定がある場合はそれに合わせ、指定がなければ、目指す仕事を判断する材料が足りるかで考えます。似た見た目の未完成作品を増やすより、目的と工夫を説明できる一作を先に完成させる方が、次の課題も見つけやすくなります。
一作だけでは得意な範囲が狭く見えることもあります。その場合は、別の目的や制約を持つ課題を追加します。同じページの色違いを増やすだけでは、新しい判断材料にならないかもしれません。例えば、情報量が多い案内ページを作った後に、限られた面積で情報を絞るバナーを作ると、違う考え方を見せられます。
独学でどこを改善すべきか分からない場合は、添削や相談の環境を検討できます。Webデザインスクールの料金・学習内容・案件サポート比較では、学習環境を選ぶ際の確認点をまとめています。受講すること自体を目的にせず、今の作品で何を直してもらいたいかを先に言葉にすると比較しやすくなります。
未経験の自主制作は、具体的な利用場面と小さな課題から始める

架空の依頼文を一枚作る
作品を作る前に、短い依頼文を自分で用意します。対象者、目的、伝える情報、必要な行動、制約、完成条件の六つを決めましょう。依頼主役の設定を細かく作り込むことより、デザインを判断できる条件をそろえることが重要です。「おしゃれなカフェのサイト」だけでは、何を優先するかが決まりません。
本記事の練習例では、架空の「週末の小さな陶芸体験」を題材にします。初めて参加する大人が、体験内容、所要時間、持ち物、会場、料金の想定を確認し、空き状況を問い合わせる一ページの案内を作ります。実在する教室の広告ではなく、運営者への聞き取りや集客の実績もない自主制作として扱います。
完成条件は「ページがきれいにできた」ではなく、どんな情報を読み取れるかで書きます。例えば、最初に参加対象と体験内容が分かる、問い合わせ前に日時と持ち物を確認できる、スマートフォンで連絡先までたどれる、という形です。作り終えたときに、この条件へ戻って見直せるようにしておきます。
題材は、情報を自分で管理できるものを選ぶ
実在する大企業のサイトを勝手に作り直すより、架空の小規模な題材なら文章や条件を自分で管理しやすくなります。必要な情報が少なく、行動が一つに絞れるテーマから始めると、完成の範囲を決めやすくなります。名前やロゴが実在のものと紛らわしくならないかも確認してください。
架空課題に使う料金、日程、所在地などは、説明用の仮定であることを明示します。住所や電話番号に実在する人の情報を無断で使わないようにします。問い合わせフォームを実装する場合も、実在する事業への申込みと誤解される状態にしないことが必要です。練習作品であることが作品ページとデモの両方から分かると安全です。
題材選びで迷ったら、関心の強い分野だけでなく、必要な情報を自分の言葉で説明できるかを見ます。詳しくない専門サービスを選ぶと、文章の確認に時間がかかり、デザインの課題が見えにくくなる場合があります。医療や金融など、誤解の影響が大きい題材は、初心者の最初の練習では慎重に扱いましょう。
※表は横にスクロールできます。
| 自主制作の題材 | 想定する一つの行動 | 示しやすい工夫 | 広げすぎないための範囲 |
|---|---|---|---|
| 架空の体験イベント | 内容を理解して問い合わせる | 情報の順番、日時の見せ方 | 決済や会員登録までは含めない |
| 架空の地域店舗 | 営業時間と行き方を確認する | スマートフォンでの読みやすさ | 多店舗展開の管理まで作らない |
| 架空の商品紹介 | 特徴を理解して詳細を見る | 写真と説明の役割分担 | 効果や売上の実績を作らない |
| 架空の学習サービス | 対象者と内容を確認する | 比較情報、よくある疑問の整理 | 複雑な学習管理機能は含めない |
読者像は、年齢だけでなく「何を知りたいか」で書く
利用者の年齢、性別、趣味を細かく設定しても、ページで何を知りたいかが分からなければ、情報の並べ方は決まりません。陶芸体験の例なら、「初めてで道具を持っていない」「友人と参加したい」「作ったものをいつ受け取れるか知りたい」といった疑問を考えます。実際に調べていない内容は、仮説として扱います。
その疑問に対して、どの情報で答えるかを整理します。道具の不安には持ち物と貸出について、友人との参加には人数の条件、作品の受け取りには工程と期間の説明が必要です。画面を描く前に文章として一覧にすると、必要な情報が足りないことに気づけます。情報がないまま装飾を作り込むと、後で構成を大きく戻すことになります。
すべての疑問を最初の画面へ詰め込む必要はありません。最初に確認したいこと、検討中に読むこと、問い合わせ直前に必要なことへ分けます。読者が順番に判断できる流れを作ることが、情報設計の練習になります。見出しだけを並べて読み、内容の筋が通るかも確かめましょう。
制約を決めると、デザインの理由が見つかる
使える写真は三枚、ページは一ページ、主要な行動は問い合わせ、スマートフォンを中心に考える、といった制約を設けます。制約がないと、迷うたびに情報や機能を増やしてしまいます。最初の一作では、判断を難しくしすぎない範囲を選び、完成してから追加の課題を考える方が進めやすくなります。
制作期間も、自分の生活に合わせて作業単位へ分けます。一日目に条件と文章、二日目にラフ、三日目に画面案という予定を立てることはできますが、これは練習の組み方の一例です。決めた日数で完成する保証ではありません。会社員なら、一回の作業で何を終わらせるかを決め、急な残業があっても再開できるメモを残します。
条件を途中で変える場合は、変更した理由を記録します。「写真が足りず、写真だけで体験内容を伝える案から、工程を文章で補う案へ変えた」といった記録は、完成後の説明に使えます。最初の案を守り通すことが目的ではありません。条件に合うように判断を調整した過程を残してください。
情報設計・配色・レイアウトの判断を、比較できる形で残す

ワイヤーフレームで、情報の順序を先に確かめる
ワイヤーフレームは、完成した装飾を描く前に、どこへ何を置くかを整理するための簡単な図です。紙でも制作ツールでも構いません。最初から写真や細かな色を入れると、見た目の印象に引っ張られやすいため、見出し、本文、画像、ボタンの位置を簡潔に並べてみましょう。
陶芸体験の例なら、体験の概要、開催情報、当日の流れ、持ち物、よくある疑問、問い合わせという順を仮に作れます。別案として、最初に参加者が不安に感じそうな準備の説明を置くことも考えられます。どちらが正解かを感覚だけで決めず、想定した利用者の疑問に沿って、どの順で理解できるかを比べます。
ここで実際のユーザー調査をしていないなら、「利用者調査から分かった」と書かないようにします。「初心者は準備を確認したいという仮説を置き、この順序にした」と説明します。友人などに試しに見てもらった場合も、人数や条件を正確に記録し、少人数の感想を一般的な結果へ広げすぎないことが大切です。
文字の大きさと余白は、重要度とまとまりから決める
見出しを大きくするのは、目立たせるためだけではありません。ページの内容を拾い読みしたときに、どこへ何が書いてあるか分かるようにするためです。見出し、補足、本文、注記の差を整理し、同じ役割の文字には同じルールを使います。すべてを強調すると、どれを先に読めばよいか分からなくなります。
余白は、関連する情報をまとめ、別の話題を区切るために考えます。日時と会場が同じ開催情報なら、近くに置くことで関係を示せます。一方、参加条件と問い合わせ先をぎゅうぎゅうに詰めると、読む順序が曖昧になります。余白の値をなんとなく変えるより、同じ役割のまとまりで整合しているかを見直しましょう。
長い文章は、行の長さや段落の区切りも確認します。パソコンで広く見たときに読みやすくても、スマートフォンで改行が増え、要点が埋もれることがあります。完成画像を縮小して眺めるだけでなく、実際に想定する表示幅で文字を読んでみてください。見た目の統一と、読めることの両方が必要です。
配色は、雰囲気と読みやすさを別々に確認する
温かい雰囲気のサービスだから淡い色を使う、落ち着いた印象にしたいから紺を使う、といった方向性は考えられます。ただし、雰囲気に合っていても、文字と背景が近い色では読み取りにくくなります。見た目の好みと文字の可読性を分けて確認し、重要な内容を色の違いだけで伝えないようにしましょう。
W3CのWCAG 2.2の文字コントラスト解説では、通常の文字について4.5対1、大きな文字について3対1以上という基準が示されています。大きな文字の条件や例外もあるため、数値だけを覚えてすべてに当てはめず、基準の説明と合わせて確認します。コントラストを満たすことだけで、ページ全体の使いやすさが保証されるわけではありません。
配色の比較を残すなら、候補を十種類並べるより、読みやすさや目的との関係が分かる二案を選びます。「淡い背景と灰色の文字では説明が弱く見えたため、本文を濃い色へ変更した」のように、何を確かめて変えたかを書きます。測定した場合は、対象の色と測定条件を残し、測っていない数値を作らないでください。
※表は横にスクロールできます。
| 判断するところ | 比較する案の例 | 確かめること | 作品説明へ残す内容 |
|---|---|---|---|
| 情報の順序 | 体験概要を先にする/準備の不安を先にする | 想定した疑問に順番に答えられるか | 採用した順序と理由 |
| 文字の優先順位 | 日時を本文と同じにする/独立した見出しにする | 開催情報を見つけられるか | 強調する情報を選んだ根拠 |
| 色 | 淡い文字/濃い文字 | 雰囲気とコントラストが両立するか | 変更前後と確認方法 |
| スマートフォン | 横並びを維持/縦に積み直す | 読める幅と操作の流れを保てるか | 表示幅によって変えた点 |
| 行動の導線 | 曖昧なボタン/内容が分かるボタン | 押した後に何が起こるか分かるか | 文言と配置の考え方 |
スマートフォンは、縮小版にせず並べ方を考える
パソコン用に横へ並べた内容を、そのまま小さくするだけでは読みづらくなる場合があります。スマートフォンでは縦に並べ直す、画像の位置を変える、長い補足を段落へ分けるなど、情報のまとまりを保ちながら再配置します。ページの目的は同じでも、表示幅に合わせた判断が必要です。
特に、主要な案内が画像の中だけに入っていると、縮小によって文字が読めなくなることがあります。画像で雰囲気を伝え、重要な日時や条件は文章としても用意するなど、情報の役割を分けます。作品がデザインデータだけなら、その方針を説明に残します。実装した場合は、表示幅を変え、拡大したときにも内容が欠けないか確かめてください。
ボタンやリンクも、見た目があるだけではなく、何をするものか分かる文言にします。「こちら」だけより、「体験内容を確認する」「問い合わせ方法を見る」など、移動先の内容が伝わる表現を考えます。架空作品のボタンを公開するときは、実際の予約や決済が成立するように誤解されない案内も必要です。
画像の意味と代替テキストを考える
画像には、雰囲気を作るもの、具体的な情報を伝えるもの、操作の役割を持つものなどがあります。すべてに同じ説明を入れればよいわけではありません。W3Cの画像に関するチュートリアルでは、画像の目的に応じた代替テキストの考え方が整理されています。情報を伝える画像には、その内容を理解できる説明を考え、装飾だけの画像は扱いを分けます。
ポートフォリオの作品画像でも、「作品画像」という説明だけでは伝わりにくいことがあります。例えば、日時を目立たせた案内ページの比較なら、その画像が何を比較しているのかを本文で説明し、画像を見なくても要点を追えるようにします。作品全体の細かい文字をすべて代替テキストへ詰めるより、本文の説明と役割を分担すると整理できます。
デザインデータを作る段階でも、画像が読み込まれない場合や、画像を見ないで内容を確認する場合を想像できます。アクセシビリティを後から付け足す項目としてだけ扱わず、情報をどう伝えるかの判断に含めましょう。ただし、基本項目を見たことだけで「完全に対応済み」と断定しないようにしてください。
作品説明は、課題・判断・改善前後・残る課題をつなげて書く

最初の説明は、作品の位置づけが分かる短さにする
作品ページの冒頭には、何を作ったのか、誰を想定したのか、何を担当したのかを短くまとめます。制作期間や使用ツールは、続く基本情報へ置きます。長い学習の思い出から始めると、読み手は作品の内容を理解するまでに時間がかかります。先に全体像を示し、その後に詳しい判断へ進めましょう。
説明用の見本なら、「初めて陶芸を体験する大人に向けた、架空イベントの案内ページです。体験内容と参加条件を確認し、問い合わせ方法まで迷わず読める構成を目指しました。自主制作として、課題設定、文章、情報設計、画面デザインを担当しました」と書けます。ここでは実際に迷わず使えたと検証したわけではないため、目指したこととして表現しています。
続いて、制作区分、担当範囲、制作期間、使用ツール、デザインのみか実装まで行ったかを記載します。時間を記録していなければ、細かな作業時間を推測で作る必要はありません。期間と実作業時間も区別します。何週間かけた作品でも、毎日同じ時間を使ったとは限らないためです。
工夫した点は「そうした理由」まで書く
「見やすさを意識しました」「親しみやすい色にしました」だけでは、どの作品にも当てはまる説明になります。具体的な疑問や制約、採用した方法、確かめたことまで一組にしましょう。陶芸体験の例なら、「参加前に準備が分からないという想定に対し、持ち物と当日の流れを問い合わせの前に置いた」と書けます。
重要な判断は、二つか三つ程度へ絞ると説明が散らかりにくくなります。すべての余白や色に大きな理論を後付けする必要はありません。自分が実際に迷い、比較した部分を中心に選びます。「写真が足りなかったので工程の説明を文章で補った」という判断も、条件に合わせて考えた例になります。
検証した結果がある場合は、方法と範囲を限定して書きます。「知人一人に案内を見てもらい、開催日を探してもらったところ、最初は見つけにくいという意見があった」なら、その事実として説明できます。それを「利用者全体の使いやすさが改善した」「申込率が上がった」と広げてはいけません。結果と解釈を分けて伝えましょう。
改善前後の比較は、条件をそろえて見せる
改善前と改善後を並べるときは、同じ表示幅、同じ内容の範囲、同程度の大きさで比較します。片方だけ小さくぼかすと、何を変えたのかより印象の差が強くなります。注目する箇所が分かるように番号や短い説明を添え、変更した理由を本文で示します。ページ全体の縮小画像だけでは細部が読めない場合は、必要な部分を別に見せます。
自主制作なら、初稿と改訂稿の比較で十分です。「初稿では開催日が長い本文の中に埋もれていたため、見出しの近くに独立した情報として配置した」という説明ができます。ただし、閲覧者が実際に早く見つけられたかを測っていないなら、「見つけやすくするための変更」と書きます。デザインの意図と測定結果は別です。
実在サイトのリデザインを題材にする場合は、許諾や権利、誤認の防止へ一段と注意が必要です。現在の運営上の制約を知らずに「悪いサイト」と断定せず、学習目的の仮説として扱います。最初のポートフォリオでは、自分で作った初稿を改善する方が、素材と説明の管理をしやすいでしょう。
残った課題を書くと、現在の到達点が伝わる
作品を完成させた後も、調査を十分にできていない、フォームの細かな状態を作っていない、実機での確認範囲が限られている、といった課題が残ることがあります。これらを隠さず、次に何を確かめたいかを記載すると、現時点でどこまでできたかが伝わります。無制限に反省を書く必要はなく、作品の判断に関わる点へ絞ります。
例えば「今回はデザインデータまで作成し、実装時のキーボード操作は未検証です。次はフォームを実装し、入力しにくい箇所とエラー表示を確認したい」と書けば、できたことと未確認のことが分かれます。未検証の項目を、対応済みのチェックマークで埋めないようにしてください。完成を目指すことと、すべてを検証したと主張することは違います。
改善の記録には、日付と何を変えたかを簡単に残します。古い画像を差し替えたのに本文が旧案の説明のままだと、作品の意図が伝わらなくなります。説明を増やすたびに、完成画像、比較画像、文章が同じ版を指しているか確認してください。ポートフォリオ自体も、情報を整理する作品の一つです。
※表は横にスクロールできます。
| 作品説明の項目 | 書く内容 | 避けたい書き方 |
|---|---|---|
| 課題 | 誰の何を助けたいか、想定か調査結果か | 根拠なく利用者全員の問題とする |
| 担当 | 自分が作った範囲、共同制作との区別 | 他人の担当も自分の成果に含める |
| 判断 | 比較した案と採用した理由 | 抽象的な「見やすさ」だけで終える |
| 改善 | 初稿から変えた点と確認方法 | 測っていない売上や申込率を付ける |
| 到達点 | 完成した範囲と未検証の課題 | デザインだけで動作も確認済みとする |
公開前に権利・表示・連絡先を確認し、応募後も作品を育てる

素材と教材の公開条件を、一つずつ確認する
写真、イラスト、アイコン、フォント、テンプレートなどは、使う場所と利用条件を確認します。無料で入手できたことと、ポートフォリオへ自由に掲載できることは同じではありません。商用利用、加工、再配布、クレジットの表記など、素材ごとに条件が違う場合があります。使った時点の提供元と条件を記録しておくと、後で確認しやすくなります。
自分が作ったデザインでも、素材の配布ファイルや編集可能なデータをそのまま公開すると、別の条件に触れる場合があります。見せる画像と、ダウンロードさせる制作ファイルを分けて考えましょう。教材の課題も、作品の公開が認められているかを確認します。必要な許可がない場合は、自分で用意した素材と文章を使う課題へ切り替える方法があります。
権利の基本を確認する資料として、文化庁の著作権に関する教材・解説があります。具体的な利用が認められるかは、素材の条件や契約によって異なります。出典名を付ければ必ず使える、と判断しないようにしてください。依頼主や勤務先の作品は、公開許可と公開範囲を別に確認する必要があります。
AIを使った部分と、自分が判断した部分を分ける
AIで文章のたたき台や画像、構成案を作った場合は、自分が何を担当し、何を使ったかを説明できる状態にします。応募先や依頼先がAI利用について指定している場合は、それに従います。ツールの出力を貼っただけなのに、調査や撮影、イラスト制作をすべて自分で行ったように書かないことが大切です。
画像を使うときも、実在の事業者の制作実績や利用者の写真であるような見せ方を避けます。自主制作に生成画像を使ったなら、その区分が分かるようにします。使用するサービスの条件を確認し、他者の権利や誤認の問題がないかを見直してください。AIが作ったという理由だけで、どんな使い方も安全になるわけではありません。
下書きされた作品説明は、事実確認をしてから採用します。「多くのユーザーに支持された」「高い成果につながった」といった、元の制作記録にない表現が入っていないか注意します。文章を整える用途に使っても、判断の根拠は自分の記録へ戻して確認しましょう。面談で聞かれたときに、自分の言葉で説明できることが必要です。
公開方法は、相手が迷わず開けることを優先する
Webサイト、PDF、デザインツールの共有リンクなど、公開方法はいくつかあります。応募先の指定があればそれを優先し、指定がなければ、作品と説明を無理なく読める形式を選びます。使っていないサービスを大量に増やすより、まずは一つの形式で完成し、リンクが切れていないか管理できることが重要です。
共有リンクを使う場合は、見せたい作品だけを閲覧できるか、編集権限が必要以上に広がっていないか、私的なコメントや別の案件が見えないかを確認します。自分がログインしたまま開けたことだけで、相手も見られるとは限りません。許可される範囲で別の閲覧状態から確認し、アクセス条件を明記しましょう。
PDFは、文字が小さすぎないか、ページの順番が自然か、画像が荒れていないか、ファイルサイズが提出条件に合うかを確かめます。Webなら、スマートフォンとパソコンで文章を読めるか、作品画像だけが巨大に読み込まれないか、リンクの行き先が合っているかを見ます。公開先の料金や機能は変わるため、利用する時点の公式条件を確認してください。
連絡先と公開データに、不要な個人情報を残さない
ポートフォリオには連絡方法が必要になる場合がありますが、自宅の住所や個人の電話番号まで公開する必要があるとは限りません。目的に合う仕事用の連絡方法を選び、何を公開するかを慎重に決めます。作品内の架空情報も、実在する人への連絡につながらないように確認してください。
スクリーンショットや共有ファイルには、アカウント名、社内のファイル名、顧客情報、コメント、非公開の資料が残っていないかを確認します。公開用の作品フォルダを分け、私的な学習メモやほかの依頼のデータが混ざらないようにします。共同制作では、自分だけで公開範囲を決めず、関係者と合意した内容にそろえてください。
問い合わせフォームを設ける場合は、取得する情報の必要性と扱いも考えます。最初の作品集なら、必要以上に多くの個人情報を入力させない方法を検討できます。フォームを置いたのに送信先を確認していない、テスト送信の内容が公開されている、といった状態を避けるため、公開前に動作と通知を確認します。
応募では、相手に近い作品へ案内する
ポートフォリオ全体のURLだけを送るより、募集に関係する作品を示し、どの部分を見てほしいかを一文添えると分かりやすくなります。例えば「一ページのイベント案内を自主制作しており、スマートフォンで開催条件を確認できるよう情報を整理した例を掲載しています」と伝えられます。制作区分が分かる言葉を残し、実案件と誤認されないようにします。
募集で求められる担当範囲も確認します。デザインのみの依頼へ、未習得の実装までできるように書く必要はありません。反対に、実装が必須の募集であれば、デザイン画像だけで条件を満たすとは限りません。できること、未対応のこと、相談が必要なことを分けて伝えましょう。
仕事探しの方法を整理したい場合は、クラウドソーシング副業の始め方とサービスの違いも参考になります。作品を作って終わりにするのではなく、どんな依頼とつながる作品なのかを考えると、次に練習する課題も選びやすくなります。プロフィールや応募文と作品内の担当範囲を一致させることも忘れないでください。
最後に、三分で説明して不足を見つける
完成した作品を、三分程度で説明する練習をしてみましょう。誰のために、どんな課題を置き、何を作り、どこを判断し、何がまだ未確認か。この順に話すと、画像だけでは伝わらなかった点や、後付けで曖昧になっている説明が見つかります。三分は採用基準ではなく、情報を整理するための練習の目安です。
誰かに見てもらう場合は、「どう思う?」だけでなく、「参加条件はどこにあると思うか」「問い合わせの前に知りたい情報は足りているか」と質問を絞ります。色の好みと、情報が見つからない問題を分けて記録すると、改善の優先順位が見えます。意見をすべて採用するのではなく、作品の目的と照らし合わせて判断してください。
今日の一歩は、架空の依頼文を一枚作り、対象者、目的、行動、制約、完成条件を言葉にすることです。そこから小さな画面案を作り、比較した判断を残し、作品説明まで仕上げます。未経験のポートフォリオは、経験を大きく見せるためではなく、現在できることを正確に伝え、次の課題へ進むために育てていきましょう。