KINETO
動きで、語る。
実績を並べても表現力が伝わらない制作会社のために、サイト自体を作品として体験させる構成にし、相談の入口を領域ごとに絞ることで、案件の方向性が揃った状態で会話を始められるようにしたスタジオサイトの設計例です。
想定クライアント表現力そのものが商品になるクリエイティブスタジオ・デザイン事務所・映像制作会社
※ 掲載しているのはAIを活用した制作サンプルです。サンプルサイトの企業・人物・内容はすべて架空（フィクション）であり、実在のものではありません。
よくある課題
- 実績はあるのに、静的な一覧ページでは「何がつくれるスタジオか」が伝わらない
- 他社との比較で、表現の質ではなく価格や規模で判断されてしまう
- 問い合わせの内容が漠然としていて、案件規模やスケジュールが噛み合わないまま初回の打ち合わせに入ってしまう
この設計の狙い
説明ではなく体験で「ここなら任せられる」と感じてもらうこと。閲覧そのものを設計対象と捉え、サイトを歩く時間がそのままポートフォリオとして機能する構成にしました。
この構成にした理由
サイトそのものを実演にする
プリローダー、カーソル追従の作品プレビュー、横スクロールで固定されるギャラリー、文字単位で立ち上がる見出し。表現力を売る業種では、実績紹介より先に「体験できること」自体が最も強い証明になると考えました。
ウォームブラックに、オレンジを一色だけ
背景は温かみのある黒 #0E0D0B、文字はクリーム #EFEAE0。高彩度はアクセントのオレンジ #FF4D17 のみに絞っています。掲載する作品画像の色が濁らず、どんなトーンの実績を追加しても画面が破綻しません。
セリフ体とモノスペースを対比させる
見出しはイタリックを混ぜたセリフ体、ラベルや数値はモノスペース。エディトリアルの品格と制作現場の記号性を同居させ、アート寄りにもエンジニア寄りにも振り切らない立ち位置を書体で示しています。
作品一覧を「行」で組む
サムネイルを敷き詰める代わりに、番号・タイトル・カテゴリ・年の一行で構成し、ホバーで画像がカーソルに追従します。情報密度を保ちながら、見る行為そのものにリズムを与える狙いです。
相談の入口を領域で分ける
お問い合わせは相談内容を5つの領域から選ぶ形式に。得意領域を明示することで、初回のやり取りから前提を揃え、規模やスケジュールの認識違いを減らすことを意図しています。
ページ構成
- トップ
- Work（制作実績）
- Studio（スタジオ・チーム）
- お問い合わせ
実装している機能
- スマホ・タブレット・パソコンの画面に合わせた表示
- 検索対策（検索結果やSNSで正しく表示される設定）
- トップの大きな動画
- お問い合わせフォーム（相談内容の選択／迷惑な送信を防ぐ対策・入力内容の確認つき）
- ページを開く時の読み込み中の演出
- 独自のマウスカーソルと、カーソルに引き寄せられるボタン
- カーソルの動きについてくる作品のプレビュー
- 下へスクロールすると横に流れるギャラリー
- 数字が増えていく演出
- アニメーションは、ほかの部品に頼らない独自の作り（動きを減らす設定の端末では、すべて止まる）
狙っている効果
- 閲覧体験そのものが表現力の証明として働き、価格以外の理由で検討されることを狙っています
- 作品ごとの背景と担当領域が伝わることで、依頼内容が具体化した状態で相談が届くことを想定しています
- 相談領域の明示により、得意分野と噛み合わない引き合いを減らすことを狙っています
※ 上記は本設計が狙う効果であり、成果を保証するものではありません。
このサイトを作るなら
この構成は、プレミアムプラン相当です（コンテンツ制作から公開後の運用まで任せたい構成（高度なインタラクションを含む））。
コンテンツ制作から公開後の運用まで、一貫して任せたい方へ。
￥1,080,000〜（税別）
- 表示価格はすべて税別です。「〜」は最低価格を示し、最終金額はページ数・機能・素材の有無により変動します。
- サーバー・ドメインの管理費（￥5,000 / 月・税別）が別途必要です。
- 正式なお見積もりは、ご要望をうかがったうえでご提示します。
Let's talk
この構成で、あなたのサイトをつくれます。
・表現力が強みなのに、既存サイトでそれを見せられていない制作会社・ポートフォリオを更新するたびにレイアウトが崩れて困っているスタジオ・引き合いの質を上げ、規模の合う案件に絞りたいデザイン事務所
この内容で相談する（無料）