WebCamp・WebCampProを運営する株式会社インフラトップのオウンドメディア【スキルマ】。プログラマー・エンジニア・Webデザイナーを目指す初心者の方に向けた記事や、就職・転職を考えている方向けの記事を発信しています。

Webデザイナー未経験者がポートフォリオを作成する5つのステップ

▼本記事について
本記事は、『たった1ヶ月で未来を変えられる』初心者向けプログラミングスクール「WebCamp(ウェブキャンプ)や、未経験者でも3ヶ月の学習でエンジニアに転職・就職ができる「WebCampPro(ウェブキャンププロ)」を運営してる株式会社インフラトップが提供しています。

Webデザインの未経験者が苦労するのが、ポートフォリオの作成です。

Webデザイナーの求人は履歴書や職務経歴書のほかにポートフォリオの提出を求められる企業がほとんどです。

今回はWebデザイナー未経験者向けにポートフォリオを作成するための5つのステップを解説いたします。

※プログラミングを学んでみたいけど、時間がなくて全文の記事が読めない!という方は、WebCampの無料説明会(毎日開催)に参加してみてください!

 

ポートフォリオとは?

ポートフォリオは自分のスキルや熱意を伝えるための資料です。

「どれくらいのキャリアを積んでいるのか?」

「デザインに対する考え方は?」

「仕事に対する姿勢は?」

といった企業側が気になる部分を補完する内容で作成します。

1.志望動機を明確にする

未経験者がWebデザイナーを志望する場合、まず志望動機を明確にする必要があります。

実績のない人間が志望するには、それ相応の理由や熱意がないと説得力が少ないためです。

デザインに対する思いを伝える

Webデザイナーに志望する人は、デザインに対して何かしらの考え方を持っていると思います。

なぜWebデザイナーを目指すのか、という問いにも関係する部分です。

ロゴの制作や画像の加工、Webページを通じて自分が考えていることを素直に書きましょう。

積極性を身につける

未経験者がアピールできる最大の武器は「積極性」です。

Webデザイナーはクライアントとの打ち合わせやデザインの提案など、特に積極性の求められる仕事です。

独学なりスクールなりを使ってWebデザインの勉強をしつつ、作品を作って積極性を身につけましょう。

2.Webデザイナーに必要なスキルを勉強する

志望動機を明確にしたら、ポートフォリオ作成に必要なスキルの勉強をします。

ポートフォリオ作成サービスを使うのではなく、時間はかかっても自分で作ることが大切です。

HTMLとCSSの勉強をする

Webデザイナーの業務にコーディングがあります。

作成されたデザイン案を基に作成する工程のことです。

Webデザイナーはコーディングができることが当たり前になってきているので、HTMLとCSSの基礎は身につけておきましょう。

PhotoshopとIllustratorの勉強をする

Webデザイナーの業務ではAdobe社のPhotoshopとIllustratorを使うことは必須となっています。

特にPhotoshopはWebサイトのトップページを制作するためによく使われるので、基本操作は押さえておきましょう。

3.作品を用意する

独学やスクールでスキルを勉強したら、いよいよ作品を用意します。

作品はあなたが「こんな技術を持っている」と分かるような内容が望ましいです。

画像加工やWebページ作成技術をアピールできる内容なら、グルメや観光、ECサイトなどコンセプトは自由です。

デザインカンプを作成する

デザインカンプとはデザインの完成図をイメージするための資料です。

まずはPhotoshopでポートフォリオのデザインカンプを作成します。

ポートフォリオの場合は、トップページやプロフィール、作品ごとのページのデザインカンプを作成しましょう。

Webページを作成する

完成したデザインカンプをもとにWebページのコーディングを行います。

実際にコーディングしてみると、なかなかデザインカンプどおりに作れないと感じると思います。

まずは完成形に近づけていく感じで、細かい部分は最後に修正すると作業効率が良くなります。

画像を作成する

華やかなWebページには画像が不可欠です。

写真の加工や自作イラスト、バナーやロゴといったパーツの作成を行います。

作品は制作意図を明確にすることが大切です。

ただ漠然と作ったよりも、制作意図があったほうがコンセプトやこだわりを企業側に伝えやすくなります。

作品の紹介文を作成する

作成したWebページや画像には紹介文を付け加えておきましょう。

制作時間や使用したアプリケーション、自分なりのこだわりも記載すると◎です。

4.作品をサーバーにアップロードする

無事作品が用意できたら、Webサーバーにアップロードしましょう。

レンタルサーバーにアップロードする

ほとんどの人がWebサーバーを持っていないと思うので、レンタルサーバーを借りてアップロードすることになります。

無料のレンタルサーバーでは「エックスドメイン」がオススメです。

安定性の高いエックスサーバーが運営しており、無料で1GBのサーバーを利用することができます。

エックスドメイン

https://www.xdomain.ne.jp/

無料とは思えないほど機能が充実しているので、ポートフォリオをアップロードするのにオススメのレンタルサーバーです。

WordPressが使えると◎

WordPressはWebサイトを管理するソフトウェアで、ほとんどのサイトで活用されています。

Webデザイナーが直接業務に携わることはありません。

しかし、将来的にホームページ運営やフリーランスで働きたいと思っている人は、WordPressの使い方は間違いなく財産になります。

5.紙のポートフォリオを用意する

Webのポートフォリオを作成したら、紙のポートフォリオも合わせて用意しておきましょう。

面接会場が必ずしもオンラインとは限りませんし、紙のポートフォリオはすぐに取り出して企業に見せられるメリットがあります。

Webポートフォリオをベースに作成する

紙のポートフォリオはWebポートフォリオをベースに作成します。

印刷用紙はA3かA4のどちらかが一般的です。

大きさに指定はないので、自分の良い方を選びましょう。

用紙の方向も縦横の指定はありません。

ただし全体で縦横の統一をして読みやすいようにしてください。

表紙は個性をアピールする

紙のポートフォリオの表紙は自分の第一印象に大きな影響を与えます。

作品のサムネイルを表紙にするか、シンプルなデザインの表紙にするかは自由です。

応募先の企業によって求められる人物像が異なるため、どのような方向性が良いか検討しておきましょう。

ページ数は15~20ページを目安にする

ポートフォリオはあまりページ数が多くても、限られた時間で紹介することができません。

作品数で左右はしますが、だいたい15~20ページ程度がボリュームとして良いとされています。

作品を詰め込んでいくとページ数が増えてしまうので、取捨選択はしっかりと行いましょう。

取り組むべきことは

今回はWebデザイナー未経験者がポートフォリオを作成する5つのステップを紹介させていただきました。

一から作るポートフォリオは時間がかかりますが、完成したときの達成感は代えがたいものです。

ポートフォリオを作成しているうちに、Webデザイナーに必要なスキルは身についているので、積極的に求人に応募してアピールしていきましょう。

そしてスキルを身に付けて希望する職業へ就職の道を進みましょう。

WebCamp・WebCamp Proについて

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。WebCamp Proは3ヶ月間で未経験から即戦力エンジニアを育成するプログラミングスクールです。

2つのサービスを運営するインフラトップでは、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

 

 

[CTABtn]

[CTABtn2]