ニューモフィズム
自己紹介動画ということで、ニューモフィズムでポートフォリオ作ってみました。
ニューモフィズムとは、数年前に流行していたU Iデザインのことである。フラットな背景に要素が強調される凹凸スタイルデザインのこと。要素自体が突き出ているような浮かんでいるようなデザインになる。
下記画像はアフターエフェクトで作った作成物で、ボタンなどの要素が突き出ているデザインになる。
- 背景レイヤーの色と要素レイヤー(ボタンなど)の色は同じ
- 要素レイヤー(ボタンなど）の凹凸は、シャドーで表現（明るい色と暗い色で立体感を出している）
コントラストが判別しにくいという理由から昨今のユーザビリティ事情を考えたら使いづらいUIデザインに分類される。個人的にはかなりオシャレデザインにはいるけど🤔
？？？「だからこそニューモフィズムを使うべきじゃないか？」という天の声により、動画ポートフォリオを作っている途中で変更することに決めた。
そんなわけで最初に予定していたポートフォリオとは全然違うモノになってしまったというオチ🤪
画面詳細
作品のテーマはニューモフィズムでポートフォリオ画面を動かしてみよう！！
デスクトップ画面
デスクトップ画面にあるアプリアイコンをクリックすると、ポートフォリオのメニュー画面が開く。
- UI遷移アニメーション(別の画面が開く
- アイコンとカーソルを連動させる（hoverアニメーション）
MENU画面
メニュー画面には4つのボタンがあり、skillボタンをクリックすると次の画面へ遷移する。
- ボタンとカーソルを連動させる（hoverアニメーション）
SKILLS画面
グラフアニメーションが始まる。ポイントはAdobeソフトのアイコンを使用しないで表現することであるという謎のこだわりを発しているところ😉
- インフォグラフィックスを使用（パスをアニメーションしてチャートにする）
WORK画面
- アフターエフェクトの作品集（1〜2作品目は作品例、3作品目は使用いただいた🙇♂️）
❶ FOODSHOPのプロモーション映像
架空のケーキ屋さんがケーキのフェアをキャンペーンする案内動画
❷ BEAUTYCAREのプロモーション映像
架空の美容ケアの案内動画。
❸ SPORTSの試合案内映像
お世話になっている知人への感謝を込めて試合を盛り上げたい気持ちで製作しました。
テキストエフェクトのフェードインフェードアウトで緊迫感が伝わる表現が出来て個人的には大満足した作品です。
PROFILE画面
プロフィール画面でサービス案内をまとめて表示することにした。
背景音楽について
さりい bgm様
楽曲名「バタフライピー」
You tubeにてフリーBGM見つけ使用させていただきました🙇♂️
当初ポートフォリオのテーマを途中変更したので「ニューモフィズムの世界観」に合いそうなBGMのイメージはあったものの見つけることは出来ませんでした。
なので作成したアニメーションに楽曲を流しているだけであってそうに見えるけど偶然であっていないのです😫
さいごに
次回、ニューモフィズムを使って表現する機会があれば更により良いものにしたい🥳
