1時間で簡単にできる！デザイン ポートフォリオサイトの作成を完全図解【Adobe CCユーザ必見】
こんなデザイナー（駆け出し）さんへ向けて書きました。
- デザイン制作実績があるのに、ポートフォリオが無い
- ポートフォリオを作りたいが、どこから手をつけていいか分からない方
- ポートフォリオサイトのサービスを選ぶのに迷っている
結論から言うと、「Adobe Portfolio」がダントツでオススメです。
キレイに作りたい気持ちは分かります。でも、まずはミニマムでいいからサクッと作ってしまうことが大事なんです。
この記事では、その理由とともにポートフォリオをサクッと1時間で作る方法を図解で説明しています！
完璧に作ろうとせず、まずはサクッと作ったほうがいい理由
完璧・キレイなポートフォリオサイトを作るには、もちろん時間がかかります。デザインの案件話が出た時「ポートフォリオありますか？」と聞かれて、さっと出せないのは大変な機会損失です。
また、実際にデザイン受託を始めると自分の作品をまとめる時間がなくなったり、やるのがだんだん億劫になったりしてきてどんどん後延ばしになってしまうこともあります。
だからこそ「とりあえず」で簡単なポートフォリオサイトを作ることを強くおすすめします。
そして、そのぐらいAdobe Portfolioが「とりあえず」で作るのに適しているんです。
…ポートフォリオサイト・サービスの比較は、他のサイトさんでたくさん紹介されています。あとから、キレイなものを作るときはそちらをご覧ください（笑）。
ただ、そうしたサイトを見たとしても、サービス吟味して会員登録して使ってみて・・・と時間はかかります。
有料でしっかりしたものを作りたい人は特に慎重に検討するでしょう。
ワードプレスなどを使って自力でコーディングして作るのであれば、なお時間がかかります。
まずは実体があること。これは、駆け出しのデザイナーならスタートダッシュを切る上で重要だと思います。
スポンサーリンク
Adobe Portfolioがいい4つの理由
AdobeCCユーザーは無料で利用でき、独自ドメイン設定もOK！
これが、何よりの理由です。AdobeCCを利用していれば、無料で使えます。さらに無料で独自ドメインを使用できます。（独自ドメイン利用が有料になるポートフォリオサイトもあります。）
Adobeの会員情報でそのまま利用できるので、新しく会員登録したり、支払い設定する必要がなく「とりあえずつくる」障壁がグッと下がります。
AdobeCCユーザーじゃない場合は980円から利用できますが、他のポートフォリオサービスと比較してコスパは微妙かもしれません。そこはすみません。。。
パスワード設定ができる
これが、絶妙に便利です。パスワードはサイト全体に設定することもできるし、ページ単位で設定もできます。
制作実績を不特定多数にフルオープンしたくない、できないケースもあります。
とくに、デザイナーとしてデビューする前の作品は自主制作のものがメインになります。自主制作では、実際の企業などをケースにした架空の制作物もありますよね。
まずは取引先や転職活動で採用担当者が見られればいいわけですから、パスワードでアクセス管理するほうが安心です。
私はよく、取引先や面接時にサイトのURLとパスワードを渡すときに「このパスワードでサイトにアクセスください。パスワードはX月XX日まで有効です。」と伝えてアクセス管理をしていました。
履歴書をアップして転職活動で活用できる
ページ単位でパスワード設定ができるので、私は履歴書もアップしていました笑。めちゃくちゃ楽です。
ただし、住所や経歴など個人情報満載なので、ポートフォリオサイトから切り離した状態で管理していました。（具体的な活用方法は別途お伝えします。）それが簡単にできるのもミソです。
転職活動ではスタートアップ系の柔軟な企業さんが多かったので、履歴書もPDFリンク提示で問題ありませんでした。
他のポートフォリオサイトにも負けないスペック
これらの機能がAdobeCCユーザーであれば無料で使えるというのが大きいですね。
- コーディングの知識不要、テンプレから簡単につくれる
- レスポンシブデザイン（スマホ対応）に自動対応
- サイトは5つまで展開可能／ページ数の制限なし
- アクセス解析、SEO対策など細かい設定も可能
- 他のAdobeサービスとの連携もあり
最低限これだけでポートフォリオサイト完成！5ステップ
テンプレートからサイトをつくる
AdobeCCにログインした状態で、このリンクを開くか、PC画面上のAdobeCCのアイコンをクリックして、Creative Cloudの画面を開き、Webタブの「Portfolio」をクリック。
ブラウザ上でPortfolio作成画面が開くので、「新規サイト」をクリックする。
「フルポートフォリオ」から好きなテンプレートを選択します。どれもスタイリッシュで、デザイナーのサイトとしては申し分無いです＾＾
テンプレをクリックするとPC、タブレット、スマホモードのプレビューを確認できます。テンプレは後から変更できます。
本記事では、私が利用している「Sawdust」というテンプレートで進めていきます。
サイトのTOP画面を編集する
サイトのタイトルを変更する
ポートフォリオの編集画面が表示されます。初見でこういう画面を見ると、私は軽くパニックになるタイプです。どこから手つけていいのか分からず、それを考えるのも面倒で心が折れてしまう・・・・・ので、この記事に整理しました。
大丈夫です。順番にやっていけば、じき慣れます。
さて、まずはサイトのタイトル部分を変更しましょう。
表示されているのは、PortfolioサイトにアクセスしたときのTOPページです。
TOPページの左上部分は、サイトのタイトルとなる、テキストやロゴ画像を設定できます。AdobeCCで登録している自分のユーザー名がデフォルトで入っているので、編集しましょう。
マウスを持っていくと鉛筆マークが表示されるのでクリック。
ロゴ画像が無い人はテキストを入れます。今回は「Design Hachi」という仮の屋号を入れました。個人名を屋号にするのであれば、個人名を入れましょう。（個人名でも、本名の漢字そのままでいくか、ローマ字にするのか、すべてカタカナにするのかなど、表現の方法は色々ありますね^^）
ロゴデータがある人は「画像」タブを開き、ロゴ画像をアップします。ロゴ画像をアップすると上の画面で設定したテキストは表示されません。
画像をアップしたあと、少し下の方へスクロールすると「代替テキスト」を設定できます。
「代替テキスト」とは、何らかの事情により、サイト上でロゴ画像が表示されなかったときに、ロゴ画像の代わりに表示するテキストのことです。
デフォルトでは、AdobeCCで登録しているユーザー名が入っているので、適宜変更しておきましょう。
ロゴ画像の配置がいまいちキレイじゃない場合は調整しましょう。
「マージン」タブを開き、ロゴ画像の表示がいい感じになるように上下左右の余白を調整。
すべて終わったら左上の「＜」ボタンで元の画面へ戻ると反映されます。
お問い合わせフォームの設定
テンプレートには、お問い合わせフォームがデフォルトで作成されています。
設置するかどうかはお好みで判断してください。（私は不特定多数に見せる想定をしていなかったのでフォームは使っていません。）
詳細設定をするため、左メニューの「ページ」をクリック。
【削除する／すぐには必要ない場合】
「Contact」の右にある歯車のマークから削除を選びます。
「使うかどうかは分からないけど、今は必要ない」という場合は「ナビゲーションから隠す」を選ぶと便利です。
（TOPページからフォームへのリンクが無くなるので実質は誰もアクセスしなくなります。フォームページのURLを直打ちされると見えますが、わざわざそれをやる人もいないでしょう・・・）
とはいえ削除しても、フォームも後から作り直せるので神経質に考えなくてOKです。
【フォームを使う場合】
上記画面の歯車メニューから「ページを表示」を選びます。お問い合わせフォームのページが表示されます。
フォーム部分にマウスを持ってくると鉛筆マークが表示されるので「カスタマイズ」を選択。
ここで、フォームの入力項目や問い合わせ送信先のメールアドレス、フォーム送信後に表示するメッセージなどを変更できます。メールアドレスは、デフォルトではAdobeCCのユーザー登録で利用しているメールアドレスが設定されています。
作品紹介ページを作る
ところで、このテンプレートの構成は下記の様になっています。TOP画面から各作品の紹介ページへリンクしているような形ですね。ここからテンプレートのプレビューページを開いて見るとわかりやすいかと思います。
試しに作品ページを追加してみましょう。TOP画面の「ページを追加」をクリック。
「ページ」を選択。
「ページ名」欄には作品名を入れます。TOPページからのリンクに表示されます。あとで変更できるので、難しく考えずに仮のものを入れておいて大丈夫です。
「保存先」というのはどこのページからこの作品へのリンクを貼るのか？という意味ですが、デフォルトでは「Work」になっています。あとで意味が分かりますので、いったんそのままにして「ページを作成」で進めます。
※「これをホームページにする」のチェックは外したままです。
新しいページが作成されました。
先程入力した「ページ名」が左側のカラムにリンク先として追加されています。また、ページのタイトルにも入っていますね。これは後から変更できます。後述します。
ページの中央より下の、「ページの構築を開始」というところからページのコンテンツを追加できます。ここに、作品のスクリーンショット画像などを埋め込み、キャプションを入れていくわけです。
ここでは架空の「Hachi Design」のロゴ制作紹介ページを作っていきます。
「画像」をクリックし、作品の画像データを読み込みます。
※デザインデータは、jpgやpngなどの画像データ形式で出力したものを用意しておきましょう。データないけど、まずはこのステップに沿って練習したい方は、適当な画像を用意するか、こちらからサンプルデータをお使いください。
画像が挿入されました。画像のところにマウスを持っていくと、鉛筆マークが表示されるのでクリック。
「キャプションを追加」を選択。
※キャプションとは、制作物の補足・解説をする文章部分のことです。
画像の下にキャプション入力エリアが表示されます。
キャプションエリアに、制作物の解説を入れます。
私の場合、以下の項目を入れるようにしています。
- プロジェクト名
進学校学習塾のロゴデザイン、健康食品のランディングページデザイン、など。 - 担当した範囲
ディレクションのみ／ディレクションとデザイン制作両方担当したのか、等 - 仕様 ※印刷物の場合は出力の紙サイズ、WEBバナーだとバナーサイズなど
- 使用したアプリケーション
- 制作した年
普通に改行すると行間がタップリあいてしまうので、狭めたいときはShift+Enterを使いましょう。※Macの場合です。Windowsでも同じ操作でいけるかは不明です、すみません。
これで、作品ページが完成です！
作品が増えるたびに、この手順でページを追加していくだけでOKなのです。
左のメニュー「work」をクリックしてTOP画面へ戻り・・
「ページを追加」のところからどんどんページを追加していく、という流れです。
ページを公開する
左メニューの緑ボタン「サイトを公開」をクリック。
これで、公開完了です。URLを打てば、他の人も見られる状態になりました。
公開したあとも、非公開に戻せるのでご安心ください。
とりあえず最低限やる範囲はここまでで、サイトの完成です！！！
おつかれさまでした！！！
（おまけ1）サイトを非公開にする方法
左メニューから「設定」をクリック
左側から「サイトを非公開にする」を選択。
非公開にする方法を選びます。
それぞれの違いは、以下のとおり。
１．保留ページに上記のメッセージを表示する：
サイトにアクセスすると、設定したメッセージを表示する。
２．Webサイトをオフラインにする：
サイトそのものへのアクセスを不可にする。
ポートフォリオサイトのURLを打つと、自動的にAdobe Portfolioのトップページへリダイレクトする。
特に理由がなければ１．でいいと思います。
適宜、「公開停止時のメッセージ」欄は変更しましょう。「現在、鋭意リニューアル中です。今しばらくお待ち下さい」などポジティブな内容のほうがイメージが良いかと思います・・。
（おまけ2）フッターのクレジットを編集する
デフォルトだと、サイトのフッターにあるクレジット表記が「Powered by Adobe Portfolio」となっていて少しカッコ悪いので変えましょう。
フッター部分にマウスを持っていき、鉛筆マークをクリック。
画面の左側に入力エリアが出るので、任意でコピーライトなどの表記を入れましょう
スポンサーリンク
Adobe Portfolio、3つのおすすめ活用法
パスワード設定
不特定多数へ公開しない場合は、パスワードを設定しましょう。パスワードはサイト全体にもかけられますし、ページ個別にも設定できます。
ここではサイト全体に設定する方法を紹介します。（ページ単位での設定は「履歴書ページ」のところでご紹介しています。）
画面左メニューの設定をクリック、「パスワード保護」を選択して任意のパスワードを入れるだけ！
設定した瞬間、サイトにアクセスするとパスワード入力画面が表示されます。パスワードはポートフォリオ編集画面からいつでも変更できるので、アクセス管理もらくらくです。
履歴書をアップする
履歴書をアップしておけば、Wantedlyなどを使った転職活動で、サクッとやり取りするときにも便利です。
ただし、ポートフォリオを見る人全員に対して履歴書を見せる必要は無いので、ちょっとした工夫が必要です。
まずは履歴書ページを追加します。画面左上のプラスボタンをクリック。
「ページ」を選択
ページタイトルは任意のものを入力。後で変更できるので、ひとまずResume などと入れておいてOKです。他は触らずに「ページを作成」をクリック
新規ページが作成されたら、JPGまたはPNGで出力した履歴書をアップロードする。
※画像ではダミーの履歴書をボカしてアップしています
ポートフォリオサイトの左メニューから履歴書へのリンクを外します。
左側メニューから「ページ」をクリック。
履歴書のページの歯車アイコンをクリックし、「ナビゲーションで隠す」を選択。
これで、ポートフォリオサイトの左側メニューからリンクが消えました。
ただ、TOPの一覧画面にはまだ表示されています。こちらも表示されないようにします。
編集画面左メニューの「ページ」をクリック、履歴書ページの左にある三本線のアイコンをドラッグします。
ググッと下までドラッグして、「Work」の外に持っていきましょう。
そうすると、TOP画面上から履歴書へのリンクが完全になくなりました。履歴書のページはURLを直打ちしなければ見られません。
住所などの個人情報が入っているものなので、更に念を入れます。履歴書ページ単体に、パスワードをかけましょう。
再度、左メニューの「ページ」をクリック。
履歴書ページの歯車アイコンをクリックし、「ページパスワードを追加」を選択。
任意でパスワードを設定し、完了。
履歴書ページのURLを確認・変更する方法。
「ページ」設定画面から、URLの変更を選択しましょう。
ページのURLはページタイトルと連動しています。この場合は、http://〜〜〜〜/resume となります。
採用担当者へは、このURLと先ほど設定した履歴書ページのパスワードをお知らせして、履歴書を見てもらいましょう。
それとは別に、ポートフォリオサイトのURLを送ればOKです。
ドメイン設定
ドメインをカスタマイズする方法として、自分の独自ドメインを設定するか、「サイトのサブドメイン」を利用して「xxxx.myportfolio.com」のxxxx部分に好きな文字を入れるか、の2パターンあります。
ドメインを持ってなく、今後もとくに必要ない方は「サイトのサブドメイン」を好きなものに設定しましょう。
独自ドメインの設定は別記事に譲ります。
他にも、SEO設定など様々ありますが、ひとまずここまでやればOKです！
スピードを重視すべし！キレイなポートフォリオサイトは後で作ればいい。
完璧なポートフォリオサイトを作るために時間をかけるくらいなら、「とりあえず仮のもので」と割り切ってでも簡単なものをつくりましょう。
ふとしたときに案件受託のチャンスが巡ってきたとき、
「ポートフォリオありますか？」
「今までの作品集見れますか？」
と聞かれて、すぐに何か見せられるものがあることが重要です。
「ポートフォリオサイトは今作っていて見せられるものが無いんです・・・・」ではチャンスを逃します。
また、作品データをzipで圧縮して送るぐらいなら、どんなにラフでもいいので、サイトにまとまっている方が見やすく親切ですし、信頼感があります。
グラフィックデザイナーもポートフォリオサイトは作っておこう
WEBデザイナーだけでなく、グラフィックデザイナーもポートフォリオサイトは用意すべきだと思います。
グラフィックデザイナーは紙のポートフォリオを求められることが多いですが、サイトの方が早く・手軽に・費用抑えて用意できます。サイトは必ず作っておきましょう。
私見ですが紙のポートフォリオは、サイトよりも作るの大変ですし、何より費用がかかります。
これからデザイナーを目指す方や、駆け出しデザイナーの方も作っておこう
まだ制作物があまり無いという方も、ポートフォリオサイトのアカウントを登録し、制作物を随時登録していく準備をすることを強くおすすめします。
制作物がある程度たまってから整理するのは結構大変です。
デザイナーとしての仕事がはじまると、
お客さんのデザイン制作案件に追われる
→ ポートフォリオサイトは後回し
→ 作品がどんどん溜まる
→ 整理するのが億劫になる
という負のスパイラルが発生します。
完璧なものを作ってからにしたい・・という気持ちは分かります。また、完璧なものを求める姿勢はデザイナーとして素晴らしいことだと思います。しかし、それで時間がかかっていては、チャンスを逃します。
この完成度では、ちょっと恥ずかしいかもしれない。
でも、まずは作ってしまって、人に見せる。
これで得られるフィードバックもありますし、もっとキレイに作ろうというモチベーションにも繋がります。
このスピード感は仕事をする上でもきっと役に立ちます！まずは手を動かしてモノを作ってみましょう。