Adobe Portfolioはwebの知識不要！簡単にポートフォリオが作れます

クリエイターのみなさん、ポートフォリオのwebサイトは作っていますか？

かつてはアナログで作ったものを持参していたのが、今やポートフォリオはwebから簡単に閲覧ができる時代。多くの人に自分の作品を知ってもらえるポートフォリオのwebサイトは、ぜひ作っておきたいもの。

が、、、正直面倒。。よっぽど差し迫った理由がなければポートフォリオってなかなか作らない方は多いのでは。私のように…

そして先日、まさにその差し迫った状況になりました。(;д;)

CSSやHTMLの知識がなくても簡単に短時間にできるポートフォリオの提供サイトを探し回り、見つけたのがAdobe Portfolio。Adobe Creative Cloudを利用していた私には灯台下暗し。

今回は、webの知識がなくても短時間できれいなポートフォリオを作ることのできるAdobe Portfolioの基本操作をご説明いたします。

Adobe Portfolioのできること

Adobe Portfolioはwebサイトを作る上で、いろいろと便利な機能があります。

• イラスト、写真、グラフィックデザインなど、クリエイター向けポートフォリオwebサイトの作成
• CSS、HTMLなどの知識がなくても作れる
• テーマの変更が簡単
• 1ライセンスで5つのサイトが作成可能
• レスポンシブデザイン対応
• 各ページにパスワードの設定が可能
• Adobeの他サービスとの連携（Lightroom、Behance）
• 独自ドメインの取得可能

※今回は基本操作のみのご紹介です。LightroomやBehanceなどの説明は割愛させていただきます。 

 事前準備

ポートフォリオを作る前に事前準備をしておくと作業がスムーズに進みます。

• STEP.1
  作品の選別
  これに一番時間がかかりますががんばりましょう。
• STEP.2
  画像ファイルの用意
  画像ファイルの解像度は72dpi、ファイル形式はjpeg・pig・gifのいずれかにします。

    ファイルサイズが大きすぎるとサイトが重くなります 
• STEP.3
  カテゴリーに分ける
  作品をカテゴリーに分けておくと見やすく、管理がしやすいです。

Adobe Portfolioの作成方法

サイトの構築を理解する

まず、Adobe Portfolioにはプロジェクト、ギャラリー、ページなどの用語が出てきます。これを理解していないと「はて？」となるので以下を参考にしてみてください。

名称ですが、以前のバージョンと少し変わっていて混乱…。今後も変わるかもしれませんが、このサイトでは以下の表に基づいて説明をしていきます。

※先の章「事前準備」で述べたカテゴリーは［ギャラリー］に相当します。

下記見本に当てはめると、①プロジェクト(名)、②ギャラリー、③ページ、④コンテンツとなります。

レイアウトを選ぶ

Adobe IDにログインし、https://portfolio.adobe.com/にアクセス、またはAdobe Creative CloudからAdobe Portfolioを選択します。

「無料ではじめに」または「Creative Cloudで無料」をクリック。（ちょっと翻訳がぎこちない…）

［作品ギャラリー］と［スプラッシュページ］の二つありますが、［作品ギャラリー］を選択し、用意されている8種類のレイアウト（2018.12現在）から一つを選び［このテーマを使用］をクリック。

タイトルを編集

編集画面になったら、まずこのプロジェクトのタイトルを編集します。最初は登録時の名前になっているかと思います。（下記画像赤枠部分）

タイトル部分にカーソルを置くと、左上に鉛筆マークが出てくるのでクリックして、編集画面を表示させます。

この編集画面ではテキストやフォントの種類・サイズ、または画像を挿入したりすることができます。

ギャラリーを追加

デフォルトでは「Work」と「Contact」のギャラリーがあります。編集する場合は、画面左側のメニューアイコン（「覚えておこう②」参照）から＋マークの［ページを追加］をクリックして［ギャラリー］を選択します。（メニューアイコン［ページと統合］の編集画面下の＋マークからでも追加ができます）

ギャラリー名を入力して［ギャラリーを作成］をクリックすると追加されます。

ギャラリー名を変更する場合は、メニューアイコン［ページと統合］→カテゴリー名の横の歯車マーク→［ギャラリータイトルを編集］で変更します。

※後からでも追加・変更できます。

ページの作成・編集・追加

メニューアイコン［ページを追加］または、編集画面の［＋］→［ページ］をクリックして、ページレイアウトの選択とページ名と追加先のギャラリーを選択し、［ページを作成］をクリック。

次にこのページに挿入するコンテンツを選択。

［ファイル］→用意しておいた作品の画像データを選択→［開く］で、アップロード完了。

編集したいコンテンツの左上にカーソルを持ってくると、鉛筆マークが出てくるのでクリックすると、編集メニューが表示されます。

ギャラリー・ページの並べ替え

ギャラリーやページの順番を変えたい場合は、メニューアイコン［ページと統合］をクリックし、［コンテンツの管理］画面を開きます。

順番を変えたいコンテンツまたはギャラリーの三本線の部分をドラッグすると移動できます。

webサイトの設定

一通り作業が完了したら、メニューアイコンの［設定］（歯車マーク）をクリックします。

ここではwebサイトの設定をしますが、必要なものだけで良いです。

設定しておいた方が良いのは［サイトオプション］の「画像を保護するために右クリックを無効にする」。ここにチェックを入れておけば、作品を無断でダウンロードされることはありません。

このサイトを限定公開するのであれば［パスワード保護］でパスワードの設定をしておきましょう。

サイトを公開

編集画面下の［プレビュー］で全体をチェックして、手直しするなら［編集に戻る］、問題がなければ［サイトを公開］をクリック。

「ポートフォリオを公開しました」の画面になり、サイトのURLが表示されるのでクリックすると作成したポートフォリオのサイトに飛びます。

最後に

Adobe Portfolioはwebの知識がなくても、簡単にきれいなポートフォリオwebサイトを作ることができます。

ただ、ポートフォリオの見栄えは大切ですが、見やすさも大切です。

作品のクオリティが良くても、サイトの構築が悪いと見にくいポートフォリオになってしまうのはとても残念です。

サイト構築の他にもデータの重さや、トリミングなどを気にかけながら、きれいで見やすいポートフォリオ作りを目指してください。