模写修行メディア

駆け出しweb制作者向け!ポートフォリオサイトの作り方!

勉強を始めたばかりの方にとって、ポートフォリオサイトは初めて 1 から作るサイトになる場合も多く、慣れない部分もあるかと思います。

この記事では、web 制作者向けに評価されるポートフォリオサイトにするための、具体的な作り方を紹介します。

ポートフォリオサイトとは

web デザイナーやエンジニア業界で、特に未経験からの転職には、ポートフォリオが必要になります。ポートフォリオは自分が制作した成果物(=実績)です。

注意!
転職で必要なのはポートフォリオです。ポートフォリオサイトは必須ではありません。副業やフリーランスとして、自分で仕事を取る場合は、ポートフォリオサイトがあった方が良いです。

👆 ポートフォリオの例(web 制作系)

  • クライアントワークで作ったサイト
  • ブログなど自分で作って運営しているサイト
  • 自分で考えた架空のサイト
  • メディアなどで提供された題材をもとに作ったサイト

『ポートフォリオサイト = ポートフォリオ(成果物 / 実績)を紹介するサイト』

一般的にはこのような定義になります。ただし、実績紹介だけでなく、自分のプロフィール / スキル / 得意なことなども紹介することが多いです。

また、料金の記載をしたり、ブログを運営したり、サービスサイトのような役割を担っている場合もあります。

自分のやりたいデザインや使いたい技術で、自由に表現することもあるので、ポートフォリオサイトに正解の型はありません。

Point!
実績だけを紹介するサイトから、web制作会社のコーポレートサイトのような、しっかり作り込んだものまで様々です。

ポートフォリオサイトは全て自作すべき?

  • 全て自作する(NoCode ツールを使っても OK)
  • ポートフォリオサイト作成サービスを使う

ポートフォリオサイトを作るには、上の 2 つの選択肢があります。

できれば自作した方が良いですが、自作するデメリット(注意点)もあるので、紹介します。

デザイナーはポートフォリオサイト作成サービスを使うのもあり

コーディングやプログラミングをしないデザイナーの場合、RESUMEなどのポートフォリオ作成サービスを使っても良いです。

ポートフォリオサイトを見る側は、『どんなものを作るのか?』に 1 番興味がある方も多いです。実績だけを見せる目的であれば、RESUME で問題ないです。

僕は過去に、下の流れで外注した経験があります。

  1. Twitter でたまたま流れてきたツイートからその方のプロフィールに飛ぶ
  2. ポートフォリオ作成サービスを使って実績を紹介していたので覗いてみる
  3. 自分が作りたいサイトとマッチしそうだから連絡してみる
  4. 依頼決定

実績を見て依頼を決めているので、出来上がったサイトはイメージ通りで、とてもよかったです。

ただし、ポートフォリオサイト作成サービスは、カスタマイズの自由度が高くありません。コンテンツにもデザインにもこだわりたい場合、STUDIOなどの NoCode ツールで自作すると良いです。STUDIO は NoCode だとは思えないほどのクオリティのサイトを作ることができます。

しっかりしたサイトを作れば、ポートフォリオサイト自体が 1 番の実績になるので、時間があれば自作がおすすめです。

エンジニアはデザインを外注するのが無難

デザインをやらないエンジニア(コーダー含む)の場合、デザインも込みで自作すると、クオリティ面でマイナスになる場合も多いです。デザインは専門外なのでしょうがないことです。

せっかくコードは綺麗に書けても、デザインで第一印象が悪くなってしまうのはもったいないです。従って、できればデザインは外注した方が良いです。


💡 駆け出しデザイナーとお互いにポートフォリオサイトを作る

外注に予算をかけたくない方は多いと思います。その場合、コーディングやプログラミングをしない駆け出しデザイナーと、お互いにポートフォリオサイトを作ると良いです。

要は『あなたのサイトのコーディングをするので僕のサイトのデザインしてください』という物々交換です。

作ったサイトはお互い、実績にも出来るので、条件が合う人が見つかれば良い方法です。

注意!
あくまでお互い駆け出しで、利害が一致する場合です。

💡 外注先が見つからない場合は頑張って自分で作る

外注する人が見つからなかった場合、自分で頑張るしかないです。

エンジニアがデザインなしで作るサイトで、特に違和感が出るのは、カラーと余白感です。

カラーはNordなどのカラーパレットを使うと、違和感なく作れます。Nord では、全 12 色を使っています。なるべくこれ以外の色を使わずに作るのが、ポイントです。

余白感は色々なサイトを見て、どれくらいの値を指定しているか参考にすると良いです。また、『ノンデザイナーズ・デザインブック』で基本的なデザイン原則を学ぶのも良いです。この本はエンジニアでも読んでおいた方が良い 1 冊です。

ポートフォリオサイトを見る側が興味があること

ポートフォリオサイトを見る側(=ユーザー側)が、何に興味があるのかを考えることはとても重要です。

駆け出しの方は、今すぐ転職やフリーランスの活動をしないかもしれませんが、ユーザー側の視点に立って考えることをおすすめします。

  • 基本的なプロフィール
  • どんな経歴なのか
  • 何がどれくらいのレベルでできるのか
  • できる仕事の中でも特に何が得意なのか
  • 過去にどんなものを作ってきたのか
  • どんなやり方・姿勢で仕事をする人なのか
  • どんなキャリアを歩みたいのか
  • 自分たちの会社に合いそうか
  • 作りたいサイトと相性が良さそうか
  • web 上だけでわかるなんとなくの人柄

個人的な考えも多分に含みますが、僕が仕事を外注するときは、上の項目を知りたいと感じます。採用する際も、似たような感じになると思います。

ポートフォリオサイトでは上の項目に答える形で、『何を訴求するか / どんなコンテンツを用意するか / どんなデザインにするか / アニメーションなどの仕様はどうするか』を決めると良いです。

注意!
自分の作りたいものを作ることも正解なので、無理に上の項目に答えなくても良いです。

制作者としての方向性を決めることも大事

一言で web 制作といっても、会社や個人によって特化していることは、様々です。

例えば、個人的に凄く尊敬している制作会社である、ベイジさんmonopo さんでは特化していることが違うのは一目瞭然です。各社の実績を見てみてください。

自分はどんなサイトを作る人になりたいのか、制作者としての方向性によって、ポートフォリオサイトの内容や仕様は変わります。

例えば、アニメーションを多用したリッチなデザインのサイトを作る人になりたいのに、ポートフォリオサイトはシンプルで動きのないものだと、アンマッチです。

良いものが作れても、就職したい会社やクライアントの求めているものとマッチしなければ、あまり評価されないかもしれません。

ポートフォリオサイトの具体的な作り方

今まで紹介したことをふまえ、ポートフォリオサイトの具体的な作り方を下の流れで紹介します。

  1. 訴求内容を決める
  2. コンテンツを決める
  3. デザインをする
  4. コーディング・プログラミングをする
  5. 本番公開(デプロイ)
  6. 実績を増やす

この流れが絶対の正解ではないので、一例として参考になった点は取り入れてみてください。

訴求内容を決める

  • 下請けで仕事を取るため
  • 直受けで仕事を取るため
  • 転職するため
  • 自分のサイトを持ちたい

などなど。人によって、ポートフォリオサイトを作る目的は様々です。

誰に見てもらって、どう思ってもらいたいのかをはっきりさせると良いです。そして、そのために何を訴求すれば良いかを意識します。


💡 例えば...

今は勉強中だけど、ゆくゆくは個人で仕事をしたい。ただ、現状コネもあまりないので、最初のうちは『下請けで仕事を取る』ことになりそう。ポートフォリオサイトはその時のために今から用意したい。いずれは、直受けで仕事が回るようにしたい。今現在、マーケティング関連の会社で働いているので、マーケティングにも精通していることを強みにしたい。

👆 このような状況の場合、👇 下のようなことを考えます。

  • 見てもらう人 = 仕事を流してくれる制作会社
  • どう思ってもらいたいのか = 依頼しても良いな・依頼したいな
  • 仕事を取るためのアプローチは自分と同じ強み(今回の場合、マーケティングに強い)を打ち出している制作会社に対してする

これらを考慮すると、かなりざっくりですが『マーケティングにも精通している web 制作系フリーランス』だとわかるような訴求にする必要があります。

下請けで仕事を取る場合、これくらいざっくりでも良いと個人的には思います。直受けの場合、もっと詳細なセグメンテーションやターゲティングが必要だと思います。

コンテンツを決める

前述した、『ポートフォリオサイトを見る側が興味があること』を意識してどんなコンテンツを用意して、サイトの構成はどうするのか決めます。

  • プロフィール(経歴/スキルレベルも含む)
  • 特徴(強み)
  • サービス
  • 実績紹介
  • 制作の流れ
  • ブログ
  • お問い合わせ

かなりコンテンツを充実させる想定ですが、例えば上のようなコンテンツを用意すると良いかもしれません。

デザインをする

基本的に、作れるようになりたいサイトを、ポートフォリオサイトで表現するのが良いと思います。

アニメーションが多い、リッチなデザインのサイトを作る人になりたければ、ポートフォリオサイト自体もそのようなデザインが良いです。

マーケティングに強いことをアピールするのであれば、コンテンツをしっかり作り込んで、そのサイト経由で仕事を取れるくらいにすることで説得力が増します。

コーディング・プログラミングをする

転職や下請けで仕事を取ることが目的の場合、コードを見られることもあるので、良いコードを書くことも意識しましょう。

また、見るデバイスやブラウザによって、表示が崩れていると印象が悪いので、チェックは忘れずにしましょう。モダンブラウザの最新版のみサポートで良いと思います。

👇 モダンブラウザ

OSブラウザ
WindowsChrome / Firefox / Edge
MacChrome / Firefox / Safari
iPhoneSafari
AndroidChrome

本番公開(デプロイ)

web 制作を仕事にする場合、ドメインやサーバーの知識も必要になるので、自分でも独自ドメインとレンタルサーバーで運用した方が良いです。

WordPress などを使わない、静的サイトであれば、Netlify のようなホスティングサービスを使っても良いと思います。ただし、web 制作ではレンタルサーバーを使う機会は確実にあるので、触っておいた方が良いです。

ドメインはお名前.comで取ると良いです。

サーバーはエックスサーバーがおすすめです。サーバーもお名前.com でも良いですが、お名前.com は問い合わせの電話がつながりにくいです。エックスサーバーは比較的繋がる印象があります。

実績を増やす

できれば実績は投稿できるような仕様にして、増えるたびに追加していくと良いです。

本格的に運用するののがであれば、お客様の声なども作ると、今後仕事をとっていく上でプラスになるかもしれません。

補足
BtoB(web制作も含まれる)では、お客様の声はCVに貢献しやすい、キラーコンテンツです。

参考にしたいポートフォリオサイト 3 選

参考にしたいポートフォリオサイトを紹介します。

※ ポートフォリオサイトと呼ぶのが適切でないサイトもあるかもしれませんが、個人の方のサイトということで紹介しているものもあります。

Glatch(グラッチ)

Glatch(グラッチ)

夫婦で活動されているフリーランスの方々のサイトです。サイトの構成やコンテンツは、web 制作会社のコーポレートサイトのようです。

何に特化しているのか分かりやすいサイトです。

Shibajuku

Shibajuku

オンラインサロンのメンバーと運営しているサイトだと思いますが、フリーランスの方が運営しているので紹介しました。

サイト内にブログもあり、運営の方々がどんな人かもイメージしやすくて良いです。

UNDERLINE

UNDERLINE

サイトでは実績メインで紹介されています。

トップページのキービジュアルでは、写真と想いを載せているので、人柄が伺えて依頼する側は安心できます。

色々書きましたが、ポートフォリオサイトは自由!

ここまで評価されるポートフォリオサイトにするための、ポイント・制作の流れ・作り方などを紹介しました。

ポートフォリオサイトを見てもらい、仕事につなげるために作るのも良いですが、自分が作りたいように自由に作るのも間違いではありません。

web 制作は口コミや紹介で仕事を取っている方が多い業界です。必ずしもマーケティングを意識して、web 経由で知ってもらう必要はないかもしれません。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材