【未経験Webデザイナー必見！】ポートフォリオの基本の作り方！￤完全ガイド

こんにちは、すみれです🌷

突然ですが、こんなお悩みありませんか？

ポートフォリオって人それぞれ自由に作れるからこそ、何を載せるのがいいのだろう…？って悩みますよね。

過去の私も、上記3つは全部当てはまっていて同じようにつまずいたポイントでもあります。

実際、「ポートフォリオって何を載せればいいの？」「この内容で本当に通用するの…？」と悩みながら、手探り状態で制作していました。

ですが、あるポイントを意識して作り直したことで、
デザイン未経験から、大企業ECのサイトディレクションを担当するポジションまで異業種転職することができました！

未経験からWebデザイナーを目指している方、副業で案件を獲得したい方、ポートフォリオ制作で悩んでいる方は、ぜひ最後まで読んでみてください！✨

はじめに￤ポートフォリオとは？

ポートフォリオとは、Webデザイナーにとって「スキル・実績・人柄」をまとめて伝える“ 営業ツール兼名刺 ”のようなものです。

とはいえ、ただデザインを並べるだけでは、残念ながら評価されるポートフォリオにはなることができません。

普段から何百人という数のポートフォリオを見ているデザイナー転職エージェントの方や実際に面接を担当されていた方に聞いた情報ですが、

なんて言ってました！

そのため、採用担当者がポートフォリオを見ているポイントを整理すると、以下の4つが特に多かったです！

そして前述した通り、採用担当者が1つのポートフォリオを見る時間は３分〜長くても10分程度と言われています。

なので、「単に見やすいだけでなく、短時間でも、いかに自分の魅力をアピールできるか」という視点にたった工夫も必要です。

逆に言えば、実務未経験でもポートフォリオ次第で「この人に頼みたい」と思ってもらえるチャンスがある、ということです。

ポートフォリオの目的を整理する

ところで、ポートフォリオ制作で１番多い失敗とは、いったい何だと思いますか？

それは「目的を決めずに作り始めてしまうこと」です。

目的を決めないまま制作すると、

・誰にも刺さらない
・評価ポイントがズレる
・せっかく作ったのに反応が来ない

という、「もったいないポートフォリオ」になりがち…。

なので、失敗しにくいポートフォリオを作るコツとしては、目的や状況を明確にすることが大切です。
実際、誰にどう伝えるのかで”作り方”まで変わってしまいます…💦

【すぐに使える！】ポートフォリオの目的整理チェック表

そこで！私がポートフォリオを制作するときに、実際に作ったチェック表をご紹介します！✨

初心者でも迷わずできる形なので、少しでも参考になれば嬉しいです◎

ポートフォリオの目的整理チェック表

ポートフォリオに絶対入れるべき【４つのコンテンツ】

ところで、「ポートフォリオって、結局なにを載せればいいの？」って、お悩みの方も多いのではないでしょうか。

結論から言うと、評価されるポートフォリオには必ず共通して入っている4つの要素があります。

それが、

・あなたがどんな人なのかが伝わる【自己紹介】
・価値が伝わる【強み・スキル】
・実力がわかる【過去の作品】
・普段の活動【SNS】

この４つ。

ただし「載せればOK」というわけではなく、「どう見せるか」がとても重要です。

ここから、それぞれのポイントを順番に解説していきます！🚩✨

③-1：自己紹介

「自己紹介」に載せるポイント！

③-2：自分の強み・スキル

「自分の強み・スキル」に載せるポイント！

とはいえ、「自分の強みが分からない…」「何をアピールすればいいのか迷う…」

そんな方は、自己流で考える前に“評価されやすい強みの作り方”を知るのが近道です。

私はこの方法で、未経験からでも「戦略的に選ばれる強み設計」ができるようになりました。

③-3：過去の作品（webサイトやバナーなど制作物）

「過去の作品」に載せるポイント！

もし、まだ「自分の作品を持ってない」「実案件や作品数があまりない」「新しくデザインを作りたいけどテーマが決まらない」

そんな方におすすめな記事はこれ！私もこの方法で、案件がまだ取れなかった頃に作品をたくさん作り、自信がつきました！

③-4：SNS

SNSのアカウントで、勉強したことや制作物を載せておくと普段の活動をアピールすることができます。

アカウントを持っている方は、ポートフォリオにも載せておくと、どんな人なのかも自然に伝えられますよ！

④ポートフォリオの制作の流れ【６ステップ】

次にポートフォリオを制作する流れは、ざっくりとこんな感じです！◎

１つひとつ見ていきますね！

④-1：デザインコンセプトを決める

ポートフォリオを制作すると決めたら、まずはデザインコンセプトを決めましょう！🚩

デザインコンセプトとは、簡単に言うとデザインがどんな目的や方向性で作られているのかをまとめたものになります。

つまり、デザインコンセプトを明確にすることで、自分のポートフォリオを見た人に自分のイメージや世界観の説明がしやすくなるメリットがあります◎

デザインコンセプトを決めるときに考えたいポイント

④-2：サイトの構成を考える（サイトマップ）

次に、Pinterestや参考サイトなどを使って、デザインのイメージやサイトの構成を考えます。

「ホームページ」や「ランディングページ」といっても、デザインはサイトによって様々です。

参考になるようなサイトを沢山見て、イメージを固めていきましょう！🚩

私がよく使っているサイトはこちらです。

未経験で制作物も少ない方は、サイト構成もシンプルなものでいいと思います。

私の場合、最初の案件獲得では下記ページしか制作していませんでした。

ただ途中から、市場での戦い方や自分の魅せ方、集客方法を変えるためにページを増やすことにしました。

その具体的な手順については、下記のリンクから読めます🕊️✨

④-3：ワイヤーフレームを制作する（サイトの下書き）

ざっくりと何を載せるかを決めたら、下書きとしてワイヤーフレームを制作していきます🚩

このワイヤーフレームの時点では、どこに何をどう置くのかをイメージするためのものなので、現時点ではラフで十分です！◎

人によって作成方法は、大きな紙に鉛筆で書いたり、ツールを活用するなど様々な印象ですが、

私は、Figma（フィグマ）というツールを使用して作成しています。

Figma（フィグマ）の使いやすい所は、個人的には以下に記載の通りです。

・2026/02/04時点の個人的な見解です。※今後、Figmaのアップデートにより、本記事で紹介している内容から変わる可能性があります。

※Illustrator（イラストレーター）やPhotoshop（フォトショップ）と比較すると、たしかに書籍や参考サイトの数は少ないのですが、
近年YouTubeや動画サイトなどでもわかりやすい解説が出てきている印象です！✨

ここでは簡単にざっくりとまとめているので、もっと詳しいレビューや使い方が知りたい方は、こちらの記事も参考になるかと思います。

④-4：デザイン制作

続いて、先ほどのワイヤーフレームをもとに、デザインを制作していきます。

デザイン制作で意識したいポイント

ポートフォリオ制作に役立つヒント集

私が実際に使ってよかったサイトだけを厳選してまとめました！

最新版にちょっとずつ書き直してる真っ最中なので、随時更新します！✨

【無料 / 商用利用OK】フリー素材サイト

【Google Fonts / Adobe Fonts】おすすめフォントまとめ集

【参考にしたい！】サイトギャラリー＆配色まとめ集

【本屋さんで購入できる！】デザイナーにおすすめの本・書籍

④-5：コーディングする

先ほど制作したデザインを今度は、Web上に反映させるためにコーディングをしていきます。

ポートフォリオを見て頂く人は、パソコンやスマホ、タブレットなど、様々なデバイスであなたの作品を見ることが予想されるので、
ポイントとしては、パソコンでもスマホでもデザインが崩れないように制作しましょう！🚩（レスポンシブ対応）

④-6：サーバーにアップする

私は「Conoha WING」を使用しています！

初期費用・ドメイン代無料で、高速で動いて、Word Press導入まで簡単にセットできるのでおすすめです！

こちらの記事はブログ開設記事ですが、実際の写真付きで初心者の方でも安心してサーバー・ドメイン・WordPressの契約までできると思うので、参考にしてみてください♪

【すみれブログ限定特典】ポートフォリオで集客を半自動化し営業不要にした実践ノウハウ

実はこのポートフォリオに使用した半自動集客の設計は、ある日突然ひらめきました。笑

きっかけはいろいろありますが、１番は営業が苦手すぎて全然お仕事を受注できなかったことです。

だから、こちらから出向かなくても「自動でお仕事が入ってくる装置があったらいいのになぁ～」という本当にシンプルな思い付きから誕生しました！笑

そんなこんなで1か月ほどで実装を完了し、ポートフォリオ完結で集客が半自動化する仕組みを作り上げることができました。

その結果最終的に、半年で大企業から直接声がかかり、最終的にはそのまま引き抜かれてECサイト運営ディレクターに抜擢されました！🙌🏻✨

その他にもかなりの数の企業様から、直接評価を頂くことができました。

正直に言ってしまうと、私自身のデザインスキルは特別センスがあったわけでも上手なわけでもありません。

ただ、どう自分のことを見てほしいのかという魅せ方と市場での戦い方を変えた結果、
未経験デザイナーでも、戦略次第で勝てることを身をもって証明することができました！🌷✨

もしあなたのポートフォリオが、

そんな「半自動でチャンスを生み出す状態」になったらどうしますか？

きっと、いまこの記事を読んでいる方の中には、
・すみれの半自動集客のやり方を真似したい！
・営業苦手だから自分で集客導線整えたい！！
・ポートフォリオ作りの参考にしたい！！
って思って下さった人も多いと思うので、

1年前の営業に悩んでいた私と同じように悩んでいる人の参考になればと思い、

私が実際に行った導線設計や考え方・ロードマップを、ひとつの記事にまとめました！🌷 ˎˊ˗

この記事を読むと、

など、目からウロコの大逆転術が学べるかと思います！👀✨

とはいえ、この内容は基本的にパスワード付き限定公開にしており、普段ならめったに開示することがないのですが、、

今回、noteの方で先行公開キャンペーンを実施することになり、特別に【全ストーリーを完全無料で一気読みできる】ことにしました🙌

尚、こちらは「すみれの運用するすべてのメディア」の読者限定でのみご案内しています。

また、せっかくなら何か特別イベントをしたい！と思い、【ここまで読んで下さった方限定】で先行公開のプレゼントをご用意しました！🎁

それが、こちらの【3大プレゼント】になります！🙌🏻

読みたい！と思って下さった方は、ぜひこちらのnoteから覗いてみてください👇
（このブログから読むと、最初からいきなりパスワードを聞かれます。笑）

※後から見返せるように、ブックマーク・保存推奨です。

⑤まとめ｜さっそくポートフォリオを作ろう！

今回は、「未経験からでも案件獲得・就職内定に直結するポートフォリオの作り方」を解説してみました！

私もデザイン未経験から制作した際には、3週間ほどかかった記憶があります…！💦

とはいえ、自分の世界観を表現して形にしていくのは、とても楽しいですよね！✨

みなさんのポートフォリオも自分にとって満足のいく作品集に仕上がるといいですね！🕊️✨

デザイン制作やポートフォリオ制作など他にも記事を書いているので、よかったら覗いてみてください！