転職できた!Webデザイナーの紙のポートフォリオの作り方

こんにちは、Sakiです!

未経験からWebデザイナーを目指してます。転職を成功させるための、紙のポートフォリオの作り方を教えてください!
私は現在はフリーランスとして活動していますが、フリーランスになる前は未経験から制作会社に就職し、勤めていたことがあります。
そしてその転職時にはもちろんポートフォリオを使いましたが、「Webサイト」と「紙」の2種類のポートフォリオを準備した結果、無事に就転職を成功させました!



私はWebデザインスクールに通っていたので、ポートフォリオは講師からのアドバイスのもと作成しています!
この記事では、Webデザイナーの必需品である紙のポートフォリオの作り方を、私が実際に使ったものをご紹介しながら解説したいと思います。
実際にWebデザイナー転職で使った紙のポートフォリオのご紹介


こちらが私が実際に転職活動で使ったポートフォリオです!(少し暗くてすみません。)



中の一部ですが、こんな感じで作りました!
後ほどご紹介する、ポートフォリオの作り方の項目では、もう少したくさんの写真を使っているので、詳しく知りたい方はぜひ読み進めてみてください!
Webデザイナーに紙のポートフォリオが必要な理由
そもそもですがポートフォリオには、「Webサイト」と「紙」の2種類の媒体があります。
正直紙の方は企業によって必要かどうかも異なりますが、心配なら用意しておいた方がいいと思います!



私は応募時にWebサイトの方を添付して、面接の時は紙の方を見ながら進めましたよ!
WebデザイナーであればWebサイトのみでいいんじゃないの?という意見もあるかと思いますが、紙バージョンにもメリットがあります。
- Webの通信環境が無くても見せられる
- まとめる能力があることも知ってもらえる
Webの通信環境が無くても見せられる
制作会社といえど、面接時に必ずPCや通信環境があるとは限りません。
実際に私が面接をしてもらったときも、会社側はその場にPCを持ってきていませんでした。
事前にWebサイトの方のポートフォリオを確認してもらっていたとはいえ、もし紙のものが無ければ説明できていなかったのかもと思うと、準備しておいて良かったなと思います。
まとめる能力があることも知ってもらえる
Webデザイナーとして仕事をするには、単にデザインスキルだけではなく、情報の整理能力なども重要になります。
紙のポートフォリオは、Webとはまた違う構成やデザインの考え方が必要なので、どんな媒体でも扱えることを知ってもらえるのはメリットでしょう。
柔軟に対応できるデザイナーの方がポイントも高いと思うので、できることは積極的にアピールしていきましょう!



紙のポートフォリオは、Illustratorの操作スキルもアピールできますよ!
グラフィック系は実際に印刷したものをポートフォリオにするのもあり
もし名刺やリーフレットなど、グラフィック系も携わりたい場合や、応募する会社がWebとグラフィック両方制作するであろう場合は、実際に印刷したものをポートフォリオにするのもおすすめです!
名刺やリーフレットなどは印刷するとより伝わる
Webサイトとは違って名刺やリーフレットなどの印刷物は、紙に印刷されてはじめて完成です。
なので、実物として印刷されたものを見てもらえる方が、よりデザイン性などが伝わります。
それに印刷するには、紙の種類や入稿の知識も無ければいけません。
なので実際に印刷したものを見せるということは、そういった部分もしっかり学んでますよ!といったアピールにもなります!
自分の名刺や架空のリーフレットやチラシをデザインして、ラクスルなどを利用すれば、そんなに費用もかからずに印刷できますよ!
Webデザイナー転職に成功する紙のポートフォリオの作り方
それではここからは、Webデザイナー向けの紙のポートフォリオの作り方を解説していきます。
まずは掲載する作品を制作
当たり前ですが、まずは掲載する作品を用意しないといけません。
用意するといいものは下記です。
- バナー
- サイトデザインのみのもの(複数)
- サイトコーディングまでしたもの(1つ~複数)
バナーは作りやすく短時間でできるので、いろんなジャンルや形で複数作っておきましょう。



デザインソフトの操作スキルはもちろん、デザイン傾向などもアピールできます!
サイトはできればすべてコーディングまでするのが1番ですが、なかなか大変で厳しいものでもありますよね。
なので、「デザインのみ」と「コーディングまでしたもの」の2パターンで、複数作るのがおすすめです!
ちなみに私は3つの架空サイトを作成しました。コーディングは一部のみのものもあります。
- 美容院→全ページコーディング
- カフェ→全ページコーディング
- 通販サイト→トップのみコーディング
ここで注意点ですが、私は当時無知で著作権など考えずに、検索で見つけた画像を使用しています。これは違法にもなるので、必ずフリー素材を使用してください。
ちなみにWebサイトのポートフォリオでも同じことをしていて、担当者の方に「削除した方がいい」と指摘を頂いたので、直後に削除しています。(その会社で内定を頂いたので作り直しをせず済んでよかったですが、皆さん気をつけてくださいね!)
作品は架空のものより実際の実績の方がおすすめ
ポートフォリオに載せる作品は、架空のものでもOKですが、1番いいのは実際の実績です。
実績が無くても大きな問題ではないですが、実際の仕事として経験しているのとそうでないのとでは、経験値に大きな差があります。
私は架空のもので作りましたが、知り合いがいれば頼むか、いなければ格安でココナラなどで依頼を受けるのがおすすめです!



架空のものを自由に作るのと、実際にお客様を相手に作るのとでは、考えることや責任感が全然違いますよ!
ココナラはマーケティングスキルも身につく
余談ですが、ココナラで「売る」って侮れなくて、適当ではなかなか購入してもらえないんです。
なので工夫が必要なんですが、この経験もマーケティングスキルとなり、面接でアピールすることができます。
いきなりの販売に不安がある場合は、アイコンや名刺などの安いものでいいので、1度自分が購入して体験してみるといいですよ!



プロのデザインも勉強できて一石二鳥です!
>>サービスをさがす
ポートフォリオに必要な情報
掲載する作品を用意できたら、いよいよポートフォリオの作成です。
ポートフォリオに載せる必要な情報はこちらです。
- 自己紹介
- 作品紹介
構成としてはこんな感じでシンプルです。
ただ、これらを適当に考えて掲載しておけばいいのではなく、ちゃんと『伝える』を意識して作るのが大切です!
それぞれポイントを解説していきます。
自己紹介ページの作成
まずは自己紹介ページですが、自分の名前以外にも、これまでの経歴やスキルなども入れておきましょう。
- 名前
- 生年月日
- 自分の写真
- これまでの経歴
- 今持っているスキル「Photoshop・Illustrator・HTMLなど」
- 資格があれば
このように具体的な情報がある方が、相手も分かりやすいです。



自分の得意なデザインや、デザインを通してどんな風になりたいかも書けば、より人柄が伝わっていいかもしれません!
作品紹介ページの作成
1つ目のサイト(美容院)


写真は美容院のサイトに関するものですが、サイトデザインの紹介の前に、ターゲットやデザインの説明、使用したソフトやスキルを書いています。


次のページでは、メインビジュアルの写真を載せつつ、さらに店舗に関する詳細な情報を書いています。
説明の横にあるロゴも自分で考えたもので、「こんなのも作れますよ!」とアピールしています。
作品を掲載するときは、その作品を制作するときに考えたことや、心がけたポイントなどを添えておきましょう!
たとえば、下記のようなことを意識して文章を考えます。
- サイトの目的(集客や売上アップなど)
- ターゲットとした人物のイメージ像
- そのイメージに合わせて考えたデザインのポイント
- たとえば集客が目的ならそのために何を工夫したのか
ここで大事なのは、ただ好きなデザインで作ったのではなく、「こんな目的のためにこんな風にした」と伝えることです。
実際の仕事もそうですが、Webデザイナーは好きなようにデザインすればいいわけではありません。
改善や何かしらの目的のためにデザインや構成を考えるので、「私はそれも理解してしっかり考えてますよ!!」ということをアピールしましょう!


次のページでは、トップページの全体像を載せています。
ここでは全体のデザインを紹介しつつ、デザイン面で心がけたところを説明しています。


そして次のページでは、見やすくするためにトップページを分割して載せて、それぞれの部分での詳細を書いています。



Web上での動きや、ここを意識して作っていますという説明を書いています!
2つ目のサイト(カフェ)


カフェのサイトは、美容院とはまた違った系統でデザインしています。



いろんな系統やジャンルで制作して、自分のデザインの幅をアピールしましょう!
そしてJQueryもコピペではありますが、「一応扱えますよ」ということで説明を書いています。
3つ目のサイト(通販サイト)


2つめのカフェのサイトでは写真が抜けていましたが、サイトが変わるごとに「CASE03」とタイトルを変えたり、使用しているソフトの説明などをそのサイト紹介の1ページ目として入れています。



きちんと区切りを入れることで、紹介する作品が変わったということを伝えてくださいね!


通販サイトを想定して作っていますが、コーディングはHTMLとCSSのみで、ECサイト用のカートなどは入れていません。


このように同じサイトではありますが、商品ページをパターンA~Cまでと、3パターンでデザインしています。



このような感じで、他にもバナーなど自分が制作した作品に合わせてページを追加してくださいね!
ファイルに入れて完成
あとはページを印刷してファイルに入れて完成です!
印刷については、今回はA3サイズで作成しましたが、私はスクールにあったプリンターがサイズに対応していたのでそれを使って印刷しました。
作成するサイズにもよりますが、同じようにA3サイズで作ると、自宅のプリンターではなかなか対応していないかと思います。
なのでその場合はコンビニで印刷するか、ラクスルなどの印刷会社を利用すれば、自宅にいながらでも簡単に入稿することができます。



印刷会社を利用すれば、よりキレイな色の発色で印刷できるのでおすすめです!
おすすめのA3クリアファイル
A3サイズのクリアファイルのおすすめを2つご紹介します。
A3サイズはお店ではあまり見つからないこともありますが、ネットではいろいろあるので参考にしてください!
\カラフルなおしゃれを求める方に/


\シンプルで大容量を求める方に/


Webデザイナーの紙のポートフォリオを1ランク上げる方法
紙のポートフォリオは上記までで解説した作成方法でもいいですが、他の応募者と差別化させるためにも1ランク上げる方法を2つご紹介します。
本を参考にしてアイデアの幅を広げる
まずは本などを参考にして、アイデアの幅を広げることです。
私がご紹介させていただいた配置などで同じように作るのもOKですが、そもそもポートフォリオは「自分の力を伝える」という役割があるものです。
なのでデザインなどの表面的な部分だけでなく、しっかりと作る目的を確立させるためにも、本を参考にするのがおすすめです!


こちらの本は、どんな目的のためにポートフォリオを作成するのか、制作会社側はポートフォリオのどこを見ているのかなど、ポートフォリオの本質部分が解説されているので参考になります。
ポートフォリオを通して自分がどんなところで勝負すればいいのかアドバイスもあるので、転職成功のためにポートフォリオが強化されるはずです。
おまけ:Webポートフォリオにおすすめの本
ちょっとおまけです。こちらはWebサイト用のポートフォリオ作成に役立つ本です。
今回の記事では紙のポートフォリオ作成についてでしたが、Webデザイナーにとっては最初にも書いたとおり、Webサイトと紙の2種類のポートフォリオが必要です。
下記の本では、Webポートフォリオの作り方や上手く活用するためのポイントが書かれているので、こちらもぜひ参考にしてください!


表紙や紙質にこだわる
私は普通紙に印刷して普通のファイルに入れましたが、Webデザイナーとしてとことん細部にまでこだわるのもアリです。
中身の内容が1番大事ではありますが、表紙や紙質にまでこだわることで、面接官へ大きなインパクトを残すことができます。
おすすめはラクスルの冊子印刷で、1部から作成することができるものもあります。



冊子タイプにすることで、より表紙のデザインにこだわれたり、自分のオリジナリティを出せるのでおすすめですよ!
紙のポートフォリオも用意してWebデザイナー転職を成功させよう
それでは最後に、この記事のまとめです。
ポートフォリオは、自分が今持っているスキルを証明するためのものです。
デザイン・コーディング・考え方など、これまで学んで身につけてきたものをアピールするためのツールが、ポートフォリオです。
ただやみくもに作品を並べるだけでなく、「なぜこのデザインで作ったのか」などの説明も、しっかりと記載しておきましょう。



自分の力を最大限アピールできるポートフォリオを作って、自信をもって面接に挑んでくださいね!
ポートフォリオが完成したら、あとは就職転職活動に挑むだけです。自分にあった企業を探して、楽しくWebデザイナーとして働きましょう!

