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

こんにちは、Sakiです！

私は現在はフリーランスとして活動していますが、フリーランスになる前は未経験から制作会社に就職し、勤めていたことがあります。

そしてその転職時にはもちろんポートフォリオを使いましたが、「Webサイト」と「紙」の２種類のポートフォリオを準備した結果、無事に就転職を成功させました！

この記事では、Webデザイナーの必需品である紙のポートフォリオの作り方を、私が実際に使ったものをご紹介しながら解説したいと思います。

実際にWebデザイナー転職で使った紙のポートフォリオのご紹介

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

後ほどご紹介する、ポートフォリオの作り方の項目では、もう少したくさんの写真を使っているので、詳しく知りたい方はぜひ読み進めてみてください！

Webデザイナーに紙のポートフォリオが必要な理由

そもそもですがポートフォリオには、「Webサイト」と「紙」の２種類の媒体があります。

正直紙の方は企業によって必要かどうかも異なりますが、心配なら用意しておいた方がいいと思います！

私が両方用意した理由は、通っていたスクールの勧めだったからです。結果的には両方必要だったので、作ってよかったと思いました！

WebデザイナーであればWebサイトのみでいいんじゃないの？という意見もあるかと思いますが、紙バージョンにもメリットがあります。

• Webの通信環境が無くても見せられる
• まとめる能力があることも知ってもらえる

Webの通信環境が無くても見せられる

制作会社といえど、面接時に必ずPCや通信環境があるとは限りません。

なのでもしPCや通信環境が無い状態だったとしても、問題なくポートフォリオの紹介や面接を進められるように、紙のポートフォリオを準備しておくのが安心です！

実際に私が面接をしてもらったときも、会社側はその場にPCを持ってきていませんでした。

事前にWebサイトの方のポートフォリオを確認してもらっていたとはいえ、もし紙のものが無ければ説明できていなかったのかもと思うと、準備しておいて良かったなと思います。

まとめる能力があることも知ってもらえる

Webデザイナーとして仕事をするには、単にデザインスキルだけではなく、情報の整理能力なども重要になります。

紙のポートフォリオは、Webとはまた違う構成やデザインの考え方が必要なので、どんな媒体でも扱えることを知ってもらえるのはメリットでしょう。

柔軟に対応できるデザイナーの方がポイントも高いと思うので、できることは積極的にアピールしていきましょう！

グラフィック系は実際に印刷したものをポートフォリオにするのもあり

もし名刺やリーフレットなど、グラフィック系も携わりたい場合や、応募する会社がWebとグラフィック両方制作するであろう場合は、実際に印刷したものをポートフォリオにするのもおすすめです！

名刺やリーフレットなどは印刷するとより伝わる

Webサイトとは違って名刺やリーフレットなどの印刷物は、紙に印刷されてはじめて完成です。

なので、実物として印刷されたものを見てもらえる方が、よりデザイン性などが伝わります。

それに印刷するには、紙の種類や入稿の知識も無ければいけません。

なので実際に印刷したものを見せるということは、そういった部分もしっかり学んでますよ！といったアピールにもなります！

自分の名刺や架空のリーフレットやチラシをデザインして、ラクスルなどを利用すれば、そんなに費用もかからずに印刷できますよ！

Webデザイナー転職に成功する紙のポートフォリオの作り方

それではここからは、Webデザイナー向けの紙のポートフォリオの作り方を解説していきます。

まずは掲載する作品を制作

当たり前ですが、まずは掲載する作品を用意しないといけません。

用意するといいものは下記です。

• バナー
• サイトデザインのみのもの(複数)
• サイトコーディングまでしたもの(１つ～複数)

バナーは作りやすく短時間でできるので、いろんなジャンルや形で複数作っておきましょう。

サイトはできればすべてコーディングまでするのが１番ですが、なかなか大変で厳しいものでもありますよね。

なので、「デザインのみ」と「コーディングまでしたもの」の２パターンで、複数作るのがおすすめです！

２パターンで作る場合は、コーディング用よりもデザイン用の方を多めに作ってください。系統やジャンル別にいくつか作るのがおすすめです！

ちなみに私は３つの架空サイトを作成しました。コーディングは一部のみのものもあります。

1. 美容院→全ページコーディング
2. カフェ→全ページコーディング
3. 通販サイト→トップのみコーディング

ここで注意点ですが、私は当時無知で著作権など考えずに、検索で見つけた画像を使用しています。これは違法にもなるので、必ずフリー素材を使用してください。

ちなみにWebサイトのポートフォリオでも同じことをしていて、担当者の方に「削除した方がいい」と指摘を頂いたので、直後に削除しています。(その会社で内定を頂いたので作り直しをせず済んでよかったですが、皆さん気をつけてくださいね！)

作品は架空のものより実際の実績の方がおすすめ

ポートフォリオに載せる作品は、架空のものでもOKですが、１番いいのは実際の実績です。

実績が無くても大きな問題ではないですが、実際の仕事として経験しているのとそうでないのとでは、経験値に大きな差があります。

私は架空のもので作りましたが、知り合いがいれば頼むか、いなければ格安でココナラなどで依頼を受けるのがおすすめです！

ココナラはマーケティングスキルも身につく

余談ですが、ココナラで「売る」って侮れなくて、適当ではなかなか購入してもらえないんです。

なので工夫が必要なんですが、この経験もマーケティングスキルとなり、面接でアピールすることができます。

いきなりの販売に不安がある場合は、アイコンや名刺などの安いものでいいので、１度自分が購入して体験してみるといいですよ！

＞＞サービスをさがす

ポートフォリオに必要な情報

掲載する作品を用意できたら、いよいよポートフォリオの作成です。

ポートフォリオに載せる必要な情報はこちらです。

1. 自己紹介
2. 作品紹介

構成としてはこんな感じでシンプルです。

ただ、これらを適当に考えて掲載しておけばいいのではなく、ちゃんと『伝える』を意識して作るのが大切です！

それぞれポイントを解説していきます。

自己紹介ページの作成

まずは自己紹介ページですが、自分の名前以外にも、これまでの経歴やスキルなども入れておきましょう。

• 名前
• 生年月日
• 自分の写真
• これまでの経歴
• 今持っているスキル「Photoshop・Illustrator・HTMLなど」
• 資格があれば

このように具体的な情報がある方が、相手も分かりやすいです。

作品紹介ページの作成

１つ目のサイト(美容院)

写真にあるポートフォリオはA3の用紙で作成しており、ファイルに入れています。

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

次のページでは、メインビジュアルの写真を載せつつ、さらに店舗に関する詳細な情報を書いています。

説明の横にあるロゴも自分で考えたもので、「こんなのも作れますよ！」とアピールしています。

作品を掲載するときは、その作品を制作するときに考えたことや、心がけたポイントなどを添えておきましょう！

たとえば、下記のようなことを意識して文章を考えます。

• サイトの目的(集客や売上アップなど)
• ターゲットとした人物のイメージ像
• そのイメージに合わせて考えたデザインのポイント
• たとえば集客が目的ならそのために何を工夫したのか

ここで大事なのは、ただ好きなデザインで作ったのではなく、「こんな目的のためにこんな風にした」と伝えることです。

実際の仕事もそうですが、Webデザイナーは好きなようにデザインすればいいわけではありません。

改善や何かしらの目的のためにデザインや構成を考えるので、「私はそれも理解してしっかり考えてますよ！！」ということをアピールしましょう！

次のページでは、トップページの全体像を載せています。

ここでは全体のデザインを紹介しつつ、デザイン面で心がけたところを説明しています。

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

２つ目のサイト(カフェ)

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

そしてJQueryもコピペではありますが、「一応扱えますよ」ということで説明を書いています。

３つ目のサイト(通販サイト)

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

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

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

ファイルに入れて完成

あとはページを印刷してファイルに入れて完成です！

印刷については、今回はA３サイズで作成しましたが、私はスクールにあったプリンターがサイズに対応していたのでそれを使って印刷しました。

作成するサイズにもよりますが、同じようにA３サイズで作ると、自宅のプリンターではなかなか対応していないかと思います。

なのでその場合はコンビニで印刷するか、ラクスルなどの印刷会社を利用すれば、自宅にいながらでも簡単に入稿することができます。

おすすめのA３クリアファイル

A３サイズのクリアファイルのおすすめを２つご紹介します。

A３サイズはお店ではあまり見つからないこともありますが、ネットではいろいろあるので参考にしてください！

＼カラフルなおしゃれを求める方に／

＼シンプルで大容量を求める方に／

Webデザイナーの紙のポートフォリオを１ランク上げる方法

紙のポートフォリオは上記までで解説した作成方法でもいいですが、他の応募者と差別化させるためにも１ランク上げる方法を２つご紹介します。

本を参考にしてアイデアの幅を広げる

まずは本などを参考にして、アイデアの幅を広げることです。

私がご紹介させていただいた配置などで同じように作るのもOKですが、そもそもポートフォリオは「自分の力を伝える」という役割があるものです。

なのでデザインなどの表面的な部分だけでなく、しっかりと作る目的を確立させるためにも、本を参考にするのがおすすめです！

こちらの本は、どんな目的のためにポートフォリオを作成するのか、制作会社側はポートフォリオのどこを見ているのかなど、ポートフォリオの本質部分が解説されているので参考になります。

ポートフォリオを通して自分がどんなところで勝負すればいいのかアドバイスもあるので、転職成功のためにポートフォリオが強化されるはずです。

おまけ：Webポートフォリオにおすすめの本

ちょっとおまけです。こちらはWebサイト用のポートフォリオ作成に役立つ本です。

今回の記事では紙のポートフォリオ作成についてでしたが、Webデザイナーにとっては最初にも書いたとおり、Webサイトと紙の２種類のポートフォリオが必要です。

下記の本では、Webポートフォリオの作り方や上手く活用するためのポイントが書かれているので、こちらもぜひ参考にしてください！

表紙や紙質にこだわる

私は普通紙に印刷して普通のファイルに入れましたが、Webデザイナーとしてとことん細部にまでこだわるのもアリです。

中身の内容が１番大事ではありますが、表紙や紙質にまでこだわることで、面接官へ大きなインパクトを残すことができます。

おすすめはラクスルの冊子印刷で、１部から作成することができるものもあります。

紙のポートフォリオも用意してWebデザイナー転職を成功させよう

それでは最後に、この記事のまとめです。

ポートフォリオは、自分が今持っているスキルを証明するためのものです。

デザイン・コーディング・考え方など、これまで学んで身につけてきたものをアピールするためのツールが、ポートフォリオです。

ただやみくもに作品を並べるだけでなく、「なぜこのデザインで作ったのか」などの説明も、しっかりと記載しておきましょう。

ポートフォリオが完成したら、あとは就職転職活動に挑むだけです。自分にあった企業を探して、楽しくWebデザイナーとして働きましょう！