未経験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デザイナーになるためのノウハウを詰めこんでいます！しかも課題を進めれば自然にポートフォリオに掲載できるデザインも増えていきます！