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

クリエイターのウェブサイト（ポートフォリオサイト）を、Adobe Portfolioで一から完成まで作るドキュメンタリー（？）です。仕事の取れるウェブサイトを目指して作り込みます。

この記事はnoteマガジン「いしつく!のAdobe Portfolio徹底解説」のまえがきです。全文無料で読めます。

今回作るのはイラストレーターのウェブサイトですが、デザイナーさんや、写真家さんや、その他のフリーランスクリエイターさんの役にも立つと思います。

Adobe Portfolioって何ですか？というかたはまずいしつく!ブログの記事「Adobe Portfolioとは？」から読んでみてください。

Adobe Portfolio (アドビポートフォリオ) とは? 使い方・作り方解説 – いしつく!

使いかたはわかった。問題は「どう作るか」

上記の記事でもご紹介したように、Adobe Portfolioの使いかたはほんとかんたんです。ブラウザ上で全ての操作ができ、特別な知識も要りません。

ただ、大半のクリエイターさんの自作サイトは仕事の役に立たない。あなたもウェブサイトを自作した経験ありませんか？ちゃんと仕事の問い合わせ、来てましたか？

仕事が舞い込めばいいな、と思いながらウェブサイトを作ったのに、その労力が無駄になっているクリエイターさんが大半です。

なぜそうなるか？その理由が、作品がダメだからって人はかなり稀です。

大半はウェブサイトの作りかたが間違ってるからです。同業仲間を強く意識しつつ、オシャレで綺麗カワイイ、クリエイターらしい表現力あふれるギャラリーサイトを目指すからです。そんなんじゃ仕事の問い合わせはきません。

ツールの使いかただけ知っていても不十分です。問題は、どう作ればいいか。仕事獲得に役立つウェブサイトを作るためには、その正しい作戦、正しい作りかた・役立てかたっていうのが、じつはすでに判明しています。

というわけで、このnoteマガジンでは、多くのクリエイターさんにとって便利であろうAdobe Portfolioを使って、仕事獲得に役立つウェブサイトを目指して作っていきます。

Adobe Portfolioの使いかたはスクーンショットを入れて説明していきますが、それだけじゃなくて、どういう考えかたをすべきか、それを元にどういうレイアウト、どういう要素を置けばいいか、という解説も交えていきます。これが当マガジンのキモです。

私は仕事の実入りになるウェブサイトしか作りたくないので、オシャレで綺麗カワイイ、プライベートなギャラリーサイトを目指しているかたは他をお当たりください。

仕事の取れるウェブサイトは、作れる

本題に入る前に、いしつく!とはなんなのかをお話しさせてください。

いしつく!は、イラストレーターさんに向けて仕事の取れるウェブサイトの作りかたをお伝えしている情報サイトです。イラストレーターさんの仕事の相談を受けるコンサルティングセッションやウェブサイト制作もやっています。

ウェブサイトが仕事の役に立ってくれるようにするには、正しい作戦、作りかた、役立てかたがすでに存在する、と書きました。それをイラストレーターさん向けにお伝えしたのが、これより先に公開したマガジン「いしつく!の教科書」です。

いしつく!の教科書｜いしつく! / イラストサイトのつくりかた｜note

今回使う「作戦」もこれとほぼ共通なので、より深く理解したい方は読んでみてください。

さて「いしつく!の教科書」では、実際に存在する仕事の取れるイラストサイトのレイアウト例も紹介しました。それはWordPress製で、レンタルサーバーを契約して作ったものです。正直これに勝る手段はないのですが、どうしてもハードルが高くて難しい…マネできない……と感じているクリエイターさんもいると思います。

そこで、これをできるだけ手軽で安く再現する手段はないものか？と考えた結果、Adobe Portofolioを使ってみることにしました。これならAdobe CCを契約している人なら（多くのクリエイターさんが当てはまると思います）無料で独自ドメインの割り当てもできるし、世界的に利用されているBehanceとの連携ができたり、Lightroomとの連携ができたり、いろいろメリットがあります。

はたして、Adobe Portfolioでビジネス使用に耐えうるウェブサイトは作れるのか？

このマガジンを書き始めた段階で、私もAdobe Portfolioのエキスパートではない！ということをご理解いただきたい。

じつは私はふだんプロ仕様のウェブサイト制作しかしてないので、意外とこういう、一般向けの無料ウェブサイト制作ツールを触るのは、ほとんど初めてです。だから初めてウェブサイトを作るイラストレーターさん、クリエイターさんにも参考になるんじゃないかなーって思います。

では作っていきましょう！

アウトライン : いまここまで公開済みです

このマガジン「いしつく!のAdobe Portfolio徹底解説」にはどんな記事ができているか、を説明します（随時アップデートします）。

■ 新しく1サイト作り、独自ドメインを割り当てる
　　-- ほぼ全部無料公開
■ ヘッダのロゴをちゃんとする
　　-- ロゴの設定がちょっとクセありました。
■ 全体の設定をととのえる
　　-- 検索エンジン対策用のタイトル付けとか全体の設定をします。
■ ホーム（トップ）ページを作る
　　-- ホームページはどう作ればいいか、何を載せればいいか。
■ ヘッダーナビゲーションと、ページ構造をちゃんとする
　　-- ヘッダー右側。使い勝手よく作るためのルールなど。
■ フッターをちゃんとする
　　-- ページ最下部。HTMLサンプルコード、SNSアイコンの設定のしかた。
■ 問い合わせフォームを作る
　　-- 超シンプルなのはNG。どう作るべきか（おまけつき）
■ 作品ページ（制作例紹介ページ）を作る
　　-- 画像だけ貼り付けるんじゃなくて文章と情報を。テンプレ入り
■ その他の情報ページを作る
　　--  プロフィール、実績一覧、制作の流れなど情報ページの解説

↑↑ここまで公開済み↑↑

■ ブログを作る
■ まとめ : 残りのサイト設定、雑感、Tipsなど

残るところあと2記事を追加する予定、となっております。また皆様の質問や反応から後日アップデートの可能性もありますので、末長くお役に立てていただけましたら。

マガジンの更新履歴

なお、Adobe Portfolioの編集画面はちょいちょい変わる（アップデートされる）ので、スクリーンショットはその時点のものということでご理解ください。

それに合わせてマガジンの内容もたまに更新することがありますので、更新履歴のまとめページを作りました。前に読んだ時と内容が変わってるな？というときはこのページをご確認頂けましたら。

操作方法が突然変わっても、「どう作るか」の考え方や判断の仕方の部分はそう大きくは変わりませんので、その点はご安心ください。

【ところで、このマガジンの事例をパクってもいいのか？】
構造やコンテンツの並べ方、それと考え方は、どうぞどうぞマネしてください。
ただ、紹介文などの文言をコピペ的にパクるのはやめてください。あとイラスト画像の転用も迷惑です。迷惑ってだけじゃなく、何の得にもならない。自分の仕事を増やしたくてポートフォリオサイトを作るのに、他人の言葉や画像を使っても全く意味ないよ。自分の事例を自分の言葉で紹介すること。

次の記事もほぼ全部無料で読めるので、どうぞ。