模写修行メディア

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

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

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

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

また、下記の方向けに、評価されるポートフォリオサイトの作り方を解説したnoteも作りました。

  • web制作会社から下請けで仕事を取りたい方

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

小手先のテクニックなどではなく、本質的な内容になっています。無駄に営業したくない方は、ぜひnoteもご覧ください。

評価されるサイト制作を学ぼう!!

noteを見る

この記事の目次

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

ポートフォリオとは、自分が制作した成果物 / 実績です。ポートフォリオサイト = ポートフォリオを紹介するサイトのことです。

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

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

Point!
実績だけを紹介するサイトから、サービスサイトのような、しっかり作り込んだものまで様々です。

ポートフォリオの例

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

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

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

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

どんな目的でも良いです。

  • 自分の力でサイトを作ってみたいから
  • 学んだことを使ってみたいから

これらも立派な目的です。

作る目的に正解はありません。しかし、今後仕事でサイト制作をする際は、必ず目的があります。本番の練習だと思い、目的を決め、そのためにどうやって作るべきか考えると良いです。

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

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

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

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

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

ベイジさんmonopoさんでは特化していることが違うのは一目瞭然です。各社の実績を見てみてください。
  • 自分はどんなサイトを作る人になりたいのか?

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

顧客目線のサイト制作を学ぼう!!

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ではこの辺りを重点的に解説しています。

顧客目線のサイト制作を学ぼう!!

noteを見る

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

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

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

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

Step1:目的を決める

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

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

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


💡 例えば...

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

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

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

Step2:コンテンツを決める

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

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

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

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

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

コンテンツの作り方を学ぼう!!

noteを見る

Step3:デザインをする

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

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

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

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

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

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

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

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

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

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

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

初心者にもおすすめ!主要レンタルサーバー8商品を徹底比較

読むのが面倒な方は、下記が結論になります。

💡どのサーバーが良いか結論

なぜこの2つが良いかは、下記の記事で詳しく紹介しています。

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

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

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

Step6:実績を増やす

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

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

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

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

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

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

Glatch(グラッチ)

Glatch(グラッチ)

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

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

Shibajuku

Shibajuku

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

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

UNDERLINE

UNDERLINE

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

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

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

記事の冒頭でも紹介しましたが、実践編としてnoteを書きました。

目的ドリブンでサイトを制作する過程が学べるようにしました。

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

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

評価されるサイト制作を学ぼう!!

noteを見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

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

\Share/

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

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