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のアカウントから登録が可能です。

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

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

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

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

⑴田渕将吾さん

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

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

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

⑵宇都宮勝晃さん

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

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

⑶勘村洋和さん

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

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

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

⑷徳田優一さん

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

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

⑸MITSUGU TAKAHASHIさん

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

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

⑹Mai Iwakitaさん

Webディレクションやデザイン、アプリデザインなどを行っている、Mai Iwakitaさん。Maiさんがこれまで制作されたものを並べた、究極にシンプルなポートフォリオサイトです。

作品はどれも見たことのある有名なものばかりで、だからこそ、華美な装飾のないシンプルなデザインに映えるのでしょう。

彼女のことが詳しくわかる記述はありませんが、それすらも計算されているような、ミステリアスな印象を受けます。

⑺加藤 俊司さん

通信会社から30歳を過ぎてWeb業界に転身した、加藤俊司さんのポートフォリオサイトです。

作品の紹介には工夫点やアピールポイントも記載されており、加藤さんがどんなことを考えてデザインに取り組まれているのか、どんな技術を持ち合わせているのかがわかります。

また、スクロールの動きに合わせて、左メニューバーとコンテンツの間のイラストが動く遊び心もあって、心惹かれますよ。

⑻長谷川 寛さん

こちらは、Webに特化したフリーランスデザイナー・長谷川寛さんのポートフォリオサイトです。

信頼感や誠実さを感じさせる白をベースに、アクセントとしてカラーを使っており、幾何学模様や余白の使い方には洗練された印象を受けます。

方針・コンセプトには「自分ができること」「仕事に対しての姿勢」を詳細に記述しており、クライアント側としては依頼しやすいと感じるのではないでしょうか。

⑼Manaさん

Web関連のお仕事をしている人、特にWebデザイナーのなかで知らない人はいない「Webクリエイターボックス」を作った、Manaさん。

世界で活躍する彼女のポートフォリオサイトは、すべての人にやさしい、わかりやすい設計となっています。

基本的にビジュアルは大きめで、元気いっぱいな印象。画面を縁取る花の素材ややわらかいフォント、配色から彼女の人柄も感じられます。

⑽西村沙羊子さん

こちらは、Web&グラフィックデザイナー・西村沙羊子さんのポートフォリオサイトです。

フォントもビジュアルもすべてがモノトーンでまとめられており、こだわりのある強い女性を想像できます。

サイトではこれまでの作品やプロフィールだけでなく、ブログや旅の記録などプライベートの顔を見ることもでき、親近感が湧きますよ。

⑾Yu Ishiharaさん

デザイナーであるYu Ishiharaさんのポートフォリオサイト、normo(のるも)。

スクロールに合わせてピンクと緑と黄色の水面がゆらりと動き、ついつい何度もスクロールしてしまいます。

normoという屋号の由来も、思わずため息がこぼれてしまうほど素敵です。

こちらのサイトを見ていただけるとわかる通り、余白をうまく使うと、Aboutやプロフィールなどの境界線も必要ないのですね。

⑿TAIKI KATOさん

こちらは、アートディレクター、デザイナーである加藤タイキさんのポートフォリオサイトです。

作品のカラーがベースのグレーに馴染み、洗練された雰囲気を醸し出しています。「Art Director/Designer」や「Tokyo」の部分にマウスを重ねると下線の色が変化するところがおしゃれ。

右上のハンバーガーメニューから「WORKS」を見ると、これまでの作品が敷き詰められています。

それでも主張が激しく見えないのは、ビジュアルの構図やカラーに統一感があるからなのでしょう。

⒀Yuto Takahashiさん

アートディレクター・フォトディレクターである、Yuto Takahashiさんのポートフォリオサイト

スクロールに合わせてスルスル動くアニメーションや、ビジュアルの上でじりじりと動く文字、スクロールすると開く少女の瞳。

どこを切り取っても美しく、正直感嘆のため息すらも出ませんでした……。

⒁TAKAYA OHTAさん

ストーリーとコンセプトを大切にし、CIを起点としたデザインを得意とするデザイナー・TAKAYA OHTAさんのポートフォリオサイト

若い女性に人気の「MERY」や「LIPS」のロゴを制作した方なんですよ。

サイトは白とミントカラーをベースとしており、爽やかな印象を受けます。

作品にマウスを重ねると、その作品に関連のあるビジュアルに変わるので、サイト全体の印象も変わって面白いですよ。

⒂青山 裕企さん

さて、次は写真家・青山裕企さんのポートフォリオサイトをご紹介します。

空を飛ぶサラリーマンを撮影した「ソラリーマン」や、思春期の女子学生の危うさに焦点を当てた「スクールガール・コンプレックス」から青山さんを知った方も多いはずです。

左メニューの縦書きが新鮮で、「日記」「予定」「連絡」という文字に学生生活を思い出します。

こういったところのデザインからも、青山さんと言えば学校や女学生、というイメージが定着するのでしょうね。

⒃Nagi Yoshidaさん

フォトグラファー、ヨシダ ナギさんのポートフォリオサイトは、アフリカ感満載。

彼女は幼少期からアフリカ人に強烈な憧れを抱いていたそうで、独学で写真を学び、2017年には日経ビジネス誌「次代を創る100人」にも選ばれました。

ヨシダさん独特の鮮やかな色彩が印象的で、アフリカについてそれほど知らない私も、吸い込まれるように見てしまいます。

「自分だけの色」を見つけられると他の人との差別化も図れますし、なにより「〇〇といえばあの人」と思い出してもらえる点は、個人が活躍する現代で強みになりますよね。

⒄上田 バロンさん

こちらは、イラストレーターやキャラクターデザイナー、アートディレクターとして活躍されている上田バロンさんのポートフォリオサイト

スクロールはせず、右上のハンバーガーメニューから詳細を見ることができます。こういった自分ならではイラストや作品に注目してほしい場合は、スクロールのないサイトに仕上げる選択肢もあるのですね。

⒅Florent Petitfrereさん

次に、海外で活躍されている方々を見てみましょう。

1人目は、Florent Petitfrereさんのポートフォリオサイト。ファッションモデルとしての国際的なキャリアを経て、現在はヨーロッパで写真家として活動されています。

スルスルと動くアニメーションに合わせて現れる作品はどれも美しく、スタイリッシュ。この画面上に「about」「contact」、そしてハンバーガーメニューがあり、スクロールせずにポートフォリオを楽しめます。

こういった設計は作品を集中してみることができますよね。

⒆Shantellmartinさん

2人目は、Shantellmartinさんのポートフォリオサイト。マウスに合わせて後ろのイラストが動いてとてもかわいらしい。

作品ページでは、スクロールするとまるで雑誌のようにレイアウトされた作品を楽しむことができます。遊び心あふれる方なのでしょうか。

基本的に右上に配置されるハンバーガーメニューが、左上の名前のロゴに組み込まれている点もおしゃれなんです。

⒇Ollestudio

最後にご紹介するのは、Ollestudioのサイトです。

他のサイトとは違い、スクロールすると固定のページが表示されるのですが、その瞬間のスルスル~っとした動きが快感。つい何度もスクロールしてしまいます。

白をベースとして雑誌のようにレイアウトされており、風通しの良い印象を受けますね。

デザインを盗まれないようにする対策

自分が時間と労力をかけて作り上げたものを盗まれ、あたかもその人が1から作ったかのように振舞っているのをみると、怒りを通り越して悲しくなってしまいますよね。

特にクライアントワークで盗用などが起こると、「信頼関係の上で仕事しているのでは」と思うはずです。

とはいえ、自分自身と作品を守るための防衛策をとっておいて損はないでしょう。Webデザイナーには、以下3点の対策をおすすめします。

⑴低解像度の画像にする
⑵セキュリティーをかけて相手が編集できないようにする
⑶パスを残す際にはレイヤー統合をして、編集が難しい状態で共有する

また、以下のような対策もあるようです。

小さい画像サイズに縮小し(または劣化処理)、ウォーターマークを付けて公開する

詳しくは、こちらのサイトをご覧ください。

まとめ

ポートフォリオを作るには時間も労力もかかりますが、これはあなたの足跡であり、夢へのパスポート。

思う存分自分らしさを出して、Webデザインに対する想いを伝えましょう。

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

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

【執筆】

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

Share Story
このストーリーをシェアする
ツイート シェア