ポートフォリオ作成ツールのおすすめ5選！作り方のコツも紹介！

2022年6月30日

デザイナーをはじめとしたクリエイティブ職に欠かせないポートフォリオ。ポートフォリオがなければ就職時の選考や商談に進めないことがほとんどです。とはいえ、どのようなポートフォリオを作ればよいのか分からず、参考になるサイトを探している方も多いことでしょう。本記事では、ポートフォリオサイトの作り方や、参考にしたいおしゃれなサイトを紹介します。

＜この記事に関連する記事＞

Webデザイナー案件を提案してもらう

ポートフォリオサイトの作り方

まずは、ポートフォリオサイトの作り方から解説。ポートフォリオサイト上に掲載する必要があるコンテンツを順番に説明します。

トップページ

トップページにおいて最も重要なファーストビューには、代表作となるような作品を掲載しましょう。インパクトのあるものを一面に表示するパターンもあれば、手がけたWebサイトをリスト形式で掲載するパターンもあります。

またファーストビューには、プロフィール・作品集・連絡先など下層ページへのリンクを入れておくのがおすすめです。分かりにくい位置にリンクがあるとアクセスがしづらく離脱の原因にもなってしまうので、ユーザビリティにも気をけて設計しましょう。

自己紹介ページ

About、Profileなど分かりやすいテキストリンクを設定し、自己紹介用のページを作成します。ページの中には自分の名前と簡単な紹介文や経歴を書いておきましょう。自分の顔写真、もしくはアイコンも必ず載せておいてください。

紹介文には保有している資格や、自分が強みとする分野を記載することにあわせて、人柄や趣味なども書いておくと親しみが湧きますね。何よりこの人と一緒に仕事がしたいと思ってもらうことが重要なので、自分らしさをうまく表現してみてください。

また、自分のスキルとそのレベルについても記載しておきましょう。Photoshop・HTML・JavaScriptなどのツールはもちろん、LPデザイン・UXデザイン・ECサイトなど経験ベースの項目も列挙しておくと、依頼できることが分かりやすくなります。

レベルの表し方は、星5つで表現したり、棒グラフを作ったりしてもいいですね。視覚的にわかりやすいほうがよいので、言葉でレベルを長々と書くよりもこのような方法で書くことをおすすめします。

作品集ページ

Works、Projectsなどのテキストリンクを設定し、作品の詳細を説明するページを作成します。作品をリスト形式で掲載し概要を掲載しましょう。例えば以下のようなポイントを記載すると、詳細が伝わりやすくなります。

・担当領域
・コンセプト
・ターゲットユーザー
・こだわったポイント
・得られた効果

上記のようなポイントをしっかり記載することに加えて、大きくてキレイでわかりやすいサムネイル画像を使用することをおすすめします。目的に対してどれだけ適切なデザインができるかを伝える重要な箇所なので、手を抜かずに記載しましょう。

連絡先ページ

Contactなどのテキストリンクを設定し、自分の連絡先や仕事の依頼方法を記載したページも作成しておきましょう。仕事の依頼を受ける場合の連絡手段に指定があるなら、それも書いておいてください。メールアドレスやSNSのアカウント等を載せておくと連絡がしやすくなります。

ポートフォリオサイト制作のコツは以下の記事で詳しく解説しているので、ぜひ参考にしてみてください。エージェントによるリアルな観点を盛り込むことができますよ。

関連記事：Webデザイナー必見！評価されるポートフォリオの作り方

Webデザイナー案件を提案してもらう

ポートフォリオサイトを作るときの注意点

ポートフォリオサイトは自分の資産になるものです。後で後悔しないよう、事前に以下のポイントを確認しておきましょう。

独自ドメインを取得する

ポートフォリオサイトを作る際は、独自ドメインを取得するようにしましょう。サイト作成サービスなどが提供しているドメインを使用すると、サービス終了時や退会時にポートフォリオサイトを失ってしまうことになります。

自分の活動名義をドメイン名にできるなどのメリットもあるので、できる限り独自ドメインを取得するのがおすすめです。独自ドメインを利用してポートフォリオサイトを作れるサービスも多数あります。

SEO対策ができるかを確認する

SEO対策とは、Googleなどの検索エンジンで検索をした際に上位表示させるテクニックのこと。自分の活動名義で検索された際に、自分のポートフォリオサイトが一番上にでてくるようにするためには、SEO対策が必要になります。

複雑な設定をする必要はありませんが、自分の利用するサービスでSEO対策ができるかどうかは事前に確認しておきましょう。

常時SSL化に対応しているかを確認する

常時SSL化とは、Webサイト内のすべてのコンテンツを「https（暗号通信）」で通信することです。セキュリティ上必要であることに加え、アドレスバーに「保護されていない通信」と表示されるため、閲覧者に不安を与えかねません。

Webデザイナー案件を提案してもらう

ポートフォリオサイトが作れるツールのおすすめ5選

ツールを使ってポートフォリオサイトが作りたいという人に向けて、おすすめのツールを紹介します。

portfoliobox：クールなイメージのサイトが作れる

portfolioboxは、クールな印象が特徴のツールです。クリエイティブ職の人がポートフォリオサイトとして作ることを前提とされているため、そのための機能や特徴が充実しているのがうれしいポイント。

しっかりと自分のオリジナリティが発揮できるようカスタマイズも自由自在で、ツールを使ったとは思えないユニークなサイトが作成できます。クールモダンなサイトでまわりと差をつけたい人は一度チェックしてみてください。

https://www.portfoliobox.net/jp/

imcreator：アメリカ発のおしゃれさ

アメリカ発ならではの洗練されたおしゃれさが魅力のimcreator。テンプレートが非常に多く用意されているのが特徴です。ポートフォリオに特化したツールではありませんが、アートデザインや写真などのカテゴリを選択することでポートフォリオサイトも作れます。

通常有料プランでしか使えない機能があるサービスも多いなかで、imcreatorはすべての機能が無料。有名企業も制作に使用した実績があるほど、よく使われているサービスです。

https://www.imcreator.com/

Jimdo：簡単ステップですぐにサイトができる

Jimdoは、とても簡単なステップを踏むだけですぐにサイトが作れてしまうサービスです。感覚的な操作だけでおしゃれなサイトが作成できるので、個人用Webサイトの制作によく使われています。

サーバーの容量などに制限はありますが、就職活動や転職活動で使用するには問題ない程度。知識がなくても誰でも簡単にポチポチとサイトが作れるので、サイト制作に自信がない人におすすめです。

https://www.jimdo.com/jp/

WordPress：本格的なサイトにしたいなら絶対これ

Webサイト制作ツールとして非常に有名なWordPress。個人法人関わらず幅広い人が世界中で使っているサービスです。カスタマイズやデザインをするのに多少知識は必要ですが、デザイナーとしてすでに活躍している人であれば難なく使いこなせるでしょう。

HTMLやCSSをいじれば、アレンジは無限大。本格的なポートフォリオサイトを作り、活用していきたいという人はWordPressがおすすめです。

https://ja.wordpress.org/themes/tags/portfolio/

strikingly：感覚的に使える操作性が魅力

ノーコードですぐにサイトが作れるstrikingly。Eコマース用に最適化されており、すぐにPayPalやStripeにつなげるサービスです。

もちろんポートフォリオサイトにすることも可能で、デザインテンプレートも豊富。無料で複数ページ、複数サイトの制作が可能です。

https://jp.strikingly.com/

Webデザイナー案件を提案してもらう

有名クリエイターのポートフォリオを参考にしてみよう

ポートフォリオサイトのデザインに迷ったら、有名なクリエイターのサイトを参考にするのも手です。もちろん丸パクりはNGですが、導線や雰囲気などを参考にしてみるといいでしょう。

以下では有名なおしゃれクリエイターたちのサイトをいくつか紹介するので、気になる人はチェックしてみてください。

・デザイナー：フクシマナオキ氏
https://fukushimanaoki.com/

・デザイナー：MIKE INGHAM氏
https://www.mikeinghamdesign.com/

・デザイナー：TAKAAKI ISHIKAWA氏
https://www.ds-drop.com/

・フォトグラファー：中村力也氏
http://rikiyanakamura.com/

・映像ディレクター：TAO TAJIMA氏
http://taotajima.jp/

もっといろいろなポートフォリオサイトを参考にしたいという方は以下の記事をご覧ください。

関連記事：おしゃれなポートフォリオサイトのおすすめ20選！参考にしてかっこよく作ろう