Adobe Portfolioでポートフォリオサイトを無料(要Adobe CC)でつくる方法

Adobe Portforioを使ってポートフォリオサイトをつくる方法をまとめました。

※Adobe Portforioでつくったサイト  by Panasonic S1+70-300mmF4.5-5.6

 

ポートフォリオサイトをつくるなら

独立後、あらゆる仕事で、ポートフォリオ(作品)は大事です。
そのポートフォリオを載せたサイトを持っていきたいもの。

イラスト、写真、デザイン系なら特に必要でしょう。

そういったポートフォリオをつくる方法として、まず挙げられるのは、WordPress 。
このブログでも使っているものです。
WordPressは、無料で使えるサービスであり、そのデータを置くサーバーと、ドメインが必要となります。
サーバー、ドメインの契約が必要なのです。
お金もかかり、サーバー、ドメインをあわせて年間2万円弱。
ただ、自由度は高く、ブログ記事も書けます。

今回取り上げるのは、Adobe Portforio。
サーバー、ドメインの契約が必須ではなく、ポートフォリオサイトをかんたんにつくれます。

Adobe Portforioとは

Adobe Portforioは、Adobe CCの契約があれば、無料で使えます。
https://portfolio.adobe.com/

AdobeCCは、Adobeマスター講座で申し込むと安いです。
(定価7万円→4万円)

サーバーもドメインも必要ありません。
ただ、ドメインを契約しないと、xxxxx.myportfolio.com(xxxxは変えられる)というURLになってしまいます。
Adobe Portforioで買う(Namecheapというサービスで契約)こともできるので、いずれにしろ準備しておきましょう。
私は、このブログでも使っているwpXでドメインを契約しました。

このAdobe Portforio、操作性もよくブラウザ上でポートフォリオサイトをつくることができるのですが、デメリットもあります。
・AdobeCCを契約し続けなければいけない
・お問合せフォームの自由度が低い(デザイン、項目、自動返信メールなど)
・ブログ記事を書く機能はない
・WordPress に比べると、デザインの自由度は低い

ただ、手軽に無料(AdobeCCを契約していれば)でサイトをつくれるのは大きなメリットです。

今回つくったのは、ポートフォリオ(作品)、プロフィール、メニュー、お申込みフォームが1枚にまとまったサイト。
独自のURLです。

もっと凝ったものもAdobe Portforioでつくることはできますが、シンプルにサクッとつくることを目指しました。

今回つくったのはこういうものです。
(今後変える可能性もあります)
ヘッダー(メイン)の画像があり、その下にポートフォリオ、プロフィール、メニュー、依頼フォームと並びます。

サイトはこちらです。
井ノ上陽一写真館

このつくり方をまとめてみます。

 

Adobe Portforioを使ったサイトのつくり方

Adobe Portforioのページにアクセスし、テーマを選びます。

通常は、このように、上部にメニュー(ナビゲーション)があり、ページには、[ページを追加]というボタンがあります。
ここにページを入れ、クリックすると、作品をさらに見ることができるというしくみです。
今回は、シンプルに1ページでつくるので、別ページをつくっていきます。

左側のメニューで[ページ]をクリックし、Contactというページは削除します。
今回、Contact=依頼・問い合わせは同じページにつくるので、必要ありませんので。

 

さらに、Workというところ(コレクションといいます)に、ページを追加します。

 

ここで[ページ]を選びましょう。

 

ページに[Home](任意)とつけ、[これをホームページにする]にチェックを入れ、[ページを作成]をクリックしましょう。

この「Home」という表示は、今回の場合必要ないので、左側のメニューの[ページヘッダー]をクリックして消します。
(クリックするとオン・オフ)

こういったまっさらな画面になるので、まずはトップの画像を入れます。

あらかじめつくった画像を選択しましょう。
画像なしでもかまいません。

次にロゴ(タイトル)を変更します。
左のメニューでロゴを選び、

テキストを入れましょう。
もちろん画像を入れることもできます。

 

次にポートフォリオ部分をつくります。
写真グリッドというパーツを入れましょう。

 

複数枚の写真を並べることができるのです
この写真は、アップロードもできますし、Lightroomと連携もできます。
私は、Lightroomを使わず、Photoshopを使っているので、アップロードしました。

このようにアップロードし、並び替えることもできます。

その下には、プロフィールや、お申し込みの流れなどをテキストのパーツで入れていきます。

 

テキストを選択して、左揃えにしたり、フォント、大きさを変えたりすることもできます。

問い合わせ、依頼フォームもAdobe Portforioにはあります。
Googleフォームやその他の無料フォームを使ってもいいでしょう。
ただ、Googleフォームだと、デザインの統一性がありません。

お問合せフォームのパーツを選び、

[カスタマイズ]で設定を変えていきましょう。

このように変えることができます。

私はこうしました。

 

送信ボタンや

 

送信(依頼)のあとのメッセージも変えることができるので、変えておきましょう。

 

こういったフォームにしました。
チェックボックスやラジオボタン(選択していただく)は、使えません。
もし使いたい場合は、別のフォームを使う必要があります。

申し込みがあると、こういったメールが届きます。

当ブログと同様、Googleカレンダーを公開するようにしました。
お申込み時に参照していただくためです。

これもページに組み込むと、デザインの統一性がなくなるので、別ページにつくり、リンクを貼りました。
Googleカレンダーは、[埋め込み]というパーツで

このように埋め込めます。

テキストを選択すれば、

任意のページや外部にリンクすることができます。

こういったページです。
別ページになるのは、いたしかたないかなと……。

 

最後にURLの設定です。

Adobe Portforio内でドメインの契約をするなら[ドメインを購入する]、他のサービスで契約しているなら[ドメインを接続]を選びましょう。
今回は、後者で解説します。

こういった、DNS設定がでてきますので、

ドメインを契約したサービスで、DNS設定を書き換えます。
これで、Adobe Portforioでつくったサイト(xxxx.myportforio.com)を任意のURLに変更できるのです。

Adobe Portforioは、
・Adobe CCを契約していると無料
・Lightroomと連携できる
・WordPress よりも敷居が低い
というのがポイントです。

フォームの自由度がもうちょっとあればなぁと思いますが、シンプルに問い合わせを受けるのが通常でしょうから。
私は、このブログのメニューと同様、メニューと「依頼」があったほうがいいと考えています。
問い合わせ10件より依頼1件でしょうから。
(その分、こういったブログをはじめとする発信は必要となりますが)

ポートフォリオサイトづくりの参考にしていただければ。

 

 

 


■編集後記
昨日は、午前中にオンラインセミナー受講。
午後は、Kindle本や雑誌原稿執筆を中心に。

1日1新Kindle『1日1新』Instagram『1日1新』
Adobeポートフォリオ
Sony α7S+Leica21mmF1.4
アップルジンジャーティー

■娘(4歳8ヶ月)日記→Kindle『娘日記』
保育園の帰りにクリスマスツリーを見に行きました。
「お腹ペコペコ〜」というのをなだめながら。

Adobe入門

Posted by 税理士 井ノ上 陽一