絵本を楽しむブログ

webの知識不要!Adobe Portfolioで簡単にポートフォリオを作ろう

ミミです

webの知識が乏しい私でも、簡単で短時間にポートフォリオサイトを作ることのできたAdobe Portfolio。みなさんも作ってみてはいかがでしょう?

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

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

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

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

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

Adobe Portfolio
クリエイター向けのポートフォリオWebサイトを簡単に作成することのできるツール。Adobe Creative Cloudフォトグラフィプランまたはコンプリートプランに加入していれば無料で使用可能。

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

 

Adobe Portfolioのできること

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

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

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

 事前準備

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

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

      ファイルサイズが大きすぎるとサイトが重くなります 

  • STEP.3
    カテゴリーに分ける
    作品をカテゴリーに分けておくと見やすく、管理がしやすいです。

Adobe Portfolioの作成方法

サイトの構築を理解する

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

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

用語説明

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

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

名称説明-2

レイアウトを選ぶ

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

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

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

スプラッシュページというのは単一ページのwebサイトになり、イベントの告知やランディングページなどに活用できます。

レイアウト8種類


タイトルを編集

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

タイトルの編集

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

タイトル編集画面

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

覚えておこう①
レイアウトによって表示されるコンテンツは多少異なりますが、基本的な操作方法として、編集したい部分にカーソルを置くと左上に鉛筆マークが出るので、クリックして編集画面を表示させ、そこで編集を行っていきます。

ギャラリーを追加

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

ページの追加画面

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

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

ギャラリータイトル名変更画面

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

覚えておこう②

メニューアイコンには以下のような役割があるので、確認しておきましょう。

メニューアイコン

①デザインをカスタマイズ→ページカバー、背景画像などレイアウト全体のカスタマイズ

②ページと結合→ページまたはギャラリーの移動や削除、追加など

③ページを追加→ページまたはギャラリーの新規作成

④設定→ドメイン名、パスワードの保護などwebページの設定

⑤テーマを切り替え→他のテーマに変更


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

ページの作成

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

ページ追加画面

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

ページのファイル選択画面

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

コンテンツの編集

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

コンテンツの編集

コンテンツの追加

コンテンツを追加する場合は、追加したい場所のセンター部分にカーソルを持っていくと、横の罫線と+マークが出てくるので、+マークをクリックし、メニュー画面を表示させ、追加したいコンテンツを選択します。

ページ追加

この繰り返しで作品をどんどん追加していきましょう。

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

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

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

コンテンツ並べ替え

webサイトの設定

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

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

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

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

設定画面(サイトオプション)

サイトを公開

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

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

ポートフォリオ完成画像

最後に

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

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

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

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

%d人のブロガーが「いいね」をつけました。