成功するポートフォリオサイトの作り方│2024年

ポートフォリオサイトは、訪問者に作品を見せて実力を知ってもらうために有用なツールです。Webデザイナーやエンジニアの場合、作品だけでなく、サイト自体も評価されますから、手を抜くことはできません。イラストレーターや写真家などは「インスタグラムに画像を載せれば、自然と集客につながるはず」と思うかもしれませんが、現実はそう甘くありません。ポートフォリオサイトを作ることで、プロであることをアピールでき、アマチュアと差をつけることができます。また、学生は優れたポートフォリオサイトを就職に繋げることもできるでしょう。

このように、転職や就職、キャリアアップに役立つのがポートフォリオサイトの利点ですが、いざサイトを作成するとなると、躊躇してしまうかもしれませんね。ご安心ください。個性的なホームページを自作するのは想像以上に簡単です。

この記事では、手順を追って素敵なポートフォリオの作り方を解説していきます。サイト作成ソフトを使うので、専門知識がなくても、初心者でもうまく行きます。

今回は、Wixでホームページを作りました。とても使いやすく、ポートフォリオサイト向けの優れたテンプレートが用意されているからです。もちろん、他のサイト作成ソフトを使ってもOKです。このガイドを参考にして、魅力的なポートフォリオサイトを作成、デザインしましょう！

ステップ1：ポートフォリオサイトのドメイン名を決める

ポートフォリオサイトに限ったことではありませんが、ドメイン名選びにはコツがあります（ドメイン名の選び方はこちらの完全ガイドをご覧ください）。ポートフォリオサイトのドメインには、本名を使いましょう。識別子は「.com」でOKです。芸名や会社名があれば、そちらを使ってください。

凝ったドメイン名を選ぶ必要はありません。心に響く作品を見せれば、名前を覚えてもらえるはずです。ドメインに不要な単語を入れると混乱を招く可能性がありますから、考えすぎないようにしましょう。

なお、本名や会社名がすでに登録されていて使えない場合もあります。例えば、「YamadaHanako.com」が取得できない場合は、少し工夫してみましょう。例えば、「Yamada-Hanako.com」「YHanako.com」「HanakoYamada.com」などが考えられます。

ドメインの末尾は「.com」を選ぶのもポイントです。他より高価格ですが、世界一人気のあるTLD（トップレベルドメイン）なので、非常に覚えやすいのです。取得できるドメイン名を探すには、こちらのドメイン名生成ツールをご利用ください。

ステップ2：サイト作成ソフトとプランを選ぶ

レンタルサーバに加入してWordPressを使えば、ポートフォリオサイトを細かく編集できます。しかしこの方法は時間がかかり、専門知識が必要です。この方法では、レンタルサーバの手配、ドメイン取得、プラグインの導入など、一覧の作業を自分で行う必要があり、これらも料金がかかりますから、予想以上にコストがかかってしまいます。

一方、ホームページ作成ソフトを使えば、ノウハウがなくても素早く簡単にサイトを作成できます。サイトビルダーのプランには、サイト作成に必要なツールや機能が揃っていますし、加入時に総額が分かります。ラクにサイトが作れるうえ、WordPressより安い場合もあるのです。

また、WixやSITE123など、無料プランでサイトを公開1できるビルダーもあります。ただ、無料プランはあまりおすすめしません。ドメイン名にビルダーの会社名が含まれてしまい、プロらしさが失われてしまうからです。カスタムドメインを使える一番安いサイトビルダーから始めると良いでしょう。必要であれば、いつでもアップグレードできます。

では、使いやすさとカスタマイズ性を兼ね備えたビルダーをご紹介しましょう。各ビルダーを使って実際にポートフォリオサイトを作成し、初心者でも使いこなせるか確認しました。サイトビルダーを選ぶ際は、ニーズをしっかり検討するのがポイントです。

1. Wix：創造性を輝かせるのにおすすめ1

1 Wixは、使いやすさと編集の自由度が最高のサイトビルダーです。ほんの数分でドラッグ&ドロップエディタを使いこなすことができ、思い通りのサイトが完成します。

ただし、デザインのセンスがない場合は、テンプレートを大幅に編集しない方が無難でしょう。Wixは自由自在に編集できるため、デザインが台無しになってしまう恐れがあるからです。

デザイン力に自信があり、自分らしいサイトを作りたい方にはWixがおすすめです。Wixは永久無料プランがあります1から、ドメインを取得する前にぜひお試しください。

Wixの注目ポイントをいくつかご紹介しましょう。

• ドラッグ＆ドロップ操作で自由に編集できる
  Wixは、要素をどこにでも配置できる唯一のサイトビルダーです。
• 作品を表示するための専用ウィジェット
  プロジェクトをユニークな形で紹介したい場合、動画マスクやカスタムスライドショーなどの機能が役立ちます。
• テンプレートは800種類以上
  ニッチや業界ごとにテンプレートが用意されており、柔軟にデザインを変えられます。
• UIは多言語対応
  インターフェースは日本語に対応しています。
• カスタマーサポート
  サポートに日本語でメールを送信できます。

Wixのポートフォリオサイト向けテンプレートはこちら >>

2. Squarespace：ビジュアル作品を魅せるのにおすすめ1

1 イラスト、写真、動画、アニメーションなど、視覚的な作品や業績をアピールするにはSquarespaceが最適です。Squarespaceのテンプレートは、大胆なタイトルと余白をうまく組み合わせて作品を引き立たせています。

編集度はWixより低く、ページごとの情報量は少なめですが、「百聞は一見にしかず」というように、Squarespaceなら訪問者に作品を直接見てもらって実力を売り込めます。

無料プランはありませんが、Squarespaceの14日間無料トライアル1で体験してみましょう。ポートフォリオサイトを作るのに適しているか判断できます。

Squarespaceは以下のような特長があります。

• 直感的に操作できるブロックエディタ
  Squarespaceは「ドラッグ&ドロップエディタ」と宣伝していますが、どちらかというとブロックエディタでしょう。編集できる部分がある程度決まっているので、サイトが分かりにくくなったり、デザインのバランスが崩れたりすることはありません。
• プロがデザインしたテンプレート
  Squarespaceのテンプレートは100種類以上あり、とてもエレガントです。レスポンシブ対応なので、モバイルでもきれいに表示されます。
• サードパーティアプリに対応
  さまざまなサードパーティアプリが用意されているので、必要な機能を追加できます。

3. SITE123：初心者に最適なサイトビルダー1

1 SITE123は、とても使いやすいホームページ作成ソフトで、無料プラン1もあります。オリジナリティあふれるサイトが作れるわけではありませんが、自分らしさを演出するのに十分な編集オプションが用意されています。

SITE123の特徴はこちらです。

• 説明が表示されるので、初心者でも簡単
  初めてサイトを作るとき、使い方が分かりやすく表示されます。
• レスポンシブ対応のテンプレート
  編集を加えると、モバイルビューが自動的に更新されます。
• アプリマーケット
  SITE123のプレミアムアプリで機能を拡張できます。
• ユーザーインターフェース
  日本語で表示できます。

4. Zyro：最短時間でサイトが完成1

1 Zyro（ザイロ）は、AI技術を活用して、効率よくホームページを作れるサイトビルダーです。AIがカスタムロゴを生成したり、AIヒートマップツールで訪問者がサイトをどのように利用しているのか理解したりできます。優れたサイトを今すぐ作りたい場合は、Zyroをお試しください。

無料プランはありませんが、Zyroは30日間無料トライアル1がありますから、どのようなホームページを作れるか試してみると良いでしょう。

Zyroの注目ポイントはこちらです。

• AIでコンテンツ制作
  AIがサイト編集やロゴ作成、コンテンツ制作などをサポートしてくれます。
• スマートヒートマップ
  サイト上のアクティビティを観察して、訪問者の利用体験を改善するために役立てましょう。
• 24時間年中無休のカスタマーサポート
  困ったことがあれば、いつでも問い合わせて、すぐに対応してもらえます。

ステップ3：ポートフォリオサイトの構造を考える

ドメインを取得し、適切なサイトビルダーを選んだら、「サイトを作り始めよう！」

と張り切ってしまいますが、もう少し準備が必要です。

まず、サイトを作る目的をはっきりさせる必要があります。そうしなければ、まとまりのないサイトになってしまいますし、途中で挫折してしまうかもしれません。

ポートフォリオサイトを作り始める前に、

• 同じ分野・ニッチのポートフォリオサイトを参考にしましょう。
  業界で尊敬している人は誰でしょうか？ 成功している人は？ 私はライターであることをアピールするためにポートフォリオサイトを作成したのですが、準備段階で好きな作家のサイトを見てみました。Webライターはデザイナーや写真家ほど派手な職業ではありませんから、他と差をつけるにはどうすればいいか、インスピレーションが必要だったのです。
• 「あなたらしさ」を明らかにしましょう。
  他のポートフォリオサイトは参考になりますが、あなたらしさを見失ってはいけません。他の人と違うことは何でしょうか？ あなたがユニークな理由は？ 例えば、ホラー小説家であれば、ゾクゾクするような怖いサイトがイメージに合うでしょうし、お笑い芸人なら、ユーモアあふれる楽しいサイトが良いでしょう。
• サイトの構成を書き出してみましょう。
  作りたいポートフォリオサイトがイメージできても、モックアップを作る必要があります。作成を始めると、思い描いていたイメージを忘れてしまうことが多いからです。また、何時間もかけて作ったサイトを作り直すより、モックアップを評価し、微調整したほうが効率的です。

私は紙にサイトの構造を書きましたが、PowerPointやPhotoshopなどで大まかなデザインをスケッチしてみましょう。

この時点でサイトの構造が確定されたわけではありません。作業を進めながらいつでも変更できます。大まかなデザインが固まったら、次のステップに進みましょう。

ステップ4：ニーズに合ったテンプレートを選ぶ

サイトビルダーには幅広いテンプレートが用意されています。Photography CV（フォトグラフィーCV）のような一般的なものから、Textile Designer Portfolio（テキスタイルデザイナーポートフォリオ）のように具体的なものまで、さまざまです。他の分野のテンプレートも検討しましょう。写真を置き換えるのは簡単なので、例えば不動産向けテンプレートで美容院のサイトを作ることも可能です。

モックアップで描いたデザインに似たテンプレートがないか、探してみましょう。デザインが似ていれば、サイト作成がはかどります。もちろん、モックアップとそっくりのテンプレートが見つからなくても、エディタで編集できますからご安心ください。

1 また、サイトビルダーも検討しましょう。ビルダーによって編集できる部分が異なります。Wixなら、テンプレートの要素をすべて削除して、白紙からページを作り上げることもできますが、SITE123では編集部分が限られています。

最後に、機能性について考えます。作品を販売したい場合、eコマースサービスと連携させるのが便利ですし、ポッドキャストや音楽関係のサイトならオーディオプレーヤーが必要です。編集しながらこのような機能を追加することもできますが、テンプレートに必要な機能が用意されていれば、効率的に作業を進められます。

今回は「Noah Matthews Writer Template」を選びました。シンプルで興味をそそるデザインです。

1 テンプレートが決まり、構造を書き出したら、いよいよポートフォリオサイトの編集が始まります！

ステップ5：ポートフォリオサイトを編集する

編集方法は人によって違いますから、ここでは私がどのように取り組んだか説明していきます。参考にしてみてください。

まず、プレースホルダーを入れて、サイトの大まかなデザインを作りました。写真を置きたい部分には、Wixに用意されているベクターアートを埋め込み、テキスト部分にはダミーテキストを入れていきます（英語ではlorem ipsumというダミーテキストが定番です）。プレースホルダーを使えば、細部に気を取られずに、全体像を整えることができます。

1 訪問者と瞬時に信頼関係を築くため、ホームページには自分の写真を載せました。人の顔を見ると信頼感が生まれるものです。また、背景も気に入った画像に置き換えました。

私は副業として演技の仕事をすることもあるのですが、別々のポートフォリオサイトを作るのは良くないので、ランディングページから2つのポートフォリオサイトにアクセスできるようにしました。また、2つの職業であることをはっきりさせるため、色が対照的な2つの画像を選びました。

Wixには、このような構造のサイトを作るのに十分な機能がありますが、必要な機能が見つからない場合は、Wixアプリマーケットから追加できます1。動画、音楽、ポッドキャストなど向けにメディアプレーヤーが用意されていますから、さまざまなコンテンツを表示できます。また、「右クリック保護」アプリを導入すれば、コンテンツを無断転載されにくくなります。

サンプル記事はダイナミックなスライドショーで、演技はビデオリールで紹介することにしました。作品に興味を持ってもらうためにメインページを工夫する必要がありますが、やり過ぎは禁物です。「作品をもっと見たい」と思わせるのがメインページの目的ですから、コンテンツを見せすぎないようにしましょう。

ステップ6：作品をアピールする

他のページに遷移するのは、訪問者にとって覚悟が必要なことです。メインページでは、「もっと見たい」と思わせるために作品サンプルを掲載します。

1 作品紹介ページを作るうえで、注意したいポイントはこちらです。

• 全作品を掲載するのはNG
  最高の作品を取捨選択してください。自信をもって見せられるものが1つ、2つしかないのであれば、その作品が目立つように表示しましょう。作品数が多すぎると、インパクトが薄れてしまいます。
• できるだけシンプルに。
  きれいで一貫性のある作品紹介にするには、スタイルを統一させることが大切です。プロジェクトごとに異なる背景色やフォント、デザイン要素を入れるのは避けてください。
• 外部リンクを使いましょう。
  外部サイトにあなたの作品が掲載されているのであれば、リンクを張りましょう。作品のスニペットと評論を掲載すれば、訪問者に興味を持ってもらうことができます。また、クライアントと協力するのが得意であることをアピールできます。
• 作品全体ではなく、一部だけ見せましょう。
  テレビドラマを思い浮かべてみてください。続きが気になるように、最後の場面が工夫されていますよね。訪問者にどの部分を見せれば、「詳しく知りたい」と思ってもらえるでしょうか？
• ビジュアルは大切ですが、やり過ぎは禁物。
  分野によっては画像や動画が多くても構いませんが、視覚的でない作品を紹介する場合は高画質のカバー画像だけで十分でしょう。ビジュアル要素が多すぎて気が散るようでは本末転倒です。訪問者が退屈しない程度にしてください。

私の演技はYouTubeやVimeoで無料で見られるので、動画への外部リンクを入れました。一方、私が執筆した記事は、カバー画像で大きく表示したほか、サンプル記事を2つ載せました。

1 作品をうまく表示すれば集客につながるはずですが、説得力のあるセールスコピーも必要です。

ステップ7：最高のセールスコピーを書く

キャッチコピーでポートフォリオサイトの良し悪しが決まることもあります。ライターでもテキストを詰め込み過ぎるのは禁物ですが、訪問者がファンなるように上手いコピーを考えなければなりません。

どうすればいいのでしょうか？ コピーライティングに関する本はたくさんありますから、参考にしてみてください。ここでは、いくつかヒントをご紹介します。

• ダイレクトに。サイトを閲覧している人を思い浮かべてみてください。その人に話しかけるとしたら、何と言いますか？「ペットの写真撮影サービスを提供しています」とは言いませんね。「愛犬とあなたの絆を、写真に」など、お客さんの立場に立って、あなたが与える価値を伝えましょう。
• あなたらしく。あなたがどんな人物なのか、伝えましょう。2024年ですから、あなたらしさは、サービスと同じくらい価値のあるものです。個性を語る大切さを忘れずに。
• 自信を持って。これはあなたのポートフォリオですから、自分に自信が持てなければ、お客さんに自信を持ってもらえません。これまでの努力と業績を強調しましょう。他人とどのように違うか、率直に伝えてください。

1 自己アピールだけでは説得力がありません。これまでのプロジェクトを振り返り、お客さんの声をサイトに掲載しましょう。

文章を書くのが苦手なら、Zyroなどが提供しているAIコンテンツ生成ツール1を活用するのはいかがでしょうか。もちろん、あなたらしいテキストになるよう、生成された文章は編集してください。

素晴らしいコピーであれば、訪問者は「相談したい！」と思うはずです。では、次のステップで問い合わせやすいように工夫していきましょう。

ステップ8：問い合わせやすくする

テンプレートには、問い合わせページが用意されていることがほとんどですが、肝心な部分なので手は抜けません。サイトのほかの部分と同様に、魅力的な問い合わせページにしましょう。

ポートフォリオサイトを作る目的は集客ですから、問い合わせページをクリックしてもらえたら、ゴールは目前です。見出しと写真で最後の一押しをしましょう。

どのページからでも質問できるようにするのがポイントです。Wixには「全ページで表示」というオプションがあるので、問い合わせフォームが全ページに表示されるようにしました。また、各ページの右上にソーシャルメディアボタンを入れました。

1 問い合わせボタンが多すぎると、必死感が出てしまい、「お客さんがいなくて焦っているのかな」と思われてしまう可能性があります。ほどほどにしましょう。

ステップ9：ドメインを接続する

サイトビルダーを利用するもう1つのメリットは、ドメインを接続しやすいことです。Wixの有料プランに加入し、カスタムドメインを取得1したら、後は簡単です。

Wixアカウントでドメインページを開き、「ドメインを接続」オプションを探し、ドメイン名を入力してください。他のサイトビルダーでも、有料プランに加入すると最初の1年間はドメインが無料となっていることが多いです。

あと一歩です。公開前に必ずサイトをプレビューしましょう。

ステップ10：ポートフォリオサイトを確認する

ポートフォリオサイトを公開する前に、何度か確認しましょう。可能であれば、友人にも意見を聞いてみてください。デザインはきれいですか？ 使い心地は？ 友人はサイトを見て、あなたを雇いたいと思いましたか？

1 モバイルでもサイトが正しく動作するかチェックしましょう。ウェブ検索の約半数がモバイル端末からですから、モバイルサイトを侮ってはいけません。

サイトビルダーを使ったところ、2時間程度で次のようなポートフォリオサイトが完成しました。

1

サイト作成を楽しみましょう！

30分でポートフォリオサイトが完成したわけではありませんが、比較的短時間で終わりましたし、その価値があったと思います。

この記事を読んでいるあなたは、作品にプライドを感じているはずです。ポートフォリオサイトは、世界中の人に素敵な作品を見てもらうのにピッタリです。完成したポートフォリオサイトはきれいですし、個性が伝わってくると思います。サイト作成は想像以上に簡単でした。

最後に、ポートフォリオサイトを定期的に更新するのをお忘れなく。2～3か月おきにサイトを確認して、最近取り組んだプロジェクトを追加したり、変更すべきことはないか吟味しましょう。

作品やスキルはどんどん変わっていくはずです。その変化をポートフォリオサイトに反映させましょう。

よくある質問

ポートフォリオサイトは必要ですか？

必須ではありませんが、あった方が有利です。SNSには膨大な数の作品がありますが、ポートフォリオサイトがあると集客につながる可能性が高まります。また、仕事に熱意があることをお客さんに伝えることもできるのです。

幸い、サイトビルダーを使えば、ポートフォリオサイトは簡単に作れます。「どこから始めればいいか分からない…」という方は、2024 年におすすめのサイトビルダーをご覧ください。

無料でポートフォリオサイトを作るには？

Wix1やSITE1231などのサイトビルダーを使えば、無料でサイトを公開できます。ただし、このような無料プランでは、カスタムドメインを接続できないので、アマチュアな印象となってしまいます。

コストが気になる方は、こちらのクーポンページでサイトビルダーの割引をご利用ください。

ポートフォリオサイトの作成におすすめのサイトビルダーは？

ニーズやスキルによりますが、Wixが一番おすすめです。自由自在に編集できるので、ユニークなサイトが完成します。

詳しくはWixの完全レビューをご覧ください。

ポートフォリオサイトに何を載せればよいのでしょうか？

ポートフォリオサイトには、お客さんに見てもらいたいサンプル作品、訪問者と関係を築くための自己紹介を掲載しましょう。また、お問い合わせページ、興味を持ってもらうためのランディングページが必要です。お客さんの声、受賞歴も掲載すると説得力が高まります。