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

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

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

この記事では、未経験web制作者向けに、ポートフォリオサイトの作り方を丁寧に解説します。

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

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

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

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

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

ポートフォリオの例

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

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

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

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

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

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

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

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

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

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

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

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

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

その方向性によって、ポートフォリオサイトの内容や仕様は変わります。

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。

転職成功者や副業・フリーランスデビューした方も出ています。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

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

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

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

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

デザイナー志望の場合

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

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

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

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

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

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

エンジニア志望の場合

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

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

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

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

① デザイナーと物々交換

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

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

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

② 頑張って自分で作る

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

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

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

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

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

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

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

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

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

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

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

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

模写修行では、デザインデータ配布はもちろんのこと、解説もあります。コーディングの勉強には最適です。

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

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

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

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

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

常に顧客目線で考えることは、ビジネスをやる上で超重要です。

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

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

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

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

Step1：目的を決める

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

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

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

例えば...

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

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

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

Step2：コンテンツを決める

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

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

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

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

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

Step3：デザインをする

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

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

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

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

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

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

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

Step5：本番公開

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

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

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

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

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

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

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

Step6：実績を増やす

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

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

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

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

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

Glatch（グラッチ）

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

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

Shibajuku

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

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

UNDERLINE

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

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

メンターやってます！