新卒が未経験でWEBデザイナーになった記録

未経験からWEBデザイナーになったスキルアップについてのブログ〜天職とはなんなのか〜

ブログ移転しました。今までの記事が新しくなって新登場。新しい記事も移転したブログから読めます。
5秒後に新しいブログに自動でジャンプします。
自動でページが切り替わらない場合はこちら

未経験からWEBデザイナーになるために差がつくポートフォリオの作り方

重要なお知らせ

ブログがこちらに移転しました。
今までの記事がわかりやすくなって再登場。新しい記事は移転したブログから読めます。

今はWEB業界とは関係ない業界で働いているけど、

将来的にWEBデザイナーになりたい!スキルアップしたい!という方向けに

ポートフォリオの作り方を伝授します。

 

WEBデザイン会社に入ってから何度も未経験者の面接を行ったことがあります。

その中でもこの人は経験ないけどいいなと思った他の未経験者とは違う「差がつく」ポートフォリオ作成をメインにお話ししますね。

 

実はWEB業界に転職しようと思ったら必ず、ポートフォリオ持参、もしくは提出」と書類や面接の条件に入ってきます。

今回は未経験でも入れる会社をメインにしたポートフォリオの作り方です。

 

 

ポートフォリオとは?

ざっくり言ってしまうと、ポートフォリオとは今の自分にどれだけのデザインスキルがあるのかをまとめたものです。一言で言えば作品集ですね。

もし面接や書類審査の時、未経験者でもポートフォリオがあるかないかで「この業界に本当にきたいのか」やる気を見せることができます。

そして今のデザインの実力で少しでも会社の役に立てそうと思わせることができたら合格に一歩近づきます!

なので未経験者の場合はポートフォリオ作りは必ず行った方がいいでしょう。

 

個性が出るのでこだわりたい!という部分にはこだわればいいのですが、あくまでも未経験者がWEBデザイナーになるためのポートフォリオなります。

未経験者の場合はいかにポートフォリオを作成しながらデザイン力を上げていくか、自分の魅力を伝えていくかが大切になります。

 

ポートフォリオの作り方

ポートフォリオには様々な作り方が存在します。本のようにしっかりとしたものから、WEBページに自分のページを作成し、そこに実績を公開する。紙ベースからWEBまで様々なのです。

未経験者には自分のWEBページ内に実績を公開するまでいくのにも時間がかかってしまうので、今回は書類として提出する用のポートフォリオ作成法になります。(PDFや紙)

 

色々とデザインをした後にA4用紙にまとめるイメージですが、A4にまとめる時は得意なアプリでも構いません。

過去にパワーポイントを縦にしてデザインした方や、ワードで作成する人もいらっしゃいました。もしどうしてもどちらかと言えば私はパワーポイントをおすすめします。

ほとんど見たままA4用紙に印刷されますし、PDFに簡単にできるのでおすすめです。

慣れているアプリを使うのが一番ですよ。

 

1.自己紹介のページを作成する

自己紹介は今までの自分がどんな人であるかをわかりやすくまとめたものですね。

このページは未経験者の方がアピールできる最適なページになります。

自己紹介ページのデザインの流れはこんな感じ

 

伝えたいことを書き出す

分類ごとに分ける

文章を考える

デザインを考える

デザインする

 

デザインするためには下調べや情報の整理などが大切です。

 

伝えたいことを書き出す

どんなことを書くかというと、ポイントは「履歴書じゃ伝えきれない自分の魅力」をちょっと他人風に書くことです。

第3者の目線から自己紹介をしてもらうようなイメージです。デザイナーになるのですからちょっと個性的なくらいでも業界の人は驚きませんよ。

(WEB業界は変わり者が多い業界でもある。アーティストだからかな...)

面接の時にどんなことを伝えたいかをぶつけるような感じで、たくさん出しましょう。

 

分類ごとに分ける

次に分類をします。

例えば、

「経歴」「性格」「スキル」「趣味」など自分が伝えたいことを整理します。

できれば「スキル」は書いてくださいね。面接官が質問しやすくなります。

多すぎても見栄えがよくないのでA4 1ページくらいで伝えきれると◎

 

文章を考える

第3者目線の文例ですが、

 

***プロフィール***

田中花子 27歳 愛知県名古屋市生まれ。

●●大学●●学部を卒業後、●●株式会社に総合営業職として入社。地域活性のために日々営業や企画書の作成、プレゼンテーションなどを行うが、昔からの夢「WEBデザイナー」を叶えたいという気持ちを抑えきれず、転職に踏み切る。現在は仕事を続けながらも、独学やデザインスクールに通うなどして日々デザイン力を磨く。

 ***

 

こんな感じです。もっと膨らませたり、アピールしたいことを盛り込んでもいいと思います。

結局、面接時の自己紹介でも話すのですが、人は話した内容や、聞いた話をほぼ忘れます。

手元に残った時に、履歴書以外にも自己紹介があることはこんなことを話していたなと、思い出すきっかけになるので「履歴書では伝えきれない魅力を書く」ことを意識してくださいね。

 

デザインを考える 

大まかに自己紹介文ができたら、そこからデザインを考えます。

デザインの決め方は大きな枠ごとに区切って何か裏紙など実際に書きながらデザインしていくとデザインしやすくなりますよ。

イメージはジグソーパズルです。

 

顔写真はつけた方がいいのかとよく質問をいただきますが、顔写真はなるべくつけた方がいい印象を与えますよ。

写真は証明写真のようなものではなく、自分の趣味や人間性のわかるものが良いです。写真もデザインの一部です。

 

自己紹介ページは情報量も多く、未経験者が一番アピールできる場所なので、力を入れてくださいね!

 

 

2.バナーを作る

まず一番はじめに未経験の方に任せられる仕事と言えば、「バナー作り」なのです!

バナーとは、画像リンクのことです。

こういうもの↓よく色々なところで見ますよね。(サクッと作成しました)

バナーサンプル

 

バナーは意外と奥が深く、徹底して学べば学ぶほど上手くなってくるデザインの一つでもあります。

バナーを極める者がデザインを制すと言っても過言ではないほど。

バナーの作り方に関してはまた詳しくお話ししますね。

 

バナーを作成する

※バナーを作る時には、専用のソフトが必要です。

WEBデザイナーPhotoshopを使いますのでまずはPhotoshopをダウンロードしてくださいね。お試し期間もあるのでまずは無料でダウンロードしてみてくださいね。

 

そしてバナーを作る際には、こんな相手にこんな情報を届けたいからここのデザインにこだわりました。などと言えるようになるようにしておくと面接でも書類審査でも通りやすくなります。

 

バナーの作成途中のものもガンガン保存しておきましょう!

途中経過や失敗も載せることができるのでポートフォリオが埋まります。

そしてそれがストーリーになるのでおすすめですよ。面接で話せますし、この途中経過のデザインも好きだと言ってくれる面接官が現れるかもしれないです。

 

 

どんなバナーを作るべきか

どんなバナーを作成すればいいのかは、行きたい業種によって変わります。

もしWEBデザイン会社であればそのデザイン会社の実績を確認してください。

実績からその会社が何を得意としているのかが見えてきます。

例えば銀行系が多ければ銀行系のバナーを作成し、ファッション関連が多いならファッション関連のバナーを作成します。

面接の方はよく担当する業界のバナーがきたら目を引くものです。

この時点でちゃんと弊社のことを調べてきているんだなと思わせることができます。

そうすると印象にも残りやすく、やる気や熱意もアピールできるきっかけになるのです。

 

また、2つ目のバナーはその会社の実績が少ない分野のバナーをあえて作成すると良いでしょう。こんな分野でもデザインできるんだよ、ということを見せるチャンスです。もし、その会社に無事に入れ、その会社が新しい分野に挑戦する時にデザインチームに入れてもらえるかもしれませんよ!

 

3つ目は自分が得意な分野のバナーを作成しましょう。

服が好きならセール情報バナーや、旅行が好きなら旅行系、そんな感じで気楽に作成しましょうね。

 

 

ポートフォリオにバナーを貼り付ける

バナーを3つくらい作成したらポートフォリオのページは2〜4枚くらい埋まります。

バナーの横に

ターゲット、

伝えたい情報、

意識したこと、

迷ったこと、

このデザインにしなかった理由などを書くと良いでしょう。

 

そうすることでポートフォリオを見た側の人間は「こういうことを意識して作っているんだな」とデザインに対して感想を持ちやすくなります。

何もコメントがないと「デザインがうまいか下手か」でしか判断されなくなるのでコメントをつけておくことが未経験者にとっては大きな差がつくポイントとなるでしょう。

 

このページの作成ポイントとしては、バナー以外のデザインを統一することです。

文章量によっては多少なり調整してもいいのですが、基本的にはデザインを統一しましょうね。

 

3.HPを作る

ついに出ました、WEBデザインらしいデザイン!

面接官は正直未経験者にはあまり期待していない部分ですので、もしHPが1つでも作ってあるのなら他の未経験者の方とはかなりの差がつく部分になります!

簡単で無料に作成できるWEBツールがあるのでそこで作ることから始めてみてくださいね。

 

私がおすすめなのはありえないほど簡単にホームページができる【Jimdo】 です。

未経験の時代に何度もお世話になったツールです。

WEBデザインはしたいけどHTMLを使ったコーディングができない、そんな未経験者の力になってくれます。

未経験の方はとりあえず無料で大丈夫。JImdoで作成したとバレたくない場合は独自ドメインを取得できる有料プランがおすすめです。

 

作成するにあたって

作成する時に注意する点は、自己紹介以外のページを作成することです。

WEBデザインとは誰かの何か目的があって作成するものですので、自分の興味にあうことを作成してみましょう。

 

デザインする時に押さえるべきポイントは

1.なぜそのテーマにしようと思ったか

2.誰にこのHPをみてもらいたいか

3.このHPのゴールは何か(買ってもらいたいのか、集まって欲しいのかなど)

 

この3つを必ず意識してくださいね。

またこの3つについては詳しく記事を書きます。

 

まずは作ってみよう

興味のある自分がデザインできそうだなと思えるテーマが決まったら次に、自分のテーマと合うテンプレートを探します。

テンプレートはなるべく「レスポンシブデザイン」を選んでくださいね。

※レスポンシブデザインとはスマホやPC、タブレットも横幅が変わってもデザインが横幅に合わせて最適化されるデザインのことです。

 

今のWEB業界ではレスポンシブデザインが主流となっています。

 

次にそのTOPページにあるメイン画像を変更するためにメイン画像を作成します!

ここで注意したいのは、レスポンシブデザインの場合、スマホとPC別々のメイン画像があるのでそれぞれサイズを調べてくださいね。

 

メイン画像はバナーと同じ感覚で構いませんが、始めてそのHPに訪れたユーザーの印象を左右するものなのでこだわってくださいね。サイトに訪れた90%以上の方がメイン画像でそのHPの印象を左右すると言われています。

 

メイン画像が終わったらあとは自分が入れたい情報などをどんどん入れていきます。

ここで注意するのがこの情報がここにあったらクリックしてくれるかな?など考えながら入れていくと良いです。

 

ポートフォリオに反映させる

TOPページができたらポートフォリオに反映させましょう。

ここはURLも載せましょう。(無料版JimdoだとURLで一発でJimdoで作成したとわかってしまうので、もしJimdoだとバレたくない方は有料版を使用してみてください。)

バナーの時のポートフォリオと同じような要領でやっていきましょう。

多分ここまで作成できたのならば、かなり要領を掴んでいるはずなので言いたいことや書きたいことが山ほど出てくるはずです。

 

他のページもできたら同じようにポートフォリオに反映させても構いませんが、時間がない方の場合、TOPページ作成でも十分です。

HPを一つでも作ったことがあるということが大きなアドバンテージになります!

 

4.足りない部分を作成する

 

今足りないページは「表紙」「目次」「裏表紙」です。

正直にいうとあまりこだわらなくてもいい部分です。

もしこだわりたい!デザイン力を見せつけたい!という方はガンガンこだわってセンスを見せつけてしまいましょう!

もしこだわるのだとしたら表紙がおすすめ。たくさんある中で目に留まりやすくなります。

表紙は大きなバナーを作るイメージで作るといいかと思います。

 

目次は最後に作成するのがおすすめですよ。もしかしたらここにも作品を載せたい!と思うことがあるかもしれないからです。

 

5.仕上げをする

全てのデザインができたら不備がないかチェックしてPDFにしてまとめましょう。

その後家にプリンターがある方は印刷をしてみて、色の出方が悪かったりしたらコンビニでプリントするのもよし、紙の質がいいものに変えてもよし!

プリントができたら、ファイルにまとめたり、こだわりがあるのならラミネートするのもありだと思います。

ここまできたらあとはもう見せるだけなので完成ですね。

長い時間お疲れ様でした!

 

まとめ

ポートフォリオは未経験者にとってあるだけで大きな差がつくポイントになります。

 

差がつくポイントは

自己紹介は履歴書では伝えきれない自分の魅力を第3者目線で書くべし

バナーは受けたい企業の得意分野バナーを作成すべし

HPの作成はレスポンシブデザインにすべし

 

以上を踏まえてポートフォリオの作成をしてみてくださいね。