1目的を明確
「無限の可能性」という理念を、視覚的・インタラクティブな体験として表現。ユーザーが映像の世界に没入し、ブランドの価値を直感的に感じられるデジタル空間を目指した。
- 没入感
- 繋がりや複雑
- 視点の変化
- 流れている動き
- 交差や絡まる
- 光と影
03
PROJECT — WEBSITE / UIUX
「INFTY STUDIO」
ホームページ制作依頼
OVERVIEW
概要
Infty Studioとは
Infty Studioは、映像制作を専門とするクリエイティブスタジオ。 一瞬の美しさを捉え、感情を揺さぶる映像作品を創り出すことを使命とする。 CM、ミュージックビデオ、ショートフィルム、ドキュメンタリーなど、 幅広いジャンルの映像制作を手掛けている。
コンセプト
Infty Studioが掲げる「無限の可能性」という理念を、視覚的かつ インタラクティブな体験として表現するウェブサイトを制作。 単なる情報を伝える場ではなく、映像を「体験」できるデジタル空間として設計し、 訪れたユーザーがInfty Studioのクリエイティブな世界観に引き込まれる デザインを目指した。
- Who
- クライアントやパートナー、映像制作に興味のある人
- What
- Infty Studioの公式ウェブサイト。映像の魅力を体験できるデザインを実現
- Why
- 映像作品や制作の想いを直感的に伝え、Infty Studioの価値を知ってもらうため
- How
- ユーザー視点と企業視点の両方から情報設計を行い、構成と演出をゼロから提案
IDEA
アイデア
背景 — BACKGROUND
「映像を依頼したいと思わせ、
集客力のあるWebサイト」とは何かを考えた
映像制作の魅力やコンセプト、過去の実績を、ホームページを通じて直感的に 理解してもらえる場が必要だった。広告やSNSから興味を持ったユーザーが訪れた際に、 「この会社は何をしているのか」「どんな映像を作るチームなのか」を 感じてもらえる、魅力が伝わるサイトが求められていた。 映像の依頼先を探している企業にとって、Infty Studioを知る「最初の接点」として 機会損失を防ぐためにも、ブランドの世界観と強みを体験できる ホームページの存在が必要だった。
-
1
ファーストビュー（FV）の設計
ページを開いた瞬間に一目で興味を引き、信頼感を与え、離脱を防ぐことを目的としたビジュアルと構成。
-
2
目を引く演出、没入感を高めるデザイン
スクロールに合わせてSVGアニメーションが展開し、操作に応じた変化を感じられるインタラクションを実現。動きによってブランドの世界観に没入できる体験を提供。
-
3
集客力を高めるための設計
各ページにContactボタンを設置し、ユーザーがいつでも問い合わせに進める導線を用意。
PROCESS
プロセス
デザインのプロセス — DESIGN
- 00
クライアントの
サイトを作る - 01
目的を確定
- ブランドの魅力
- 映像制作の実績
- 集客の課題
- ユーザーの行動導線
- 02
リサーチと
方向性提案- 無限の可能性の方向
- メインビジュアル出し
- 03
ワイヤーフレーム
作成- 情報の優先順位
- メッセージの明確化
- 04
デザイン制作
意見交換- クライアントの要望反映
- 視覚的なインパクト
- スクロールで変化する演出
Web制作のプロセス — DEVELOPMENT
- 01
実装打ち合わせ
- デザイン意図の共有
- レスポンシブ対応
- 02
中間レビュー
- 動作確認
- 03
最終確認
- ブランドメッセージの伝わり方
- UIの分かりやすさ
- 04
公開と振り返り
- ドメイン設定
- サーバー設定
- GOAL
公開
制作のプロセス — MAKING
2メインビジュアル
「無限」の象徴としての動的な粒子の表現。GLSLを用いて「∞」のシンボルを無数の粒子で構成し、流動的に変化するビジュアルを制作。映像表現の無限の可能性を象徴している。
3Visual Studio Codeで実装
GUIライブラリを活用し、ビジュアルの形態を直感的に調整できる環境を構築。粒子の流れや∞の変化をリアルタイムで確認しながら、ブランドの理念を体現できる動きを探求した。
OUTPUT
ウェブデザイン
トップページ — TOP
Infty Studioのハイライト映像
スクロールに合わせて映像が拡大し、映像と創造の無限の可能性を直感的に伝える。
スクロールを始めると、一本の細い線がゆっくりと伸び、自然に交差しながら「∞」を描く。 いくつもの要素が重なり合い、新しいストーリーが生まれることを象徴。
ページが進むごとに異なる「∞」のシンボルが現れ、流動的な粒子が繊細な波紋を描いて∞を形成。 映像表現のジャンルや手法の多様性を示す。
モバイル — RESPONSIVE
REVIEW
自己点検
主担当としてエンジニアと連携しながら開発を進行。課題の言語化と、円滑な連携の重要性を学んだ。
クライアントとのコミュニケーション
言葉にできていない課題や要望を引き出すことがスタートライン。話を聞いて情報を整理し、「本当に必要なもの」を一緒に見つけていく。
エンジニアとの連携
「伝えたつもり」がズレや手戻りを生む。お互いの優先順位とゴールを共有し、図やスクリーンショットでできるだけ具体的に伝えた。
一緒に考える姿勢
自分の好みで判断せず、「クライアントにとって何がベストか？」を常に意識。映像を任せたいと思ってもらえるか、集客につながるか、という視点で考え続けた。
「誰に何を伝え、どんな行動につなげるか」を最初に明確化できた。
目的に沿った演出・構成を提案し、クライアントから「イメージ通り」という声をもらえた。ブランドの世界観と目的が一致した設計と、相手視点で考える姿勢はこれからも大切にしたい。
初期段階で、目的の優先順位やゴールの認識をすり合わせる時間が不足していた。
途中で方向修正が必要になり、制作フローに無駄が生じた。エンジニアとの連携でも仕様のズレが発生し、意図を伝えるための資料作成と確認プロセスの重要性を再認識した。
プロジェクト初期のすり合わせが、その後の制作効率を大きく左右する。
目的・優先順位・ゴールを初期段階で言語化し共有する時間を意識的に確保する。仕様書だけでなく意図や背景まで伝え、定期的な確認と対話で認識のズレを未然に防ぎたい。