Web制作のポートフォリオの作り方|未経験でも作れる5つのステップ

kumi

こんにちは、フリーランスWebデザイナーのkumiです🌸

Web制作のポートフォリオの作り方が分かれば、案件に応募する一歩を踏み出せますよね。

でも、何を載せればいいのか分からず、手が止まっていませんか?

私はWordPressを使い始めて13年になり、これまでに100名以上の方へブログやサイト制作をお教えしてきました。

この記事では、未経験でもできるポートフォリオの作り方を、5つのステップに分けてお伝えします。

 

何を載せたらいいのか分からなくて、手が止まってる…

もしそう感じているなら、ぜひ最後まで読んでみてくださいね😊

ステップ1:実績がなくても自主制作でポートフォリオは作れる

ポートフォリオとは、自分がどんな制作をできるのかを、実際の見本で見せるためのものです。

言葉で「できます」と伝えるより、制作物を見てもらう方が、相手は安心して依頼できます。

発注する側は、依頼する前に、この人に任せて大丈夫かを知りたいと思っています。

特にWeb制作は、制作スキルが仕事の質に直結するので、見本があるかどうかで最初の印象が大きく変わります。

実際の案件を受けた経験がなくても、自主制作のサイトで十分です。

ポートフォリオに載せておきたいもの

  • 制作したサイトのURLや画面の画像
  • 使ったツール(WordPressやテーマの名前など)
  • 制作の意図や工夫したところ
  • 簡単なプロフィールと連絡先

最初は、1〜2作品でも構いません。
数を増やすより、一つ一つを丁寧に仕上げる方が、相手にきちんと伝わります。

ステップ2:ジャンル(業種)を決める

ポートフォリオ用のサイトというと、「すごいサイトを作らなくちゃ!」と気負ってしまいがちです。

でも、そんなものすごいクオリティの高いサイトを作る必要はありません。

好きなお店の紹介ページ、趣味のまとめサイト、架空のカフェや教室のサイトなど、実際にこういう業者さんから案件がきたらいいな、と思う業種のサイトを作ってみましょう。

kumi

ジャンルは5分で決めて、まず手を動かしましょう!

ジャンル(業種)を決める時の目安

  • 自分が詳しい、または好きなジャンル
  • 載せたい内容がすぐ思い浮かぶジャンル
  • 少ないページ数で形になるジャンル

迷ったら、自分が普段よく見るお店やサービスを思い浮かべてみてください。

内容をよく知っているジャンルなら、文章や写真を考える時間も短くなります。

例えば架空のカフェなら、トップページ、メニュー、お店の紹介、アクセスの4ページがあれば、サイトとして成り立ちます。

最初の作品は、小さく作って完成させることが、次の作品につながります。

ステップ3:見やすく、わかりやすいサイトを心がける

動きのある演出や、複雑なアニメーション機能を入れたくなる気持ちは分かります。

 

凝った動きを入れた方が、すごく見えるのかな…

でも、見る人が最初に感じるのは「見やすいかどうか」です。

文字が小さすぎたり、情報が詰め込まれすぎたりすると、どれだけ技術が高くても良さが伝わりません。

見やすさを整える基本

  • 見出しの大きさをそろえる
  • 余白を適度に取る
  • フォントの種類を絞る
  • 文字の色と背景の差をはっきりさせる

この基本を整えるだけで、印象はぐっと良くなります。

よくある失敗は「色の使いすぎ」と「文字の小ささ」

初心者のサイトで目立つのは、色を何色も使ってしまい、どこを見ればいいのか分からなくなるパターンです。

文字が小さいと、スマホでは特に読みにくくなります。ボタンがどこにあるか分からないサイトも、見る人を迷わせてしまいます。

色は2〜3色に絞り、文字は読みやすい大きさにしておきましょう。

スマホでの表示も必ず確認する

今は、スマホでサイトを見る人も多いです。

パソコンで整えた後に、スマホの画面でも崩れていないか確認しておきましょう。

ステップ4:制作の意図を言葉で残すと考える力が伝わる

完成したサイトを見せるだけでなく、どんな工夫をしたのかを言葉で添えましょう。

例えば「ターゲットを主婦層に設定して、やさしい配色にした」「スマホでの見やすさを優先して、文字を大きくした」のように書きます。

見る側は、完成品だけでは分からない「考える力」も見ています。

一言添えるだけで、ただ作った人ではなく、考えて作った人という印象に変わります。

書く内容は、次の3つで十分です。

  1. 誰に向けて作ったサイトなのか
  2. 色や文字で意識したこと
  3. 見やすくするために工夫したこと

この3つを書いておくと、見る側は作った人の考え方をイメージしやすくなります。

書いた内容は、作品の下や紹介ページに添えておきましょう。

難しい言葉でまとめる必要はありません。自分の言葉で素直に書きましょう!

ステップ5:完成度を求めすぎず公開して使われる形にする

ポートフォリオは、パソコンの中に保存したままでは意味がありません。

インターネット上で公開して、いつでも見てもらえる状態にしましょう。

私にも、デモサイトを作ったのに、「これでいいのかな?もっとこうした方がいいかな?」と考え始めて、いつまでも完成しなかった経験があります。

直し始めると終わりがなく、完璧を目指すほど、公開が遠のいてしまうんです。

kumi

まずは一度形にして、公開してから直していきましょう!

公開してみて初めて気づく直すところも、たくさんあります。

公開する前に確認すること

  • 誤字や脱字がないか
  • リンクが切れていないか
  • スマホで表示が崩れていないか
  • 連絡先が分かるようになっているか

この4つを確認できたら、完璧でなくても公開して大丈夫です。

公開したURLをプロフィールに貼って使う

公開したら、クラウドソーシングのプロフィール欄やSNSのプロフィールに、URLを貼っておきましょう。

見てもらえる場所が増えるほど、声をかけてもらうきっかけも増えていきます。

ポートフォリオは、公開して初めて仕事につながる名刺になります。

まとめ

ポートフォリオは、実績がなくても、身近なテーマの自主制作で作れます。

見やすさを優先して、制作の意図を言葉で添え、完成度にこだわりすぎずに公開してみましょう。

一番大切なのは、完璧を目指すよりも、まず1サイト作りきって公開することです。

どんどんポートフォリオを増やしていってくださいね!

ブログ運営者

2013年からインターネット業界に参入し、11年目突入。アフィリエイト事業・Webデザイン業を経て現在は女性、初心者向けのWordPress講座を運営中。