この記事でわかること

  • 未経験からWebデザインのポートフォリオを作る順番
  • 載せる作品の選び方と、作品ごとに書くこと
  • 公開する前に確かめる著作権のこと
  • 見せ方と、公開する前の最後の確認

Webデザインの仕事に応募するときは、作った作品をまとめたポートフォリオで、何ができるかを伝えます。この記事では、作品を作った後に、それをポートフォリオとしてまとめて公開するまでの手順を紹介します。

著作権については、文化庁の「著作権テキスト(令和8年度版)」で確かめた内容だけを書きます。採用で何が見られるかは応募先によって違うため、基準は断定しません。Webデザイナーに必要なスキルや最初に作る題材は、未経験からWebデザイナーになるにはで紹介しています。

先に結論: ポートフォリオを作る4つの手順

先に結論を書くと、応募する仕事に合わせて作品を選び、1点ずつ説明を書き、権利を確かめてから公開します。 作品の数を増やすより、選んだ作品を自分の言葉で説明できることを優先します。

手順 やること
1. 選ぶ 応募先に近い作品
2. 説明する 目的と担当範囲
3. 確かめる 素材と権利
4. 公開する 見せ方と確認

1. 載せる作品を選ぶ

最初に、どんな仕事に応募したいかを決めます。たとえば、お店のサイトを作る仕事、広告のバナーを作る仕事、サイトの使いやすさを直す仕事では、見せたい作品が変わります。

選ぶときは、次の順で確かめます。

  • 応募先に近いか: 応募したい仕事と、作品の種類が近いか
  • 説明できるか: なぜその配色や配置にしたかを、自分の言葉で話せるか
  • 自分で作った部分が分かるか: どこを自分が担当したかを示せるか

作れた作品をすべて並べると、何が得意なのかが伝わりにくくなります。応募先に合わない作品や、説明できない作品は外すか、作り直します。

実務経験がない場合

実務経験がなくても、架空のお店や会社を想定して作った作品で、考え方を伝えられます。その場合は、架空の依頼であることを作品の説明に書きます。実在のお店や会社の名前を、依頼があったように見える形で使うのは避けます。

2. 作品ごとに説明を書く

作品は画面を並べるだけでなく、1点ずつ説明を付けます。見る人が知りたいのは、仕上がりだけでなく、どう考えて作ったかです。

  • 目的: 誰に向けて、何をしてもらうための画面か
  • 担当範囲: デザインだけか、HTMLとCSSでの組み立てまでしたか
  • 工夫した点: 配色や文字の大きさなどを、なぜそうしたか
  • 直したい点: 作った後に気づいたことと、次に直したいこと

説明に入れる項目の例は、未経験からWebデザイナーになるにはでも紹介しています。この記事では、説明を書くときに次の2つも加えます。

  • 使った素材: 写真やアイコンを自分で用意したか、どこから入手したか
  • かかわった人: ほかの人と作った場合は、自分の担当と相手の担当

3. 公開する前に権利を確かめる

ポートフォリオをインターネットで公開する前に、作品に含まれるものの権利を確かめます。文化庁の著作権テキストでは、インターネットなどで著作物を公衆向けに送信することに関する権利(公衆送信権)を著作者が持つと説明しています。他人の作品が含まれたまま公開すると、この権利にかかわることがあります。

他人の写真や文章、素材

写真・イラスト・アイコン・文章などの素材は、入手したところの利用条件を確かめます。著作権テキストでは、他人の著作物を使うときに許諾を得ることは、権利者と契約を交わすことを意味し、口頭でも契約は成立すると説明しています。条件が分からない素材は、使わずに自分で用意したものに替えます。

模写した作品

練習で既存のサイトを模写した作品には、元のサイトの画像や文章、デザインが含まれます。著作権テキストでは、私的使用のための複製は家庭内など限られた範囲で、仕事以外で使うことが条件とされています。練習として作ることと、それを公開して応募に使うことは分けて考え、公開する前に元の作品の扱いを確かめます。

仕事や依頼で作った作品

会社の仕事として作ったものは、会社が著作者になる場合があります。著作権テキストでは、会社の職員などが作った著作物は、職員ではなく会社などが著作者となる場合があると説明しています。依頼を受けて作ったものも、契約で権利の扱いや公開の可否が決まっていることがあります。載せる前に、勤務先の決まりや依頼主との契約を確かめます。

なお、権利の侵害に当たるかは個別の事情で判断されます。迷うときは、その作品を載せないか、専門家に相談します。AIで作った画像を作品に使う場合の注意は、AIで作った画像を仕事で使う前にで紹介しています。

4. 見せ方を決めて公開する

最後に、ポートフォリオをどこで見せるかを決めます。自分で作ったサイトで見せる方法と、資料のファイルにまとめて見せる方法があります。自分で作ったサイトで見せると、そのサイト自体も作品の1つになります。

公開する前に、次のことを確かめます。

  • スマートフォンで見られるか: 画面の幅を変えても、文字や画像が崩れないか
  • リンクが切れていないか: 作品のページやファイルが、すべて開けるか
  • 連絡の方法が分かるか: 見た人が、どうやって連絡すればよいか
  • 書いてはいけない情報がないか: 依頼主の情報や、個人の情報が残っていないか

公開した後も、新しい作品を作ったら、応募先に合わせて載せる作品を入れ替えます。

独学で進めるか、指導を受けるかの判断

迷ったときは、「作品のどこを直せばよいかを、自分で見つけられるか」で決めます。自分で見つけられるなら、独学でも進められます。直すところが分からず止まっているなら、作品を見て指摘してもらえる場を探します。

独学とスクールの違いは、Webデザインは独学とスクールのどちらで学ぶかで比べています。スクールを選ぶときに作品集の指導で確かめることは、社会人のWebデザインスクールの選び方で紹介しています。

つまずきやすいところ

  • 作品を全部載せる: 得意なことが伝わりにくくなります。応募先に近い作品を選びます
  • 画面だけを並べる: 考えた過程が伝わりません。目的と担当範囲を1点ずつ書きます
  • 素材の条件を確かめずに公開する: 入手したところの利用条件を確かめ、分からない素材は替えます
  • 模写した作品をそのまま公開する: 練習と公開を分けて考え、元の作品の扱いを確かめます
  • 公開した後に見直さない: 新しい作品を作ったら、載せる作品を入れ替えます

まとめ

  • 応募したい仕事を決め、それに近い作品を選びます
  • 作品ごとに、目的・担当範囲・工夫した点・直したい点を書きます
  • 公開する前に、素材・模写・仕事で作った作品の権利を確かめます
  • スマートフォンでの表示やリンクを確かめてから公開し、作品は入れ替えていきます