未経験からお仕事獲得！Webデザイナーのポートフォリオの作り方【無料テンプレ付】

こんにちは！Webデザイナーの@AoiDesignです。

今回は、ポートフォリオの作成ノウハウ、具体的な作り方をゼロから解説していきます。

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

たとえ実績がゼロでも、ポートフォリオ次第で「即採用！」といったことも全然ありえます。

逆に、イマイチなポートフォリオのせいで、せっかくのチャンスを逃してしまうことも…

今回はそんな私の経験も元に解説しますね。

それでは、さっそく見ていきましょう。

Webデザイナーのお仕事探しにポートフォリオは必須

Webデザイナーとして仕事を探す時、ポートフォリオはとても大切です。

仕事に応募する際には、たとえ先方から要求されなくても、しっかり事前に準備しておくことが必要になります。

でも、なぜポートフォリオがそんなに大事なのでしょうか？

それは、Webデザイナーは「何が作れるのか？」で判断される仕事だから。

経歴や資格は、ほとんど見られないと思っていいです。

どんなに華麗な経歴を持っていたとしても、それは正直、第一段階ではあまり役に立ちません…

大事なのは「ポートフォリオのデザイン」ではない

もう一つ、大切なことをお伝えします。

それは一番大事なのは「ポートフォリオ自体ではなく、そこに入れる制作物だ」ということ。

どんなにポートフォリオがいい感じでも、中身の制作物がイマイチだと、全然意味がないんですよね。

それでいくら応募しても、一向に仕事がもらえず、むだに時間を消耗してしまいます。

逆に、中身のクオリティが良いなら、単に画像を並べただけのシンプルなポートフォリオでも、十分仕事は取れます。

中身の作品がイマイチなら、作り直した方がいい

もしスクールですでに作ったものが「なんか微妙だ」と感じるなら、思い切って作り直すべきです。

遠回りに感じるかもしれませんが、実はその方が結果的に早く仕事を得られるので、効率がいいです。

という方がいると思います。

確かにそうですよね。まずは最低限、自分で見て「これ、なんか微妙だな」と感じないものを入れた方がいいです。

あとは、世にあるデザインを参考にするのも一つの手です。

例えばバナーの場合は「バナーアーカイブ」などを見て、自分のデザインを並べたときに見劣りしないかどうかを確認してみてください。

さらに、プロに添削をお願いするのもおすすめです。

例えば「ココナラ」や「MENTA」には、デザイン添削サービスがあります。

▼中身の作り方は、当ブログでも解説しています

ポートフォリオに入れるべき内容

ここからは、ポートフォリオの内容についてお話ししていきます。

ポートフォリオに入れるべき内容は、大きく分けて2つあります。

成果や評価がない場合は入れなくても大丈夫ですが、可能ならあった方が印象がいいです。

また、フリーランスや個人で活動する場合は「制作メニュー・料金」も入れた方がいいですね。

• バナー1枚：3,500円〜
• ホームページのトップ：20,000円〜

のような感じです。

一方、制作会社へ転職を希望する場合は、料金はかかなくてもOKです。

具体的にどんな制作物を入れたらいいの？

ポートフォリオ作成で、こんな疑問がよく出てきます。

結論、入れる制作物は「応募する仕事内容」によって変わってきます。

例えば、バナーやヘッダーなどの画像作成の仕事に応募するなら、バナーや画像メインでポートフォリオを作ればOK。

無理にホームページを作って入れる必要はありません。

いづれにせよ、Webデザイナーとして大事なのは、まず「見た目のデザイン」をしっかり作れることです。

なので、HTMLのスキルをアピールするより、PhotoshopやIllustratorで作ったデザインをきっちり見せた方がいいです。

一方で、コーディングスキルが必要な仕事に応募する場合は別です。

この場合、コーディングの実力を見せる必要があるので、まずは自分で作ったHTML等のデータをサーバーにアップロードします。

ポートフォリオにはそのURLを載せて、先方が実際にサイトを確認できるようにしましょう。

▼アップロード法は、別記事でも解説しています

たとえば、

こんな風にしても、応募する仕事にそのスキルが求められていないなら、残念ながら評価の対象にはならないです。

架空のサンプル品を入れてもいいの？

スクールの課題や自分で練習用に作ったものも、ポートフォリオに入れて大丈夫です。

ただし、ここで一つポイントがあります。

それは、必ず「お題」をもとに作成することです。

たとえば、バナーを作る場合、以下のような具体的なお題をもとに、自分なりに制作意図を持って作ることが大切です。

逆に、トレースしただけのバナーや、何も意図がなく作ったデザインはNGです。

なぜかというと、何の意図もない制作物では、デザイナーとしての考え方やスキルが伝わらないから。

そもそも、なぜ「制作意図」が大切なのでしょうか？

それは、私たちが作るデザインは、ビジネス上の問題解決のために作られるからですね。

たとえば、「もっと集客力をあげたい」「ページへの遷移率を高めたい」といった課題。

ポートフォリオをチェックする側は、そうしたビジネスの課題に対してどのようにアプローチできるか、デザイナーの視点や能力を重視します。

だからこそ、ポートフォリオには「課題をどうデザインで解決しようとしたのか？」をしっかりとアピールする必要があるわけです。

▼「お題」から作った制作物がない方は、こちらも参考にしてください。

ポートフォリオ作成の重要ポイントと注意点

ここでは、作る上での重要ポイントと注意点を4つご紹介します。

①制作意図と制作範囲をしっかり記載

まず大事なのは、

• 制作の意図
• 制作を担当した範囲

この2つをしっかり記載することです。

デザインにはビジネス上の問題を解決する役割があるから、それに対して自分がどうアプローチしたのかを伝える必要があります。

具体的には、こんな感じで書けばOKです。

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

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

次に「制作を担当した範囲」について。

これは制作において、自分が具体的にどの部分を担当したのかを明確に示すことです。

▼こんな感じです

企画書や原稿を提出いただいた上で、トップページと下層4ページのデザインのみを担当しました。

戦略や企画段階から参画し、デザイナー視点でご提案を行い、デザイン制作とコーディングも全て担当しました。

でも、なぜ担当範囲をしっかり伝える必要があるのか？

それは、自分が持っているスキルを明確に証明できるからですね。採用後のミスマッチも防げます。

相手も「この人なら、うちの業務でこの部分を任せられそう！」と安心して仕事を依頼できます。

②おしゃれさよりも視認性・可読性を重視

ポートフォリオを作る際は、凝ったデザインよりも「読みやすい・見やすい」を優先しましょう。

なぜなら一番重要なのは、作品自体の魅力がしっかり伝わることだからです。

良くない例としては、こんなのがあります。

ポイントをまとめたので、チェックしてみてください。

③素人感が伝わる余計な一言は書かない

「初心者」などの素人をアピールする言葉は入れないようにしましょう。

なぜなら依頼する側からすると、素人に頼むのはリスクがあるし、不安に感じるからですね。

あまり書かない方がいいNGワードはこちらです

④掲載許可や著作権の取り扱いに注意

最後は「実績としての掲載許可」や「著作権の取り扱い」についてです。

まず、ポートフォリオに実績を掲載するには、相手の許可が必要です。

相手によっては「掲載してほしくない」というケースもあるので、勝手に載せるのはNGです。

もし、掲載していいかどうかわからない場合は、必ず相手に確認しましょう。

例えば、

と聞くと良いですね。

もしくは、事前にサービスの説明に「掲載します」と明記しておくのも一つの手です。

私はココナラでサービスを出品していますが、このように書いています。

制作物はポートフォリオに掲載しています。掲載不可の場合は事前にお伝えください。

次に、「著作権の取り扱い」についてお話しします。

デザイン制作において、写真やイラストなどの素材を使う際は、必ず素材サイトの利用規約を守りましょう。

ネット上で見つけた画像を勝手にダウンロードして使うのはNGです。

商用可のおすすめ素材サイトは、こちらを参考にしてください。

あとは、架空のバナーを作る時などに、

これらを無断で使用するのは、著作権の侵害になってしまいます。

ポートフォリオを確認する側に、

と思われたら、信頼を失う可能性がありますよね。

なので、十分に注意するようにしましょう。

Webデザイナーのポートフォリオの作り方【4つの方法】

ここからは本題である「ポートフォリオの作り方」を解説していきます。

作り方	難易度	料金	特徴
ポートフォリオ作成サービス		無料	オンライン上で作品をアップロードするだけですぐに作成できる
ノーコードツール		無料	オンライン上でテンプレートを元に作成できる。HTMLの知識がなくてもOK
Photoshop Illustrator		無料（Photoshopの契約は必要）	デザインツールで一から自作する。PDF化して紙への印刷も可能
WordPress		有料（サーバー・ドメイン代）	カスタマイズの自由度が高いが、Web制作の知識と時間が必要。
HTMLで自作		有料（サーバー・ドメイン代）	完全オリジナルで作成できるが、Web制作の知識と時間が必要。

①ポートフォリオ作成サービス

ポートフォリオを、無料で簡単に公開できるサービスを使う方法です。

無料登録をして作品の画像をアップロードすれば良いので、最短1分で完成します。

ただし、デザイン自体は変更できないので、オリジナル性を求めない方向けですね。

Webデザイナーだと、folioを使っている方が多い印象です。

▼具体例

②ノーコードツール

次に紹介するのが、ノーコードツールを使う方法です。

ノーコードツールとは？
コード（HTML/CSS）を書かなくてもWebサイトが作れるサービスのこと

ノーコードツールは、既成のテンプレートを土台にしてサイトを作ります。

そのため、デザインを多少は自分でカスタマイができる。この点が一つ目に紹介したforiioとの違いですね。

私のおすすめは圧倒的に「STUDIO」です。

テンプレがとてもオシャレなので、かなりクオリティの高いポートフォリオが作れます。

テンプレートには無料・有料がありますが、無料のものでも十分クオリティが高いです。

STUDIOの使い方

まずはSTUDIOから、無料会員登録します。

あとはテンプレート選び、テキストや画像の入れ替えを行なっていけばOKです。

編集画面はこんな感じ

HTMLなどの知識はいらないですが、STUDIOの編集方法は覚える必要ありですね。

③Photoshop・Illustrator

次は「Photoshop」や「Illustrator」などのデザインツールを使う方法です。

2つ以外でも、たとえば

といったツールでもOKです。この2つは無料で使えます。

ただ、WebデザイナーならPhotoshopなどAdobe製品を契約済みだと思うので、今回はPhotoshopで解説しますね。

こんな方におすすめの方法です

私は初心者時代に受講した「ゼロイチWebデザイン」で、この形式のポートフォリオを作りました。

そのデータをPDFとして保存し、お仕事の応募先にメール添付で送っていました。

スクールで作ったバナーのクオリティが良かったこともあり、

といった反応をたくさんもらえました。

一から自作するのは大変ですが、Photoshopを使う練習にもなるので、特に「画像制作」やWebサイトのデザイン制作」をメインでやりたいデザイナーにはおすすめですよ。

Photoshopの無料テンプレートプレゼント

私が当時使っていたものに少し手を加えたテンプレートを、無料ダウンロードできるようにしました。

デザインはこんな感じです

4種類の色を用意したので、もしよければ使ってください。

④WordPressのテンプレートを使う

次は「WordPress」を使ってポートフォリオを作る方法です。

少し難易度が高いですが、WordPressを理解しておきたい方は、練習にもなるのでおすすめです。

こんな方におすすめの方法です

まずWordPressとは、世界的に有名な「サイト管理システム（＝CMS）」のこと。

管理画面から簡単にデザインやレイアウトの変更、記事の投稿、タグの設置などができます。

これらは本来なら、HTML/CSSをいじらないと修正できないものです。

つまりWordPressなら、HTML/CSSの知識がなくても、サイトを構築できるわけですね。

なぜ、このようなことが可能なのか？

それは「テーマ」と呼ばれる着せ替えテンプレートを使ってサイトを構築できるからです。

テーマには例えば、

こんな感じで、何百種類もあります。

これをWordPressというシステムにインストールして、サイトを作っていくわけです。

ポートフォリオに適したテーマ

ポートフォリオに適したテーマはいくつかあります。

有名なのは「TCDシリーズ」「PORTFOLIO」ですね。

機能が充実してオリジナルのサイトが作れて素晴らしいのですが、ただ料金がけっこう高いです。

なので、「できれば無料がいい」という方に、私は「Elementor」というテーマをおすすめしてます。

Elementornの使い方は、こちらも参考にしてください。

⑤HTMLで自作

最後が、完全オリジナルで自作する方法です。

自由度が高いですが、一から作るのはWeb制作初心者には難しいし、時間がかかります。

また、制作実績の追加などで「更新」が必要になった時に、いちいちHTMLを書き換えて再度アップロードする、というのが少し面倒です。

なので、個人的には④で紹介したWordPressを利用した方法が便利かなと思います。

自作の場合、流れはこのような感じ

サーバーへアップロードする方法は、こちらも参考に

結局、どの方法で作るのがいいの？

ここまで読んで「結局どれがいいのか分からない…」という方は、こちらを参考にしてください。

まとめ：良いポートフォリオなら必ず仕事を獲得できる

ポートフォリオが良ければ、実績ゼロの初心者でもお仕事を取ることができます。

実際に私も、スクール卒業後の仕事はポートフォリオを武器に獲得したものばかりです。

求人サイトで見つけたバナー制作のお仕事に応募して、即採用となったこともありました。

でも逆にいうと、作り方を間違ってしまった場合は、そのせいでチャンスを逃すことになります。

この記事では、ポートフォリオ作成の大切な考え方やポイントを分かりやすく解説しています。

ぜひ参考にしていただき、あなたの武器として活躍するポートフォリオを作ってみてください。