無料テンプレート・制作事例あり｜自分でおしゃれなポートフォリオサイトを作る方法 

フリーランスとしての実績を作ったり、就職・転職活動を成功させたりするには、自分の作品例や実績をまとめたポートフォリオサイトが欠かせません。

この記事では、ポートフォリオサイトの基礎知識から、ノーコードWeb制作プラットフォーム「Studio」を活用してポートフォリオサイトを作る方法を詳しく解説します。

ポートフォリオサイトを初めて作る方におすすめの無料テンプレートや「Studio Experts」による制作事例も紹介しますので、ぜひ最後までご覧ください。

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

ポートフォリオサイトとは、自分の作品例や実績を紹介するWebサイトのこと。デザイナーはもちろん、イラストレーター、フォトグラファー、エンジニア、マーケター、ライターなど、幅広い職種の方々がポートフォリオサイトを活用しています。

ポートフォリオサイトの主な目的は、自分の実績やスキルをアピールして新たな仕事に繋げることです。就職・転職活動では、企業の採用担当者からポートフォリオサイトの提出を求められる場合もあります。

特にデザイナーは、履歴書や職務経歴書だけではスキルを十分にアピールできないため、ポートフォリオサイト自体がデザインや実装力を直接的に証明する場となります。

ポートフォリオサイトに必要な項目

ポートフォリオサイトに必要な項目は、以下の3つです。

• プロフィール

• 作品例（実績）やスキル

• 問い合わせフォーム、SNSアカウント

それぞれ詳しく解説します。

プロフィール

プロフィールには、自身の基本情報や自己PRなどを記載します。具体的な記載内容は、以下の通りです。

• 基本情報
  名前、生年月日、職種、活動地域などの基本的な情報を記載します。顔写真も掲載しておくと、ポートフォリオサイトを訪れた人に安心感や信頼感を与えられます。

• 自己PR
  仕事に対する姿勢や人柄、強みなどを記載します。実務経験が少ない場合は、今後の目標を記載して意欲をアピールするのもよいでしょう。

作品例（実績）

作品例（実績）ポートフォリオサイトで最も重要なのが、作品例や実績の部分です。過去の代表的な作品を厳選して掲載することで、自分のスキルをわかりやすく伝えられます。

各作品や実績の補足情報として以下の項目も掲載すると、より具体性が高まるでしょう。

• 作品の画像

• 作品のタイトル

• クライアント名

• 自分の役割、担当範囲

• 制作目的や背景

• 制作時に工夫したポイント

• 作品の成果や反響

初めて作品を目にする人でも、制作時のストーリーが伝わるよう心がけましょう。なお、作品の成果や反響は具体的な数値を用いて記載すると信頼性が高まります。

問い合わせフォーム、SNSアカウント

最後に、ポートフォリオサイトから仕事の依頼を受ける窓口として、問い合わせフォームやSNSアカウントへのリンクを設置します。フォームには、名前、会社名、電話番号、メールアドレス、相談内容などの項目を設けておくと依頼者とのやりとりがスムーズです。

Studioでポートフォリオサイトを作るメリット

Studioとは、コードを書かずに直感的な操作でWebサイトを制作・公開できるノーコードWeb制作プラットフォームのこと。Studioでポートフォリオサイトを制作すると、次のようなメリットがあります。

• ノーコードでデザイン性の高いサイトを制作できる

• 問い合わせフォームの設置も簡単

• パスワード保護で非公開のサイトも制作できる

ノーコードでデザイン性の高いサイトを制作できる

一番のメリットとして、ノーコードでデザイン性の高いサイトを制作できることが挙げられます。Studioのデザインエディタでは、ゼロから自由にデザインできるため、ピクセル単位の微調整やダイナミックなアニメーションにも柔軟に対応できます。デバイスの画面サイズや解像度に応じてWebサイトのデザインやレイアウトを最適化するレスポンシブ設定もデザインエディタ上から可能です。

＞デザインエディタの詳細はこちら

＞レスポンシブ設定の詳細はこちら

問い合わせフォームの設置も簡単

Studioなら、デザインエディタにパーツをドラッグ&ドロップするだけで、ポートフォリオサイトに必要な問い合わせフォームを設置できます。項目の追加やフォントの変更も簡単です。

問い合わせフォームから送信されたメッセージは、Studio上で一括管理が可能。Google スプレッドシートと連携し、そこからさらにSlackやZapierといった外部サービスへの自動通知も可能です。また、reCAPTCHAを導入して悪質なスパムメッセージの受信を防ぐこともできます。

＞フォームの詳細はこちら

パスワード保護で非公開のサイトも制作できる

Studioの有料プランでは、サイト全体にパスワードを設定し、閲覧制限をかける機能が利用できます。これにより、非公開案件を含むポートフォリオサイトも制作可能です。もちろん、パスワード入力ページもポートフォリオサイトに合わせて自由にデザインできます。

＞料金プランおよびプラン別機能比較表はこちら

＞サイトパスワード保護の詳細はこちら

Studioでポートフォリオサイトを作る方法

Studioでポートフォリオサイトを作る方法は、以下の2つです。

• テンプレートを使用する

• 自分でデザイン・実装する

Studioを活用するなかで操作方法に迷ったときは、よくある質問や機能の操作方法をまとめている「Studio公式ガイド」から知りたい情報がないか探してみましょう。

それでも解決が難しい場合は「Studio Community Japan」からコミュニティーメンバーに質問することも可能です。

テンプレートを使用する

1つ目は、テンプレートを使用する方法です。StudioのデザインエディタはわかりやすいUIで直感的にレイアウトを作成できる一方で、Webサイト制作経験がない状態でゼロから構築するにはハードルが高いかもしれません。その場合はテンプレートの活用がおすすめです。

「Studio Store」では、自分でポートフォリオサイトを制作したい方に向けて、Studioで使えるハイクオリティなテンプレートを販売しています。自分でゼロから実装できなくても、テンプレートの変更・アレンジによってスキルをアピールすることも可能です。

＞ポートフォリオのWebサイトテンプレート｜Studio Store

フォトグラファーにおすすめの無料テンプレート

▲MY PORTFOLIO

「MY PORTFOLIO」は、フォトグラファーのポートフォリオサイトにおすすめの無料テンプレートです。エレガントなデザインが特徴で、写真を美しく魅せるアニメーションも実装されています。

CMSから作品を投稿すると自動でトップページが更新されるため、自分らしいポートフォリオサイトを簡単に制作できます。新しくポートフォリオサイトを作りたい方だけでなく、WordPressからStudioに乗り換えたい方にも最適です。

＞MY PORTFOLIOのプレビュー画面を見る

作品数が少なくてもOK！デザイナー向けポートフォリオテンプレート

▲デザイナー向けポートフォリオ

「デザイナー向けポートフォリオ」は、リズム感のあるレイアウトが特徴のテンプレートです。額縁をイメージしたデザインで、作品にスポットライトを当てるようなホバーアニメーションも実装されています。

CMS機能を使用しておらず、デザインエディタ上でコンテンツを管理するシンプルな構成になっているため、初めてStudioを利用する方にもおすすめです。

作品数が増えてきたり、Studioの操作方法に慣れてきたらCMS管理に切り替えるなど、幅広い用途でご利用いただけます。

＞デザイナー向けポートフォリオのプレビュー画面を見る

＞Studio CMSの仕組み攻略ガイドはこちら

自分でデザイン・実装する

2つ目は、自分でデザイン・実装する方法です。アイデアや表現したいテーマがあれば自分のポートフォリオサイトをゼロからデザインしてみましょう。

自分でポートフォリオサイトをデザインする際は、Studioで作成された世界中のWebサイトを掲載している「Studio Showcase」や、Studioサイト制作・構築経験が豊富な「Studio  Experts」の制作事例からアイデアを得ることが可能です。

フォトグラファーが自らStudioでポートフォリオサイトを制作した事例は、以下のインタビュー記事をご覧ください。

＞気鋭フォトグラファーの拡張を続けるクリエイションの源泉

Studioを活用したポートフォリオサイトの参考事例

Studioの独自審査やカリキュラムを通過したWeb制作会社・フリーランスが加盟できるプログラム「Studio Experts」の制作実績の中から、Studioを活用したポートフォリオサイトの参考事例を3つピックアップして紹介します。

Hiroko Nozaki Illustration

▲Hiroko Nozaki illustration

幅広いジャンルで活躍するイラストレーター、野崎ひろこさんのポートフォリオサイトです。「STUDIO DESIGN AWARD 2023」では「STUDIO DETAILS賞」を受賞しています。

制作は、ユーザーとビジネスのコミュニケーションをデザインする、株式会社ヒカリナが担当。イラストの特徴を活かした、シンプルかつポップなデザインとなっています。印刷物の仕上がりサイズを示す「トリムマーク」がアクセントに使用されているのも特徴です。

※参考：Hiroko Nozaki illustration｜STUDIO DESIGN AWARD 2023

＞株式会社ヒカリナが作ったStudioのWebサイト制作実績一覧

エウレカライフフォト

▲エウレカライフフォト

大阪・豊中を拠点とする出張専門のフォトチーム「エウレカライフフォト」のポートフォリオサイトです。制作は、お客様の魅力やポテンシャルを最大限に引き出す、Web・グラフィックデザイナーのKOOOが担当。

心を込めて丁寧に撮影された写真を活かした、優しい雰囲気のデザインです。モバイルファーストのデザインで、PC閲覧時の背景にも写真がゆっくりと流れるアニメーションが実装されています。

＞KOOOが作ったStudioのWebサイト制作実績一覧

YUICHI YOSHIMURA PORTFOLIO

▲YUICHI YOSHIMURA PORTFOLIO

LAMP LLC. 代表の吉村優一さんが自ら手がけたポートフォリオサイトです。コーポレートサイトとは別に、自身のプロフィールや過去の作品例を掲載しています。

黒を基調としたスタイリッシュなデザインで、スキルや経歴が一目でわかるようにまとめられています。Webデザインと動画の作品例が別のページで紹介されているのも特徴です。

＞LAMP LLC. by Yuichi Yoshimuraが作ったStudioのWebサイト制作実績一覧

ポートフォリオサイトを制作するなら「Studio」

この記事では、ポートフォリオサイトの基礎知識や、Studioを活用してサイトを制作する方法について詳しく解説しました。

Studioなら、ノーコードでデザイン性の高いポートフォリオサイトを簡単に制作できます。新たな仕事の依頼を受けるために必要な問い合わせフォームを設置したり、サイト全体にパスワードを設定して閲覧制限をかけることも可能です。

ポートフォリオサイトの制作をご検討中の方は、この機会にぜひStudioをお試しください。