【web制作者向け】ポートフォリオサイトの作り方！

駆け出しの方にとって、ポートフォリオサイトは初めて1から作るサイトになる場合も多く、慣れない部分もあると思います。

• どんなデザインにすれば良いか？
• どんなコンテンツにすれば良いか？
• どうやって公開するのか？
• などなど...

この記事では、未経験web制作者向けに、ポートフォリオサイトの作り方を丁寧に解説します。また、『web制作会社から下請けで仕事を取りたい方』向けに、評価されるポートフォリオサイトの作り方を解説したnoteも作りました。

この記事が基礎編で、noteが実践編になっています。

小手先のテクニックなどではなく、本質的な内容になっています。目的を意識したサイト制作の考え方を知りたい方にもおすすめです。

👇 ポートフォリオサイトを公開するためのレンタルサーバーを知りたい方は、下記の記事も参考にしてみてください。

ポートフォリオサイト用レンタルサーバーはこの2つで決まり！

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

• ポートフォリオ = 自分が制作した成果物 / 実績
• ポートフォリオサイト = ポートフォリオを紹介するサイト

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

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

ポートフォリオの例

• クライアントワークで作ったサイト
• ブログなど自分で作って運営しているサイト
• 自分で作った架空のサイト
• 模写したサイト(※)

※ 模写したサイトを載せている方も多いですが、やめたほうが良いです。その理由は、後述します。

ポートフォリオサイトを作る目的は？

ポートフォリオサイトを作る際は、その目的をしっかり決めたほうが良いです。

• 自分の力でサイトを作る
• 学んだことを使う

例えば、これらも立派な目的です。

作る目的に正解はありません。しかし、今後クライアントワークや自分のビジネスをする際は、必ず目的があります。本番を想定し、目的を決めて、そのためにどうやって作るべきか考えると良いです。

仕事を取りたい / 転職・就職したい方が意識すべきこと

• 仕事を取りたい
• 転職・就職したい

これらが目的の方は、見る人 (= 顧客) を意識して作ることが、評価されるためのポイントになります。

例えば、web制作会社から下請けで仕事を取りたい、またはweb制作会社に転職・就職したい場合を考えてみます。

この場合、一言でweb制作といっても、会社によって特化していることが様々です。

ベイジさんとmonopoさんでは特化していることが違うのは一目瞭然です。各社の実績を見てみてください。

• 自分はどんなサイトを作る人になりたいのか？

その方向性によって、ポートフォリオサイトの内容や仕様は変わります。noteでは、ケーススタディ的に、見る人 (= 顧客) を意識した具体的な作り方解説しています。

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

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

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

できれば自作した方が良いですが、自作するデメリットもあります。デザイナー志望の場合とエンジニア志望の場合に分けて、詳しく紹介します。

デザイナー志望の場合

できればNoCodeツールを使って、自作すると良いです。NoCodeツールは、STUDIOがおすすめです。

もしどうしてもSTUDIOで作れない場合、RESUMEのような、ポートフォリオサイト作成サービスを使うのもありです。ただし、自由度が低いので、思うようにできないことも多々あります。

ポートフォリオサイトを見る側の大きな関心ごとの1つは、『どんなものを作るのか？』です。したがって、実績だけ見せる目的であれば、RESUMEでも良いです。

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

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

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

エンジニア志望の場合

エンジニア志望の場合、できればデザインは外注するのが無難です。

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

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

とはいえ、デザイン外注は基本的にお金がかかります。予算をかけない解決策は2つあります。

① デザイナーと物々交換

コーディングやプログラミングをしない駆け出しデザイナーと、お互いにポートフォリオサイトを作れれば予算をかけずに済みます。

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

作ったサイトはお互い、実績にも出来るので、条件が合う人が見つかれば良い方法です。同じレベル感で、利害が一致する場合しか成り立たないので、なかなか見つからないかもしれません。

② 頑張って自分で作る

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

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

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

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

模写した実績は載せるべきじゃない！

一般に公開されているサイトを模写して、ポートフォリオサイトに載せている方がいます。これは著作権的にNGです。

サイトの持ち主がOKを出していれば良いですが、その場合でもあまりおすすめはしません。理由は下記です。

• 模写は実践的な練習にならない
• 多くの人が模写しているサイトだと見る側は『またか...』と思う

1点目に関して、補足しておきます。デザイナーの場合、デザインツールに慣れる目的で模写をすることは良いかもしれません。エンジニアの場合、模写では、デザインデータからコーディングする練習ができません。従って、デザイナーは良いかもしれませんが、エンジニアにはおすすめしません。

模写ではなく架空のサイトだったらOK

ポートフォリオサイトに掲載可で、デザインデータを提供している方がいます。

エンジニア志望の方は、模写するよりも、デザインデータをもらってコーディングするほうが勉強になって良いです。

面識はありませんが、おすすめの2人を紹介しておきます。

模写修行では、デザインデータ配布はもちろんのこと、解説もあります。ポートフォリオサイトへの掲載は禁止していますが、コーディングの勉強には最適です。

ポートフォリオサイトは顧客目線で考えよう

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

• 基本的なプロフィール
• どんな経歴なのか
• 何がどれくらいのレベルでできるのか
• などなど...

例えば、仕事を外注するときは、上のような項目を知りたいです。

ポートフォリオサイトでは、顧客の疑問に答えます。『何を訴求するか / どんなコンテンツを用意するか / どんなデザインにするか / アニメーションなどの仕様はどうするか』顧客目線で考えます。

常に顧客目線で考えることは、ビジネスをやる上で超重要です。noteではこの辺りを重点的に解説しています。

具体的なポートフォリオサイト制作の流れ

ここからは、今まで紹介したことをふまえ、ポートフォリオサイト制作の流れを紹介します。

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

大まかに、この流れで制作することになります。

Step1：目的を決める

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

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

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

例えば...

今は勉強中だけど、ゆくゆくは個人で仕事をしたい。ただ、現状コネもあまりないので、最初のうちは『下請けで仕事を取る』ことになりそう。ポートフォリオサイトはその時のために今から用意したい。

↑このような状況の場合、見てもらう人は仕事を流してくれる制作会社です。そして、依頼したいと思ってもらえれば良いわけです。

これらを考慮して、何を伝えるか考えます。

Step2：コンテンツを決める

Step1で決めた、伝えるべきことを意識して、どんなコンテンツが必要か考えます。

かなりコンテンツを充実させる想定ですが、サービスサイトのようにしたければ、下記のようにするのも良いかもしれません。

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

見ている人が思う疑問 / 悩み/ 不安にコンテンツで答えるのがポイントです。

webサイトの主役はコンテンツです。コンテンツが良くないと、見ている人を行動させることはできません。

Step3：デザインをする

作れるようになりたいサイトを、ポートフォリオサイトで作るのが良いです。

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

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

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

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

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

👇 これらで表示が崩れていないか確認する

OS	ブラウザ
Windows	Chrome / Firefox / Edge
Mac	Chrome / Firefox / Safari
iPhone	Safari
Android	Chrome

Step5：本番公開(デプロイ)

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

web制作ではレンタルサーバーを使うことが多いので、たくさん触って慣れておきましょう。おすすめのサーバーは下記の記事で紹介しています。

ポートフォリオサイト用レンタルサーバーはこの2つで決まり！

👇 読むのが面倒な方のために結論

• スペックや安定性重視ならエックスサーバー
• とにかく安さ重視ならコアサーバー

契約からWordPressのインストールまで、詳しく解説した記事も用意しています。記事通りにやれば、独自ドメインでサイトを運営する準備が完了します。

【シェアNo.1】安定のエックスサーバーの契約からWordPressのインストールまで解説【コスパ最強】218円/月で使えるコアサーバーの契約からWordPressのインストールまで解説

Step6：実績を増やす

実績は増えるたびに追加しましょう。

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

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

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

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

Glatch（グラッチ）

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

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

Shibajuku

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

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

UNDERLINE

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

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

周りと差をつける！評価されるポートフォリオサイトの作り方

記事の冒頭でも紹介しましたが、実践編としてnoteを書きました。目的ドリブンでサイトを制作する過程が学べるようになっています。

こんな方にはおすすめです！

• web制作会社から下請けで仕事を取りたい方
• どんなコンテンツ( ≒ ページ )を作れば良いかわからない方
• 目的を意識したサイト制作の考え方を知りたい方