TOBIRADesign notes

DESIGN STUDY · Novra

Novra暗い背景と制作物で、説明と実績をつなぐ

黒い背景に明るい見出し、周囲の制作物、暖色のボタンを配置した画面。主張だけでなく作品を近くに置く、制作サービスの紹介方法を考えます。

Novra:暗い背景と制作物で、説明と実績をつなぐ
Novraの保存済み画面。現在のサイトと異なる場合があります。

中央のメッセージを周囲の実績で支える

保存画面では中央に大きな見出しがあり、その周囲に画面やビジュアルの断片が置かれています。説明を読んだ直後に表現の方向性を見られるため、コピーと制作物を別々の長いセクションへ分ける場合とは違う関係が生まれています。

背景と操作の色を使い分ける

暗い背景に白い文字を載せ、主要なボタンには暖色を使っています。画面内に多くの画像があっても、操作する場所に別の色を与えることで手がかりを作る考え方です。ボタン周辺の余白も合わせて見ると、色だけに頼らない強調を検討できます。

制作に取り入れるなら

制作会社やデザインサービスのLPで、得意な表現と問い合わせへの入口を同じ画面で示したいときの参考になります。実績画像を増やす前に、見出しと主要ボタンに十分な面積を残します。暗い背景でも補足説明を薄くしすぎず、小さい文字の読みやすさを保ちます。

確認しておきたいこと

掲載画像は保存時点の静止画です。周囲の作品が動く場合の重なり方や、動画の読み込み量は別途確認が必要です。自動再生を使う場合も、最初の静止表示で説明と操作が完結する構成にします。

ライブラリーでも探す

解説を読んだら、収録作品と関連するデザインを見比べてみてください。プレビューやコードの利用範囲は、作品の対応状況とプランによって異なります。

ライブラリーでNovraを見る →