悩む人ポートフォリオに入れる作品って、どうやって作ればいいの？
今回は、Webデザイナー向けに「高評価をもらい転職や案件獲得に繋がる！ポートフォリオの中身の作り方」を解説していきます。
ネットでポートフォリオの作り方を調べると、全体の構成やデザインについてはたくさんの記事が出てきます。
でも、肝心の「中身の作品をどうやって作ればいいか？」については、あまり詳しく書かれてないんですよね。
もちろん、スクールなどでバナーやWebサイトをすでに作っている方は、そのまま使えばOKです。
一方で、
- まだ作品が一つもない…
- 今ある作品のクオリティがイマイチだから、新しく作りたい
- バナーはあるけど、Webサイトのサンプルがないから追加で作りたい
このような悩みを抱える方も多いと思います。
そこで今回は、「ポートフォリオの中身の作り方」にフォーカスして、ポートフォリオ全般の作り方を詳しくお伝えします！
あおいこの記事を書いた人
あおい（＠aoidesign）
2018年からWebデザインを学習。
副業時代を経て現在はフリーのLP専門デザイナーとして活動。
LP制作実績は200件以上。
メンターや講師の仕事も行う。
ポートフォリオは中身の作品が命！
まずポートフォリオには、クオリティの高い渾身の作品を入れることが重要です。
もし、すでに自分で作ったり、スクールで作った作品が「ちょっとイマイチだな…」と感じるなら、新しく作り直した方がいいです。
なぜなら、適当に作った作品だと、どうしても素人っぽさが出てしまい、それでは仕事をもらったり、採用してもらうことが難しいからですね。
あおい例えば私はときどき、このようなポートフォリオを見かけます。
ポートフォリオのデザイン自体はおしゃれでかっこいいのに、肝心の作品が微妙…
作品の数が少なくて、実力がどの程度なのか判断しづらい…
「これ、スクールで作ったのかな？」と思うような作品で、正直仕事をもらえるレベルじゃない…
少し厳しいかもしれませんが、Webデザイナーは「どんなものが作れるのか？」で全て判断されるので、ポートフォリオの出来が仕事の獲得に直結します。
なので、まずは「ポートフォリオには渾身の作品を入れる」というポイントを忘れずに、作品作りに取り組んでいきましょう！
仕事内容によってポートフォリオの中身は変わる
ポートフォリオに入れる内容ですが、「Webデザイナーとしてどんな仕事をやるのか？」によって変わってきます。
つまり、「Webデザイナーだから絶対にホームページを入れなきゃいけない」といった決まりはないということです。
あおいたとえば、私はランディングページ（LP）専門のデザイナーとして活動しているので、今のポートフォリオにはLPの制作実績しか入れていません。
もし副業でバナー制作をメインにやりたい方なら、バナーやサムネイルなどの画像をメインにポートフォリオに入れると良いですね。
ここでは、ポートフォリオに共通して入れるべき内容と、仕事別に入れるべき内容をご紹介します！
共通で入れるべき内容
- 名前
- 顔写真（イラストより写真がベター）
- 経歴
- 制作できるもの
- 使用可能ツール
- 自己PR文
- メニュー・料金
- お問い合わせ先など…
印刷物を作るなら
- ロゴ
- チラシ、フライヤー
- 名刺
- ポスター
- パンフレット
- カタログなど…
見た目のWebデザインを作るなら
- Webサイトのデザイン
- ランディングページのデザイン
- バナー
- YouTubeのサムネイル
- Twitterやfacebookのヘッダー
- ブログやLINEのアイキャッチ
- インスタグラムの投稿画像
- 楽天やAmazonなどECサイトの商品画像
- 電子書籍の表紙など…
コーディングをやるなら
- HTML、CSSで制作したWebサイト
- JavaScriptなどの動きの実装をしたWebサイト
- WordPressへの実装を行なったWebサイト
- レスポンシブデザインの実装サイトなど…
どんな作品だと評価が高い？【重要ポイント】
次は、「どんな作品を入れると高評価をもらえるのか？」についてお話ししますね。
ポイントはズバリこれです。
依頼者の問題解決を目的に作ったデザイン
そもそもデザインは、単に見た目を良くするためではなく、ビジネスの課題を解決するために作るものです。
例えば、
- サービスの認知度を広げたい！
- 集客力を上げて顧客リストを獲得したい！
- 商品の購入率を上げたい！
こういった目的を達成するためにデザインを作るわけですね。
作品を作る時には、単に見た目の良さを意識するだけでなく「お客さんの問題を解決できるデザインなのか？」を頭を使って考えながら作る必要があります。
だからこそ、重要なのは「制作意図」をしっかりと書くことです。
これがあると、ポートフォリオを見た人は
依頼者あ、このデザイナーに頼めば、うちの売上アップに繋がるデザインを作ってくれそうだな！
と思ってくれて、評価がグンと上がります。
制作意図の具体例
「投資」という堅いイメージを払拭し、気軽に申し込めるようポップで明るいイラストを多用しました。
独自のコンセプトが強い塾なので、他社比較を目立たせ、オリジナル性を最大限にアピールするレイアウトにしました。
あおい作品の紹介には、制作意図以外に以下の項目も入れましょう！
- 制作物の画像（Webサイトなら、サーバーにあげてURLを記載）
- タイトル
- 概要（依頼内容、制作期間など）
- 自分が担当した範囲
- 制作の意図、意識したポイント
- 成果（クリック率が3倍に増加したなど）
- お客様の声（依頼者からもらった感謝の声や評価）
※全てを入れる必要はないですが、可能なら入れておくと良いです。
オリジナル作品が作れる！お題を無料でご提供
ここからは実際に、ポートフォリオに入れる作品を作っていきましょう。
今回は特別に「実案件に近いお題」を用意しました！
実際に依頼を受けたと仮定して、制作してみてください。
- バナーやサムネイルなどのWeb画像【12パターン】
- ランディングページ【ジャンル別2パターン】
- ホームページ【ジャンル別2パターン】
あおいお題の使い方や、作品の作り方など解説していきます！
バナーやサムネイルなどのWeb画像【12パターン】
お題は以下からダウンロードできます
※お題で作った作品はポートフォリオに掲載OKです。
※無断で転載、再配布は禁止しております。
※自分のポートフォリオに載せる際は「架空のサービス」だと分かるよう記載してください。
あおいお題は全て、私が過去に受注した案件を一部変更する形で作成しています。そのため、実案件に近い内容です！
お題にある「ターゲット」や「用途」などを踏まえた上で作ってみてください。ポートフォリオには必ず、【制作意図】を記載しておきましょう。
バナーの作り方は、別記事で解説しています。ぜひこちらも参考に！
ランディングページ【テーマ別2パターン】
お題は以下からダウンロードできます
※お題で作った作品はポートフォリオに掲載OKです。
※無断で転載、再配布は禁止しております。
※自分のポートフォリオに載せる際は「架空のサイト」だと分かるよう記載してください。
ランディングページのお題は2つ用意しました。
デザインのみでもいいですし、コーディングをしたい方は、デザインカンプを作成後にコーディングまで行うといいですね。
テキストは意味が変わらない程度であれば、デザインに合わせて省略したり、まとめたりしてもオッケーですよ。
あおいちなみにこのお題は、私も作成しました！
具体例として完成デザインを載せておきますね↓
ホームページ【テーマ別2パターン】
お題は以下からダウンロードできます
※お題で作った作品はポートフォリオに掲載OKです。
※無断で転載、再配布は禁止しております。
※自分のポートフォリオに載せる際は「架空のサイト」だと分かるよう記載してください。
ホームページの課題も2つ用意しました。
LP同様にデザインのみ、またはデザインとコーディングの両方を含む形の、どちらかで制作してください。
コーディング【しょーごログの演習課題・全盛りをご紹介】
あおいここで一つ、私がおすすめする教材について紹介します！
見た目のデザインではなく、コーディング（HTML/CSS）のスキルをポートフォリオでアピールしたい方向けのお話になります。
エンジニアしょーごログさんの「コーディング演習課題全部盛り」です。
こちらは簡単にいうと、デザインカンプからのコーディング練習ができる教材になります。
コーディングした課題は、その後オリジナル化して、自分のポートフォリオに実績として掲載できます！
あおい私も実際に購入して初級〜上級までこなしました！
自分のポートフォリオにも載せています。
こんな感じ↓
この教材をやるメリット
- 他人と被らないポートフォリオの作品が作れる
- 実践演習でコーディングスキルを爆上げできる
- 初心者でもハイレベルなコーディングの実績が作れる
あおい感想をまとめているので、ぜひこちらもご覧ください↓
＼ 即戦力が身につく！実践型の人気教材 ／
ポートフォリオの作り方【初心者におすすめの3つの方法】
ここからは、ポートフォリオのデザインの作り方について解説していきます！
主に3つあるので、用途によって自分に合った方法で作ってみてください。
- ノーコードツールを使う【オンラインで簡単に作りたい方】
- CanvaやPhotoshopで作る【印刷したい、PDF化したい方】
- WordPressのテーマで作成【本格的なポートフォリオサイトを作りたい方】
①ノーコードツールを使う【オンラインで簡単に作りたい方】
一つ目が、オンラインで簡単にポートフォリオを作れるサービスを使う方法です。
その中でも、画像をアップロードするだけでポートフォリオが完成するサービスがあります。
有名なサービス
あおい特にfolioは有名で、デザイナーやイラストレーターで使っている人が多い印象ですね。
folioの特徴
- オンラインで簡単に作成、リンクをすぐ共有できる
- シンプルですっきりしたデザイン
- 制作意図やURLもしっかり記載できる
- 有名なクリエーターも多数利用している（NASU Co., Ltd. 上司ニシグチさんなど…）
具体例↓
こういったサービスのデメリットは、ポートフォリオ自体のデザインが変更できないことです。
もっとオリジナル性があるポートフォリオにしたいなら、STUDIOを使うのがおすすめです。
STUDIOには、高品質なポートフォリオ用のテンプレが用意されているので、自分用に画像とテキストを入れ替えるだけで、簡単にサイトを作成できます。
テンプレート具体例↓
あおいプロが作ったおしゃれなデザインが豊富です！
利用する際は、なるべく元のデザインを崩さないよう編集するのがポイントですよ。
②CanvaやPhotoshopで作る【印刷したい、PDF化したい方向け】
次に紹介するのが、CanvaやPhotoshopといったデザインツールでポートフォリオを作る方法です。
これらの方法を使うと、PDFや画像にしてダウンロードが可能です。
なので、PDFを印刷して面接に持っていきたい方や、PDFをメール添付して応募先に送りたいといった方に最適な方法になります。
あおいそれぞれ、少し詳しく解説しますね。
Canvaでポートフォリオを作る方法
あおい具体例として、簡単なポートフォリオを作成してみました。
【Canvaで作成】ポートフォリオ
Canvaでポートフォリオを作る方法をサクッと簡単に解説しますね！
登録が済んだら、検索窓から「ポートフォリオ」に絞ってテンプレートを検索します。
使うテンプレートが決まったら、あとはテキストや画像の入れ替えを行なっていけばOKです。
リンクの追加について
コーディング（HTML・CSS）のスキルを実績としてアピールしたい場合は、データを必ずサーバーにアップロードしましょう。
そして、Canva上で「実際のサイトはこちらから」といった形でリンクを付与できます。
保存方法について
ポートフォリオが完成したら、右上の「共有」からダウンロードができます。
「ファイルの種類」にて「PDF（標準）」を選んでからダウンロードをクリックしましょう。
Photoshopでポートフォリオを作る方法
Photoshopを使う場合は、一から自分でデザインを作れるので、オリジナル性のあるポートフォリオが作れますね。
ただ、レイアウトからデザインまで全て考えないといけないので、時間がかかります。
あおいそこでこのブログは、私が初心者時代に使っていたポートフォリオを元に作ったテンプレートを、特別にダウンロードできるようにしています！
カラーも4種類あるので、お好みに合わせてご利用ください。
データ利用時の注意点
- フォントは、游明朝・游ゴシックを使用しています
- テキストと写真は、必ず入れ替えてください
- 適宜ページを追加・削除して自由にカスタマイズできます
- 無加工のまま転売・販売は禁止しています
- 分からないことはお問い合わせください
あおいPDF化する流れは、こちらです↓
※MACでのやり方
- Photoshopでデザインを作成
- 一枚ずつ画像（pngまたはjpg）で保存
- 全ての画像をドラックして右クリック
- 「このアプリケーションを開く」→「プレビュー」
- 一覧が表示されたら、順番が正しいか確認
- 「ファイル」→「PDFとして書き出す」
- 名前をつけて保存
③WordPressのテーマで作成【本格的なポートフォリオサイトを作りたい方】
3つ目の方法は、WordPressのテーマを使ってポートフォリオを作る方法です。
①で紹介したようなサービスを使わない場合、一からHTML・CSSでポートフォリオを作る必要があります。
ただし、HTML・CSSで作ったデータを直接サーバーにアップロードする方法だと、後から更新するのがめんどくさいです。
ポートフォリオは、実績が増えるたびに中身を更新していくのが理想なので、更新がめんどくさいのはデメリットと言えます。
そこでWordPressの出番です！
WordPressに変換することで、更新が格段に楽になり、管理もしやすくセキュリティ面でも安心です。
あおい具体的にいうと、WordPressの管理画面の「投稿」から簡単に新しい作品をアップロードできます↓
WordPressに変換しない場合は、いちいち「HTMLを書き換えてサーバーにアップロード」の作業を繰り返さなければいけません…
というわけで、ノーコードツールなどを使わずにポートフォリオを作る場合は、WordPressを使うようにしましょう！
WordPressのテーマでポートフォリオを作る方法
前提として、WordPressを使うには、サーバーやドメインの契約が必要です。
さて、WordPressには膨大な数のテーマがありますが、ポートフォリオを作るのに適したおすすめテーマはこちらです。
有料テーマの方が機能やデザイン性が高いのでおすすめです。が、値段が結構するので、初心者は無料のものでいいと思います。
あおい別記事で「Fukasawa」を使った作成法を紹介しているので、ぜひ参考にしてください！
WordPressの構築法も合わせて解説しています↓
まとめ：渾身の作品を武器にして案件獲得や就職活動に挑もう！
ポートフォリオは、Webデザイナーが仕事を獲得するための大切な武器です。
だからこそ、自信を持って高評価が狙える渾身の作品を作り、案件獲得や就職活動にチャレンジしていきましょう！
今回ご紹介した「お題」は、私が実際に経験した案件をもとにしているので、ポートフォリオに載せることで、リアル感のある作品として評価されやすいと思います。
まだ作品の数が少ない方は、まずはバナー作りのお題から挑戦してみてくださいね。
その際には、ぜひこちらの記事も参考にしてください。
