未経験からWEBデザイナーに転職できるポートフォリオの作り方

こんにちは! Web制作ライターのナナミです。

デザイナーの就職活動に必須とも言えるポートフォリオ、みなさんも聞いたことはある言葉だと思います。

でもポートフォリオってなに?
Webデザイナーのポートフォリオって、どういうもの?

そんな疑問はこの記事で解決! Webデザイナーのポートフォリオについて解説していきます。

紙面デザインのポートフォリオとの違いや、具体的な作成ステップもご紹介するので、ポートフォリオ作成の参考にしてくださいね。

ポートフォリオとは?

ポートフォリオは、就職や転職活動において自分の実績や実力をアピールするための作品集のことです。

就職活動の際、履歴書を用意しますよね。しかし履歴書ではデザイン力などをアピールすることができないので、具体的な作品を用意する必要があります。

まさにそれがポートフォリオです。Web、紙面に限らず、あらゆるデザイナー職の就職活動に必須のアイテムなのです。

Webデザイナーのポートフォリオに必要な項目

ポートフォリオは、ただ作品を並べればOKという訳ではありません。

  • あなたがどんな人物なのか
  • どんな作品を作ったのか
  • その作品にはどんなコンセプトがあるのか

など、あなたのスキルについての情報をたっぷり入れて、企業にアピールする必要があります。

パーソナル情報

まず基本的なパーソナル情報は掲載しておきましょう。別で履歴書を用意するとは思いますが、履歴書は形式が決まっているのであなたの意欲やスキルをアピールしきれないこともあります。

それに比べてポートフォリオは形式が自由です。下記のように、自分のアピールしたい事はなんでも書いてしまいましょう。

【パーソナル情報で入れておきたい項目】

  • 自己紹介
  • 経歴など
  • 自己アピール
  • 意欲
  • 持っているスキル(使える言語など)

作品

もちろん作品も掲載するのですが、ただデザインを並べて終わり! ではダメです。企業が見ているのは「どんな情報からこのデザインを作り出したのか」という部分です。

デザイナーはただ自分の自由な考えでデザインをする訳ではありません。クライアントから要望を受け取り、それに合わせたデザインを提案する必要があります。

そのため、単純な見た目の美しさではなく、デザインが完成するまでのストーリーを見て、案件への対応力を見極める必要があるのです。

作品には下記のような項目も記載し、要望への対応力をアピールしていきましょう。

【作品情報で入れておきたい項目】

  • 作品の画像
  • 目的
  • コンセプト
  • 制作時間
  • 工夫したポイント

未経験者のポートフォリオ作成のポイント

未経験だから実績もないし、ポートフォリオは作れない…

と思った方もいるかもしれませんが、大丈夫です。未経験でもポートフォリオは作れます。

この項目では、未経験だからこそ作っておきたいポートフォリオ作成のポイントをご紹介していきましょう。

実際の案件じゃなくていい

ポートフォリオは実際の案件実績しか載せてはいけないと思う方も多くいますが、そんなことはありません。自分で勝手に仮想のクライアントを用意して、作品を作ってしまえばいいのです。

先ほども言った通り、企業が見たいのはあなたのデザイン力です。そのWebサイトの目的やコンセプトをしっかりおさえた作品であれば、その熱意やデザイン力は十分に伝えることができます。

  • カップル向けのバーのWebサイトを新規作成
  • すでにあるWebサイトを妄想改修

という感じで、「自分が作りたいものを作ったのではなく、誰かの依頼を想定して作った」という形式にすれば、企業が欲している情報に近いポートフォリオにすることができるのです。

さらにクオリティの高いポートフォリオを作りたい! というのであれば、知り合いから依頼を受けて作るのもいいですね。

案件を獲得するよりも気楽にできる上、きちんと誰かの依頼をこなしたという実績にすることもできます。

あ、当然ですが「架空のサイトです」など、誤解されないようなの注記は入れるようにしましょうね。

コーディングもしよう

IllustratorやPhotoshopでデザインを作って、画像をペタッと貼り付けて、情報を入れて終わり! では、Webデザイナーのポートフォリオとしては2流です。

現代のWebデザイナーは、HTMLCSSなどのコーディング作業ができるのが当たり前。ただデザインして終わりではなく、デザインしたものをWebサイトとして作り上げるまでの能力を求められています。

なので、作成したデザインはコーディングまで行ないましょう。きちんとHTMLとCSSの知識を持った上でデザインしているというアピールにもなるので、企業のからの評価UP間違いなしです。

ポートフォリオサイトを作ろう

ポートフォリオと聞くと紙に印刷してファイルにまとめて…

というものを想像する人も多いかもしれませんが、Webデザインの場合はサイト形式でまとめるのがオススメです。

紙面デザインの場合、完成形はチラシなどの印刷物ですね。それに対してWebデザインの完成形はWebサイトになります。

こう考えると、紙面は紙で、WebはWebで作られているポートフォリオが自然なことがわかりますね。実際の完成媒体と同じなので、企業もあなたのスキルを判断しやすくなります。

さらに、先ほど解説したようにWebデザイナーのポートフォリオはコーディングまでされている状態がベストです。コーディングスキルは紙のポートフォリオでは伝わりづらいのは明白ですね。

ポートフォリオサイトのデザインも一つの実績にするくらいの勢いで作り上げちゃうのがオススメです。

でもそんなサイトを作り上げる自信がない……
コーディングがどうしてもわからない……

という方は、侍エンジニア塾で一緒に勉強してみませんか?

侍エンジニア塾はあなただけのオリジナルカリキュラムを作ることができます。あなたがデザイナーとして活躍するためのコーディングスキルを身に付けたいなら、一番基本のHTMLやCSS、Webの仕組みなどから学べるようにサポートさせていただきます。

まずは無料体験レッスンで、どんなスキルを身に付けたいのか、プロのコンサルタントに相談してみませんか?

侍エンジニア塾の
無料体験レッスンに申し込む

ポートフォリオに掲載するデザイン作成のステップ

では、実際にポートフォリオを作っていきましょう!

下記のステップは、実際のWeb制作案件とほぼ同じ流れになっています。この流れでポートフォリオを作る事で、案件を疑似体験できるようにしました。ぜひやってみてください!

Step1.題材を考えよう

実際の案件ではクライアントからの依頼内容にあたる部分です。なので本来発生しない作業なのですが、今回はポートフォリオ作成なので「自分がクライアントになる」という感じで考えていきましょう。

【例】

  • 自分のポートフォリオサイトを作る
  • システム企業サイトの改修をする
  • 音楽イベントのサイトを作る

なんて感じで、自由に考えてOKです。「案件として実際にありそう!」という内容だとより良いですね。

Step2.デザインの目的を考えよう

作るものが決まっても、目的がなければただ見た目が綺麗なだけのWebデザインになってしまいます。

デザインには「達成したい目的」がつきものです。それを踏まえてデザインするための練習として、目的もしっかり考えていきましょう。

【例】

  • 自分のポートフォリオサイトを作る自分のスキルを伝えたい
  • システム企業サイトの改修をする他企業からのお問い合わせの数を増やしたい
  • 音楽イベントのサイトを作る集客したい

Step3.対象ユーザーを決めよう

さらにデザインのコンセプトを定めるため、対象ユーザーも考えていきましょう。極端な例ですが、おしゃれなバーなのに子供っぽいデザインにしてしまったら「あれ?」となっちゃいますよね。

目的にはそれにあった「対象」が存在します。その対象をイメージする事で、どのような雰囲気、レイアウト、情報が好まれるのかなどを考えることができるのです。

【例】

  • 自分のポートフォリオサイトを作る→自分のスキルを伝えたい
    対象ユーザー:採用担当者
  • システム企業サイトの改修をする→他企業からのお問い合わせの数を増やしたい
    対象ユーザー:他企業のシステム担当者
  • 音楽イベントのサイトを作る→集客したい
    対象ユーザー:音楽好きの20代

Step4.実際にデザインしよう

ここまで来たら、あなたの手元にはクライアントとすり合わせた情報がある状態になります。

あとはどんどん作り上げる作業です! ワイヤーフレームの作成からIllustratorやPhotoshopでのデザイン作業まで進めていきましょう。

ここでつまづいてしまう……という方は、下記の記事などでWebデザインの基本をおさえながらやってみてくださいね。

これだけは知っておくべきWEBデザイン基礎とスキルアップの方法
更新日 : 2019年7月23日

Step5.コーディングをしよう

最後の仕上げでありながら最大の難関、コーディング作業をしていきましょう。

まあ難関とは言いましたが、それは最初だけ。慣れてしまえば大した作業ではありません。まずは練習と思って、どんどん書いて、ミスして、直してを繰り返していきましょう。

納期があるわけでもないので、焦る必要はありません。下記の記事など参考にして、少しずつHTMLやCSSに親しんでいきましょう。

HTMLのホームページは30分で作れる!5つの手順でわかる簡単な作り方
更新日 : 2020年6月19日

未経験者のポートフォリオQ&A

最後に、ポートフォリオについてよく聞かれる質問にお答えしていきます!

Q. 何個くらい載せればいいの?

A. 最低でも5作品くらい、ベストなのは10作品くらい掲載するといいと思います。

紙媒体の場合は10〜20作品が妥当と言われていますが、Webの場合デザインだけでなくコーディングもするので、一つの作品を吟味する時間が長くなります。たくさんありすぎると採用担当者の負担になりかねないので、10作品くらいを目処にしておくといいでしょう。

Q. 紙とかじゃダメ?

A. 紙のポートフォリオはあってもいいと思います。ただし、ポートフォリオサイトは絶対作っておきましょう

企業の体制や人物によっては、Webデザインなのに「これ、紙で出して」なんて言われることもしばしばあります。そういう会社の場合、紙の資料がある方が評価されやすい可能性もあるのです。

だからと言ってポートフォリオサイトは作らなくていいというわけではありません。むしろWeb制作会社なのに「紙の資料で」と言ってくるのは現代では稀です。

優先度としては「サイト>紙」だと思ってください。

Q. コーディングってどこまでできればいいの?

A. 最低でも、HTMLでマークアップをしてCSSでデザインを再現できるところまではできるようになりましょう。

本来ならJavaScriptで動きをつけたりというところまでできているのがベストですが、HTMLやCSSに比べて難易度が高いため、つまづきがちな箇所でもあります。

とにかくHTMLとCSSは絶対覚えておいて、JavaScriptは少しずつ覚えていくという形でもいいと思います。

いや、ちゃんとJavaScriptも身につけてポートフォリオを作りたい!

という方は、短期間でポートフォリオ作成までサポートする、マンツーマンレッスンを受けてみてはいかがでしょうか?

侍エンジニア塾では、あなたの学習進捗やレベルに合わせたオリジナルカリキュラムを作成し、効率的な学習をサポートしています。

講師は全て現役のエンジニア。コーディングなんて全然わからない……というレベルの人でも、基礎からしっかり指導します。

まずは無料体験レッスンで、どんな講師がいるのか、どんな学習をするべきなのかをお話してみませんか?

まとめ

デザイナーに必要なのはデザイン力やコーディングスキルと言われていますが、私はそれにプラスして、ストーリーを組み立てる力が大事だと思っています。

このデザインにはどんな理由があるのか、なぜこの色にしたのかなど、要望をどのように汲み取ったのかを語れるのは、ただのデザインセンスとはまた違ったスキルなのではないでしょうか。

今回ご紹介したポートフォリオ作成方法は、そんなストーリーを組み立てる力を養っていただけるようにご用意しました。ぜひこの手順で、センスのさらに先を行くデザイナーのスキルを身につけてみてください。

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー