top of page
検索

【102】シェイプレイヤーで作るSFユーザーインターフェース基礎編


円形HUD、3Dレイヤー、背景グリッドで近未来感を作る



この講座は、YouTubeメンバーシップ Pro プランで視聴できます。

Pro プランで講座を見る：https://bit.ly/sanze_join


※講座が再生できない場合は、YouTubeにログインした状態で、Pro プランへの参加状況をご確認ください。



完成イメージ




講座概要


SF風のユーザーインターフェースは、近未来感、分析画面、ゲーム風演出、VFX合成の装飾などに使いやすい表現です。円形のライン、破線、グラデーション、点滅、背景グリッドを組み合わせることで、画面に情報量と奥行きを足すことができます。


この講座では、シェイプレイヤーを使って、SF風HUDの基礎を作ります。円形ツールや破線、グラデーション、回転Expressionを組み合わせてUIパーツを作り、3Dレイヤーとカメラを使って、各パーツが奥行きを持って飛び出してくるようなアニメーションに仕上げます。


大事なのは、派手なパーツを増やすことではなく、どの要素を重ねると情報量が出て、どこまで動かすと見やすさを保てるかを判断することです。基礎編では、SF UIの土台になるレイアウト、立体感、点滅、背景づくりまでを整理します。



関連講座


第1回：シェイプレイヤーで作る動く背景グラフィックの基本


第2回：文字数に自動フィットするローワーサードの作り方


第3回：Premiere Proでも使えるローワーサード応用編


第5回：SFユーザーインターフェース 応用編



講座の流れ


1. シェイプレイヤー講座第3弾の全体像を確認する

2. シェイプを使ってHUDをレイアウトする

3. 破線の円形パーツを作る

4. 回転Expressionでゆっくり動かす

5. グラデーションを使ったグラフィックを追加する

6. カメラを追加して3D空間で確認する

7. Z軸をずらして立体感を作る

8. 点滅アニメーションを作る

9. 背景グリッドを作成する

10. 光を加えてSF UIの土台を仕上げる



この講座でできるようになること


・シェイプレイヤーを使って、SF風HUDの基本パーツを作れる

・3DレイヤーとZ軸を使い、平面的な図形に奥行きを出せる

・点滅、背景グリッド、光を足して、近未来感のある画面を作れる



こんな人におすすめ


・SF風UIやHUD表現をAfter Effectsで作ってみたい人

・シェイプレイヤーを、背景装飾やVFX風の画面づくりに使いたい人

・3Dレイヤーやカメラを使って、平面素材に奥行きを出す考え方を学びたい人



講座情報


カテゴリ：After Effects／シェイプレイヤー／SF UI／HUD／モーショングラフィックス

対象レベル：初級〜中級

動画尺：約10分

使用ソフト：After Effects

使用プラグイン：なし

使用エフェクト：グリッド、グラデーション、塗り

使用機能：シェイプレイヤー、楕円形ツール、破線、線分、間隔、グラデーション、合成モード、加算、3Dレイヤー、カメラ、Z軸、不透明度アニメーション、シーケンスレイヤー、マスク、マスクの境界線ぼかし

Expression：wiggle(1,50)

AEP：あり

学習用付帯データ：あり



📝 この講座で使う主な考え方


回転Expression：

回転にwiggle(1,50)を入れることで、ゆっくりとランダム感のある回転を作ります。


Z軸で奥行きを作る：

円形パーツごとにZ軸の値をずらすことで、カメラで見たときに平面的なUIが立体的に見えます。


点滅を作る：

不透明度を0→100に切り替え、レイヤーのタイミングを少しずつずらすことで、SF UIらしい点滅感を作ります。



📦 学習用付帯データ・使用環境について

AEPファイルなどの学習用付帯データは、講座理解を補助するための付録です。メインコンテンツは講座の視聴と、作り方や調整の考え方を学べることです。


付帯データは制作当時のAfter Effects環境を前提に作成しているため、現在の環境では表示差異やエラーが出る場合があります。UI構成、項目名、Expressionの動作、仕様、互換性が異なることもあります。


個別環境での動作確認、AEPファイルの修正、Expressionの個別調整、トラブル対応などの個別サポートは行っておりません。学習用付帯データの再配布、再販売、リンクの公開は禁止です。

bottom of page