当サイトには、提携サイトへのリンクが含まれています。当サイトのリンクをクリックして提携サイトで製品を購入した場合、当社はアフィリエイト報酬を受け取ります。詳しくはこちら。アフィリエイトプログラムへの参加が当サイトのレビューに影響を与えることはありません。
  1. Website Planet
  2. >
  3. ブログ
  4. >
  5. 成功するポートフォリオサイトの作り方│2022年

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

アンドレス・ガネム アンドレス・ガネムサイト開発の専門家 2022年10月3日
2022年10月3日

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

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

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

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

wix logo alt

Wixのプランが最大33 %オフ!

期間限定です。お見逃しなく!

3901 のユーザーがこのクーポンを利用しました

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

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

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

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

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

ヒント:ブランドイメージに合ったカスタムロゴを作ると、訪問者の印象に残りやすくなります。WixのVIPプラン以上に加入すれば、無料でロゴメーカーを使えます。Wixロゴメーカーについて詳しくはこちらのレビューをご覧ください

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

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

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

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

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

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

Wix portfoilo homepage
ポートフォリオサイト向けに設計されたWixのテンプレートは、大胆なデザインで訪問者を魅了します。ホバーしてご覧ください!

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

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

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

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

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

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

squarespace-jason-wild-template
Squarespaceのデザインは見た目がとてもきれいなことで有名です。ホバーしてご覧ください!

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

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

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

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

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

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

timothy-simons-site123-template
SITE123なら、シンプルで美しいホームページをほんの数分で作成できます。ホバーしてご覧ください!

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

SITE123の特徴はこちらです。

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

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

joplin-by-zyro
AI(人工知能)の助けを借りて、きれいなホームページが作れます。ホバーしてご覧ください!

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

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

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

  • AIでコンテンツ制作
    AIがサイト編集やロゴ作成、コンテンツ制作などをサポートしてくれます。
  • スマートヒートマップ
    サイト上のアクティビティを観察して、訪問者の利用体験を改善するために役立てましょう。
  • 24時間年中無休のカスタマーサポート
    困ったことがあれば、いつでも問い合わせて、すぐに対応してもらえます。
注目ポイント ポートフォリオ用テンプレート 無料プラン 日本語に対応 日本語に対応
Wix 制限のないエディタ 76 $16.00
Squarespace きれいなテンプレート 144 $14.00
SITE123 完全にレスポンシブ対応 6 $12.80
Zyro AIがコンテンツを制作 10 $4.41

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

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

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

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

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

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

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

ヒント:スクロールで遷移できるサイトを設計しましょう。クリック数をできるだけ減らすのがポイントです。クリックするのは難しい行為ではありませんが、訪問者にとってはそれなりの覚悟が必要です。一方、スクロールは手間がかかりませんから、エンゲージメントを高めることができます。

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

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

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

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

Screenshot_57
Wixには、プロのWebデザイナーが設計したポートフォリオ用テンプレートが70種類以上も用意されています。

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

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

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

1-JA How to Build an Online Portfolio That Gets You Noticed in [2021] (3953)
「Noah Matthews」はエレガントなデザインなので、大満足です

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

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

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

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

Copy of Copia di How to Build an Online Portfolio __IMAGES__ (6)
サイトビルダーに用意されているコンテンツライブラリを活用し、サイトの大まかなデザインを完成させましょう。

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

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

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

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

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

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

1-JA How to Build an Online Portfolio That Gets You Noticed in [2021] (3953)
文章や音声などをアピールしたい場合、要素を工夫して作品を引き立たせましょう。

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

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

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

1-JA How to Build an Online Portfolio That Gets You Noticed in [2021] (3953)
謙虚になる必要はありません。受賞歴があるなら、紹介しましょう!

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

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

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

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

  • ダイレクトに。サイトを閲覧している人を思い浮かべてみてください。その人に話しかけるとしたら、何と言いますか?「ペットの写真撮影サービスを提供しています」とは言いませんね。「愛犬とあなたの絆を、写真に」など、お客さんの立場に立って、あなたが与える価値を伝えましょう。
  • あなたらしく。あなたがどんな人物なのか、伝えましょう。2022年ですから、あなたらしさは、サービスと同じくらい価値のあるものです。個性を語る大切さを忘れずに。
  • 自信を持って。これはあなたのポートフォリオですから、自分に自信が持てなければ、お客さんに自信を持ってもらえません。これまでの努力と業績を強調しましょう。他人とどのように違うか、率直に伝えてください。
1-JA How to Build an Online Portfolio That Gets You Noticed in [2021] (3953)
少し圧倒されてしまいますが、エネルギッシュで元気をもらえると思います。

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

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

ヒント:すべて自分でやる必要はありません。Fiverrには有能なコピーライターが低価格でサービスを提供していますから、セールスコピーを考えるのが苦手な方は、ご検討ください。

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

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

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

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

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

Copy of Copia di How to Build an Online Portfolio __IMAGES__ (7)
できるだけ簡単に問い合わせられるようにしましょう。

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

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

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

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

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

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

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

Copy of Copia di How to Build an Online Portfolio __IMAGES__ (8)
Wixではモバイルサイトを編集できるので、PCサイトとそっくりにすることも、大きく変えることもできます。

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

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

Wix-completed-portfolio
良いと思いませんか? WordPressを使うより、上手くできたと思います。

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

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

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

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

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

よくある質問

ポートフォリオサイトは必要ですか?必須ではありませんが、あった方が有利です。SNSには膨大な数の作品がありますが、ポートフォリオサイトがあると集客につながる可能性が高まります。また、仕事に熱意があることをお客さんに伝えることもできるのです。 幸い、サイトビルダーを使えば、ポートフォリオサイトは簡単に作れます。「どこから始めればいいか分からない…」という方は、2022 年におすすめのサイトビルダーをご覧ください。無料でポートフォリオサイトを作るには?WixSITE123などのサイトビルダーを使えば、無料でサイトを公開できます。ただし、このような無料プランでは、カスタムドメインを接続できないので、アマチュアな印象となってしまいます。 コストが気になる方は、こちらのクーポンページでサイトビルダーの割引をご利用ください。ポートフォリオサイトの作成におすすめのサイトビルダーは?ニーズやスキルによりますが、Wixが一番おすすめです。自由自在に編集できるので、ユニークなサイトが完成します。 詳しくはWixの完全レビューをご覧ください。ポートフォリオサイトに何を載せればよいのでしょうか?ポートフォリオサイトには、お客さんに見てもらいたいサンプル作品、訪問者と関係を築くための自己紹介を掲載しましょう。また、お問い合わせページ、興味を持ってもらうためのランディングページが必要です。お客さんの声、受賞歴も掲載すると説得力が高まります。

この記事を評価
4.5 2 ユーザーが投票しました
投票済みです! 取り消し
この入力フィールドは必須です。 Maximal length of comment is equal 80000 chars コメントは最低10文字です
コメントがありますか?
返信する
%s件の返信を見る
View %s reply
関連記事
関連記事をもっと表示
本物の人間からであることを確認するためにすべてのユーザーからのコメントを48時間以内にチェックいたします。この記事が役立って幸いです。他に人にも伝えていただければ幸いです。
Popup final window
家族や同僚にこの投稿を共有してください。

他にユーザーの役に立つことでしょう。弊社のチームがレビューを確認して正当だと確認されたら48時間以内に公開されます。

あなたのサイトのパフォーマンスを改善し、デジタルマーケティングの目標を達成するのに役立つ裏技やアドバイスなどを毎月お届けします!

気に入ってもらえて良かったです!

お友達と共有しましょう!

2533326
100
5000
44099548
初めての方に最適image

数分でユニークなサイトを作成しましょう

140種類以上のレスポンシブ対応テンプレートをご覧ください