Adobe Portfolio アドビポートフォリオサイトの簡単な作り方

Tips

今回はAdobe Portfolioで簡単なサイトの作り方をご紹介します。

基本的には画面上のツールを操作するだけで作れるのですが、多少とっつきづらい点もあるので、スクリーンショット入りでご説明します。

なお、これは僕の試行錯誤した結果で、ベストな方法とは限りませんのでご了承ください。

Adobe Portfolioとは?

Adobe Portfolioとは、HTMLやCSSの知識が無くても簡単に作品紹介などのWEBサイトを作ることができるサービスです。

Blog風なサイトも作ろうと思えばできるのかもしれませんが、基本的にテンプレートに沿ったレイアウトしかできないので、文字通り自分のポートフォリオサイトをつくるサービスと割り切ったほうが良いと思います。

また、今後サービス内容が変更となったり、終了したりする可能性もあるので、あくまでもメインとは別のサブサイトとしての利用が良いでしょう。

簡単なサイトの作り方

Adobe Portfolioにアクセスし、新規サイトを作成

まずはAdobe Portfolioにアクセスし、新規サイトを選択します。

サイトは5つまで作成することができ、この例では既に1つサイトが存在しています。

テンプレートのタイプを選ぶ

「作品ギャラリー」はWordpressテーマのようなテンプレート、「スプラッシュページ」は主に単独ページをつくるものです。

どちらも後からページの追加や変更はできますが、「スプラッシュページ」から始めるとナビゲーションが作れない(作り方がわからない)ので、今回はテンプレートから作ることにします。

テーマを選ぶ

ベースとなるテーマを選択するとページが生成されます。

テーマは後から変更することもできますが、変更した際に一部のフォントのスタイルやテキストの内容がそのテーマのデフォルトに変わってしまうので注意が必要です。

今回は「Matthias」を選択し、生成されたページがこちら。

サイト設定

まずは左の歯車アイコンをクリックして設定を開きます。

ここではとりあえず以下の項目を設定します。

■ドメイン名:所有ドメインへの関連付けや、△△△.myportfolio.comの△△△部分を変更できます。

■ホームページ:サイトのトップとなるページを指定します。こちらは後のパートで説明します。

■検索の最適化:サイトのタイトルやメタディスクリプションを記述できます。サーチエンジンで検索されたときに表示される部分なので、タグ以外はとりあえず入れておきましょう。

■お気に入りアイコン:faviconをアップロードできます。

トップページを作る

デフォルトでは

work(ホームページ)
 |
contact

という構成になっていますが、今回は扉用のTOPページを追加して、

TOP(ホームページ)
 |
WORK
 |
CONTACT

という構成にします。もちろんデフォルトのままでもOKです。

「ページを追加」から「ページ」を選択。

「ページレイアウトを選択」は「デフォルト」で名前はTOP、保存先はナビゲーションにする。

するとナビゲーション部分にページのタイトルが入ります。

ここをトップページにするために、画像をアップしてヘッダーと先頭に戻るを非表示にします。

さらにサイトタイトル、ナビゲーションをカスタマイズして、マージン、フォント、ロールオーバー、ソーシャルプロフィール、リンクなどを好みに合わせて追加・変更します。

ギャラリーをAdobeサービスとリンクさせる

Adobe Portfolioの最大の特徴は、LightroomやBehance、Adobe Stockなどのコンテンツを共有することができることです。

いま作ったサイトのWORKページには何もコンテンツを入れていませんので、今回はここにAdobe Stockのコレクションを共有させます。

左側メニューの「ページと統合」をクリックすると「コンテンツの管理」が開きますので、そこで「連携」タブをクリックします。

ここで「Adobe Stockプロフィール」をクリックするとAdobe Stockのプロフィール画面が開くので、コレクションを用意して共有します。

するとPortfolioのWORKにコレクションが反映します。

おわりに

僕個人の正直な感想は、Adobeのクリエイター向けSNSであるBehanceとの違いがいまいちよくわからないというものでした。

ただし、Adobeブランドサイトの中に自分の作品サイトが持てるというのは、クリエイターならメリットはあると思いますし、AdobeCCを利用しているなら無料なので、作っておいて損はないのではないでしょうか。

ちなみにYouTubeでは細かな部分まで作業内容を公開していますので、よろしければこちらもご覧ください。

Adobe Portfolio アドビポートフォリオサイトの簡単な作り方

コメント

タイトルとURLをコピーしました