クリエイティブな世界で活躍するためには、必要不可欠なポートフォリオ。しかし、作成方法やどんなものが良いかについて未経験者にとってはハードルが高いものです。
そんな方々のために、「未経験からWebデザイナーになるには vol.6」では、クリエイティブ系の専門学校で講師も務める「内田 祐生（うちだ さちお）」先生が採用者目線を踏まえてわかりやすく解説します。未経験からでも、仕事を取るためのポートフォリオの作り方を知り、自分の可能性を広げましょう。
【ダイジェスト動画】でポイントをチェック!
- ポートフォリオを作る際の注意点がわかる
- 採用者の方がどんな目線でポートフォリオを見るかが把握できる
- Webページと紙の両方のポートフォリオの作り方がわかる
- 未経験からWebデザイナーになるには vol.6～ポートフォリオ入門～
- 登壇者紹介
- 企業に採用されるWebデザイナーになるためのポートフォリオの作り方
- Webページだけではなく紙のポートフォリオについて
- 未経験者が作品を制作するためのイロハ
- Ｑ＆Ａ
- まとめ
未経験からWebデザイナーになるには vol.6～ポートフォリオ入門～
これからWebデザイナーを目指したい方に限らず、クリエイターになろうとしている方には必ずと言っていいほど必要になる「ポートフォリオ」。
「未経験からWebデザイナーになるには vol.6」では、ポートフォリオとは何かというところから実際にどう使うか、作成する時のポイントまで、現在デザイン（印刷／Web）のディレクションや制作、執筆活動の他、クリエイティブ系の専門学校で講師も務める「内田 祐生（うちだ さちお）」先生に、未経験の方が仕事を取るためのポートフォリオという視点でお話しいただきました。
登壇者紹介
内田 祐生（うちだ さちお）氏
design fleet inc. 代表取締役/ディレクター、デザイナー、ライター、インストラクター
デザイン（印刷／Web）のディレクションや制作、執筆活動の他、クリエイティブ系の専門学校で講師も務める。
1999年デザイン事務所開業、これまでに動画配信を主要コンテンツとする文化庁サイトのWebデザイン担当や、東京都教育庁のPRに関するデザイン制作、電鉄系建設会社のコーポレートプロフィールに関する印刷、Web両方のディレクション、デザイン制作などに携わる。また、UI/UX案件として大手メーカーのユニットバスに関するクライアント向けプレゼンシミュレータ開発を長年に渡って行っている。案件としては相談を受け、コンサルタント的な立場から始まり、開発や制作につながるパターンが多い。
企業に採用されるWebデザイナーになるためのポートフォリオの作り方
プロのポートフォリオを真似するのは注意が必要！その理由とは…？
まず「ポートフォリオ」を作る前に、ポートフォリオが何かということを知っておいて欲しいと思います。何か物を作る仕事の人たちもしくはクリエイター業界で「ポートフォリオ」と言った場合、自分の作品集と言い換えることができます。インターネットで「デザイナー ポートフォリオ」で検索すると、プロのデザイナーのポートフォリオを見ることができるのですが、参考程度にしていただくことをおすすめしています。
プロで既に活動されている方は、未経験からWebデザイナーになる時のポートフォリオとは役割が異なります。
皆様にはまず初めに、就職や転職など採用担当者の方に見てもらうという限定的な目的のものになるため、マーケティングのツールにしているプロの方のポートフォリオとは別の物だと考えてください。
ポートフォリオ作成時に心がけること
それでは、就職や転職活動、またはフリーランスとしてWebデザイナーの仕事の案件を取得する際に何が大事になってくるのでしょうか。
まずは、「企業や採用担当者が評価をしやすい情報を載せる」ということが大きなテーマになります。その前提として、数を作るよりも質を上げること、見てもらった時に短時間で印象づく様な作品を載せることが大切になってきます。
ポートフォリオを簡単に作れるサービスは使っていい？
ポートフォリオを作る際に「ポートフォリオを簡単に作れるサービス」の使用を考える方もいるかと思いますが、ここでは自分でWebサイトを作ることをおすすめします。WebデザイナーはWebページを作成する仕事です。そのため、Webサイトを作るときの流れも含めてできるようになっていた方が結果的に仕事に繋がります。
例えば、ホームページのアドレスとなる独自ドメイン、自分専用の「URL」を自分で取得してホームページを作ると、採用担当者としてはここまでは出来るというのが分かりやすく把握することができます。
ポートフォリオページの構成について
それでは実際にポートフォリオを作る際のページ構成についてお伝えします。
まずはタイトルや小さいプレビュー画像が入っているページをTopページにすることがおすすめです。プレビューの数は10〜20くらいが一般的ですが、先ほどもお伝えしたように数にこだわりすぎるのは避けてください。採用担当者の方は隅から隅まで見ている訳ではありません。ポイントを絞って幾つか見ているため、質を下げるくらいであれば数を抑えることが大切です。また、ちょっとしたコメントを加えるのもポイントです。
そしてこれらのプレビューをクリックすると、一つひとつの作品ページに移ります。未経験の方の場合は架空のものでも結構ですし、実際に関わった案件がある方は必ずクライアントに許可を取って掲載してください。
更にそこをクリックし実際のページに移行できる様に作れると、ポートフォリオの導線としては完成に近いのではないでしょうか。
ポートフォリオでどこを見られているか
ポートフォリオを作成する際に、採用担当者の方はどこを重点的に見ているのでしょうか。
例えばランディングページや広告、そしてプロモーションの場合は、全体の流れから見ていくことが多いです。構成がどうなっているか、情報を上手くまとめられているか、その後に色遣いやレイアウト、ロゴがきれいに作られているかなどを見ていきます。
その次に、インタラクションと言われるクリックをした時にどういう動作をするか、例えば会員登録のボタンがあった時にマウスが乗っかると色が変わるようになっているなど、何ができるかというスキルの部分を確認していきます。
後はこのページのHTMLが載っているソースコードを見て、コードがきれいに書けているかどうか、見出しや段落などのタグ付けなども見られることがあります。
また細かい部分になってしまいますが、ヘッド（<head>）と言われるタイトルの付け方や、メタタグと言われる「SNSで掲載する時にこのページを引用・共有・リツイートする場合は、この画像ようにして欲しい」と指示する部分やリンク先が変になっていないかなどをチェックします。
最後に画面を縮めてスマホ対応になっているかも一応見ることがあります。
ただこちらに関しては特になっていないからといって不合格になるというわけではなく、パソコンの画面とスマホの画面でメニューバーがどうなっているかなどをソースコードで確認していることが多いです。ぜひ細かいところにまでこだわって作って欲しいなと思います。
Webページだけではなく紙のポートフォリオについて
Webページではなく紙で提出する時はどうするの？
ここまでWebサイトのお話をさせていただきましたが、中には紙でポートフォリオを提出して欲しいなどの場合もあるかと思います。その際は、大体A4などの使いやすいサイズや、イラストレーションやグラフィックデザインをされる方の場合は大きいA3のサイズをおすすめしています。
紙のポートフォリオの構成
紙の場合でもWebサイトと同じく、ポイントがずれているとどれだけ数を多く制作しても意味がありません。そのため、紙でポートフォリオを作る際には以下のポイントを意識して欲しいと思います。
まずは作品の前に自己紹介があること。
これは短時間で読めるもので、経歴や印象に残る意外な点を載せると良いと思います。
また写真も工夫したものや印象に残るものにしてください。後は連絡先やアドレス、SNSアカウントなども載せることをおすすめしています。
企業が知りたい情報の一覧
まずは作品のタイトルが必要です。Webサイトのタイトルや、また架空の物であればその名前を記載してください。
次に制作の概要、仕様を載せてください。ここでは「どんなテーマにどのように取り組んだか」「実際にどの部分を制作したか」を200字程度に簡潔にまとめて書いて欲しいと思います。加えて、Webサイトの目的やターゲットユーザー、コンテンツの特徴、またどんな言語を使ってサイトの構成はどのようにして、レスポンシブ対応をどのように行ったかまで書いておくと、非常に良いと思います。
作業期間に関しては、クライアントがどのくらいのものを任せたらどれくらいで対応できるかの目安になるため、こちらも載せておくと親切かもしれません。
またツールに関しては、HTMLやCSS、JavaScriptなどテキストエディタのようなソフトに加えて、例えばAdobe社のアプリなどの他にも使用できるツールがあれば書いておくと、アピールポイントになります。
未経験者が作品を制作するためのイロハ
未経験者の作品制作に大切なこと
未経験の方が作品を作る際に大切にして欲しいことがあります。まずは、セルフイメージです。これは自分がどういう風になりたいのか、どんな仕事がしたいのかが自分の中にあることを大切にして欲しいと思っています。
これは何をしたいか、職種や内容まで具体的に考えてみてください。それによってポートフォリオの見せ方を考えることができますし、自分が何か取り組むときのブレを防ぐことができます。
企業が知りたいこと
それでは未経験者の方に対して、企業側は何が知りたいのでしょうか。こちらは主に三つあり「自分でどれくらい考えたか」「何ができるか、何ができないのか」「どれくらいのスピードでできるのか」が大切です。
また、アーティスティックなサイトは評価しにくいため、LPやECサイト、コーポレートサイトなどがおすすめです。全部ではなく、一部抜粋して載せるのがよいと思います。
架空のサイトを作るときに気をつけたいこと
未経験の方が架空のサイトを作る際に気をつけて欲しいことがあります。多くの人がやってしまいがちなのは、画像を集める際に著作権を気にしないまま制作してしまうということです。
自分で撮影した素材や許諾のある画像であれば問題ないのですが、著作権に関して指定があるものは注意して欲しいと思います。
また文章に関しても同じことが言えます。自身でWebライティングをする分には問題ないですが、どこかから引用する際は著作権に注意してください。
Ｑ＆Ａ
最後に、参加者の方からの質問に答えていただきました。
Q.Webライティングとは何でしょうか。
WebライティングとはWebページに掲載する文章を書くことです。1番大きな見出しとその次に大きな見出しを書き分けたり、ここに本文を書いてここには箇条書きで説明を記載するなど、構成を明確にして書くのがWebライティングの特徴の一つです。
Q.<span>の設定なども含めて、Webライティングでしょうか。
<span>や<div>というのはグループ化要素と言って、CSSで見た目を変える時に使うもので、そこからはデザイナーの仕事です。そのためWebライティングの範囲としては、見出しや本文、箇条書きなど、テキストをページにどう載せるかを明示するところまでと考えて頂くのがよいと思います。
Q.社会人3年目で現在、ゲーム業界のグラフィックへの転職を考えています。業界未経験です。
大学では日本画を学び、現在も制作を続けています。3Dモデルはいくつか制作していますが、自分の能力を仕事にどう生かせられるか分からないため、自分の能力をどのように見せていけばいいのか分かりません。アドバイスがあればいただきたいと思います。
自身ができることや得意なものは強力なアピールポイントになります。なので、日本画などのできることは並行してポートフォリオに記載してください。
ハリウッドで活躍されている3DCGの有名な方は、有名作品のデモリールを制作しているだけでは声がかからなかったところ、金剛力士像を3Dモデルでそっくりに作った途端に声がかかったそうです。
何かに突き抜けているということは、そういうチャンスに結びつく可能性があるということです。繰り返しになりますが、得意なことはぜひポートフォリオに載せていってください。
Q.トレースはおすすめしないとのことですが、スキル向上のための訓練としても必要がなさそうでしょうか。
クライアントや採用担当者に見せるものはトレースじゃない方が良いと思いますが、スキル向上のための訓練としてはぜひやってください。
まとめ
未経験の方がどんなポートフォリオを制作したら採用されるのか、企業側の目線も交えてお話いただきました。ポイントや進め方など、具体的に行動できるものが満載。一日でも早くWebデザイナーとしてデビューするために、ぜひ皆様も今日から少しずつ試してみてください。
