デザイナーの転職時やフリーランスでの案件受注などに必要となるポートフォリオ。Webサイトとして公開すれば、多くの人へのアプローチができるほか情報の更新も行いやすくなります。この記事では、デザイナー向けのポートフォリオサイト作成ツールを3つのカテゴリーにわけて、合計10サービスを紹介します。
Webサイト制作ツール
バイオグラフィー作成ツール
クリエイター向けSNSサービス
Webサイト制作ツール
Webサイト制作ツールとは、その名の通りWebサイトを制作できるツールです。主にコーディングを行わなくてもWebサイトを作成できる機能を提供していることが多く、近年はノーコードツールとも呼ばれています。このようなWebサイト制作ツールの利点は、ポートフォリオサイト自体のデザインを自ら行うことができることや、デザイナーのポートフォリオにおいて重要となるデザインプロセスのケーススタディをテキストと文章を交えて表現しやすくなる点にあ ります。
Webサイト制作ツールとしては、以下6つのツールをご紹介します。
Webflow
STUDIO
Wix
Squarespace
Framer
Adobe Portfolio
Webflow | カスタマイズ性の高いWebサイトを構築できる
https://webflow.com/
「Webflow」はカスタマイズ性の高いWebサイトを構築するための優れたノーコードツールです。200,000以上の企業や組織に導入されており、ビジネスの成長に伴ってサイトを拡大できる設計が特徴です。
自由度の高いカスタマイズが可能で、柔軟なレイアウトから複雑なアニメーションまで、さまざまなタイプのWebサイトが制作できます。また、WebflowのCMS機能を活用すれば、容易にコンテンツの追加、編集が可能です。無料プランも提供されていますが、作成できるページ数の制限や帯域幅の制限、CMS機能の有無などを考えると、有料プランの利用がおすすめです。
STUDIO | 人気の日本発ノーコードプラットフォーム
https://studio.design/ja
「STUDIO」は日本発のノーコードWeb制作プラットフォームです。ピクセル単位の微調整やダイナミックなアニメーションの設定も柔軟に行うこと ができ、ポートフォリオサイトのデザインにこだわりたい場合におすすめです。CMS・フォーム・分析ツールが一体となったオールインワンの機能を提供しており、サイトの公開も1クリックで行うことができます。
ポートフォリオサイト向けのテンプレートも豊富に用意されており、プロが作成した高品質で多様なデザインから選択できます。利用者は全世界で400,000人を超え、公開中のWebサイトは100,000件以上にのぼります。
Wix | 900種類以上のテンプレートからデザインを選べる
https://ja.wix.com/
「Wix」は2006年にイスラエルで創業されたクラウドベースのホームページ制作プラットフォームです。2019年に日本法人を設立し、現在は日本語でのサポートも充実しており、国内外を問わず広く利用されています。ユーザーは900種類以上のテンプレートからデザインを選び、ドラッグ&ドロップで素材を配置するだけでプロフェッショナルなWebサイトやポートフォリオサイトを簡単に作成可能です。
Wixはその直感的なデザインツールだけでなく、高度な機能と業界最高水準のホスティング環境を無料で提供している点も大きな魅力の1つです。また、豊富なマーケティングツールも搭載しており、SEO機能やアクセシビリティ対応機能も充実しています。これらの機能を活用することで、ユーザーは自身のビジネスやクリエイティブな活動を効果的にオンラインで展開できるようになります。
Squarespace | ドラッグ&ドロップでWebページを作成できる
https://www.squarespace.com/
「Squarespace」は、テンプレートをベースに要素をドラッグ&ドロップするだけで簡単にWebページを作成できるプラットフォームです 。サーバー・ドメイン・テンプレート・プラグインが一元化されたサービスで、Webサイトの構築から管理までシンプルに使える環境が整っています。CMS機能も搭載されているため、ポートフォリオサイトで掲載する情報も容易に追加更新が可能です。
また、Squarespaceに精通したエキスパートを公認する体制も整えており、日本における代表的な公認パートナーであるSquareStudioを通じて、専門的なサポートを受けることが可能です。
Framer | Figmaからデザインのインポートも可能
https://www.framer.com/
「Framer」は、デザイナー向けのデザインプラットフォームで、細かなアイコンからインタラクティブなアプリケーションまでデザインすることが可能です。もともとプロトタイピングツールとして開発されたツールで、モバイルアプリやWebサイトのためのインタラクティブなプロトタイプ作成に適しています。
FramerはFigmaからデザインを直接インポートできる機能もあり、その取り込み精度も高いため、Figmaでデザインされたポートフォリオサイトも効率的に構築できる点が魅力です。また、CMS機能やサイトのメンテナンスツールも備えており、公開するWebサイトの規模に応じたスケールアップも容易です。
Adobe Portfolio | Adobe Creative Cloudユーザーなら無料で利用可能PR
https://portfolio.adobe.com/
「Adobe Portfolio」は、Adobeが提供しているポートフォリオサイト構築ツールです。Adobe Portfolioを利用することで、ユーザーは自身の作品を効果的にオンラインで公開できます。HTMLやCSSの知識がなくても、直感的なUIと美しいテーマを利用することで魅力的なWebサイトを作成できる点が大きな魅力。独自ドメインの取得も可能なため、オリジナリティをアピールしたいクリエイターにとってもメリットが大きいツールと言えるでしょう。
また、Adobe PortfolioはAdobe Creative Cloudかフォトプランのサブスクリプションユーザーに無料で提供されるWebサイト作成ツールです。すでにいずれかのサブスクリプションサービスに加入している方はプラスの課金は不要ですぐに利用できます。
バイオグラフィー作成ツール
バイオグラフィー作成ツールとしては、以下2つのツールをご紹介します。
Notion
Bento.me
バイオグラフィー作成ツールとは、WebページやSNSページなどのリンク集とテキストによって自身のプロフィールを作成できるサービスです。さまざまなページを集約しつつ、自身の実績をより簡潔に他人に伝えられる「履歴書」のようなサービスとして活用できます。
Notion | ドキュメントとしての読みやすさを活かしてWebサイトにも活用
https://www.notion.so/ja-jp
「Notion」は、クロスプラットフォーム対応の情報整理ツールです。Notionは、ドキュメント作成やタスク管理、ToDoリストの作成など、日常の仕事や個人のプロジェクト管理に幅広く利用されており、とくに複雑なプロジェクトの管理やチームとのコラボレーションをスムーズに行うための機能が充実しています。また、NotionにはページをWeb上に公開する機能があり、この機能を活用して自身の情報をURLや画像・動画つきでまとめることで、ポートフィリオサイトを作成することができます。
Bento.me | 人気上昇中のプロフィール作成サービス
https://bento.me/en/home
「Bento.me」は、ドイツで生まれたシンプルで使いやすいUIを特徴とするプロフィール作成ツールです。このサービスでは、クリエイターがビデオ ・ポッドキャスト・ニュースレター・写真など、地震に関するさまざまなコンテンツを1つのリンクに統合し、個性的なページを作成できるように設計されています。
Bento.meは、ほかのリンク集約ツールとは異なり、リッチで美しいプロフィールページを提供し、自分自身や作品を世界に示す場を提供します。幅広いクリエイティブな作品を効果的に展示するための理想的なプラットフォームと言えるでしょう。
クリエイター向けSNSサービス
クリエイター向けSNSサービスとしては、以下2つのツールをご紹介します。
Dribbble
Behance
この2つのサービスはクリエイター向けのSNSサイトです。クリエイター向けSNSでは、クリエイター間でつながれるだけでなく、自身の成果物を公開できる機能が搭載されています。
SNSに自身のデザインを公開することで、世界中の人にデザインを見てもらえるようになります。プラットフォームの中で他のデザイナーのポートフォリオを確認できたり、フォローできる機能があるため、クリエイター同士の交流の場としても機能します。また、SNS経由でも仕事の獲得につながることもあるため、自身の作品を公開しておくだけでもメリットはあると言えるでしょう。
Dribbble | UIデザイナーに人気のデザインSNS
https://dribbble.com/
「Dribbble」はデザイナー向けのSNSプラットフォームで、世界中のクリエイターが作品を共有し、インスピレーションを得ることができる場所となっています。もともと招待制のSNSでしたが、2022年の2月に招待制が廃止されたことで、現在は誰でも無料で利用できるようになりました。
ユーザーは、UI/UXデザイン、ブランディング、イラストレーションなど、幅広いカテゴリーの作品を投稿し、他のクリエイターとの交流やフィードバックを得られます。デザインポートフォリオの公開や求人探し、採用活動などに広く利用されています。
Behance | グラフィックデザインやアートの分野でも使われるデザインSNS
https://www.behance.net/
「Behance」はAdobeが運営するクリエイター向けのSNSプラットフォームで、ユーザーはデザインやアートのポートフォリオを公開したり、幅広い業界の求人情報を探すことができます。
このプラットフォームでは、さまざまな分野のクリエイティブ作品が共有されています。ユーザーは自らの作品を公開することで、世界中のクリエイターやデザイナーを探している企業にアプローチすることが可能。Behanceは作品の公開だけでなく、仕事の受注や採用活動にも利用されており、クリエイターの宣伝やネットワーキングに適した環境を提供し、キャリアをサポートする役割を担っています。
デザイナー向けポートフォリオサービスの選び方
デジタルデザインの分野では、ポートフォリオにアウトプットとしてのデザインのみならず、デザインの背景にある仮説やプロセス、デザインがもたらした結果についてケーススタディ形式で掲載することが一般的となりつつあります。また、多くの採用担当者も「デザインを通してどのように課題解決に取り組んだのか？」という視点を持ってポートフォリオを見ています。
このような点を踏まえてポートフォリオを作成するのであれば、視覚的なアウトプットのみではなく、テキストで解説を加えられるツールを使用する必要があります。そのためデザイナーのポートフォリオサイトには、今回紹介したような自由度の高いノーコードツールやSNSツール、ドキュメントツールなどが用いられます。その中でも、ポートフォリオとして掲載したい内容が十分に盛り込めるか、また、見る側の負担がかからない優れたUIかどうかなどを基準として選ぶと良いでしょう。
ポートフォリオ作成ツールのチェックポイント
ポートフォリオ作成ツールを選ぶ際、単にデザインの美しさだけでなく、使い勝手や機能性も重要となります。自分のニーズに合ったツールを選ぶために、以下のようなポイントをチェックしましょう。
更新のしやすさ
独自ドメインの使用有無
ページ作成数の制限有無
パスワードロック機能有無
SEO項目の設定可否
更新のしやすさ
ポートフォリオは定期的に更新することが重要です。新しい実績を追加したり、デザインを変更したりする際に、簡単に編集できるツールを選びましょう。直感的なインターフェースや、ドラッグ＆ドロップ機能などがあると便利です。また、スマートフォンやタブレットからも編集できる機能があれば、外出先でも手軽に更新できます。
独自ドメインの使用有無
独自ドメインを使用できるかどうかは、ポートフォリオの独自性やプロフェッショナル性を高める上で重要なポイントです。サイト制作ツールなどによっては、提供される無料ドメインでも公開できるケースが多くあります。しかし、独自ドメインを使うほうが、ブランディングや信頼性の点でも有利です。無料プランではなく、有料プランでないと独自ドメインが使えないツールもあるので注意しましょう。
ページ作成数の制限有無
ポートフォリオに掲載する事例や作品数が多い場合、ページ作成数の制限は気になるポイントです。無制限に作成できるツールもあれば、プランによって制限があるものもあります。将来的にページ数が増えることを考慮して、十 分なページ数を作成できるツールを選ぶことをオススメします。
パスワードロック機能有無
作成したポートフォリオの中には、一般公開できる内容と求められた場合にのみ公開したい内容が含まれるケースもあるでしょう。そのような時に便利なのがパスワードロック機能です。特定のページやセクションにパスワードを設定することで、限定的に公開することができます。この機能があるツールを選ぶと、クライアントとのコミュニケーションもスムーズになるでしょう。
SEO項目の設定可否
ポートフォリオを作成する目的の1つは、自身の作品や実績を多くの人に見てもらうことです。そのためには、検索エンジン最適化（SEO）も重要です。ツール内でタイトルタグ、メタディスクリプション、alt属性などのSEO項目が設定できるかどうかをチェックしましょう。これらの設定ができるツールを選ぶことで、検索結果での表示順位を上げられる可能性が高まります。
デザイナーのポートフォリオに必要な項目は？
ポートフォリオを作成する際、自分自身や実績を効果的にアピールするため、いくつかの重要な項目を含めることが不可欠です。以下に、ポートフォリオに必ず盛り込むべき項目をご紹介します。
自己紹介
ケーススタディ
スキルセット
連絡先
自己紹介
自己紹介はポートフォリオを見る人に自分がどのような人物なのかを伝える重要なセクションです。ここでは自分の経歴や専門分野、デザインへのこだわり、取り組みたい仕事や将来の展望などを簡潔に述べましょう。また、自分の個性や強みを表現することで、他のデザイナーとの差別化が図れます。自己紹介文は、読む人に親しみを感じてもらえるような、わかりやすく丁寧な文章を心がけましょう。
ケーススタディ
ケーススタディはポートフォリオの中でも特に重要なセクションです。ここでは、自身が関わったプロジェクトを紹介しながら、その中でどのように考えてどのように行動したのかを伝えることが大切になります。
特にデジタルデザインにおけるポートフォリオでは、自身が立てた仮説や課題解決のプロセス、そしてその結果など「デザインを通して事業や社会にどのような変化を起こしたのか」を説明するようにしましょう。ここでは大きな成果を挙げたかどうかが重要なのではなく、課題解決への取り組み方が注目されるため、小さな改善の事例や失敗から学んだ事例などでも良いです。
デザインプロセスを紹介するフォーマットとしては「デザイン思考の5つのステップ」や「ダブルダイヤモンド」のそれぞれのステップごとに紹介することも多いです。これらの手法については、以下の記事で詳しく紹介しています。
スキルセット
スキルセットのセクションでは、自分が持っているデザインやツールに関する専門知識を列挙します。グラフィックデザイン・UIデザイン・UXリサーチ・イラストレーション・アニメーションなど、自分の得意分野を中心に記載しましょう。また、Adobeのツールや、Sketch、Figmaなどのデザインツールの使用経験や熟練度やプログラミングスキルについても記述します。
連絡先
ポートフォリオを見た人が自分に連絡を取れるよう、連絡先情報を明記することも大切です。メールアドレスや電話番号、SNSのアカウント名などを記載しましょう。連絡フォームを設置するのも良いでしょう。連絡先情報は見やすい場所に配置し、アクセスしやすいようにすることが重要です。
まとめ
本記事では、デザイナーにとってのポートフォリオの重要性と、ポートフォリオサイト作成に役立つツールについて解説しました。Webサイト制作ツール、バイオグラフィー作成ツール、デザイナー向けSNSなど、さまざまなカテゴリーのツールを紹介し、それぞれの特徴や利点を比較しました。また、ポートフォリオ作成ツールを選ぶ際のチェックポイントや、ポートフォリオに必要な項目などについても解説しています。
ここで紹介したツールやポイントを参考に、自分の強みや個性を最大限に活かしたポートフォリオを作成し、キャリアアップやクライアント獲得に役立ててください。
