ポートフォリオテンプレートデザイン "popanimation" 編

今回はポートフォリオのデザインテンプレートの中から「popanimation」をご紹介します。

popanimation

popanimationはキービジュアルとして設定された作品を順番にクローズアップするテンプレートで、次に拡大表示される作品は右下の円形の中に表示されます。

また、このテンプレートはちょっと変わった動きをします。

このテンプレートをスクロールさせてみるとわかるのですが、クローズアップされたキービジュアルと、テンプレート全体のスクロール速度が違い、まるでキービジュアルが少し奥にあるような、画面が立体的な層を成しているかのような動きをします。

これはいわゆるパララックス（視差効果）と呼ばれており、近年のWebサイトなどでよくみられる手法です。

キービジュアルは1つから設定ができますが、クロスフォリオでは7作品以上の設定を推奨しています。

■仕様
・キービジュアル推奨サイズ：2000px × 1340px
・アニメーション：あり
・スタイル（カラーバリエーション）：4パターン
・ナビゲーションメニュー形式：MENUボタン（右下）

popanimationのスタイル設定では4つのカラーバリエーションから基調色を選ぶことができます。

ここからはpopanimationを使用しているクリエイターのポートフォリオを紹介します。

portfolio name：あんよのポートフォリオ　creator：あんよ

popanimationテンプレートのサンプル画像としても使用されているあんよさんのポートフォリオ「あんよのポートフォリオ」。

奥行きのある空と静かな風景の描写が印象的なあんよさんの作品を、このテンプレートの持つ多層感が包み込んで、非常に美しいポートフォリオに仕上がっています。

ちなみにあんよさんの作品はクロスフォリオのサービス紹介ページなどでも利用させていただいており、大変お世話になっております！

portfolio name：mucha portfolio　creator：ミュシャ

ミュシャさんのポートフォリオ「mucha portfolio」ではカラーバリエーションのブルーを使用。

ライトノベル書籍装画・挿絵などを多く手掛けられているミュシャさんの瑞々しく繊細なイラストが、カメラの自動シャッターのように切り替わっていく様子がとても印象的ですね。

またポートフォリオ内のページも「Vtuber Design」や「Commercial Work」などの区分できれいに分けられており、全体の完成度も高いと思います。

これからポートフォリオを作成される方は是非参考にしてみてください。

portfolio name：らくらぼ　creator：らいらく

らいらくさんのポートフォリオ「らくらぼ」でもpopanimationを採用していただいています。

キービジュアルに動きのあるイラストが多く設定されており、テンプレートの多層感と相まって今にもキャラクターが動き出しそうなインパクトあるファーストビューに仕上がっています。

らいらくさんの色彩豊かなイラストが内包する物語性が非常によく表現されたポートフォリオといえるのではないでしょうか。

---

最後になりますが、popanimationテンプレートのトップページにはこのテンプレートだけで使える罫線画像パーツが用意されており、ここに画像を設定するとキービジュアル同様、任意の場所に設定した罫線パーツでもパララックス効果が得られるようになります！

（以下、アニメーションGIFですが、罫線画像パーツの動きのイメージになります）

popanimationはダイナミックに切り替わるキービジュアルとタイマーのように動き続ける丸窓、それにパララックス効果が加わった非常にゴージャスなテンプレートです。

ポップかつ動きのある、リッチな画面構成がお好みなら、ぜひ"popanimation"を試してみてください！

今回で全10回のテンプレート特集は終了となります。

お気に入りのテンプレートは見つかりましたか？

クロスフォリオでは今後もテンプレートの追加などをしていく予定ですので、ぜひお楽しみに！