未経験Webデザイナー向けにポートフォリオの作り方を徹底解説！デザインだけする人にも使える情報満載

こしば、未経験からWebデザイナーとして活動したいんだけどポートフォリオの作り方が全然、分からないよ…

未経験のWebデザイナーの方でポートフォリオの作り方について悩んでいませんか。
フリーランスとして独立するときも、転職するときも必要になるのがポートフォリオ（作品集）です。

ポートフォリオが必要だとわかっていても具体的な作り方や見せ方で悩んでいる人も少なくありません。特に未経験のWebデザイナーは実績がないためポートフォリオに関しては特に悩みがちです。そこで本記事では、Webデザイナー向けの実際に案件獲得・就職につながるポートフォリオの作り方について解説します。

ちなみにWebデザイナーで「コーディングの力もアピールしたい！」という方はコーダー向けポートフォリオ作りの記事を参考にしてみてね。今回はコーディングなしでも作れるポートフォリオ作りをメインに解説するよ！

ポートフォリオはWebデザイナーの営業資料・転職活動で必須

ポートフォリオって、そもそも必要なの？
わざわざ自分の作品集をまとめておくのって面倒だよ。沢山、営業して熱意を伝えれば仕事ってもらえるんじゃないの？

営業を沢山する、熱意を伝えることは未経験からWebデザイナーになるのに必要だよ。もしかしたらポートフォリオより営業力と熱意の方が案件獲得には直結するかもね。

それならポートフォリオをわざわざ用意しなくても大丈夫なんじゃない？

いや、ポートフォリオはWebデザイナーとして活動するなら必須だよ！
フリーランスとしてデザインの仕事を請ける人なら営業資料として使うし、就職したい人なら面接でポートフォリオ提出を求められることがほとんだよ。

未経験から独立してWebデザインの仕事がほしい人やWebデザイナーとして就職を考えている人なら大抵、ポートフォリオを作っているよ。作らなかったら周りに遅れをとるのは間違いなしだと思うよ！

え！？それは困るよ！
こしば、頑張ってWebデザインのポートフォリオを作るから、作り方教えてよ。

ポートフォリオは誰にどう見せるかを考えてから作る

みんなポートフォリオを作っているから、こしばも用意しなきゃ…

「みんながポートフォリオを作ってるから自分も作る」そんな気持ちで作っても良いポートフォリオにはならないと思うよ？

とりあえず形だけ用意するのは良くなさそうだね。
でも、どうやってポートフォリオを作ればいんだろう。

こしば君、ポートフォリオってそもそも誰に見てもらうの？

フリーランスならポートフォリオはWebデザインを作ってほしいお客さんに見てもらうために作るよね。
転職するなら面接してくれる人にポートフォリオを見せるよ。

そうだね。じゃあ、ポートフォリオを見せる目的は？

フリーランスなら営業するときに、こしばをデザイナーとして選んでもらうのがポートフォリオを見せる目的だよ。
転職なら採用してもらうためにポートフォリオを見せると思うよ。

その通り！
ポートフォリオを作るときには誰にどう見せるか？を考えてから作ることが大事なんだ。

ポートフォリオはただ作るだけじゃなく見せる人のことまでしっかり考えて作るべきなんだね。

未経験のWebデザイナーに仕事を任せるのってやっぱり勇気がいるんだよ。
だからポートフォリオをしっかり作って依頼主さん、雇い主さんを安心させてあげないとね！

ポートフォリオには自己紹介・スキルセット・デザインの作例を入れる

ポートフォリオって具体的にどんな情報をいれれば良いの？

最低限①自己紹介、②スキルセット、③デザインの作例は入れておくといいね！

自己紹介では自分の名前や簡単な経歴、スキルセットではFigmaやPhotoshop、HTMLやCSSなどの具体的なスキルを書いておこう。未経験で作例が少なければ、最初は作った作品をとりあえず全部、並べておいても良いと思うよ。

請けたい仕事から逆算してポートフォリオで何を作るか考える

請けたい仕事が明確なら、請けたい仕事に合ったデザインのポートフォリオを作っていく良いよ。

請けたい仕事にあったポートフォリオを作るってどういうこと？

こしば君が売りにしたいデザインのポートフォリオを中心に作ると良いっていうことだよ。

例えばLP特化デザイナーとして売り出したいならLPのデザインを中心に用意するべきだし、ECならECのデザインを用意する方が良いよね。LPを作りたいのにECのデザインばかり用意しても仕方ないよね。

たしかにLPデザインをしたいのにECサイトのデザインばかり載せても仕方ないよね。適当に作ったものを並べるんじゃなくて目的をもって作品を載せていくのが大事なんだね。

他にも高級なデザイン、可愛いデザインとか様々な切り口が考えられるね。
業種の切り口から作るポートフォリオを考えてみるのも面白いよ。例えば歯医者さんのWebサイトのデザインを専門にするなら、歯医者さんのWebサイトのポートフォリオが沢山あるといいね。

たしかに歯医者さん専門のWebデザイナーなら歯医者さんのWebデザインのポートフォリオが沢山、ある方が頼もしそうだね。
誰にどう見せるか？って考えてみると沢山の組み合わせがあるね。

目的から逆算してポートフォリオを誰にどう見せるかを考えてから作るとブレないんじゃないかな！
過去の作品を適当にただ並べるだけよりも、どんな作品をどう載せるかまで考えられると良いね。

でも、こしばまだポートフォリオに載せられるデザイン少ないし方向性も定まってないんだよね。

最初は作品数も少ないだろうから作ってみたものを並べてみるところからはじめるのも良いと思うよ。
でも少しずつポートフォリオは更新していこうね！

コーディングも仕事にするかどうかでポートフォリオの作り方は変わる

Webデザイナーって実は結構、幅が広いんだよね。
デザインだけやる人もいればデザインからコーディングまで自分でやる人まで多様なんだ。

最近だとノーコードでWebサイトをつくる人も増えてきたよね。

ポートフォリオの作り方は、どんなWebデザイナーになりたいかで変わってくるよ。

コーディング力をアピールするならコードを確認できるポートフォリオ必須

WebデザイナーのポートフォリオってコーディングしたWebサイトを用意した方が良いの？

デザインだけでなくコーディングの仕事までやりたいならコーディングされたWebサイトを用意するべきだよ。
Webデザイナーでもコーディング力をアピールしたいなら下の記事を参考にしてね。

Webデザイナーでもコーディングにも力を入れている場合、面接してくれる人がコードを確認できるように実際にサーバーにアップされたWebサイトを用意する必要があるよ。

Webデザイナーでもコーディングまで仕事をするなら自分で書いたコードを見せられるポートフォリオ にすれば良いんだね。

そうだよ。でも実際にサーバーを用意して沢山コーディングしたWebサイトをアップするのも数に限度があるだろうから、後で解説するコーディング不要なポートフォリオの作り方も参考になると思うよ！

デザインのみ・ノーコード実装ならコーディング不要なポートフォリオでもOK

こしば、コーディングは得意な人に任せるかノーコード実装にしてデザインに力を入れていきたいんだ。
それでもポートフォリオは自分でコーディングしないとだめ？

それならコーディング不要なポートフォリオの作り方もあるよ。
実際デザイナーでデザインカンプの画像を中心に並べたポートフォリオを使って活躍している人もいるから問題ないんじゃないかな？

コーディング不要なポートフォリオの作り方を教えて！

コーディング不要！未経験Webデザイナーのポートフォリオの作り方

コーディング不要なポートフォリオの作り方を5つ紹介するよ！

1. Figma
2. Notion
3. foriio、RESUME
4. STUDIO/Wix
5. SNSをポートフォリオ代わりに使って発信する

Figmaにデザインデータを貼り付けて共有

一番、手軽で実践的なのはFigmaにデザインデータを貼りつけて共有するポートフォリオだよ。WebデザイナーやUI/UXデザイナーの方でFigmaでポートフォリオを作っている人も増えているよ。

Figmaで普段、デザインをしている人なら操作も慣れているからすぐに作れそうだね。

手軽なだけでなくFigmaでポートフォリオを作るのって実用的なんだよ。
ワンクリックで共有できるしクライアントさんがコメントを入れられるのもいいね。しかも自由度も高いから色んな見せ方ができるよ。

Figmaを勉強する方法は下の記事でも詳しく解説しているから興味があったら読んでみてね。

Notion

高機能なメモアプリNotionでもポートフォリオを作れるよ。
例えば上の写真みたいな簡単なポートフォリオサイトなら慣れている人なら10分もあれば作れちゃうんじゃないかな！

10分でこんなの作れちゃうんだ！Notionすごい！
でもNotionって難しくないの？？

Notionの操作はとても簡単だよ！
Notionを開いて画像をドラッグ&ドロップしてテキストを入れるだけでも上の画像のポートフォリオなら作れるんだ。

Notionは指定したページだけ外部に共有することもできるから簡易的なWebサイトにも使えるんだよ。
Notionを使うIT企業も増えているから使い慣れておくのもいいかもね！

foriio、RESUMEのようなポートフォリオサービスサイトを使う

ポートフォリオ専用のサービスを使う方法もあるよ！例えばforiio、RESUMEあたりが使いやすいんじゃないかな？

ポートフォリオ専用のサービスを使うメリットって何かあるの？

ポートフォリオが集まったサイトだから人の目に触れやすいっていうメリットがあるね。
あとフォーマットに従って指示通りに作るだけでいい感じのポートフォリオに仕上がるのも、おすすめポイントだよ！

forrioやRESUMEを覗いてみたら沢山のクリエイターさんのポートフォリオが掲載されているね！
ポートフォリオ作りの参考にもなりそうだよ。

STUDIO/Wixなどのノーコードでポートフォリオサイトを作る

STUDIOやWIXのようなノーコードでWebサイトを作れるサービスを活用するのもいいよ！
ちなみに上のWebサイトはSTUDIOで作ってみました✨

ノーコードでもポートフォリオサイトって作れるんだね。
でもSTUDIOやWIXでポートフォリオサイトをつくるのって難しくない？

STUDIOもWIXもポートフォリオサイト向けのテンプレートを使えば意外と簡単に作れるよ！操作に慣れてきたら自分でオリジナルのレイアウトを組んでみるのもいいんじゃないかな。

STUDIOやWIXでポートフォリオを作ればノーコードのWebデザインにも慣れそうでいいね！

ノーコードで仕事をとることも考えているならSTUDIOやWIXもおすすめだよ。

STUDIOもWIXも独自ドメインを取ろうとしたり凝ったことをしようとしたりすると有料になるけど無料の範囲内でも十分、ポートフォリオサイトは作れるから興味があったら試してみてね。

SNSをポートフォリオ代わりに使って発信する

こしば君はTwitterやInstagramはやってる？

SNSは使っているけど「今日も骨がうまい！」とか思ったことを適当につぶやいてるだけだよ。

それはもったいないよ！
SNSは上手に使えばポートフォリオ代わりにもなるんだよ！

そうなの？SNSがポートフォリオ代わりになるってどういうこと？

タイムラインに自分が勉強した内容や作った作品を等身大で発信しつづけると意外と見てくれる人がいて仕事につながることがあるんだ！
特にデザイナーは見た目に分かりやすい画像も投稿できるから、作ったバナーやLPをSNSでアップしていくのもいいよ。

SNSが仕事に繋がることもあるんだね。
こしば、お仕事専用のポートフォリオをアップするアカウントも作ってみようかな！

デザインの言語化でポートフォリオのレベルが上がる

ポートフォリオの作り方も分かったし早速、前に作ったデザインを画像化してFigmaやNotionに貼りつけてみようかな！

ただ画像をペタペタ貼りつけるだけでもポートフォリオにはなるけど、それぞれのデザインを言語化できるようになるとポートフォリオのレベルが上がるよ！

デザインの言語化？どういうこと？

ただデザインを載せるだけじゃなくて、どんな意図でデザインしたのかを説明できるようにしておくといいよ。
ポートフォリオに掲載したデザインにそれぞれ、文章などで解説をつけておくと親切だよ！

ポートフォリオに自分なりの解説を書いておけば、ポートフォリオを見てくれる人にデザインの意図や考えがしっかり伝わるっていうことだね。

目的・目標設定を書こう

デザインの目的や目標はしっかり書いておくといいよ。特に未経験デザイナーだと実案件の載せられるデザインがないだろうからポートフォリオ用のデザインをつくる際には仮の目的・目標設定を考えて作ってみてね。

例えばジムの入会キャンペーンのLPなら「入会のお申し込みを増やすこと」が目的・目標になるのかな？

そうだね！作ったデザインと目的・目標が合致しているかどうかが重要なんだ。ポートフォリオのデザインに解説を入れるなら目的・目標設定は入れるようにしてね。

ペルソナ設定を入れてみよう

デザインのペルソナ設定についても触れておくといいよ！

ペルソナ設定って何？

ペルソナっていうのはマーケティング用語で架空の具体的なターゲット像のことだよ。例えば20代女性とかざっくりした括りではなくて具体的な性格・趣向まで詳しくつくりこむよ。

（ジムの入会キャンペーンのLPを作る場合のペルソナ例）

ペルソナ設定のイメージはこんな感じだね！
ちなみに本格的につくりこむ人はもっと詳しく具体的に書くよ。

どんな人をターゲットにデザインをしたのか解説するのにペルソナも書いておくといいんだね。

工夫したポイント（配色・余白・フォントなど）を書こう

デザインをする際に工夫したポイントもポートフォリオに書いておくといいよ。
例えば余白の取り方、配色、フォントのサイズなど、どんな意図でデザインをしたのかも書いておくんだ。

適当にデザインを作っちゃうと工夫したポイントとか全然、書けないね。

普段からしっかり意図をもってデザインをすることが大事だね。何故このフォントにするの？配色にするの？って考えながらデザインをするのは大変だけど、そんな地道な積み重ねで実力ってつくんじゃないかな。

ポートフォリオ作りで参考になるサイト

ポートフォリオって適当につくった作品を並べるだけだと不十分なんだね。
でも未経験だと引き出しが少ないから載せられる作品が全然ないよ。

良いポートフォリオを作るなら沢山のデザインを見て、引き出しを増やすところからはじめると良いよ。

ピンタレスト

ピンタレストは写真共有サービスだよ。
テーマごとにデザインのネタを検索したり収集したりもできるんだ。

試しにWebデザインって検索しみてみたらWebデザインの画像が沢山でてきたよ。すごい！

ピンタレストはデザインネタを探すにも便利だし、沢山のデザインをピンどめして集めておくこともできるんだ。
デイトラのWebデザインコースをつくった船越さんはピンタレストにデザインを集めて、お客さんとデザインイメージを共有する資料としても使っているよ。

ピンタレストで事前にイメージをお客さんと共有しておけば、イメージとズレないデザインを作れそうだね。

デザインのネタ集めにも営業資料にもピンタレストは活用できるから使ってみると良いよ！

muuuuu.org

クオリティの高い縦に長いWebサイトを集めたmuuuuu.orgもおすすめ！
色別・業種別・Webサイトのタイプ別で見れて整理されているから、とても見やすいよ。

お洒落なサイトが沢山、集まっているね！

洗練されたデザインを沢山みて引き出しを沢山、増やしていくといいよ！

bookma

bookmaはPC版のデザインだけでなくSP版（スマホ）のデザインも一覧に並ぶWebデザインギャラリーサイトだよ。

SP版のデザインをまとめて沢山、見れたらアイデアが浮かんできそうだね。

掲載されているWebサイトも洗練されているものばかりで見ていてとても勉強になるよ。

LPArchive

LPArchiveはLPのデザインを沢山集めたギャラリーサイトだよ。
LPだけで25,000以上も登録されているよ！

25,000以上も参考になるLPがあるんだ！すごい。
LPは駆け出しのWebデザイナーでも比較的、案件がとりやすそうだから参考になりそう。

LPはLPで売れるデザインとか考えると難しいところも多いんだけど、案件も多いから駆け出しのデザイナーでも仕事が回ってくることは多いよね。LPの案件がきたときにも参考にしてみると良いんじゃないかな！

【PR】デイトラWebデザインコースはポートフォリオ作りにもおすすめ

こしば、Webデザインのポートフォリオの作り方は分かったけど載せられそうなデザインがすごく少ないんだ。
それに独学だから自分のWebデザインに自信も持てないんだよ。

それならデイトラのWebデザインコースを試しに受講してみると良いよ！
デイトラのWebデザインコースはポートフォリオ作りにもおすすめの講座なんだ✨

どうしてデイトラのWebデザインコースがポートフォリオ作りでおすすめなの？

おすすめの理由は3つあるよ。①デザインの課題がポートフォリオ掲載可、②デザインレビューしてもらえる、③デザインコンテストの開催。
それぞれ詳しく説明するね✨

デザイン課題はポートフォリオ掲載可

デイトラのWebデザインコースで作った課題はもちろんポートフォリオ掲載可能！
手を動かして実際にデザインする課題が多いから一通り完走する頃には、自然にポートフォリオに載せられる作品も増えていくよ。

デイトラのWebデザインコース完走までにどんなデザインを作ることになるの？

名刺、バナー、LP、コーポレートサイト 、ECサイト、アプリのUIを作るよ！

そんなに沢山作るの？？

とにかく手を動かして実際にデザインする課題が沢山あるからね。
デザインの模写だけでなく自分で考えてデザインする課題も多いからデイトラを進めるだけで自然に自分のオリジナルデザインが沢山、できるんだ！

デザインの勉強もできてポートフォリオも増えていくのは良いね！

プロのメンターのデザインレビュー付

デイトラでは初級・中級・上級で提出課題があるよ。初級ではLP、中級ではコーポレートサイト 、上級ではECサイトの課題を提出するよ！そこでプロのデザイナーさんからレビューを受けることができるんだ。

プロのデザイナーさんからレビューしてもらえるんだ。
ひとりでデザインしていると自分のデザインのどこを改善すれば良いのか見えてこないけど、客観的にアドバイスをもらえるのは良いね！

デザインを独学で勉強できる教材も多いけどレビューまで入っている教材って少ないから、デイトラを受講するならレビューもしっかり受けることをおすすめするよ！

デザインコンテストを積極的に開催

デイトラではデザインコンテストを積極的に開催しています。

↑参加者の作品

面白そう！こしばもデザインコンテストに参加してみたいよ！

デザインコンテストは賞金も出るし参加することで自分のデザインも沢山の人に見てもらうきっかけにもなるよ。

それは参加しないと損だね！

デザインコンテストに積極的に参加していれば自然にポートフォリオも増えていくよ！
デザインコースを完走してコンテストにも積極的に参加すればポートフォリオに載せるデザインも十分揃うよ。

こしばもデイトラのWebデザインコースを受講してポートフォリオを充実させていくよ！

まとめ

Webデザイナー向けのポートフォリオの作り方について本記事では解説しました。ポートフォリオはWebデザイナーにとって自分の分身のようなものです。

フリーランスとして独立して仕事をする際の営業資料、デザイン会社などに就職する際の自己PR用の資料にもポートフォリオは必須なので充実させたいですよね。では本記事でまとめたポートフォリオ作りのノウハウを整理してみましょう。

ポートフォリオ作る際の基本的な考え方

ポートフォリオは誰に見せるのか？どう見せるのか？を考えてから作るのがおすすめ！ポートフォリオをただ用意するだけじゃなくて目的意識をもって作りましょう。

ポートフォリオに最低限、入れておくこと

①自己紹介②スキルセット③作例の３つはポートフォリオに入れておくといいよ！

コーディング力をアピールするならコードが確認できるポートフォリオを用意

Webデザイナーでコーディングの仕事をしたい人やコーディング力をアピールしたい人はコードを確認できるポートフォリオを用意しましょう！

コーディング不要なWebデザイナー向けのポートフォリオの作り方

コードを書かなくてもポートフォリオを作れるサービスは以下の通りです！
それぞれ特徴があるから自分の目的にあったサービスを活用してね。

• Figma
• Notion
• Foriio、Resumeなどのポートフォリオサービス
• STUDIO、WiXなどのノーコードツール
• SNSをポートフォリオ化

ポートフォリオの言語化

ポートフォリオはただ作ったデザインを並べるだけじゃなく、どんな意図でデザインをしたのか解説なども付け加えておくと見る人に親切だよ！特に以下の3つはしっかりおさえておこうね！

• デザインの目的・目標
• ペルソナ設定
• デザインで工夫したポイント（配色・余白・フォントなど）

ポートフォリオ作りの参考になるサイト

ポートフォリオ作りの参考になるサイトは以下の通りです。他にもギャラリーサイトは沢山あるから探してみてね。

• ピンタレスト
• muuuuu.org
• bookma
• LPArchive

デイトラのWebデザインコースがポートフォリオ作りにもおすすめの理由

デイトラのWebデザインコースはポートフォリオを充実させるのにもおすすめ！

• デザイン課題はポートフォリオ掲載可
• プロのデザイナーのレビューが受けられる
• 積極的にデザインコンテストを開催

未経験のWebデザイナーこそポートフォリオ作りに力を入れよう

未経験からWebデザイナーとして独立・就職する場合、営業・面接を沢山する、熱意をしっかり伝えることが重要です。
しかしポートフォリオをしっかりと作っておくことも同様に大切です。質の高いポートフォリオを用意できれば営業や就職活動の成功率を高めることができます。

ポートフォリオを用意していない人はとりあえず作ってることをおすすめします。ポートフォリオが既にある人はブラッシュアップしていきましょう！ポートフォリオの有無と出来は未経験のWebデザイナーから成功できるかどうかの重要な要素の一つです。育てたポートフォリオはWebデザイナーとして独立・就職を支えてくれる心強い味方になってくれます。

デイトラは未経験からでも独立できる、就職できるWebデザイナーになるためのノウハウを詰めこんでいます！しかも課題を進めれば自然にポートフォリオに掲載できるデザインも増えていきます！