SHINOBLOG

WEBデザイナーを目指す人向けブログ

WEBデザイナーになるには

【未経験の方】WEBデザイナーの面接で失敗しないポートフォリオの作り方とは

投稿日:

【未経験の方】WEBデザイナーの面接で失敗しないポートフォリオの作り方とは

  • ポートフォリオなんて作ったことないし、作り方わからないよ…
  • ネットの記事や参考書はたくさんあるけど、どれを信じれば良いかわからない…

こんにちは、フリーランスWEBデザイナーのSHINOBUです。

これからWEBデザイナーになるという未経験の方の場合、面接で見せるポートフォリオの作り方に悩む人は少なくありません。

ネットでも色々な記事があり、参考本もたくさん出ています。
でも、書いてあることはバラバラで「どれを信じたらいいのか」とさらに悩むことも…。

この記事では、現場で耳にする採用側の声も交えつつリアルな情報をお伝えしていきます。

では、さっそく本題へ!

希望の職種によってベストな見せ方は変わる

ポートフォリオには、紙媒体やWEB媒体があります。
これから就きたい職種によってベストな形を選ぶのが良いかと思われます。

WEBデザイナーにも、細かく分けると3パターンの働き方があります。

① デザイナー(デザインワークのみ)
② コーダー(コーディングのみ)
③ デザイン&コーディングの両方

それぞれ、どのような見せ方が良いのか見ていきましょう。

① デザイナー(デザインワークのみ)

デザイナーとしてデザインワークのみをやっていきたいという方は、PDFなどでポートフォリオがまとまっているだけでも問題ありません。
自作のポートフォリオサイトなどの準備は必須ではありませんので、サイト構築のスキルがない方も心配はいりません。
むしろ、デザイナーとしてデザイン面に注力するのが良いかもしれません。

ただ、WEB上にサイトとして作品がまとめられていると、採用側がアクセスしやすいというのは事実です。
無料のポートフォリオサイト作成サービスもたくさんありますので、それらを活用してサイトを用意しておくと、尚よしです。

⬇︎以下の記事で、無料のポートフォリオ作成サービスをまとめています。
【実際これでOK】WEBデザイナーのポートフォリオサイト作成サービスまとめ

② コーダー(コーディングのみ)

自作のポートフォリオサイトを準備するのがベストと思われます。
ポートフォリオサイトの目的は、今までの作品を見せることだけではありません。
コーダー志望であれば、ポートフォリオサイトの作成を通して、コーディングスキルを見せるという意図もあったりします。

ですので、未経験ながらも今のレベルで作れるものを用意しておくのが良いかもしれません。
採用側は、今のレベル感だけでなく、仕事に対する意識や、これからの伸び代も合わせて見ていますので、頑張って作ってみること自体に価値があったりします。

あくまで「自作のWEBサイトがベスト」であり、PDFなどの形がNGというわけではありませんのでご心配なく。

③ デザイン&コーディングの両方

こちらも、ベストは「自作デザイン・自作サイト構築」なのですが、PDFデータや無料サービスでも問題ありません。

ポートフォリオの見た目はシンプルで良い

この記事で一番お伝えしたいのは、「見た目はシンプルで良い」ということです。

というのも、私が未経験の状態で初めての面接用にポートフォリオを用意していた際、一番悩んだのがこの「デザイン性」についてだったからです。

目的は、相手に作品を見せること。

参考書には、ものすごく凝ったポートフォリオサイトの事例が乗っていたりします。
ネットで検索しても、かっこいいハイレベルなポートフォリオサイトがたくさんまとめられたりしています。

それらを見ていると、
・やばい、自分もちゃんとしたものを作らなきゃ…
・どこまでこだわれば良いんだろう…
という感覚に陥ったりします。

しかし冷静に考えれば、未経験の段階でいきなりハイレベルなポートフォリオを作るのは難しいですし、シンプルなものでも十分に伝わります。

「こだわる」の落とし穴

そして、凝ったポートフォリオの中には悪い事例もあります。
それは「装飾しすぎて見づらくなっている」ケースです。

ポートフォリオのことを「あなた自身を自由に表現する場」といったように解説する本やサイトがありますが、面接で使う場合、あくまで「見る人ありき」だということを忘れてはいけません。

色々な装飾を施したくなったり、JavaScriptでかっこいい動きを実装したくなったりした時は、一度見る人(=採用の方)の立場を想像してから作るのが良いかもしれません。

ポートフォリオで見られているのは情報伝達能力

「見る人あってのポートフォリオ」というお話を先述しました。
では、採用側はどういう視点でポートフォリオを評価しているのでしょうか。

デザイン性

もちろん、見た目が悪いものより良いものの方が評価されます。
そしてWEBデザイナーと名乗る以上、ある程度のデザイン力は求められます。

ただ未経験の場合は、そもそも即戦力として見られていない場合もあるので、あまり心配しすぎず、どんどんトライアンドエラーを繰り返すのが良いかもしれません。

情報整理力

情報整理力とは「何を」「どのように」見せるかです。
例えば、
・採用側が確認したい事がしっかり書かれている
・フォーマットが整っていて見やすくまとめられている
など。

記載しておくべき項目は、後ほどお伝えします。

気遣い

どんな局面でも、「気遣い」は相手に評価される一つのポイントです。
例えば、
・目次が用意されていて見やすい
・「バナー」や「サイト」などカテゴリが分かれている
など。

「どうなっていたら見る人が心地よいか」などを想像しながら作ると、自然とそれが気遣いになったりします。
そしてその姿勢は、社員として迎え入れることを考える採用者にとって、高評価のポイントになります。

「一緒に仕事をしていて気持ちがいいかどうか」は、こうした細かい部分の気遣いからも判断できるからです。

トータルして、大事なのは情報伝達力。

まとめると、

・ごちゃごちゃしておらず
・必要な内容が書かれており
・見やすいようにまとめられている

という事が重要であり、一言でいうと「情報伝達力」になります。

ポートフォリオに記載しておくべき項目

作品の説明には、以下の内容が記載されていれば十分です。

① サイトビジュアル

ファーストビューの画面キャプチャなどで構いません。
凝る場合、PCやスマホのモックに画像を当てたりもします。

② プロジェクト概要

書ける範囲でプロジェクトの内容を記載します。
どんな案件に携わっているかなど一目でわかるように記載しておきます。

③ 担当範囲

デザインを担当したのか、コーディング担当なのか、部分的な参画なのか全体なのか、など。
また、1ページだけなのか、それともサイト全体を丸ごと担当したのかでは、経験値として大きな差があるので記載しておくと良いです。

アピールできるならアピールし、経験値が少ないなら背伸びしすぎない記述をしましょう。

④ 制作の意図

「なぜこのデザインなのか」「なぜこのCSSのフレームワークを使ったのか」など制作過程の意図を説明します。

⑤ 使用ツール

PhotoshopやIllustratorなど、使用ツールも書いておくと良いです。
スキルセットを伝えると同時に、いざ就職するとなった際の作業環境の相談もできたりします。

⑥ 期間や作業工数

制作にかかった期間や時間を記載します。
同じものを作るにしても、10時間かかるのか、それとも2時間で出来るのかなどの違いで、意味合いは大きく変わってきます。

まとめ

結論です。

・見た目はシンプルで良い。
・見る側の立場を意識する。
・情報伝達という、ポートフォリオの本質を忘れない。

初めてポートフォリオを作る方は、どうしても悩んでしまうと思います。
失敗したとしても「初めてなんだから当たり前」と開き直って、素早くトライアンドエラーを繰り返すことをおすすめします。




comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

おすすめ記事

プロフィール画像
 
SHINOBU

フリーランスのWEBデザイナー兼フロントエンドエンジニア。イラストレーター。
新卒は某ベンチャー営業職→半年間WEBを勉強→WEB制作会社入社→フリーランス転身。現在はIT大手のクリエイティブチームに所属しながら、プロジェクト単位で複数チームに参加。
4大卒で、デザインの勉強は25歳から。美大でもない、経験もない。そこから2年後フリーランスとしてスタートするまでのこと、そしてフリーになってからの色々なことを記録していきます。