ポートフォリオを手軽に作ろう！知らなきゃ損する「Adobe Portfolio」の基本の操作

更新日: 2019年03月06日

Adobe

デザイナーやカメラマン、イラストレーターなどという肩書きで仕事されている方にとって欠かせないものの1つに「ポートフォリオ」があります。

ポートフォリオを作成して公開しておけば、自分がどのようなデザインをするのか、どのような写真を撮影するのか、どのようなイラストを書くのか、という情報を発信することができるので、それを目にした企業等から仕事の依頼が来やすくなります。もちろん、自分自身をブランディングすることもできます。

しかし、実際にポートフォリオをゼロベースから作成しようとすると、それを掲載するホームページをWeb上に設けないといけないですし、なかなか手が出せないという方もいるのではないでしょうか。

そこで今回は、Adobe社が配布しているポートフォリオホームページ作成アプリ「Adobe Portfolio」の使用方法をご紹介します。

このアプリを使用すればレスポンシブで整ったポートフォリオホームページを、コーディングなどの専門的な知識・スキルを必要とせずに作成することができます。作成が面倒でポートフォリオホームページを持っていない、という方は、本記事を参考に作成してみてはいかがでしょうか。
　　

Adobe Portfolioとは

Adobe Portfolio

「Adobe Portfolio」は、PhotoshopやIllustratorなどを配布しているAdobe社のクリエイティブクラウドに含まれているアプリの1つです。特にデザイナーやカメラマン、イラストレーターの方など、写真や画像をポートフォリオとしてまとめて発信したい際に便利なツールで、コーディングなどの知識がなくとも自分のポートフォリオホームページを作成することができます。

「Adobe Portfolio」でポートフォリオホームページを作成するメリットは、レスポンシブ対応しているため、PCからはもちろん、スマートフォンから閲覧しても見やすいページに仕上げられます。また「◯◯.myportfolio.com（◯◯部分は任意）」のドメインを取得できる点や、Typekitで好みのWebフォントを使用できる点も、オリジナリティのあるポートフォリオホームページ作成には欠かせません。

Webブラウザ上で作成可能なのでインターネット環境があればいつでもどこでも作業できることに加え、基本的にはクリック作業でコンテンツを追加していくので誰でも簡単に使用することができます。Adobe Creative Cloudに登録している方なら誰でも無料で使用可能で、そのほかの方は、以下2つのいずれかのプランに加入していることが条件となります。

・フォトグラフィプラン：980円 / 月（Photoshop・Lightroom・Adobe Portfolioのみ使用可能）
・コンプリートプラン：4,980円 / 月（全てのアプリが使用可能）

Adobe Portfolioの基本操作

1. ポートフォリオホームページ作成を開始する

Adobe Creative Cloudから、またはURLからAdobe Portfolioを開き「Get Started Free」をクリックします。
　　

レイアウトを選択する画面が表示され、2017年12月現在は8種類のレイアウトが用意されています。

ポートフォリオホームページを作成している途中でレイアウトを変更することも可能で、まずは好みのものを選択し「Try this layout」をクリックしてください。

ボタンのすぐ下に表示されている「View a live example」をクリックすると、選択したレイアウトを使用して作成されたデモのポートフォリオホームページをチェックすることができます。
　　

レイアウトを選択したら、作成またはチュートリアル画面が表示されます。チュートリアルを閲覧せずにすぐに作成する場合は「Edit your Portfolio」を、1度チュートリアルを確認したい場合は「Take a tour」をクリックしてください。
　　

2. 各コンテンツの編集

コンテンツの編集画面が表示されます。選択したレイアウトに合わせて要素が配置されていますので、編集したい部分にカーソルを合わせます。すると点線のボックスとえんぴつのアイコンが表示されますので、クリックしてください。

パネルが表示され、コンテンツを編集することができます。
　　

例えば、ポートフォリオホームページのタイトル部分を編集する場合です。えんぴつアイコンをクリックするとメニューが表示されますので「Customize」をクリックします。
　　

すると上画像のようなメニューが表示されますので「Text」でタイトルの変更やフォント、カラー、サイズなどを編集することが可能です。さらに「Image」では画像を、「Margins」では余白の設定を行うことができます。

テンプレートのレイアウトを使用するとは家、このように細かい設定にこだわればオリジナリティあふれるポートフォリオホームページに仕上がります。設定など終了したら「Done」をクリックしてください。

そのほかの要素についても、基本的には同様の方法で設定を行うことができます。
　　

選択したレイアウトによって各要素に含まれているメニューは多少異なりますが、例えばここで選択したレイアウトではタイトル下のコンテンツの編集画面を開くと、各種SNSアカウントを追加することも可能です。

SNSアカウントを追加する場合は「Social Profiles」をオンにして表示させたいSNSを選択し、ボックス内にURLを入力すれば表示されるようになります。
　　

画面左端に表示されているメニューアイコンでは、上から順に以下の作業が可能です。

・ギャラリーやプロジェクト、リンクの追加（下記3.ギャラリーやプロジェクトの追加を参照）
・マージンの調節
・各種設定（下記5. ポートフォリオホームページの各種設定を参照）
・レイアウトの変更
・アプリのアップデート
・アカウント情報

3. ギャラリーやプロジェクトの追加

まず、画面左側に表示されているメニューアイコンのうち、1番上のプラスアイコンをクリックします。するとポップアップメニューが表示されますので、1番上の「Page」をクリックしてください。

「New Page」という画面が表示されますので「My New Page」にページのタイトルを入力し「Destination」でページのカテゴリを設定します。新しくページカテゴリを作成したい場合は「Destination」をクリックし「New Gallery」を選択して任意の名前を入力します。

「Adobe Portfolio」では「ギャラリー」「プロジェクト」という2つの用語が存在するので、それぞれの違いを把握しておくことがポイントです。

・ギャラリー：複数のプロジェクトをまとめたページを作成
・プロジェクト：単体のページを作成

「My New Page」で作成する新しいページとは「新しいプロジェクトの作成」を意味しています。

「Start building your page」という画面が表示され、画像や動画のファイルはもちろん、テキスト情報やURLリンクなどを追加してプロジェクト（ページ）を作成することができます。

「Lightroom Photos」では、Adobeが配布している写真編集アプリ「Lightroom」と連携してアプリ内に保存されている写真からアップロードするものを選択できます。また、「CC Files」では、Adobe Creative Cloud内に保存されている写真や動画などからアップロードすることも可能です。

初めてプロジェクト（ページ）を作成したら、1枚でも構いませんのでまずは「Files」から写真や画像をアップロードしてください。
　　

4. 写真や動画などの追加

3.で作成したプロジェクト（ページ）に内に、写真や動画を追加したりプロジェクト（ページ）のディスクリプションなどを設定したりなど行う方法です。

3.でプロジェクト（ページ）を作成した際にアップロードしておいた写真や画像にカーソルを合わせると左上端にえんぴつアイコンが表示されますので、クリックしてください。するとメニューが表示されますので「Edit Page Content」または「Edit Page Info」をクリックします。
　　

「Edit Page Content」では、同一プロジェクト（ページ）内に写真や動画、テキスト、URLリンクなどを追加することができます。画面右側に表示されているメニューから、追加したいものを選択してください。
　　

「Edit Page Info」では、プロジェクト（ページ）のタイトルやディスクリプション、作成日、キーワードタグなどを入力することができます。
　　

5. ポートフォリオホームページの各種設定

ポートフォリオホームページ全体に関する各種設定を行う場合は、画面左側に表示されているメニューアイコンから歯車のアイコンをクリックします。するとポップアップメニューが表示されますので、ここで各種設定を行ってください。

特に公開前に最低限設定しておくことをオススメするメニューは、「Landing Page」「Analytics」「Domain Name」「Search Optimization」「Favicon」の5つです。

・Landing Page
ポートフォリオホームページのランディングページを、どのギャラリーにするか選択することができます。あわせて404エラーの際に表示する画面の指定も可能です。

・Analytics
Googleアナリティクスなど、解析に関するタグを設定することができます。

・Domain Name
ポートフォリオホームページを作成する際に最初に設定した独自ドメインが正しく反映されているか、確認することができます。あわせて最初に設定したドメインから変更したい場合も、このメニューで設定可能です。

・Search Optimization
検索からポートフォリオホームページへのアクセスを見込むために、ポートフォリオホームページ全体の台取りやディスクリプションなどを整えることができます。また、メタタグの設定も可能ですので、少しでも多くの人に閲覧してもらえるように設定しておくことをオススメします。

・Favicon
ファビコンの設定を行うことができます。
必須ではありませんが、例えばブックマークされた際やたくさんのタブが開いている画面上で自分のページを主張するためにも、フォビコンの設定をオススメします。

まとめ

「Adobe Portfolio」は英語表記されたアプリではありますが、1度どこでどんな操作ができるのかを把握してしまえばその後は直感的に使用することができます。

記事冒頭でご紹介したようにデザイナーやカメラマン、イラストレーターなどの方はもちろん、例えば店舗で商品販売などを行っている方が商品紹介ホームページとして利用するなどの活用方法もオススメです。

写真や画像、動画をメインに情報を発信している方は、ゼロベースからホームページを作成するよりもスタイリッシュかつ手軽に作成することができますので、ぜひ試してみてはいかがでしょうか。
　　

この記事を読んだ方へおすすめ

フリー素材＆有料素材サイト10選！人物画像も豊富【商用利用可】

ホームページやパンフレットなどで、人物の写真を用いたいと思ったことはありませんか？サービス紹介のページを作成する際に、人物の写真を入れることでリアリティを増したいと考える企業も多いでしょう。今回は、日本人の人物写真を豊富に揃えている商用可能な素材サイトを8つ紹介します。男性や女性、高齢者など、日本人と一言にいっても求めている素材はそれぞれでしょう。ぜひ、自社のターゲットに合わせた素材を見つけて、活用していきましょう。