高評価をもらえる！ポートフォリオの作品の作り方【未経験Webデザイナー向け】

今回は、Webデザイナー向けに「高評価をもらい転職や案件獲得に繋がる！ポートフォリオの中身の作り方」を解説していきます。

ネットでポートフォリオの作り方を調べると、全体の構成やデザインについてはたくさんの記事が出てきます。

でも、肝心の「中身の作品をどうやって作ればいいか？」については、あまり詳しく書かれてないんですよね。

もちろん、スクールなどでバナーやWebサイトをすでに作っている方は、そのまま使えばOKです。

一方で、

このような悩みを抱える方も多いと思います。

そこで今回は、「ポートフォリオの中身の作り方」にフォーカスして、ポートフォリオ全般の作り方を詳しくお伝えします！

ポートフォリオは中身の作品が命！

まずポートフォリオには、クオリティの高い渾身の作品を入れることが重要です。

もし、すでに自分で作ったり、スクールで作った作品が「ちょっとイマイチだな…」と感じるなら、新しく作り直した方がいいです。

なぜなら、適当に作った作品だと、どうしても素人っぽさが出てしまい、それでは仕事をもらったり、採用してもらうことが難しいからですね。

ポートフォリオのデザイン自体はおしゃれでかっこいいのに、肝心の作品が微妙…

作品の数が少なくて、実力がどの程度なのか判断しづらい…

「これ、スクールで作ったのかな？」と思うような作品で、正直仕事をもらえるレベルじゃない…

少し厳しいかもしれませんが、Webデザイナーは「どんなものが作れるのか？」で全て判断されるので、ポートフォリオの出来が仕事の獲得に直結します。

なので、まずは「ポートフォリオには渾身の作品を入れる」というポイントを忘れずに、作品作りに取り組んでいきましょう！

仕事内容によってポートフォリオの中身は変わる

ポートフォリオに入れる内容ですが、「Webデザイナーとしてどんな仕事をやるのか？」によって変わってきます。

つまり、「Webデザイナーだから絶対にホームページを入れなきゃいけない」といった決まりはないということです。

もし副業でバナー制作をメインにやりたい方なら、バナーやサムネイルなどの画像をメインにポートフォリオに入れると良いですね。

ここでは、ポートフォリオに共通して入れるべき内容と、仕事別に入れるべき内容をご紹介します！

共通で入れるべき内容

印刷物を作るなら

見た目のWebデザインを作るなら

コーディングをやるなら

どんな作品だと評価が高い？【重要ポイント】

次は、「どんな作品を入れると高評価をもらえるのか？」についてお話ししますね。

ポイントはズバリこれです。

依頼者の問題解決を目的に作ったデザイン

そもそもデザインは、単に見た目を良くするためではなく、ビジネスの課題を解決するために作るものです。

例えば、

こういった目的を達成するためにデザインを作るわけですね。

作品を作る時には、単に見た目の良さを意識するだけでなく「お客さんの問題を解決できるデザインなのか？」を頭を使って考えながら作る必要があります。

だからこそ、重要なのは「制作意図」をしっかりと書くことです。

これがあると、ポートフォリオを見た人は

と思ってくれて、評価がグンと上がります。

制作意図の具体例

「投資」という堅いイメージを払拭し、気軽に申し込めるようポップで明るいイラストを多用しました。

独自のコンセプトが強い塾なので、他社比較を目立たせ、オリジナル性を最大限にアピールするレイアウトにしました。

オリジナル作品が作れる！お題を無料でご提供

ここからは実際に、ポートフォリオに入れる作品を作っていきましょう。

今回は特別に「実案件に近いお題」を用意しました！

実際に依頼を受けたと仮定して、制作してみてください。

バナーやサムネイルなどのWeb画像【12パターン】

お題にある「ターゲット」や「用途」などを踏まえた上で作ってみてください。ポートフォリオには必ず、【制作意図】を記載しておきましょう。

バナーの作り方は、別記事で解説しています。ぜひこちらも参考に！

ランディングページ【テーマ別2パターン】

ランディングページのお題は2つ用意しました。

デザインのみでもいいですし、コーディングをしたい方は、デザインカンプを作成後にコーディングまで行うといいですね。

テキストは意味が変わらない程度であれば、デザインに合わせて省略したり、まとめたりしてもオッケーですよ。

ホームページ【テーマ別2パターン】

ホームページの課題も2つ用意しました。

LP同様にデザインのみ、またはデザインとコーディングの両方を含む形の、どちらかで制作してください。

コーディング【しょーごログの演習課題・全盛りをご紹介】

見た目のデザインではなく、コーディング（HTML/CSS）のスキルをポートフォリオでアピールしたい方向けのお話になります。

エンジニアしょーごログさんの「コーディング演習課題全部盛り」です。

こちらは簡単にいうと、デザインカンプからのコーディング練習ができる教材になります。

コーディングした課題は、その後オリジナル化して、自分のポートフォリオに実績として掲載できます！

こんな感じ↓

Aoi Desginポートフォリオサイト（ココナラ販売用） 

ポートフォリオの作り方【初心者におすすめの3つの方法】

ここからは、ポートフォリオのデザインの作り方について解説していきます！

主に3つあるので、用途によって自分に合った方法で作ってみてください。

①ノーコードツールを使う【オンラインで簡単に作りたい方】

一つ目が、オンラインで簡単にポートフォリオを作れるサービスを使う方法です。

その中でも、画像をアップロードするだけでポートフォリオが完成するサービスがあります。

具体例↓

こういったサービスのデメリットは、ポートフォリオ自体のデザインが変更できないことです。

もっとオリジナル性があるポートフォリオにしたいなら、STUDIOを使うのがおすすめです。

STUDIOは、HTMLなどコードの知識なしでWebサイトが作れるクラウドベースのデザイン作成ツールです

STUDIOには、高品質なポートフォリオ用のテンプレが用意されているので、自分用に画像とテキストを入れ替えるだけで、簡単にサイトを作成できます。

テンプレート具体例↓

②CanvaやPhotoshopで作る【印刷したい、PDF化したい方向け】

次に紹介するのが、CanvaやPhotoshopといったデザインツールでポートフォリオを作る方法です。

これらの方法を使うと、PDFや画像にしてダウンロードが可能です。

なので、PDFを印刷して面接に持っていきたい方や、PDFをメール添付して応募先に送りたいといった方に最適な方法になります。

Canvaでポートフォリオを作る方法

Canvaとはオンラインで利用できる無料のグラフィックデザインツールです。
テンプレートにテキストや写真を入れ替えるだけで、簡単に高品質なデザインが作れます。

Canvaでポートフォリオを作る方法をサクッと簡単に解説しますね！

まずは無料でCanvaへ新規登録 

登録が済んだら、検索窓から「ポートフォリオ」に絞ってテンプレートを検索します。

右下に王冠のマークがついたテンプレートは「有料プラン」の方のみ利用可能です。

使うテンプレートが決まったら、あとはテキストや画像の入れ替えを行なっていけばOKです。

リンクの追加について

コーディング（HTML・CSS）のスキルを実績としてアピールしたい場合は、データを必ずサーバーにアップロードしましょう。

そして、Canva上で「実際のサイトはこちらから」といった形でリンクを付与できます。

保存方法について

ポートフォリオが完成したら、右上の「共有」からダウンロードができます。

「ファイルの種類」にて「PDF（標準）」を選んでからダウンロードをクリックしましょう。

Photoshopでポートフォリオを作る方法

Photoshopを使う場合は、一から自分でデザインを作れるので、オリジナル性のあるポートフォリオが作れますね。

ただ、レイアウトからデザインまで全て考えないといけないので、時間がかかります。

カラーも4種類あるので、お好みに合わせてご利用ください。

③WordPressのテーマで作成【本格的なポートフォリオサイトを作りたい方】

3つ目の方法は、WordPressのテーマを使ってポートフォリオを作る方法です。

WordPressとは、世界的に有名な「サイト管理システム（＝CMS）」です。
WordPressは基本的に「テーマ」と呼ばれる着せ替えテンプレートを使ってサイトやブログを作成します。
ちなみに当ブログは「SWELL」という人気テーマを使っています。

①で紹介したようなサービスを使わない場合、一からHTML・CSSでポートフォリオを作る必要があります。

ただし、HTML・CSSで作ったデータを直接サーバーにアップロードする方法だと、後から更新するのがめんどくさいです。

ポートフォリオは、実績が増えるたびに中身を更新していくのが理想なので、更新がめんどくさいのはデメリットと言えます。

そこでWordPressの出番です！

WordPressに変換することで、更新が格段に楽になり、管理もしやすくセキュリティ面でも安心です。

WordPressに変換しない場合は、いちいち「HTMLを書き換えてサーバーにアップロード」の作業を繰り返さなければいけません…

というわけで、ノーコードツールなどを使わずにポートフォリオを作る場合は、WordPressを使うようにしましょう！

WordPressのテーマでポートフォリオを作る方法

前提として、WordPressを使うには、サーバーやドメインの契約が必要です。

さて、WordPressには膨大な数のテーマがありますが、ポートフォリオを作るのに適したおすすめテーマはこちらです。

有料テーマの方が機能やデザイン性が高いのでおすすめです。が、値段が結構するので、初心者は無料のものでいいと思います。

まとめ：渾身の作品を武器にして案件獲得や就職活動に挑もう！

ポートフォリオは、Webデザイナーが仕事を獲得するための大切な武器です。

だからこそ、自信を持って高評価が狙える渾身の作品を作り、案件獲得や就職活動にチャレンジしていきましょう！

今回ご紹介した「お題」は、私が実際に経験した案件をもとにしているので、ポートフォリオに載せることで、リアル感のある作品として評価されやすいと思います。

まだ作品の数が少ない方は、まずはバナー作りのお題から挑戦してみてくださいね。

その際には、ぜひこちらの記事も参考にしてください。