M

a

t

s

u

i

H

a

r

u

n

a

Welcome to my portfolio.
回る地球 バイクに乗っている羊
贈り物を届けたい

色んな方の想いを形にしたい。
伝えたい内容を正しく分かりやすく表現し、
見る人の心に響くような "贈り物"を。
手紙を届けるように、想いを込めて。

そんなクリエイターを目指しています。

Scroll

W

o

r

k

s

Art

Movie

この作品の目的

制作したデザインを静止画でなく動く状態にしたら表現の幅が広がりそうだと思い制作を始めました。

制作時間
下書き 1時間
illustrator 5時間
After Effects 25時間
使用ソフト
Adobe Illustrator
After Effects
制作して気づいたこと・反省点

はじめてソフトに触り、ツールや用語などを学びながらの制作となりました。
まずillustratorで動かしたいイラストを作成し、.aiデータをAfter Effectsに取り込みました。 モーションの動きを滑らかになるように意識し形を整えることはできたものの、いかにデータ容量を軽くするかについて 壁にぶつかり、試行錯誤を繰り返しました。 なお、ポートフォリオサイトのトップページに表示されているアニメーションはページが重くならないように「羊の画像」を 「APNG」形式で表示しています。
細かい動きを設定できるのでテロップの凝った出し方やキャラクターの移動などはPremiere Proで行うよりもこちらで設定した方が質が高いものが作れる 反面、レイヤー数が増えて複雑化していくと管理や素材の把握に苦労することとなりました。
今後はAfter Effectsのスキルをさらに向上させてテキストアニメーションや、平面デザインをカメラワークを変えて立体的に動かし、三次元的な表現を行っていきたいと思っております。

S

k

i

l

l

デザイン
デザイン

細部にまでこだわりを持ち、意図を説明できるデザインを心がけています。
また、ユーザーの心理的部分を考慮した情報設計やアクセシビリティ面の設計・機能性といった部分にも配慮し、 様々な角度からのアプローチで質の高いデザインを目指しています。
様々なデザインツールを使用し、用途に合わせてテイストを変えることにより世界観を演出します。
illustrator/Photoshop/XD

コーディング
コーディング

HTML・CSSを使用し、デザインの意図をしっかり再現します。
また、レイアウトが崩れないようレスポンシブの実装では細部まで確認します。
Javascriptを使用し、サイトに動きを加えることで表現を広げます。
アニメーションによって視覚的動線を作り、ユーザーの目を引くようなWebサイトを意識しています。
コードは誰が見ても理解・管理しやすいように意識しています。また、新しい情報をインプット・アウトプットすることを心掛けています。
HTML/CSS/Java script/jQuery/PHP/WordPress

動画制作
動画制作

プログラミングでは表現できない細かな動きの映像を制作します。
使用目的に合わせて様々な形式を書き出します。
主にモーショングラフィックを作成。After Effectsは奥が深く、動画表現の幅を広げるため勉強しています。
Premiere Pro/After Effects