初心者でも50万円/月に稼げるようになるWebデザイナーのポートフォリオ作成方法

「ポートフォリオってどうすれば…」 「実績がないから仕事が取れないかも…」と悩んでいる方は多いのではないでしょうか。Webデザインの勉強を始めたばかりの頃は、ポートフォリオの作り方や営業方法がわからず、不安に感じることがあると思います。

でも大丈夫。今はベテランの人だって、最初は同じような悩みを抱えていたのです。少しの工夫と行動力があれば、実績がなくてもクライアントから信頼されるポートフォリオを作り上げることができます。

未経験Webデザイナーのポートフォリオって?

ご質問

仕事を取るためにポートフォリオが重要って聞いたんですけど、その意味が良くわからなくて、ちょっと調べてみたんです。ポートフォリオって、仕事の実績を載せるようなサイトを作るってことですかね?

そんなこと言われても、まだ勉強中の私には実績が無いし、過去にこれといった仕事もしていません。サイトを作っても、なんにも書くことが無い気がしてます。。
どうすればいいんでしょう?

吉田先生の解答

ああ、これも本当によーくある質問ですね。
たしかに何にも無いってことが良くあるかなぁと思います。過去に制作した作品は無いし、Webデザイナーの仕事を取る時に役立つ実績も無いと困ってしまいますよね。

でも、まぁ方法はあります!
だって、みーんな最初は初心者です。そこからなんとか仕事を取って立派なフリーランスや起業までする人になるんですね。

思い起こせば私も初心者でした。そこから今はなんとか会社をやって生計を立てて子育て出来るくらいになりました。実績なんて何もなかったですが、なんとか知恵を絞り出してポートフォリオ的なものを作ったおかげで今があるかと思います。

知恵を絞り出す…。
ポートフォリオ自体ピンときてない私には、ちょっと難しいです。。

あやのさん

吉田先生

大丈夫です! 誰でもできる方法なので、ぜひ真似してみてください。すぐに参考にできる、参考になるポートフォリオサイトも紹介しますよ

ポートフォリオ作成前に知りたい基本と心構え

ポートフォリオとは

クリエイティブ業界での「ポートフォリオ」とは、作品集、実績や力量を評価してもらうための資料の事を言います。面接などで持参する場合は“紙”でまとめる事もありますが、フリーランスのWebデザイナーの場合はWebサイト形式で作って、多くの人がアクセスできるよう公開しておくことが多いです。

ポートフォリオサイトには、過去に手掛けたデザインやプロジェクト、その成果が掲載されます。クライアントに対して自分の経歴や実力を示し、信頼を築くための第一歩として使われます。単に作品を見せるだけでなく、自分ならではのアプローチや強みを示すことが重要です。加賀さんのように「実績がない」と感じていても、ポートフォリオを使って自身のスキルや考え方を伝えることは可能です。

また、ポートフォリオは単なる作品集にとどまらず、ビジネスツールとしての役割も果たします。例えば、サイト内に料金表やお問い合わせフォームを設置すれば、クライアントがそのまま見積もりや依頼を行うことができます。フリーランスWebデザイナーにとって、ポートフォリオは自分の作品とともに、ビジネスの窓口となる非常に大切なものです。

まずはマインドセットから変えていこう

ポートフォリオ作成の前に、まず自分のマインドセットを整えることが重要です。
「まだ実績がない」を筆頭に、勉強はしてきたけれど、その道何年、何十年の人に比べたら技術的にもまだまだ……と不安なことがいくつも浮かんできてしまうかもしれません。その不安に飲まれず、自信を持つことが成功の第一歩です。

未経験だから、と卑屈になる必要はない

ポートフォリオは、実績以外の点からでも、自分のスキルや可能性をしっかりと示すことができます。実績がないのも、見方を変えればWebデザインとは違う業種・職種での経験があるわけです。そうした経験が、クライアントの興味や評価につながる可能性も十分にあります。

未経験で自信もありません、と縮こまってはいけません。「自分はできる!」「やってやる!」という前向きな姿勢を見せることで、クライアントにも良い印象を与える事ができます。

ある日をいきなり自信に満ち溢れたポジティブ人間になる、というのは現実的ではありません。「そんな事言われてもなぁ」と思う方は、まず、言葉(言い方)を変えてみましょう。下記サイトの方法、実践しやすいです。

マインドセットを変えるシンプルだが効果的な5つの方法
https://forbesjapan.com/articles/detail/49101

クライアントはモンスターではない

これからお仕事を受ける方だと、クライアントに対しての恐怖感もあるかもしれません。コミュニケーションがうまくとれるか、怒りを買ってしまわないか、不安ですよね。

ですが、必要以上に恐れる必要はありません。実際の仕事で、クライアントが極端に厳しいことは極稀です。誠実に対応して信頼関係を築くようにしていけば、話し合いで大抵のことは解決できます。大切なのは、しっかり対応するための「準備」と「自信」です。

Webデザイナーの「良いポートフォリオ」とは

良いポートフォリオとは

良いポートフォリオとは、クライアントが「この人に仕事を頼みたい」と思えるような作りであることが基本です。見た目の美しさだけでなく、内容や構成がわかりやすく、閲覧者がスムーズに必要な情報にたどり着けることが求められます。

フリーランスとして活動して、ポートフォリオサイトでの集客も考えている場合、クリエイティブ業界で言われている「ポートフォリオ」より少しビジネス寄りの構成がおすすめです。クライアントは限られた時間の中で仕事(見積もり)を依頼するか判断することが多いため、過去の実績やスキル、料金プランなどをシンプルかつ効果的に伝えると良いでしょう。

仕事を依頼したくなる4つの要素

「この人に仕事を頼みたい」と思ってもらうために、何が必要かを考えてポートフォリオの構成を作っていきましょう。以下4つのポイントを押さえると良いです。

1. できることが明確である

クライアントは、依頼をする前に「この人は何ができるのか」を知ろうと考えます。ポートフォリオには、自分が得意とする分野や提供できるサービスを具体的に明記しましょう。例えば、UI/UXデザイン、ロゴ制作、コーディング対応など、得意分野を明確にしておくことで、クライアントがニーズに合った依頼をしやすくなります。

2. 実績・あなたの考え方

実績はクライアントが最も注目するポイントの一つです。どのような業種でどのようなデザインを行ったか、具体的な事例を掲載することで、クライアントは自分の依頼がイメージできるようになります。

できれば、プロジェクトごとに課題と解決策を示し、どのようにして成果を出したかを説明すると効果的です。作品そのものだけではなく、あなたがどのように考え、解決に導いたかを示すことも重要です。そうすると仕事に対する真摯な姿勢も伝わるので、依頼につながる可能性が向上するでしょう。

3. プラン・料金設定が明瞭

料金プランがわかりやすいことは、クライアントに安心感を与える要素の一つです。明瞭でシンプルな料金設定は、依頼前の不安を取り除き、スムーズに契約へとつながります。ポートフォリオには、基本的なプランや料金表を掲載し、プロジェクトの内容に応じた価格の目安を示すと良いでしょう。

さらに、料金だけでなく、提供されるサービス内容を詳しく説明することで、クライアントにとってのコストパフォーマンスを明確に伝えられます。料金が高い場合でも、しっかりとしたサービスや成果を提供できることが伝われば、クライアントは納得して依頼を検討するはずです。

4. よく更新されている

ポートフォリオは、定期的に更新されていることが非常に重要です。古い情報や作品しか掲載されていない場合、クライアントに「このデザイナーは活動していないのかもしれない」という印象を与えかねません。新しく取り組んでいる活動を追加することで、常に最新の状態を保つよう心がけましょう。

また、頻繁な更新は、あなたの成長や継続的な仕事への取り組みをアピールする絶好の機会です。定期的な更新が、自分のポートフォリオの価値を高めることにつながるのです。

実績がない場合に使える、ポートフォリオ作成方法

実績がないからといって、ポートフォリオに何も載せられないとことはありません。工夫次第で魅力的なポートフォリオを作成することが可能です。例えば、デザインや問題解決のプロセスを見せることで、クライアントに自分のスキルを伝えることができます。自分の成長やアイデアをアピールしていきましょう!

実績の代わりに「私流のビフォア・アフター」をつくる

実績がなくても、自分なりの「ビフォア・アフター」事例を作成することで、ポートフォリオを充実させることができます。改善点を明確に示し、なぜその変更が必要だったのかを説明することで、クライアントはあなたの提案力と問題解決能力を評価するでしょう。

例:デザインの改善

デザインが悪いと感じたWebサイトがあるとします。
そのまま使うと問題があるので、サイト名やコンテンツを変えて“モデル事例”化したうえで、問題点を明確にして改善案を提示します。以下の参照ページの内容を、実際にあるサイトには迷惑がかからないよう、自主的にやるイメージです。

【Webのビフォーアフターお見せします】Vol.2 エコライフ様コーポレートサイト
https://www.stylement.co.jp/stlog/jirei2

デザインやレイアウトをどのように変えることで、何がどのように向上したかを解説します。こうすることで、クライアントにあなたのデザインスキルと考え方を伝えることが出来ます。

異なるジャンルのサイト・課題などで「ビフォア・アフター」事例を3つほど作成しすると、より幅広いスキルをアピールできます。

架空の案件で問題解決コーディング力アピール

架空の案件を設定し、問題解決能力やコーディング力をアピールすることも出来ます。

架空の案件であっても、クライアントが実際に抱えるであろう問題に対するソリューションを提示することで、実践的なスキルをアピールできます。また、ただ単にコーディング技術を見せるだけではなく、問題の背景やなぜその技術を選んだのかといった説明も加えると、より深い理解を示すことができるでしょう。

例:クライアントの“あるある”課題

  • トップページに新着ニュースを表示したい
  • トップページで、新商品情報・スタッフブログを新着順にそれぞれ4件ずつ表示したい
  • コンテンツスライダーでおすすめの商品を表示させたい
  • キャンペーンタグの付いたSNS投稿を、自社サイトに掲載したい

例えば、コンテンツスライダーを設置する場合は、自分でJavaScriptやCSSを書いても良いですし、プラグインを使った方法もありますね。前者の場合はイチから作るので、デザインも機能も自由です。後者の場合でも、短期納品可能・料金が安いなどのメリットがあります。

想定したクライアントの背景と課題を明確にし「なぜ、こちらの方法を採用したか」などを説明してあげると、単に技術があるだけでなく、問題解決能力や提案力があることを示せます。クライアントのニーズに応えるために柔軟な対応ができることを伝えれば、信頼できるデザイナーとして評価されやすくなるでしょう。

月収50万円を実現するための戦略

クライアントのリスクを考慮する

フリーランスとしての第一歩は、まずは実績を作る・信頼を得ることを優先しましょう。
例えば、クライアントにとってリスクが少ないプランを提供することで、依頼を受けやすくなります。3時間3000円など、クライアントが「お試し」感覚であなたのスキルを確認できるようなプランを作ります。

この段階では利益を追求するよりも、実績を積み上げることが重要です。まずは小さなプロジェクトをこなし、その後に続く大きな案件につなげるための足掛かりとしましょう。こうした戦略は、実績ゼロの状態から信頼と実績を構築するのに役立ちます。

案件獲得のための営業をする

未経験でフリーランスだと、ポートフォリオを頑張って作り込んでも、最初の信用度は低い状態です。思いつく限りのアプローチをして、少しずつ信頼を積み重ねていくことが大切です。営業活動は決して楽なものではありませんが、継続することで次第に成果が見えてくるはずです。

クライアントからの信頼を得やすい手段として、地元での営業もあります。地元で、実際の面談やミーティングにも対応できる、ということもクライアントには信頼材料になります。また、実際に出向いてコミュニケーションを取るほど、人間的な信頼も築きやすくなります。

獲得案件は、しっかりポートフォリオに反映

一度獲得した案件は、必ずポートフォリオに反映させていきましょう。初期段階で積み重ねた実績が、次の案件獲得につながる重要な材料になります。どんなに小さな案件でも、どのようなスキルを使い、どのようにクライアントの課題を解決したかを具体的に示すことで、今後のクライアントに対して強いアピールとなります。

案件獲得が増えると単価も上がります

案件を増やすために営業を継続していくと、自然とクライアント数も増加し、仕事の依頼が途切れることなく続くようになります。信頼や実績が積み上がれば、報酬単価も向上していきます。クライアントとの取引を有利に進めることができ、より高い単価で仕事を請け負うことが可能です。

継続した営業努力と実績の積み重ねによって、徐々にステップアップし、安定した収入を確保できるようになるでしょう。月収50万円という目標を到達することも、それ以上稼ぐことも、フリーランスから法人成りも可能ですよ。

効果的なポートフォリオ作りで成功をつかもう!

ポートフォリオの参考になるサイト10選

初案件獲得から始めるポートフォリオでは、作品をかっこよく見せるだけではなく、仕事に対する考え方や料金目安などがあったほうが良いことをお伝えしました。でも、ポートフォリオで検索すると、アート作品のような“作品集”系のページ特集が多いのですよね。

ですので、以下ではビジネスサイト系ポートフォリオ作りの参考になる、これは良いなぁと思ったポートフォリオサイトを紹介します。後半はデザインアーカイブサイト系も紹介しますので、良いサイトを沢山見て、刺激をもらっちゃっいましょう!

Sugar Design Labo

https://sugarlabo.com/

湘南を拠点としたWeb・グラフィックデザイン事務所様のWebサイト。モノトーンベースのシンプルな作りで、アニメーションやコントラストの使い方が秀逸です。お問い合わせからのフローや、料金目安、FAQなどクライアント向けのページも充実しています。Web制作を依頼する経験があまりない方でも、サイト内で迷わず、不安を解消しつつ、お仕事を依頼するか考えられて良いともいます。

TNGC GRAPHICS

https://www.tngc-graphics.com/

こちらもお問い合わせや依頼を考えている、クライアントに優しいサイトです。ページ上部にある「集客するホームページ制作」や「フリーランスだから安くできる!」を筆頭に、メリットなどが掲載されていて、任せたらうまくいきそうな、力強い印象があります。特にコーポレートサイト系の制作を依頼したい方に、好印象なのではないでしょうか。

coucou web

https://coucouweb.com/

配色やイラストの使い方が上手で、ポップで可愛らしいテイストのサイトです。レイアウト自体はシンプルで、訪問ユーザーを選ばず、誰でも見やすい・使いやすい作りですね。トップページで「女性向け・お子さま向けデザインが得意」と書かれているのも納得のデザイン。シンプルだけどカッチリしすぎないデザインを求めるクライアントに刺さりそうですね。

best-day

https://best-day.net/

こちらもシンプルな構成で、とても見やすいサイト。カラーリングやあしらい、アニメーションの入れ方のバランスが良いです(どれも使いすぎるとクドい、見にくいなどのデメリットがあリ、程よくって結構難しいのです)。

ウェブデザイン HASEGAWAHIROSHI.JP

https://hasegawahiroshi.jp/

「Webデザイナー ポートフォリオ」などで調べたことがあれば、目にしている方も多いであろうHASEGAWAHIROSHI様のWebサイト。知名度が高く、それも納得のデザイン力や実績を感じられます。トップページのデザインも、バランス感が素晴らしいですよね。

ここまで紹介してきたサイトのようにプラン(料金目安)などは掲載されておらず、完全個別対応。ご依頼時の確認事項・注意事項なども明確ですので、ターゲット層はWeb慣れしている人なのかもしれません。

tashi Illustration&Design Portfollio

https://tashi.design/

作品集としてのポートフォリオ感もあるtashi様のサイト。イラストレーション作成も行われているということで、オリジナルイラストを使って物語のよううな仕上がりになっています。とても綺麗で、見ていて楽しいです。文字の可読性などもよく、オシャレさ・世界観と、ユーザーの使い勝手の良さを両立されている、素晴らしいサイトだと思います。

SANKOU!

https://sankoudesign.com/category/portfoliosite/

こちらは、Webデザインギャラリー/リンク集です。
上記のポートフォリオカテゴリー以外にも、様々なカテゴリーに分けられています。自分のポートフォリオサイト作成だけではなく、お仕事に取り組むときにも参考探しに役立ってくれるサイトです。

Choicely

https://www.choicely.jp/webdesign/category/portfolio/

Choicelyは“マーケターのためのマーケティング情報データベース”ではありますが、Webデザインギャラリーも用意されています。マーケター対象のサイトであるため、デザインギャラリー系サイトよりも、コミュニケーション設計に優れたWebサイトに重点が置かれていることが特徴。

Web Design Clip

https://webdesignclip.com/category/portfolio/

Web Design Clipは、多くのWebデザイナーがお世話になっているギャラリー形式のWebデザイン見本集です。“クリエイティブの高いおしゃれな日本のWebサイトのリンク集”がキャッチコピーであり、有名どころなので「WebDesignClipに掲載されました!」というのを1つの実績としている方もいらっしゃいます。

日本全国フリーランスWebデザイナーHP集

https://webdesignerjapan.com/

名前の通り、フリーランスのWebデザイナーや、デザイン事務所がまとめられているサイトです。競合調査をしよう、他の人のポートフォリオを参考にさせてもらう、料金相場を考えよう…など言われても、個人事業の方のWebサイトって結構指しにくいのですよね。見つけられん!という方は、こちらを使わせていただきましょう。

登録申請フォームもあるので、サイトが完成したら申請してみても良いでしょう。

まとめ

フリーランスのWebデザイナーとして成功するための第一歩は、何よりも行動を起こすことです。実績がなくても「こんなことができる」「私はこの課題に対して、こう考えている」と、前向きにアピールしていきましょう。

初心者や未経験であることを恐れず、常に成長する姿勢を忘れないでください。最初は苦労するかもしれませんが、どんなに小さな成功でも、自分のスキルや努力がクライアントに伝わり、次のチャンスにつながります。

吉田先生

焦らず自分のペースで挑戦し続ければ、必ず目標に近付いていきます。その道のりを楽しみながら、成功を掴んでください!

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
9月22日まで

募集 人数
100名 (残りわずか)

こちらもオススメ


×