WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

WEBデザイナーの転職用ウェブ・紙面ポートフォリオの作り方

WEBデザイナーがはじめて転職をするとき、一般的な会社員とは決定的に違うものが1つあります。それが自分の実績と作品を載せるポートフォリオです。WEBデザイナーの転職を成功させたいならば転職に関わるすべてのものをデザインすることが大事です。サンプル用のIllustratorデータをご用意していますので、初めてポートフォリオを作る方はサンプルをダウンロードしていただくと作業が捗ると思います。

基本はWEBポートフォリオ

WEBデザイナーのポートフォリオ

WEBデザイナーとしての実績や技量・得意分野などを転職希望の会社にアピールするために必要不可欠なものです。
WEBデザイナーの経験がある人ならば、リリースされているWEBサイトやサービスなどを「どのように作ったか」をまとめます。

転職活動と同時並行でWEBポートフォリオを作るのはかなりの負担にありますので、転職を考え始めたらWordPressなどで時間の空いているときに作っていくことをおすすめします。1ページ内に色々な要素を入れたい場合は静的なHTMLでも良いと思います。

UI設計が得意な人は見やすさや使いすさを重視したデザインとコーディング。ランディングページや旅館のように画像をふんだんに使って魅力を表に出すのが得意な人はグラフィカルなデザインにすなど、自分の転職希望先と、得意分やに合わせたデザインをしましょう。

注意点は制作部に関わる著作などの権利問題。会社勤務で制作した成果物を自身のウェブサイトに「自分が制作した」とキャプチャ画像などで掲載するとトラブルになる可能性があります。

使用アプリケーション

WEBサイト制作に使用したアプリケーションをまとめます。転職をするレベルのWEBデザイナーなら当人も採用担当もPhotoshopやDreamweaverなどの基本ソフトは使えることは周知ですが、After EffectsなどのあまりWEBデザイナーが使用しないソフトが使える場合は記載することによって目を引くこともあります。記載しておくことに損はありません。

使用言語

2016年度現在ではHTML5 / CSS3は必須です。WEBデザイナー歴が2年もある人ならば、簡単なjavascriptやjqueryを書いたりフリーのライブラリをカスタマイズすることも多いと思います。「そんなのWEBデザイナーなら普通にやることだから書かなくてもじゃない?」と私も思っていたのですがこれがビックリ、思いもよらないところで需要があります。

それが日本でも最大手のWEBサービスを展開しているIT企業。このような現場ではjavascriptはシステムエンジニアの仕事でWEBデザイナーは基本的にHTML / CSSしか担当しない部署もあります。これが原因でWEBデザイナーとシステムエンジニアの連携が淀んでいる現場があります。

そのときに簡単なjavascriptやPHPがかけるとシステムエンジニアからの信頼は絶大なものになり、作業の効率化に結びつきます。その意味で「WEBデザイナーとSEの中間の人材」というのは大手WEB系企業には足りていない状態です。

自分の技術をレーティング評価する

レーティング評価

Illustratorファイルダウンロード

自分の経験技術をレーティングにして一覧にすると採用担当者はひと目であなたの技術を把握し、会社とマッチングするのかどうかを判断することができます。ポートフォリオは作品のアピールも重要ですが最速で自分の技術を相手に把握してもらうことが重要です。採用担当者は時間にとても厳しく、限られた時間で双方のマッチングを図らないといけないためポートフォリオチェックを早く終わらせる心配りをしておくと心象がよくなります。

開発環境

大きいプロジェクトに関わった経験のある人は開発環境も書いていたほうが有利になります。WordPressの開発ならば自身のPCにXMAPやMAMPを入れてテーマやプラグインを開発しますし、PHPをベースにWEBサービスを作っている会社ならばテンプレートエンジンでSmartyを使っているところも多くあります。

最近になってバージョン管理はGitが増えて来ましたが、Subversion(svn)を使用している大手の多くあります。このような開発環境での仕事の実績があると入社後に戦力になる期間が早く、採用担当に好印象を与えることができます。

担当フェーズ

自分がWEBデザイナーとしてどのような立場にいたのかを整理することが重要です。上流工程からプロジェクトに入り込んでディレクションを行いながらデザインをしていた経験のある人も多いと思います。そういったスキルは転職希望先の会社が求める人材としてマッチングする可能性も高いので、図にしてみるなどわかりやすくデザインしましょう。

ポートフォリオはスマホ対応を行う

ポートフォリオのスマホサイト

WEBデザイナーでも印刷したポートフォリオは必要

印刷用のポートフォリオ

面接には必ず紙でデザインしたポートフォリオを持っていくこと。

面接会場がネットがつながる環境でない場合もありますし、パソコンを出す雰囲気ではないこともあります。ノートパソコンというのはプロジェクターに繫いで大画面で見られるようにしない限りプレゼンには適しません。

自分の経歴や実績などを説明するときに「わかりやすく資料を持って行きました。こちらをご覧いただきながら説明させていただいてもよろしいでしょうか?」と確認を取ればダメという面接官は滅多にいないと思います。

会社としても優秀で意欲のあるWEBデザイナーは欲しいのです。面接にきているデザイナーをより深く理解できるツールがあるのでしたら断る理由がありません。

WEBポートフォリオに掲載できない制作実績を載せる

WEBに公開できない制作実績としてわかりやすいのがバナーです。
会社に属しているとそれなりの数のバナーを作るとは思いますが、自分が作りました!とキャプチャを取って自身のWEBポートフォリオに載せるのは引用としては適切でなく、かなりのグレーゾーンです。

そういったものは決してWEBには出ず、会社の不利益にならない紙面でのポートフォリオのまとめて、面接に持って行きましょう。

就職や転職をしたばかりのWEBデザイナーは環境に慣れていないことから、最初はバナーを作る仕事を振るというのは定説です。実際に私もディレクターの時は新しく配属されたデザイナーに対してはスキルが把握できないことを理由にバナーの仕事を振っていました。

個人的な意見ではバナーを高品質で大量生産できるデザイナーは1人いると非常に助かります。

ポートフォリオの表紙を作る

ポートフォリオのデザイン例

Illustratorファイルダウンロード

Illustratorに慣れていないWEBデザイナーでも編集できそうなポートフォリオのデザインを起こして見ました。Adobe製品をインストールしたらインストールされる小塚ゴシックと、windows標準搭載のArialをしようしています。お好みのフォントに変更してご利用ください。初めてWEBサイトの印刷用ポートフォリオを作るデザイナーのお手伝いができれば嬉しいです。

自己紹介と自己PR

ポートフォリオのプロフィール

Illustratorファイルダウンロード

1ページ内に職務経歴の概要、所持スキル・代表制作物があると担当者はわかりやすいです。WEBデザイン未経験者は制作実績の欄は使わずに職務経歴の欄を利用して勉強で作成したWEBサイトの詳細を載せるとよいでしょう。

スキルのレーティングも自分が勉強に費やした時間にしたり、自身があるものの評価を高くすることをおすすめします。

印刷用ポートフォリオに掲載するWEBサイト例

印刷用ポートフォリオの作り方

Illustratorファイルダウンロード

IllustratorかIndesignで作成することをおすすめします。WEB専門だとPhotoshopだけを使いたい気持ちもわかりますが効率が悪いです。10枚以上のページになるならIndesignを使った方が管理や更新が楽にできます。Adobe製品の経験者ならば2ヶ月もあれば仕事をしながらでもIllustratorやIndesingのを使ってポートフォリオを作るレベルまで行くことは簡単です。

アプリケーション習熟度をインフォグラフィック化する

アプリケーション習熟度をインフォグラフィック化する

Illustratorファイルダウンロード

DTPデザインでもWEBと同様に自分のスキルをアピールするページにレーティングを使用すると効果的です。WEBページのようにスクロールさせることができないため、小さい範囲でデザインをまとめなければなりません。サンプルとしてアプリ習熟度75%のアイコンを作成しました。フォントの種類を変えてデザインに合うようにしてお使いください。習熟度のグラフはマスクを修正することで変更できます。

WEBスキルをレーダーチャート化する

スキルをレーダーチャートにする

Illustratorファイルダウンロード

WEBデザイナーだけれどもDTPもある程度こなせる。HTMLとCSSは得意だけれどJavascriptはちょっと自身がない…。このような比較するものがあるときはレーダーチャートなどを使用すると便利です。採用されたいがために嘘をつくと評価が悪くなりますので、きちんと自分のもつスキルの自己評価と、WEBデザイナーの世界の中でどのあたりに位置しているのかを数値化しましょう。

A4用紙をクリアファイルに入れる

印刷はインクジェットプリンターを使用して、紙は高品質か安い写真用のものを使用します。写真用紙を使うくらい気合を入れるならば光沢よりもマット系や絹目調のものがテカリが少なおすすめです。

ポートフォリオを収納するクリアファイルは見た目があまりに安っぽくなければ何でもよいと思います。私はA4写真アルバム用のナカバヤシ製のクリアファイルを使っています。

ポートフォリオはWEBデザイナーの分身

ポートフォリオを作成するのはかなりの時間と労力を使います。WEBサイトひとつ立ち上げられるくらいの工数といっても過言ではありません。履歴書や職務経歴書などの比較になりません。それでもやるべき理由は転職希望先に自分のスキルとマインドを正確に伝えることと、意欲を汲みとってもらうことです。

採用担当もWEBに関わっている人です。WEBデザイナーの作るポートフォリオはどのくらい大変なのかは全て理解しています。手の抜いたものならば心象が悪いです代わりに、技術が未熟でも作りこんだものならば意欲を組んでくれることもあります。

WEBデザイナーで転職をお考えの方はポートフォリオは作りこみましょう。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST