AdobePortfolioでポートフォリオサイトを爆速で作る方法

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

無料で使えるAdobePortfolio（アドビポートフォリオ）を使ってWebで閲覧可能なポートフォリオを爆速で作る方法を徹底解説します。

正直ポートフォリオサイトの制作はAdobePortfolioが最強です。
似たようなポートフォリオサイト制作サービスは多々ありますが、デザインと使いやすさが圧倒的！

Web制作初心者の方にもあっという間に作れる新設設計、ノーコードで自身だけのポートフォリオサイトを作り、作品を公開してみませんか？

この記事の目次

AdobePortfolioを使った作例

上記はAdobePortfolio（アドビポートフォリオ）を使ったWeb版ポートフォリオの作例です。
なお、私が10分ほどで作成したポートフォリオサイトはコチラから閲覧できます。

HTMLやCSS、JavaScriptなどWebの知識や経験は一切不要！
必要なモノは自身の作品とテキストのみ、表示させたい個所に画像をポンポン入れて文字を入力するだけで簡単にオリジナルポートフォリオサイトが作れます。

様々なポートフォリオ制作サービスがありますが、個人的にはAdobePortfolioのデザインや操作性が特に良いと感じました。

※AdobePortfolio（アドビポートフォリオ）の公式サイトはコチラ。

AdobePortfolioでサイトを作成＆公開

AdobePortfolio（アドビポートフォリオ）を使ったサイト制作と公開までの流れを解説します。
Web制作の知識は不要、ドラッグ＆ドロップで簡単にポートフォリオサイトが作れますよ。

STEP.1

AdobePortfolioにアクセス

AdobePortfolioにアクセスします。

[ 無料ではじめる ] をクリックしましょう。

STEP.2

テーマを決める

ポートフォリオサイトのテーマを決めます。
サイト全体のひな型、自身の作風に適したテーマを選択。

サンプルは [ フルポートフォリオ ] を選択しました。
[ ようこそページ ] はペライチのサイトが作れます。

テーマは [ Marta ] を選択しました。

テーマを確認して問題が無ければ右上の [ このテーマを使用 ] をクリックします。
選び直したい場合は、上部真中のテーマ名をクリックすると他のテーマが選択できます。

画面左上にある [ デスクトップ ] 、[ タブレット ] 、[ スマートフォン ] をクリックすると、各端末での見え方を事前に確認可。

STEP.3

AdobeIDを取得

AdobeIDを未取得の場合はアカウントを作成しましょう。
無料で作成できます。

すると編集画面にログインできます。

STEP.4

サイト名やロゴを変更

シンプルなポートフォリオサイトを構成してみたいと思います。

まず、ヘッダーを編集してみましょう。
真中上部のテキストにカーソルを合わせると [ ロゴ ] と記載された青色のタブが表示されます。

クリックすると左メニューから [ サイト名 / ロゴ ] の設定ができます。テキストを変更し、サイト名を入力しましょう。

フォントやフォントサイズ、色などの詳細設定も変更可能。
もしロゴ画像をお持ちの場合は [ 画像 ] をから変更できます。

STEP.5

マストヘッドを編集

マストヘッドを編集します。
トップページのメインビジュアル部分ですね。

ロゴと同様、テキスト左上に表示される青色のタグ [ マストヘッドタイトル ] をクリックするとフォントやフォントサイズ、スタイル、カラーなどが設定できます。

初期フォントはFtura PTが採用、素敵な書体ですよね。

左メニュー最上部の [ マストヘッドオプション ] をクリックすると下記設定ができます。

・マストヘッドの背景
・ソーシャルアイコン
・マストヘッドタイトル
・マストヘッドのテキスト
・ボタン 1
・ボタン 2
・下スクロール矢印

各トグルボタンをONにすると利用可能。

必要なパーツを表示し、背景画像やパーツの位置や色、リンク先の設定を行います。

コーディングの知識は一切不要、マウスで直感的に操作可能。

STEP.6

ページを編集する

少し下にスクロールし、ページを編集します。

[ ページを追加 ] をクリックするとポップアップで下記が表示。
・ページ
・Lightroom Album

今回は [ ページ ] を選択します。

新規ページの画面が開きます。
ページタイトルを入力し、[ ページを作成 ] をクリック。

すると新規ページが作成されます。

画像、テキスト、写真グリッド、Lightroom、ビデオ、オーディオ、埋め込み、ボタン、ソーシャルアイコン、フォームなどを追加してページを構築しましょう。

作品の並び順を変更

作品の表示順を変更するには左上の [ ナビゲーション ] → [ ページを管理 ] → [ ドラッグ＆ドロップ ] で行えます。

歯車アイコンをクリックするとURLを編集、ページを複製等が行えます。

STEP.7

トップのカバー画像を編集

ヘッダーロゴをクリックするとトップページに戻ります。

追加したページのカバー画像を編集しましょう。
左メニューから画像をアップロードできます。

他の作品を追加する際も同じ手順で行います。

STEP.8

フッターの設定

最後にフッターの設定を行いましょう。
初期設定は下記テキストが入っています。

Powered by <a href=”http://portfolio.adobe.com” target=”_blank”>Adobe Portfolio</a>

自身のポートフォリオサイトのトップにリンクさせるなら

<a href=”https://自身のID.myportfolio.com”>© 自身のサイト名 All rights reserved.</a>

などに変更しましょう。
※自身のURLは公開後に表示されます。

STEP.9

サイトを公開する

必要に応じて画面左上のナビゲーションからページを追加し、一通り完成しました。

スマホやPCでサイトチェックを行い、問題が無ければ画面左下の [ サイトを公開 ] をクリックします。

https://自身のID.myportfolio.com
上記が貴方のポートフォリオサイトのURLです。
ブックマークしておきましょう。

AdobePortfolioはノーコードでポートフォリオサイトが作れるので、Webの専門知識が無くても問題ありませんよ。

5サイトまで作成可能

https://portfolio.adobe.com/sitesにアクセスすると新規ポートフォリオサイトを追加できます。
最大5サイト作成可能ですよ。

必ずサイトの設定を行いましょう

左上の [ 設定 ] をクリックするとサイトの詳細設定が可能。

ドメイン名、ホームページ、分析、検索の最適化、カスタムメタタグ、お気に入りアイコン、Webクリップアイコン、ソーシャルシェアのサムネール、サイトオプション、パスワード保護、Coolieバナー、Webサイトのスタイル、サイトを非公開にする、アカウントと地域…など。

下記で最低限しておきたい設定を解説していきます。

ドメイン名

初期設定では「自身のID.myportfolio.com」というドメインが割り当てられています。

もし長期的な運用、本格的な運用を前提にされているなら最初からドメインの購入をオススメします。

0円で運用されたい方は購入せず、そのまま利用・または必要に応じてサブドメインを変更（5回まで）しましょう。

分析

Googleアナリティクスのトラッキングコードを入力する事で、ポートフォリオサイトの分析ができるようになります。
他社のポートフォリオサービスだとGoogleアナリティクスの利用には有料プランへの切り替えが必要な場合がありますが、AdobePortfolioは無料！

ぜひ追加をオススメします。
※別途GoogleAnalyticsのアカウントを開設しておきましょう。

検索の最適化

Webサイトのタイトル、サイトの説明文、メタキーワードの設定ができます。

忘れずに全て入力しておきましょう。
※サイトの内容と関係ないワードは入れない方が良いですよ。

※「検索エンジンにサイト更新を自動的に送信」はチェック入れておくことをオススメします。

お気に入りアイコン

「ファビコン」の設定が行えます。
ブラウザのタブ左側などに表示されるアイコンの事ですね。

絶対にある方が見栄えが良いです。
32 x 32ピクセル以上のアイコンを設置しましょう。

※なお、Illustratorを使ったファビコンの作り方はコチラで解説しています。

Webクリップアイコン

スマホのホーム画面等にショートカットを作成した際に表示されるアイコンです。
お気に入りアイコンと同じデザインを180 x 180ピクセル以上で設置すると良いでしょう。

ファビコンをサイズ変更するだけ、手間をかけずに追加できるのでオススメ。

ソーシャルシェアのサムネール

いわゆる「OGP」の設定が行えます。
TwitterやfacebookなどにポートフォリオサイトのURLを載せた際、サイトのサムネイル画像をタイムラインに表示できる機能です。

シェアされた際に見栄えが良いので作っておきましょう。
OGPについてコチラの記事でも詳しく解説していますが、1200px x 630pxで作成すればOKです。

サイトを非公開にする

サイトを非公開設定にできます。

もっと作りこんでから公開したいなど、一旦非公開にしたい際は [ サイトを非公開にする ] をクリックしましょう。

紙面のポートフォリオも作ろう

紙媒体のポートフォリオは作られていますか？
ポートフォリオサイトだけでなく、冊子のポートフォリオも作成しておくと就活を有利に進められます。

未作成の方、行き詰っている方、根底から変えたい方はテンプレートを元に、オリジナリティを付与するスタイルをぜひ一度試してみて下さい。

全て商用利用が可能な高品質テンプレートばかり。
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign（インデザイン）を使うのが最も効率的です。
コチラの記事でインデザ初心者の方向けにテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽！
2時間あればポートフォリオが作れます。
InDesignを未導入の方はAdobe公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。
イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ！

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ！
クセが無く、非常に扱いやすそうなテンプレートですね。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
コレなら作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事ができるでしょう。

ダウンロードする

#05 Minimalist Portfolio Layout

表紙には必ずメインビジュアルを入れないとダメか？そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよね。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材

上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています！

ポートフォリオ用の高品質なテンプレート42選【InDesign,Illustrator,Photoshop】

【InDesign】ポートフォリオ用のテンプレートを編集する方法forインデザ初心者

おわりに

以上、AdobePortfolio（アドビポートフォリオ）を使ったポートフォリオサイトを爆速で作る方法でした。

HTMLやCSSなど、通常Web制作を行うには様々な知識が必要ですが、AdobePortfolioには一切不要！
必要なモノは作品とテキストのみ。
直感的な操作で簡単にWeb版ポートフォリオが作れます。

紙面のポートフォリオだけでなく、ポートフォリオサイトを作成しておくと「より多くの方に自身の作品を知ってもらえる」可能性が格段に高まります。

サイト制作を敬遠されていた方は一度AdobePortfolioをお試しください。
簡単すぎてびっくりしますよ！

ではまた！

ポートフォリオを作ろう！

ポートフォリオ作りのヒントになりそうな記事を掲載しております。
デザイナーの就職・活動に必要なポートフォリオに迷った際に参考にしてください。

ポートフォリオ用の高品質なテンプレート42選【InDesign,Illustrator,Photoshop】

【InDesign】ポートフォリオ用のテンプレートを編集する方法forインデザ初心者