フリーランスとしての実績を作ったり、就職・転職活動を成功させたりするには、自分の作品例や実績をまとめたポートフォリオサイトが欠かせません。この記事では、ポートフォリオサイトの基礎知識から、ノーコード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でポートフォリオサイトを制作した事例は、こちらのインタビュー記事をご覧ください。>気鋭フォトグラファーの拡張を続けるクリエイションの源泉|THE CONTRAST by STUDIOSTUDIOを活用したポートフォリオサイトの参考事例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サイト制作実績一覧株式会社ヒカリナについて会社所在地東京都港区六本木4-12-8 HOLDER 3F公式サイトhttps://studio.hikarina.co.jp/対応予算目安:60万円〜※詳細は制作会社にお問い合わせください納期目安2ヶ月〜エウレカライフフォト▲エウレカライフフォト大阪・豊中を拠点とする出張専門のフォトチーム「エウレカライフフォト」のポートフォリオサイトです。制作は、お客様の魅力やポテンシャルを最大限に引き出す、Web・グラフィックデザイナーのKOOOが担当。心を込めて丁寧に撮影された写真を活かした、優しい雰囲気のデザインです。モバイルファーストのデザインで、PC閲覧時の背景にも写真がゆっくりと流れるアニメーションが実装されています。>KOOOが作ったSTUDIOのWebサイト制作実績一覧KOOOについて公式サイトhttps://kooo-design.com/対応予算目安:1ページ 10万円〜※詳細は制作会社にお問い合わせください納期目安1ヶ月〜YUICHI YOSHIMURA PORTFOLIO▲YUICHI YOSHIMURA PORTFOLIOLAMP LLC. 代表の吉村優一さんが自ら手がけたポートフォリオサイトです。コーポレートサイトとは別に、自身のプロフィールや過去の作品例を掲載しています。黒を基調としたスタイリッシュなデザインで、スキルや経歴が一目でわかるようにまとめられています。Webデザインと動画の作品例が別のページで紹介されているのも特徴です。>LAMP LLC. by Yuichi Yoshimuraが作ったSTUDIOのWebサイト制作実績一覧LAMP LLC. by Yuichi Yoshimuraについて会社所在地神奈川県川崎市多摩区南生田3-9-16-103公式サイトhttps://lamp.design/対応予算目安:1ページのLP実装のみで20万円〜※詳細は制作会社にお問い合わせください納期目安1ヶ月〜ポートフォリオサイトを制作するなら「STUDIO」この記事では、ポートフォリオサイトの基礎知識や、STUDIOを活用してサイトを制作する方法について詳しく解説しました。STUDIOなら、ノーコードでデザイン性の高いポートフォリオサイトを簡単に制作できます。新たな仕事の依頼を受けるために必要な問い合わせフォームを設置したり、サイト全体にパスワードを設定して閲覧制限をかけることも可能です。ポートフォリオサイトの制作をご検討中の方は、この機会にぜひSTUDIOをお試しください。