モーション

コミュニティ・マイルストーンモーションビデオ

10万スターの演出からコントリビューターのモザイク、プロダクトのモンタージュへと進み、最後にプロンプトへの招待で締める30秒のOpenDesignモーションビデオです。

OpenDesignモーションデザイン・制作

公式

コミュニティのマイルストーンを祝うモーションビデオデザイン30s · モーション

OpenDesignをダウンロード Discordに参加

淡く描かれた海岸風の背景に、GitHub stars の上に大きな 100K の見出しが置かれている。

モーションビデオのワンシーン

こんな用途に向いたデザイン

オープンソースのマイルストーン告知リポジトリの数値を節目として示し、それを支えた人々をたたえる短編映像です。
コミュニティへの感謝動画コントリビューターの人数と、直接の感謝のメッセージを組み合わせたクロージングです。
プロダクトストーリーのモンタージュインターフェースカード、出力例、ツール名を、1つの物語の中にまとめた編集です。

モーションビデオのポイント

1つの数字で映像が始まるGitHub stars の上に 100K の見出しが置かれ、リポジトリ名、日付、5月から10月までの163日間という期間が添えられています。
コントリビューターのモザイクが背景を形づくる小さな丸いアバターを敷き詰めた密なグリッドが画面を埋め、フロストパネルに Built by 436 のメッセージが載ります。
緑がオープンソースの理念を示す緑は、下線付きの open-source の語と、イタリックの 436 に使われ、その後、全面が緑のシーンで再び現れます。

コミュニティ・マイルストーンモーションビデオのプレビュー

OpenDesignによる、音声付きの30秒モーションビデオです。

プレビューを表示共有

マイルストーンを画面でどう演出するか

この映像は、淡いブルー、ピーチ、ミントの淡く描かれた海岸風の背景を1つ使い、性格の異なるシーンをまとめています。その上に濃く太い文字を置き、緑は強調にだけ使います。穏やかな画面が、大きな数字にオープニングを任せています。

これは最終版のMP4として提供されたOpenDesignのモーションビデオです。以下の解説は、そのファイルと3枚の参照フレームで確認できる内容だけを扱います。

冒頭の数字:GitHub stars の上に巨大な 100K、open-source の下に手描き風の緑の下線。

30秒間の5つの見せ場

映像は、数値から人、プロダクトの例、色の切り替え、招待へと進みます。見せ場ごとに、視聴者が注目するものが変わります。

シーンの順序とその役割
見せ場	画面に見えるもの	デザイン上の役割
スター数	ソーシャル投稿とリポジトリスターのカードのあと、99K Day 163 が 100K GitHub stars に変わります。	特大の数字ひとつで規模を印象づけます。
コントリビューターのモザイク	丸いアバターが並ぶ列と、フロストパネル上の Built by 436 および contributors の文字。	称賛の対象を数字から一人ひとりの人へ移します。
プロダクトのモンタージュ	浮かぶプロダクトUI、引用風のカード、縦長のウェブサイトデザイン、出力例の横に並ぶモデルラベル。	長い説明なしに、ツールが生み出すものを見せます。
緑のつなぎ	淡い海岸を背景にした、鮮やかな緑の Open source シーン。	映像中で最も強い色のコントラストで、注意をリセットします。
締めくくりの招待	エージェント名のグリッド、感謝のメッセージ、そしてプロンプト風の入力欄とともに Your turn. Describe it. が表示されます。	お祝いを行動へとつなげます。

コントリビューターのモザイクとそのトレードオフ

アバターの壁は、最も印象的なフレームです。写真、イラスト、ピクセル風アイコン、シンプルなプレースホルダーが規則的なグリッドに並び、特定の顔が目立つことはありません。文字を読む前に、まず群衆として目に入ります。

フロスト加工の角丸パネルが中ほどの列に重なり、大きな文字で Built by 436 を示し、数字は緑のイタリックです。パネルのおかげでメッセージは読みやすいものの、その背後にあるアバターの一部は隠れます。この密度では個々のアバターを見分けにくく、クレジットロールよりも群衆の印象を伝えるのに向いています。

Built by 436:コントリビューターのアバターが全面に並ぶグリッドの上に重ねたフロストパネル。

感謝で締めくくり、プロンプトへつなぐ

最後のフレームは、レイアウトを左右2つに絞っています。左にはOpenDesignのロゴとワードマーク。右には 100K stars と 436 contributors を示す小さな1行、細い罫線、そして Thank you for building it with us というメッセージがあり、with の語は緑のイタリックです。

その後、プロンプト風の入力欄の横に Your turn. Describe it. が表示されます。この言葉は視聴者に自分の制作を始めるよう促し、映像の中のプロダクトの考え方、つまり説明すればデザインが返ってくることを繰り返しています。

感謝のフレーム:左にロゴ、右に集計とメッセージ。

数字とサウンドトラックの読み方

100K、436、163日、21エージェントという数値は、この映像内の過去のクリエイティブ上の内容です。検証済みの現在のプロダクト指標や利用枠のポリシーではありません。サウンドトラックは付いていますが、ジャンル、テンポ、タイミングはここでは確認されていません。

応用できること

マイルストーンの数値、期間、コントリビューター数を入れ替え、数字、人、プロダクト、招待という順序は保ち、アバターをご自身のコミュニティのものに置き換えます。

注意が必要なこと

公開の許可を得ているアバター画像と推薦コメントだけを使用してください。サンプルの引用ははっきり明示し、作った文言を実際の推薦として見せないようにしてください。

OpenDesignでコミュニティ・マイルストーンモーションビデオをデザインする方法

OpenDesignをダウンロードしてインストール
デスクトップアプリをダウンロードしてインストールし、セットアップを完了してください。デザイン用のプロジェクトを作成します。
OpenDesignをダウンロード
5つの見せ場を整理し、素材を集める
マイルストーンの数値、期間、コントリビューター数、使用できるアバター画像のセット、いくつかのプロダクトのスクリーンショットを書き出します。モーションを依頼する前に、カウント、人、プロダクト、色の切り替え、招待という順序を決めておきます。
1つのプロンプトでシーンを説明する
これは回収した元のプロンプトではなく、再現のために提案するプロンプトです。OpenDesignに貼り付け、数値をご自身のプロジェクトに合わせて調整してください。

推奨プロンプト

淡いブルー、ピーチ、ミントの、淡く描かれた海岸風の背景で、30秒・16:9のモーションビデオを作成してください。シーン1:星付きのリポジトリカードのあと、カウンターが上昇して、GitHub stars の文字の上に巨大な 100K が表示されます。open-source の下には緑の下線を引き、日付の範囲を示す小さな1行を添えます。シーン2:丸いコントリビューターのアバターを敷き詰めたグリッドを全面に配置し、中央に Built by 436 contributors と書かれたフロストガラス風のパネルを置きます。数字は緑のイタリックにします。シーン3:プロダクトのインターフェースカードが浮かび、縦長のウェブサイトデザインと、短い引用風のカードが並びます。シーン4:鮮やかな緑の全面シーンに Open source と表示します。シーン5:ツール名のグリッドのあと、OpenDesignのロゴ、感謝のメッセージ、そして Your turn. Describe it. と書かれたプロンプト入力欄を表示します。太めの濃色サンセリフ体を使い、緑は強調にだけ使い、サウンドトラックを加えてください。アバターにはプレースホルダー、引用にはサンプルを使用してください。
読みやすさを確認し、テンポを調整する
最も賑やかな背景の上でも、大きな数字とフロストパネルの文字が読めることを確認します。モデル名やツールのグリッドなど小さなラベルが速く流れすぎるシーンは、OpenDesignに長くするよう依頼し、最後にサウンドトラックが編集後のカットに合っているかを確かめます。
エクスポートして共有リンクを取得
完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。