個人で活動する人のための
ポートフォリオサイトの作り方

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

ポートフォリオサイトとは、自分の作品や実績、プロフィールなどを Web上にまとめたサイトのことです。

デザイナーやイラストレーター、Web制作者などのクリエイターだけでなく、 個人で仕事をしている人や、これから活動を始めたい人にとっても、 自分が「何をしている人なのか」を伝える場所として活用できます。

SNSでも作品や活動を発信できますが、過去の投稿が流れてしまったり、 プロフィールや実績、サービスなどの情報が分散しやすいという特徴があります。 ポートフォリオサイトをひとつ用意しておけば、 自分の活動について知りたい人に、必要な情報をまとめて見てもらうことができます。

個人で活動する人にもポートフォリオサイトは必要？

必ずしも、活動を始める前から立派なポートフォリオサイトを 用意する必要はありません。

ただ、作品が少しずつ増えてきたときや、 SNS以外にも自分の活動をまとめる場所がほしくなったときには、 小さなポートフォリオサイトを作っておくと便利です。

最初からたくさんのページを作るのではなく、 プロフィールや作品、問い合わせ先など、 今必要な情報から少しずつ掲載していけば十分です。

ポートフォリオサイトに載せたい内容

ポートフォリオサイトを作ろうと思っても、 「何を載せればいいのかわからない」と迷うことがあります。

すべての情報を最初から揃える必要はありません。 まずは、自分の活動を知ってもらうために必要な情報から シンプルにまとめてみましょう。

1. プロフィール

名前や活動名、仕事内容、得意なことなど、 自分がどんな人なのかを簡潔に紹介します。

詳しい経歴をすべて書くよりも、 「何をしている人なのか」が初めてサイトを見る人にも 伝わる内容を意識するとわかりやすくなります。

2. 作品・実績

制作した作品や、これまでの仕事・活動実績を掲載します。 Webサイトなら画像だけでなく、実際のページへのリンクを 載せることもできます。

まだ実績が少ない場合は、 自主制作した作品を掲載しても問題ありません。 大切なのは数の多さよりも、 「どんなものを作れるのか」が伝わることです。

3. サービスや活動内容

仕事の依頼を受けている場合は、 提供しているサービスや対応できる内容を掲載しておくと、 サイトを見た人が相談しやすくなります。

商品を販売している場合は、 オンラインショップや商品ページへのリンクを まとめておくのもおすすめです。

4. SNSや外部サイトへのリンク

InstagramやXなどで活動を発信している場合は、 ポートフォリオサイトからSNSへ移動できるようにしておきます。

BOOTHなどのショップや、作品を掲載している外部サービスがあれば、 それらもまとめておくと、 ポートフォリオサイトを活動全体の入口として使えます。

5. お問い合わせ先

仕事の相談や質問を受けられるように、 メールアドレスやお問い合わせフォームなどの 連絡方法を用意しておきます。

メールアドレスを掲載する場合は、 クリックしてメールを作成できるリンクだけでなく、 コピーできるようにアドレス自体も表示しておくと便利です。

ポートフォリオサイトの構成例

掲載したい内容が決まったら、 次はそれぞれの情報をどのような順番で見せるか考えてみましょう。

初めてポートフォリオサイトを作る場合は、 すべての情報を1ページにまとめたシンプルな構成でも十分です。

このとき、最初にプロフィールを詳しく紹介するよりも、 作品や実績、活動内容を先に見せる構成がおすすめです。

初めてサイトを訪れた人は、 まだ自分自身について詳しく知っているとは限りません。 そこで最初に作品や実績を見せることで、 「何を作っている人なのか」「どんな活動をしているのか」を すぐに伝えやすくなります。

作品や活動に興味を持ってもらえたら、 そのあとにプロフィールを見てもらうことで、 制作者自身についても知ってもらうことができます。

ただし、最適な順番はポートフォリオの目的によって変わります。 自分自身の経歴や専門性が重要な仕事であれば、 プロフィールを早い段階に置く方法もあります。 「サイトを訪れた人に、まず何を知ってほしいか」を考えて 順番を決めるのがおすすめです。

作品数や情報量が増えてきたら、 WorksやProfileなどを別ページに分けても構いません。 まずは今ある情報をわかりやすく見せることを優先して、 必要になったときにページを増やしていきましょう。

ポートフォリオサイトを作る手順

ポートフォリオサイトは、HTMLやCSSを使って自分で作ることもできます。 最初は難しそうに見えますが、必要な工程をひとつずつ進めれば、 シンプルなサイトなら少しずつ形にしていけます。

1. 載せたい内容を整理する

まずは、サイトに何を載せたいのかを整理します。

プロフィール、作品や実績、サービス内容、SNS、 お問い合わせ先など、必要な情報を書き出してみましょう。

最初からすべてを用意する必要はありません。 今の活動に必要なものだけでも、十分ポートフォリオサイトとして使えます。

2. サイトの構成を決める

次に、どんな順番で情報を見せるかを決めます。

たとえば、トップページに プロフィール、作品、サービス、お問い合わせをまとめる 1ページ構成なら、初めてでも比較的作りやすくなります。

情報が増えてきたら、 プロフィールページや商品ページなどを追加していくこともできます。

3. HTMLとCSSでページを作る

サイトの内容が決まったら、HTMLとCSSを使ってページを作ります。

HTMLは、見出しや文章、画像、リンクなど、 ページの内容や構造を作るためのものです。 CSSでは、文字の大きさや色、余白、レイアウトなど、 サイトの見た目を整えます。

コードを書くときは、Visual Studio Code（VS Code）のような コードエディターを使うと編集しやすくなります。

HTMLやCSSを編集したら、 ブラウザで実際のページを開いて表示を確認しましょう。 コードを編集しながらこまめに確認することで、 レイアウトの崩れや表示の違いにも気づきやすくなります。

4. スマートフォン用の表示を整えて確認する

パソコン用のページができたら、 スマートフォンでも見やすく表示されるようにCSSを調整します。

画面幅に合わせてレイアウトや文字サイズなどを変更する メディアクエリを追加することで、 パソコンとスマートフォンそれぞれに合った表示にすることができます。

CSSを調整したら、ブラウザで実際のページを開いて、 文字が小さすぎないか、レイアウトが崩れていないか、 リンクやボタンが正しく動くかなどを確認しておきましょう。

5. GitHubにファイルを保存する

サイトができたら、HTMLやCSS、画像などのファイルを GitHubのリポジトリにアップロードします。

GitHubに保存しておくことで、 サイトのファイルをWeb上で管理しやすくなり、 Netlifyなどの公開サービスとも連携できます。

6. Netlifyでサイトを無料公開する

GitHubに保存したサイトは、 Netlifyを使って無料でWeb上に公開することができます。

NetlifyとGitHubのリポジトリを連携しておけば、 GitHub側のファイルを更新したときに、 公開しているサイトにも変更を反映しやすくなります。

独自ドメインを取得しなくても、 「〇〇.netlify.app」という形式のURLを使えるため、 まずは費用をかけずに自分のサイトを公開してみたい人にも使いやすい方法です。

7. 公開後も少しずつ更新する

ポートフォリオサイトは、一度作ったら終わりではありません。

新しい作品ができたときや、活動内容が変わったときに、 少しずつ内容を更新していくことで、 今の自分の活動が伝わるサイトになります。

最初から完璧なサイトを目指すよりも、 まず公開して、必要に応じて育てていくのがおすすめです。

ポートフォリオサイト公開前のチェックリスト

サイトが完成したら、公開する前に一度全体を確認してみましょう。 デザインだけでなく、実際にサイトを訪れた人が 問題なく使えるかを確認することも大切です。

特にスマートフォンでの表示は忘れずに確認しておきましょう。 パソコンではきれいに表示されていても、 画面幅が変わることでレイアウトが崩れることがあります。

また、公開したあとに修正しても問題ありません。 実際のサイトを使いながら気づいたところを直し、 少しずつ使いやすいポートフォリオサイトにしていきましょう。

自分で作るのが難しいときは

ポートフォリオサイトは自分で作ることもできますが、 HTMLやCSSを一から書いたり、デザインやページ構成を考えたりするには ある程度の時間が必要です。

「自分のサイトはほしいけれど、どこから作ればいいかわからない」 「デザインを一から考えるのが難しい」という場合は、 ポートフォリオ用のテンプレートを使う方法もあります。

テンプレートを使えば、あらかじめ用意されたページをもとに、 プロフィールや作品、文章、画像などを自分の内容に変更しながら サイトを作ることができます。

テンプレートを使って、自分のサイトを作る

shizuki-studioでは、 HTMLとCSSで作られたポートフォリオサイトのテンプレートを 用意しています。

ファイルの編集方法からWeb上に公開するまでの手順をまとめた 説明書も付属しているため、 初めて自分のWebサイトを作る方にも使っていただけます。

自分の活動をまとめる場所がほしいと思ったら、 まずは小さなサイトから作ってみてください。 作品や活動と一緒に少しずつ更新していけば、 自分らしいポートフォリオサイトに育てていくことができます。