Adobe Portfolioとは?使い方・作り方解説 #ポートフォリオサイト

カテゴリ : 仕事の取れるイラストサイトの作り方
Adobe Portfolio(アドビ ポートフォリオ)の使い方

Adobe Portfolio(アドビ ポートフォリオ)は、無料でポートフォリオサイトを作れるサービスです。Adobe CCを利用している人には特にメリットがあります。

この記事では、Adobe Portfolioってなに?というクリエイターさんのために、メリットやデメリットから、基本的な使い方まで説明します。

Adobe Portfolioに独自ドメインを割り当てる方法は、別の記事にまとめました。

Adobe Portfolioで独自ドメインを割り当てる方法 – いしつく!ブログ

実例サンプルを探している方はこちら。一から完成まで作ってみた手順を全解説した記事です。

Adobe Portfolioを駆使して、ビジネス用ポートフォリオサイトを作ってみた【詳細解説+サンプル】 – note

Adobe product box shot(s) reprinted with permission from Adobe.

目次

※以下、スクリーンショットは記事執筆時点のものです。今後変更される可能性が(大いに)あります。

Adobe Portfolioとは?

Adobe Portfolio(アドビ ポートフォリオ)

ポートフォリオサイトをウェブブラウザ上の操作だけで作れるサービスです。

特徴、機能

  • 作れるウェブサイトは5つまで
  • 独自ドメインの割り当て可(要Adobe CC契約)
  • HTMLなどの知識なしでもレイアウト作成できる
  • ページ数の制限なし
  • できたサイトは全てレスポンシブ(自動でスマホ対応済みってこと)
  • Google Analytics設定やパスワード付きページなどの機能も
  • 他のAdobeサービス(Behance、Lightroom)とも連携

このように必要な機能がひととおりそろっています。なおかつAdobeユーザーの中心であるクリエイターさんに特にメリットが多いので、Adobe Portflioでポートフォリオサイトを作るイラストレーターさんも増えています。

Adobe Portfolioの利用料金

Adobe Portfolioの料金は無料です。Creative Cloudを有料契約していれば全ての機能が使えます。もしCreative Cloudを有料契約していなくても、Adobe IDを作れば使えますが、ウェブサイトへのドメインの割り当てができないなど制限があります。

Adobe PortfolioはCreative Cloudで使えるアプリのひとつという位置付けで、Adobe Portfolioだけの利用料は設定されていません。

月額980円〜のフォトプラン(PhotoshopとLightroomだけ使えるプラン)や、アプリケーション1個だけの単体プランでも、Adobe Portfolioは使えます。ただ、昔ながらのCS(Creative Suite)シリーズだけを使っている人は対象外です。

ドメイン割当が無料になるAdobe CCプランの例

  • Adobe Creative Cloud フォトプラン
  • Adobe Creative Cloud
    (コンプリートプラン)
  • Adobe Photoshop
    (単体プラン)
  • Adobe Illustrator
    (単体プラン)
  • Creative Cloud 学生・教職員個人版
    ←学生さん向け

Adobe Portfolioのメリット

無料ウェブサイト制作ツールなら他にもありますが、Adobe PortfolioはAdobe CCを契約しているクリエイターさんには特に使いやすいサービスです。

CC契約者なら無料で使えてドメイン指定もOK

Adobe CCのどれかのプランを契約していれば、Adobe Portfolioに関しては追加料金が全くかかりません。イラストレーターさんやデザイナーさんなど、仕事で制作をやっている人のほとんどにメリットになるのではと思います。

ポートフォリオサイトが仕事の役に立ってくれるためには、独自ドメインは必須って思ってください。他のサービス、例えばJimdoでも、基本は無料で使えはしますが、独自ドメインの割り当ては有料です。Adobe Portfolioならば、Adobe CC契約者であればドメイン割当の料金も無料です。いいですね。

他のAdobe CC製品との連携

Behanceに登録しておいたプロジェクトをそのまま持ってこれたり、Lightroomの画像を挿入するのが簡単だったりと、他のアプリ/サービスとの連携があるのはAdobeならではといえます。うまく使いこなせば、制作例を公開していくことがかなりラクになりそうです。

Adobe Portfolioのデメリット

一方、物足りない点もあります。

テンプレートが見た目先行すぎる

用意されているテンプレートはクリエイター向けだけあって見た目先行でオシャレなデザインのものが多いです。一見メリットっぽいですが、はっきり言って仕事についてはこれが仇になります。

なぜなら、オシャレテンプレートこそが至高!という考えにクリエイターは陥ってしまいやすいからです。オシャレテンプレートを選んで渾身の作品を貼り付けて満足しているクリエイターさんが多いですが、それでできるのはただの観賞用ギャラリーサイトでしかないので、仕事の問い合わせが来るに足るかどうかという観点でいうとまず全くできてないでしょう。

同列に比較するのが適切かはさておき、WordPressならばビジネスサイトを想定したテンプレートもそれなりの数出ていますが、Adobe Portfolioは逆にオシャレなテンプレート「しかない」。Adobeらしいというか、クリエイターの表現欲を満たすことだけ考えているようです。

ただ、工夫したら結構作れます!noteにて実録を公開中。

マニュアルは英語

Adobe Portfolioで用意されているマニュアルは英語です。

使いかたで若干独特な部分があるので、マニュアルはぜひ見たいんですけれども、基本的には英語だけ。

マニュアルページを見ていたら日本語のタブがついてて、日本語あるんだ!と喜んでたらなんとGoogleの自動翻訳でした。なんかもう、それやったら頑張って英語で読むわ……って思うよね。翻訳のクオリティ的に。

Adobe Portfolio(アドビ ポートフォリオ)のマニュアル(日本語、翻訳)
ちょっと日本語おかしい

あとはサンプルも提供されてはいますが、海外のアーティストばかりです。仕事獲得のためにウェブサイトを持ちたい!って日本人クリエイターのためのサンプルがないので、いしつく!がnoteで書いた次第です(いしつく!のAdobe Portfolio徹底解説)。

ここからは、Adobe Portfolioの使い方を説明します。

Adobe Portfolioでポートフォリオサイトを作りはじめる

とりあえず、で使ってみることもできますよ。ウェブサイトの形を作るだけなら本当にすごくかんたんで、10分もかからずにできます。

まずはウェブブラウザでAdobe Portfolioへ行き、Adobe IDでログインします。Adobe CCデスクトップアプリからもアクセスできます。

CCデスクトップアクリからAdobe Portfolio(アドビ ポートフォリオ)にアクセスする
アプリ > デザインとレイアウト > Webアプリケーションとサービス にあります。

操作はぜひコンピュータで。スマホ/タブレットでもいちおう編集画面をさわれますが(それはそれですごいのですが)、イマイチ使いづらいし、制作物を加工してアップロードもしなきゃいけませんので。

「無料ではじめる」のリンクから画面に従って進んでいくと、まだログインしていない場合はログインを促されます。

Adobe Portfolio(アドビ ポートフォリオ)のログイン画面

ログインが済んだら、新規作成 > 作るものを選択(「作品ギャラリー」を推奨) > テーマの選択、と進みます。これで一旦ウェブサイトが作成されます(まだ公開はされません)。

Adobe Portfolio(アドビ ポートフォリオ)でサイト制作を始める

この時点でBehanceに制作物を登録してある場合は、自動的に読み込まれます。そのまま使ってもいいし、使わなければ後で削除もできます。

Adobe Portfolio(アドビ ポートフォリオ)でできたウェブサイトのサンプル(仮)

このまま公開してしまうこともできます。本当にかんたんだ。

ただ、実際はもうちょっと作り込んでから公開しましょうか。この後は作り方の基本を説明します。

Adobe Portfolio、基本の作り方

新規サイトができたら、中身を作っていきます。たぶん最初に一番よく使うのは、画面左上にある丸いボタン「ページを追加」です。

Adobe Portfolio(アドビ ポートフォリオ)でページを追加する

「ページを追加」すると、ページの種類の選択が出てきます。ここでは「ページ」を選択します。

Adobe Portfolio(アドビ ポートフォリオ)でページの種類を選ぶ

するとページレイアウト選択と、右側に「保存先」というタブが出てきます。

Adobe Portfolio(アドビ ポートフォリオ)でナビゲーションでの表示先を選ぶ

「ページレイアウト」はほぼ「デフォルト」しか使わないです。ページ内でのカラム分けやスタイル付けは後でできます。

「保存先」とナビゲーションメニューについて

「保存先」は、初めはちょっと理解しづらいかもしれません。「ページを追加」で作ったページは、ナビゲーションメニュー(この例では右上)のどこかに必ずぶら下げなければなりません。ここでは「ナビゲーション」を選択しました。

すると、新しくできたページはナビゲーションメニューにそのタイトルが表示されるようになりました。

Adobe Portfolio(アドビ ポートフォリオ)で新規ページがナビゲーションに表示された例

イラスト制作例(プロジェクト)のページを作った時は「ギャラリー」を選ぶと、ナビゲーションメニューではなく、一覧ページに表示されるようになります。「ギャラリー」は「カテゴリ」のようなものです。

ナビゲーションメニュー(つまり、ページ構造)は、左側メニュー「ページ」から編集することもできます。

Adobe Portfolio(アドビ ポートフォリオ) 「ページ」設定

テキストや画像の追加のしかた

ページを作ったら、つぎはその中身を作っていきます。その時の操作のしかたをかんたんにご紹介します。

画面の真ん中らへんにカーソルを持っていくと、+のマークが出てきます。

Adobe Portfolio(アドビ ポートフォリオ)で画像や段落を追加する

これを押すと「何を追加するか」のパネルが出てきます。

Adobe Portfolio(アドビ ポートフォリオ)で画像や段落を追加する

テキストの追加、左右カラムの作りかた

とりあえず「テキスト」を選択して、何か適当に打ち込んでみましょうか。続いて、そのテキストの枠の左あたりにある+をクリックすると、左側にカラムができます。

Adobe Portfolio(アドビ ポートフォリオ)の左右カラム

左にテキスト、右に画像、というのもこれでできます。ちなみにカラムは3個以上は作れないようです。

テキストを入力したら、その文章を3回くらいクリックすると、テキストの調整ツールが出てきます。これで文字の大きさや寄せ方向などが選べます。「見出し」とかリンクもここで選択できますよ。

Adobe Portfolio(アドビ ポートフォリオ)でテキストの見た目を調整する

画像の追加

Adobe Portfolio(アドビ ポートフォリオ)でページに画像を追加する

画像の場合は「写真グリッド」か「画像」を使います。「写真グリッド」は複数の画像を登録していくと、それぞれのサイズが違っていてもいい感じに並べてくれる機能です。「画像」は、単体の画像の追加です。

「写真グリッド」は一見ステキなんだけど、個々の画像にリンクを設定したり、キャプションを常時表示させたりできません。「画像」のほうはキャプションとリンクに加えて、画像説明文(alt属性)の記入もできますので、こちらを主に使っていくほうが何かと得かと思います。

サイトの設定

左側の歯車のマークから、サイト全体のいろんな設定をすることができます。

Adobe Portfolio(アドビ ポートフォリオ)の設定画面

設定できるところは全てしておいたほうがいいです。

  • ドメイン名……サブドメインと独自ドメインの設定ができます。
  • ホームページ……ホームに設定するページを指定できます。
  • 分析……Google Analyticsのトラッキングコードを入力する。
  • 検索の最適化……ウェブサイトのタイトルとdescriptionを入力する。検索エンジンやSNSでシェアされたとき表示される内容なので必須です。
  • カスタムメタタグ……htmlのmeta要素を追加できます。Googleウェブマスターツールの設定やSNSで表示される情報を管理したいときに使います。
  • お気に入りアイコン……このウェブサイトをウェブブラウザのブックマークに入れるなどしたときに表示されるアイコン。ロゴなどが適当でしょう。
  • Web クリップアイコン……スマホのホーム画面に保存された場合のアイコン。お気に入りアイコンと同じ内容を大きめにした画像で良いでしょう。
  • ソーシャルシェアのサムネール……SNSでシェアされたときに自動で表示される画像。
  • サイトオプション……右クリック禁止(※1)、画像にカーソルを乗せたときの挙動、画像の拡大表示(LightBox)の設定ができます。
  • パスワード保護……サイト全体にパスワードをかけておけます。
  • Cookie バナー……Cookieはウェブサイトが発する文字情報で、訪問者の動向を調べたりするのに使います。Google Analyticsもそう。「このサイトはCookieを使いますが、よろしいですか?」といった確認ボックスを出すためにあるのがこの設定です。日本ではまだ必須ではないですが、そのうちなるかも。
  • Web サイトのスタイルを復元……ウェブサイトのスタイルをテーマのデフォルト状態に戻す
  • サイトを非公開にする……一旦公開してみたけど、やっぱりまだ公開したくない場合はこの設定を使います。URL自体は残ります。
  • アカウントと地域……Adobe IDの設定ページへのリンクと、地域(国)の選択

(※1)右クリック禁止は意味ないので、それよりも画像に透かしを入れるよう徹底しましょう。

サイトを公開する

ウェブサイトを公開するには、画面の左下に現れる緑色のボタン「サイトを公開」を押すだけです。

Adobe Portfolio(アドビ ポートフォリオ)でサイトを公開するには

何も設定せずに「公開」ボタンを押すと、サブドメインが勝手に決められて公開されます。サブドメインは5回までしか変えられないですが、後で独自ドメインをつけるなら気にしなくていいでしょう。

Adobe Portfolioを駆使して、ビジネス用ポートフォリオサイトを作ってみた【詳細解説+サンプル】 – note

Adobe Portfolioで独自ドメインを割り当てるには?

歯車マークの設定パネルに「ドメイン名」の項目があります。ここで独自ドメインの設定ができます。

独自ドメインは先に購入しておいて、サーバー会社のほうでも設定をする必要があります。それと、忘れずにメールも独自ドメインにしましょう!

詳しくは長くなるので別の記事にまとめました。

一から完成まで作ってみた解説 & 実際のサンプル

以上、基本的な作り方でした。海外サービスらしい独特さはあるにしろ、操作じたいはとてもかんたんで、「誰でもできる」って言っていいと思います。

でも問題は「何を/どう作ればいいか?」のほうなんですよね。

僭越ながら、ウェブのプロでもありイラストレーターでもある私から言わせてもらうと、クリエイターさんの自作サイトを山ほど見てきましたが、ほとんど全てが「終わって」ます。

大多数のクリエイターさんが作っているのはただの観賞用サイトです。オシャレテンプレートをワクワクしながら選んで、渾身の作品画像をアップロードして、表現欲を満たす。ぶっちゃけ、そんな作りかたしたって仕事の役に立つウェブサイトなんかになるわけありません。

実際、「自分のウェブサイトから、仕事の問い合わせたくさんきてます!」って言っているイラストレーターさんって数名しか会ったことがありません。でも数名であっても、ちゃんとできている人はいるんですよね。

じゃあ、大多数のクリエイターと、その人たちとの違いってなに?仕事の問い合わせが来るウェブサイトって?どういうふうに作ればいいわけ?というあたりを知りたいクリエイターさんに向けて書いたのがnoteマガジン「いしつく!のAdobe Portfolio徹底解説」です。

Adobe Portfolioという大変便利なツールを手に入れたんだし、あと、Adobe CCフルプランの人は正直安くはない料金を払っているんだから(笑)、せっかくだからきっちり利用して、実りにつなげたいと思いません?ただの観賞用サイトじゃ一銭にもならんもん。

実は私も最近Adobe Portfolioに興味が向いたばかりです。せっかくなので自分のサイトとして一から完成まで作ってみよう、その道中をこと細かに解説していけば、多くのクリエイターさんに理解しやすいんじゃないか?ということで書き始めたマガジンです。

操作とか設定とかの説明ももちろん入れていますが、合わせて、なぜそうするのか、どういう作りにすべきなのか、という考え方も説明しながら書いています。

パーツやページごとに解説していっており、まだ道半ばですが完成目指して随時記事追加中です。スクリーンショットもふんだんに使ったので、わかりやすく作れているのではないかなぁと思っております。よかったら読んでみてください。

Adobe Portfolioを駆使して、ビジネス用ポートフォリオサイトを作ってみた【詳細解説+サンプル】

「イラストサイトを作りたい」
「せっかくなら、
仕事の役に立てたい」

そんなイラストレーターさんに
読んでいただきたいノウハウ集、できました

目次 & 概要

もうちょっと詳しく知りたい?もくじ全公開中

いしつく!はお役に立ちましたか?

フォローして、今後も
最新情報をゲットしてください

  • feedly

よかったら、こちらの記事も読んでみて。