転職に役立つ!webデザイナーのポートフォリオ作成方法

Webデザイン

Webデザインを勉強しているけれど、今後どう動いたらいいのかわからない。Webデザイナーとして転職を考えているけれど、何が必要なのだろう。

そんなふうに悩んではいませんか?

今回は、転職に役立つポートフォリオの作り方をご紹介します。参考サイトも掲載しているので、ぜひ作ってみてくださいね。

SHEのWebデザイン講座に興味がある人は、体験レッスンへ↓

 

転職にとても重要!ポートフォリオの作り方

そもそもポートフォリオとは?

今までの作品をまとめたものを指します。Webデザイナーにとってポートフォリオとは、得意なこと、できることをアピールできる絶好の場。

特にデザイナーなどは就活時に求められるスキルが多いため、企業側はポートフォリオで判断するのだそう。

ポートフォリオには紙とWebの2種類がありますが、どちらかが採用されやすいわけではありません。たしかにWebで作れば動的表現を見せられますが、デザインを細かく見れる点では紙が有利です。

どちらも作り、先方や面接時の環境に合わせて対応できるようにしておくことをおススメします。

紙で作る場合

1ページずつillustratorで作成します。

なお、紙で作る場合は冊子版とPDF版の2種類を用意しましょう。PDF版はGoogleドライブやレンタルサーバーなどにアップロードし、先方が見れるようにする必要があります。

次に、以下の作成手順に沿ってご紹介します。

1. サイズ、完成形の決定
2. 掲載する情報をまとめる
3. レイアウトの決定
4. デザイン、印刷

⑴ サイズ、完成形の決定

サイズは先方が管理しやすく、持ち運びやすいA4がおススメです。A3は見やすいのですが、大きさゆえに持ち運びや管理には適していません。

  • 手製本
  • 製本サービスを利用
  • クリアファイルにファイリング

など、どんな形で作るかも決めましょう。

⑵ 掲載する情報をまとめる

ポートフォリオの要素は

  • 表紙
  • 自己紹介
  • 作品(10個以上あると良い)
  • 背表紙

となります。自己紹介ページ、作品ページには以下の情報を掲載してくださいね。

自己紹介

  • 名前や年齢、出身学校など
  • 自己紹介、PR
  • スキル(PhotoshopやHTMLなど)
  • Web版ポートフォリオのurl

作品

  • 作品名
  • 作品のスクリーンショット
  • コンセプト、工夫した点
  • サイトのurlなど

⑶ レイアウトの決定

あれもこれもと情報を詰め込みたくなると思うのですが、見やすく分かりやすいレイアウトにすることが重要です。

掲載する情報を整理し、先方が一目で理解できるようにしましょう。illustratorを使ってデザインをする前に紙に書くと、イメージしやすくなりますよ。

⑷デザイン、印刷

illustratorのアートボードを紙の枚数分作り、情報を1ページずつ作りこんでいきます。

デザインが終わったら印刷してまとめます。

Webサービスなどデジタルで作る場合

Webサービスなどデジタルで作る場合も、流れは紙と同じになります。しかし、こちらはコーディングをしなければなりません。

「コーディングが苦手」「1から作るのは不安」という人は、Webポートフォリオ作成サービスを利用してみてはいかがでしょうか。

おススメのWebポートフォリオ作成サービスを3つご紹介しますね。

⑴ MATCH BOX

誰でも簡単にポートフォリオが作れる、Webデザイナー初心者にやさしいMATCH BOX(マッチボックス)。

画像は最大6作品、48イメージまで。ガイドに沿って入力すれば、‘‘案件の概要’’や‘‘ポイント’’など、ポートフォリオを作成するうえで必要な情報を忘れずに記入できます。PDF化して印刷するのも楽チン。

⑵ Salon.io

ドラッグ&ドロップだけでポートフォリオを作れてしまうサービス、Salon.io

コーディングをしなくて済むので、「デザインは好きだけどコーディングは苦手……」という人に人気です。無料で使えるのは、3ページ・150イメージとなります。

⑶ Behance

Adobeシステムズが買収したBehanceは、Adobeのアカウントから登録が可能です。

グラフィックやディティールにこだわったポートフォリオを作成したい人にオススメ。無料でも十分な作品を作れますが、有料版ならより充実したサービスを受けられます。

参考になるポートフォリオサイト5選

転職にはポートフォリオが必要ですが、見たことのないものを1から作るのは難しいですよね。

そこで、参考になるポートフォリオサイトを5つ選んでみました。自己紹介ページや作品ページなどはどれも秀逸なので、ぜひ訪れてみてください。

田渕将吾さん

アートディレクション、Webデザイン、フロントエンジニアリングなどに従事する傍ら、個人プロジェクトも展開している田渕将吾さんのポートフォリオサイト

あまりの美しさに、サイトを目の前にしたまま数分間動けませんでした。

おしゃれなBGMに合わせて動くアニメーションは圧巻で、見ているだけでワクワクしてくること間違いなし。マウスオーバーしクリックすると、これまでの作品を1つずつ見ることができます。

宇都宮勝晃さん

アートディレクター、デザイナーとして活躍している宇都宮勝晃さんのポートフォリオサイトは、スクロールした際のエフェクトが心地よいです。

ポートフォリオの作品1つ1つに、そのデザインにした理由が簡潔に記されており、デザインの勉強にもなるでしょう。余白のある、上品でシンプルなサイトが好きな人におススメです。

勘村洋和さん

ウェブ、グラフィック、ゲームUIデザイン制作を行っている勘村洋和さんのポートフォリオサイト

心をくすぐるグラフィックとフォントが特徴的で、1ページにすべてのコンテンツをまとめています。

スクウェアなポートフォリオや、ご自身の住所をGoogleマップのポインターで示していて可愛らしいですよ。

徳田優一さん

フリーランスでWeb制作をしている徳田優一さんのポートフォリオサイト。

白と余白、ファーストビューにご自身の顔とメッセージを載せているところから、誠実さや信頼できる印象を与えています。

MITSUGU TAKAHASHIさん

デザイナー、エンジニアとして活動しているMITSUGU TAKAHASHIさんのポートフォリオサイト

モノトーンを基調としたシンプルなデザインですが、文字や画像のエフェクトに凝っています。Aboutページにご自身の使える言語やできることが細かに記されており、仕事を依頼する側としてはありがたいですね。

まとめ

ポートフォリオを作るには時間も労力もかかりますが、これはあなたの足跡であり、夢へのパスポート。思う存分自分らしさを出して、Webデザインに対する想いを伝えましょう。

「ポートフォリオ」という名のパスポートを持ったあなたが、望む企業へ入社できますように!

SHEのWebデザイン講座でサイトを作り、ポートフォリオに載せたい人はこちら↓

【執筆】

SHEshares編集部 めくばせ
2016年、服飾の専門学校に進学するも「わたしの人生で大切なものではない」と気づき、2017年1月に中退。同時期にライターを開始。現在はshares編集部としてライターさんのフォローなどをしている。
昔からモノづくりが好きで、2018年4月にはSHElovesでWebデザインを受講。ピアス制作やWeb制作にも注力中。
生粋の天秤座女で、常にフラット・バランス命。すべてを肯定し愛せる人間になりたい。
Twitter(@_____ilil_
おすすめ執筆記事
服飾学校を中退→Web業界へ。やさしい言葉で人々を救う‘‘保健室の先生’’が選んだ「自分を幸せにする」生き方
【私を救ったコトバたちvol.4】「あなたは大丈夫。人生はめちゃくちゃ魅力的だ。」

関連記事一覧

ライター育成します