独学

Webデザイナーのポートフォリオの作り方!参考サイトあり

  Webデザイナーのポートフォリオの作り方!参考サイトあり

Web関係の仕事に就く時、必ずと言っていいほどポートフォリオの提出が求められます。Webデザイナー、Webディレクター、Webコーダーやマークアップエンジニアは、どの職種でもポートフォリオは必要です。

また、フリーランスになった場合も、ポートフォリオを提出する機会は多いでしょう。今回は、ポートフォリオの作り方をポイントと合わせて解説します。

1. ポートフォリオとは

ポートフォリオは、作品集のことです。今まで関わった案件や、自分で作成したサイトを相手にわかりやすく、画像やテキストで紹介します。

2. ポートフォリオは何で作る?紙・サイト・WordPress?

ポートフォリオは何で作る?紙・サイト・WordPress?

WebデザイナーやWebディレクターなど、Webのクリエイティブ関係に就職するならば、必ずサイトとしてウェブ上で閲覧できるようにしておきましょう。

サイトを制作する職種に就くので、やはりホームページが作れなければいけません。

さらに、紙だと作品を郵送する必要があり、送付先の会社はそれを管理するのに手間がかかります。サイト上で見ることができると、見る側も送る側も楽です。

また、HTMLで作るか、WordPressで作るか悩む人もいるかもしれません。結論としてはどちらでも良いでしょう。

もしWeb制作の仕事が未経験の人で、作品にWordPressで実装したものがなければ、使えることをアピールするため、WordPressで作るのも有効です。

紙でのポートフォリオがOKな場合

グラフィックデザイナーやDTPデザイナーが、Webデザイナーへ転職活動をする場合は、紙のポートフォリオを提出する場合は珍しくありません。その場合は、紙でのポートフォリオもOKです。

もし、Webスクールに通ってサイト制作の知識をつけているのであれば、紙で作成したポートフォリオをサイトの形にしておいた方が、より採用される確率は上がります。

職務経歴書とポートフォリオは両方必要?

ポートフォリオだけでいい場合もありますし、職務経歴書も両方必要な場合があります。転職活動をする場合は、会社に求められるものに応じて提出しましょう。

ポートフォリオはソースコードも見られる?

Webコーダーやマークアップエンジニアでの採用以外は、コードを見られることはほとんどありません。

ただ、会社によってはソースコードに重きを置いてる所もあるので、ソースコードは綺麗に書いておくに越したことはありません。

うさ吉先生

私も採用はやっていたが、コーダー志望以外はほとんどソースコードを見る余裕はなかったなあ

3. ポートフォリオに書いておくべき項目

ポートフォリオに書いておくべき項目

ポートフォリオに掲載しておく項目は以下です。

ポートフォリオに掲載する項目

  • サイトのキャプチャ画像
  • URL
  • 期間
  • 担当範囲
  • サイト作成時のポイント

サイトのキャプチャ画像

サイトはリニューアルすることが多いので、作成したサイトのキャプチャ画像は必ず取っておきましょう

掲載ページは、トップページと、中ページをPCとスマホ両方載せます。中ページは特にこだわったページや見栄えのするページを掲載すると目を惹きます。

URL

現在公開していれば、サイトのURLを貼ります。もしリニューアルしている場合は、その旨記載しておきましょう。

日付・期間

いつ、どのぐらいかかったかも記載しておきましょう。案件の規模が判断できます。

担当範囲

作成したサイトの担当範囲を書いておきましょう。ディレクターをしたのか、デザインをしたのか、コーディングをしたのか。全てであれば、全て担当したものを書きます。

サイト作成時のポイント

サイト作成時にどのような提案をしたのか、どのようなアイディアを出したのか、苦労した箇所も含めて作成のポイントを書いておきましょう。

うさ吉先生

サイト作成時のポイントは結構読まれるので、ちゃんと書いておこう!

4. ポートフォリオを作るポイント

ポートフォリオを作るポイント

ポートフォリオを作るポイントをみておきましょう。

  • 作品数を多い方が◎
  • ブログの運用もポイント大
  • Javascriptを使って動きのあるサイトを作る
  • イラストが描ければ◎

作品数が多いとスキルの幅が計れるので、就職活動では採用率は上がるでしょう。Webの仕事が未経験で作品が少ない人は、なるべく自分で様々なサイトを作っておきましょう。

作品数が少ない場合は、ブログ運用をアピールしても良いでしょう。サイト制作の仕事では、サイト設計、メディア運営など、文章力が必要な場面は多々あります。文章力があるのはメリットです。さらに、積極性が感じられ、好印象に感じられるでしょう。

また、Javascriptを使って動きのあるポートフォリオを作るのも目を惹きます。Javascriptが苦手なWebデザイナーは少なくありません。Javascriptが得意であれば、動きがあるサイトを作ってアピールしましょう。

もちろん、イラストが描けるのであれば、イラストは忘れず掲載しておきましょう。

”Webデザイナー”がポートフォリオを作るポイント

Webデザイナーであれば、ポートフォリオのデザインはしっかり作り込みます。

また、ロジカルにデザインできることは強みになるので、作品に対し、なぜそのデザインにしたのか、言葉でしっかり説明できるようにしておきましょう。

”Webディレクター”がポートフォリオを作るポイント

Webデザイナーほど、デザイン力は必要ありませんが、ポートフォリオは見やすく作ります。

Webディレクターは、システム案件や規模の大きなサイトのディレクション実績は、ポイントが高いでしょう。

”Webコーダー・マークアップエンジニア”がポートフォリオを作るポイント

Webコーダーやマークアップエンジニアは、ソースコードが確認できるサイトの提出を求められるので、自分の制作したサイトでソースコードがチェックできるものを掲載しておく必要があります。

最近は、React、Vue、Angularのようなワークフレームが使えるかも重要なので、その点もわかるようにしておきましょう。

”フリーランス”がポートフォリオを作るポイント

フリーランスは、様々なサイト制作の依頼があるので、コーポレート、LP、EC、サービスサイトなど、幅広く実績を掲載します。

デザインの幅が広いよりは、得意のテイストがある方が依頼側にはわかりやすいかもしれません。

うさ吉先生

ポジションや働き方によって、ポートフォリオの見せ方は変えて言った方が良さそうだ

5. ポートフォリオを作る時の注意点

ポートフォリオを作る時の注意点

ポートフォリオを作る時、ウェブ上で閲覧できるようにしますが、特に、転職する人で前職のサイト制作実績を掲載する場合は、必ずBasic認証をかかておく必要があります

実績として公開しても良いという了解を得ていれば別ですが、了承を得ていない場合がほとんどです。もし誰でも閲覧できる状態であれば、問題になることがあります。

また、セキュリティ観点が甘いと思われる可能性もあるので、Basic認証は必須です。

うさ吉先生

就職活動の時は特に気をつけよう!

6. 参考になるポートフォリオサイト

では、良いポートフォリオとはどんなものでしょうか。公開されているポートフォリををいくつかご紹介します。

UNDERLINE

UNDERLINE
https://u-d-l.jp

お手本のようなポートフォリオです。シンプルですが、わかりやすくまとめています。

お客さんに向けて作成されていると思いますが、必要な情報にすぐたどり着ける構成です。まずは見習いたいですね。

KATOSHUN

KATOSHUN
http://katoshun.com

個性的なポートフォリオです。グラフィックや個性的な動きをつけて作品を紹介しています。

Shogo Tabuchi

Shogo Tabuchi
https://www.s5-style.com

Webデザイン集S5-styleを運営されている有名なデザイナーの方です。このぐらい作成できれば、文句なしでしょう。

TAIKI KATO

TAIKI KATO
http://taikikato.jp

シンプルながら、かっこいいポートフォリオサイトです。デザインに自信があると、作品だけでかなり映えてきます。

うさ吉先生

フリーランスや法人のポートフォリオだが、参考になるぞ!

7. 現役Webデザイナーからポートフォリオ作成のアドバイス

  • まだスキルがない場合でも、ポートフォリオの作り込みはすごく好印象!積極的に色々なデザインにチャレンジしておいた方が良いと思う
  • UI・UXのスキルがあると強いと思う。ツールやサービスサイトの実績をポートフォリオに載せてたけど、面接の時よく聞かれた
  • Webデザイナーの経験はなかったけど、パッケージデザインをしていたので、そのポートフォリオを見てもらって採用が決まった
  • ポートフォリオを見せた時、ディレクションまで担当していたので、それが採用の決め手になった
  • 動きをつけたポートフォリオを作るなら、動きのセンスも大事。零コンマ秒で調整されてるか見られますよ

8. ポートフォリオ作り方のFAQ

ポートフォリオ作り方のFAQ

掲載する作品数が多い場合はどうしたらいい?

作品数が多い場合は、いくつかピックアップして掲載しましょう。コーポレートやLPなど、各ジャンルで2,3作品あれば十分でしょう。

コーポレートしか作成していないのであれば、10〜20作品程度掲載しておきましょう。

就職活動の場合は、100作品あったとしても全て閲覧できないので、見て欲しいサイトに絞って、多くても30作品ぐらいが良いでしょう。

ジンドゥーやwixを使ってもいい?

簡単にサイトが作成できるサービスにジンドゥーやwixがありますが、Web関係の職種に就くのであれば、使わない方が良いでしょう。

Web制作のプロを目指すのであれば、サイトを作れることが前提です。

趣味で作ったサイトは作品に含めていい?

趣味で作ったサイトも作品に含めて問題ないです。

趣味のサイトは人となりもわかるので、面接の時に印象に残る場合が多いです。

9. ポートフォリオまとめ

WebデザイナーやWebディレクターにとって、ポートフォリオは就職活動に重要なツールです。また、フリーランスにとっても案件を受注するための大事なツールです。

自分のスキルをアピールするためにも、しっかり作り込んでおきましょう。

うさ吉先生

ポートフォリオを作りこんでおくと、就職の時も、フリーランスの時もスムーズに話が進んだぞ