クリエイティブ開発とは?
クリエイティブ開発は、デザインとフロントエンドエンジニアリングの中間に位置します。一般的な制作では、ページが正しく動き、速く読み込まれるかが問われます。クリエイティブ開発ではさらに、インタラクションそのものが何かを伝えているかを問います。たとえば、2つの状態の関係を示すトランジション、製品を正しい順序で見せるスクロールシーケンス、ブランドならではの質感を与えるシェーダーなどです。
プリセットを組み合わせるのではなく、コードで書き上げます。アニメーションのタイムライン、スクロールやポインターのロジック、Three.jsやカスタムWebGLのシーン、そして一般的なスマートフォンでも安定して動かすためのフォールバックまで含みます。Awwwardsのようなサイトをお望みならこのサービスが最適ですが、私たちが設計するのは審査員ではなく訪問者のためであり、受賞をお約束することはありません。
クリエイティブ開発プロジェクトに含まれるもの
提案書では、これらの成果物のうち対象範囲に含まれるもの、各素材の提供者、そして各成果物の検収方法を明記します。ご自身のデザイナーや他のスタジオによる承認済みデザインをお持ちいただくことも、Dardoにデザインから構築まで任せていただくことも可能です。
- 本格的な構築の前にリスクの高い疑問を解消する、インタラクティブなコンセプトとプロトタイプ
- タッチ操作やキーボード操作にも対応したスクロール・ポインターインタラクション
- モーションシステム:単発のエフェクトではなく、タイミング、イージング、トランジションをサイト全体で再利用
- パフォーマンス予算と、視差効果を抑えた設定、低速回線、WebGL非対応デバイス向けのフォールバック
- ターゲット層が実際に使うスマートフォンとブラウザで検証したレスポンシブ実装
モーションが効果的な場合と、他のサービスが適している場合
クリエイティブ開発が力を発揮するのは、インタラクションが製品をわかりやすくしたり、仕組みを示したり、ブランドに印象的なリズムを与えたりする場合です。まずその役割を定義し、シーケンスを静止フレームのストーリーボードに描きます。モーションなしで成立しないストーリーは、アニメーションでは救えません。
訪問者にオブジェクトを回転させたり空間内を移動させたりしたい場合は、インタラクティブ3Dウェブサイトのサービスがより適しています。控えめなモーションで、わかりやすくしっかり作られたサイトが必要なら、カスタムウェブデザインから始めてください。単一のキャンペーンオファーは、たいていランディングページが向いています。
プロジェクトの進め方:まず動くスライスを一つ
体験全体を見積もる前に、代表的なスライスを構築します。実際のコンテンツを使った実際のシーンを1つ、その静的フォールバック、主要なアクションを、対象の画面サイズで用意します。これにより、コストのかかる疑問を早い段階で解消できます。説明がなくてもアイデアは伝わるか。スマートフォンで動くか。アセットの読み込みが遅いとどうなるか。エフェクトを最後まで見なくても主要なアクションにたどり着けるか。
スライスには、合意した対応デバイス、アセットサイズ、キーボードとタッチの状態、視差効果を抑えた設定時の挙動、未解決のリスクを記した検収記録が付きます。そのうえで本提案書では、アセット制作、実装、連携、互換性チェック、サポートを、比較しやすい個別の項目として見積もります。
パフォーマンス、アクセシビリティ、視差効果の抑制
初期アセット、レンダリング処理、インタラクションの遅延に予算を設け、デスクトップのデモではなく代表的なデバイスで、GoogleのCore Web Vitalsの基準(最大コンテンツの描画は2.5秒以内、次の描画までのインタラクションは200ミリ秒以内、レイアウトシフトは0.1以下)を目標にします。見出し、本文、リンクはまずHTMLとして提供するため、エフェクトが動くかどうかにコンテンツが左右されることはありません。
視差効果の抑制を有効にしている訪問者には、同じストーリーをまとまりのある形で提供します。パララックスやカメラの動きは、カットや、自分で進められるステップに置き換わります。ホバー効果にはタッチ操作とキーボード操作の代替があり、フォーカスは常に見える状態です。アナリティクスで訪問者がアクションに到達したかはわかりますが、アニメーションが売上の原因だったと証明することはできません。
実際に確認できる実績:HyperとJanus Observatory
Hyperは、AIによる顧客インテリジェンスのコンセプトとしてDardoがデザインした製品ストーリーです。モーションが顧客のシグナルを統合プロファイルに、そのプロファイルを提案オファーにつなげ、それぞれのトランジションが意味の変化を説明します。これはコンセプトです。インタラクティブなプロトタイプは、Python FastAPIのプロトタイプを裏側に持つNext.jsインターフェースで、合成データの例で動作しており、コンバージョンや顧客成果を謳うものではありません。
Janus Observatoryは、Blue Marble Spaceと共同で開発したリサーチ体験です。シネマティックなオープニング、10通りの可能な未来を収めたアトラス、それらを比較するための観測所で構成されています。ラベルや説明は3Dレイヤーの外に置かれ、ビルドはバンドルサイズの予算、ブラウザQA、視覚的なリグレッションのリリースチェックで管理されています。これはインタラクティブな開発力を示すもので、クライアントの商業的成果を示すものではありません。
クリエイティブなウェブサイトの費用を左右する要素は?
クリエイティブ案件の費用は、シーンやシーケンスの数、イラスト・3D・動画アセットの制作が必要かどうか、デザインが承認済みかどうか、対応デバイス、CMSや連携の作業、公開後のサポートによって決まります。問い合わせフォームでは、USD 5,000未満からUSD 60,000以上までの予算帯をお尋ねしますので、提案書をその予算に合わせた範囲でご用意できます。
ボゴタを拠点とするシニアスタジオ、米国の勤務時間に対応
Dardoはコロンビアのボゴタを拠点とする3人のチームで、創業者のNicolás Cerónが率い、英語とスペイン語で対応しています。ボゴタはUTC−5で、米国東部時間・中部時間と同じ勤務時間帯のため、米国のチームは、翌朝ではなくリアルタイムでレビューできるニアショアのパートナーを得られます。デザインスタジオにも社内のローンチチームにも協力しており、提案書にはレビュー担当者、ミーティングの重なる時間、引き渡し時の言語、リポジトリの所有者を明記します。
ご依頼前のご質問
クリエイティブデベロッパーとは何をする仕事ですか?
クリエイティブデベロッパーとは、ウェブサイトの体験レイヤー(モーション、スクロールやポインターのインタラクション、WebGL、シェーダー)を専門とするフロントエンドエンジニアです。その役割は、ページの読み込みを速く保ち、スマートフォンでも動作し、アクセシビリティ設定にも配慮しながら、これらの演出をきちんと伝わるものにすることです。Dardo では同じ少人数のチームがデザインと開発の両方を担うため、アイデアと実装を一緒にレビューできます。
アニメーションやインタラクティブなウェブサイトの費用はどのくらいですか?
内容によって異なります。シーンの数、制作するイラストや3D、動画のアセット、デザインが支給されるかどうか、対応するデバイスなどが関わります。代表的な一部分の範囲を整理したうえで見積もるため、固定パッケージではなく、ご要望に合わせた価格になります。
アニメーションはSEOやページ速度に悪影響を与えますか?
アニメーション自体が原因ではなく、読み込み方が悪い場合に影響します。検索エンジンはHTMLを読み取るため、見出し、本文、リンクはcanvasやアニメーションのスクリプトが動く前から存在している必要があります。重いコードは最初のコンテンツが表示された後に読み込み、レイアウトは余白を確保して表示が跳ねないようにし、アニメーションが入力を妨げないようにします。公開前に代表的なスマートフォンでCore Web Vitalsを確認しますが、検索順位は保証しません。
アニメーションのあるウェブサイトでもアクセシビリティ基準を満たせますか?
はい。後から手直しするのではなく、モーションと一緒にアクセシビリティを設計すれば可能です。WCAGでは、5秒を超えて自動的に動くコンテンツを一時停止、停止、非表示にする手段を求めており、操作によって起こるモーションもオフにできるようにすることを推奨しています。私たちはモーション軽減の設定に対応し、フォーカスを常に見えるようにし、アニメーションの完了に依存するコンテンツがないようにします。
クリエイティブ開発プロジェクトにはどのくらいの期間がかかりますか?
標準的な期間はなく、シーンの数、アセット制作、レビューの回数によって変わります。最初に動く一部分の範囲を整理したうえで、提案書に日程を記載します。この段階で、重いアセットやタッチ操作向けに見直しが必要なインタラクションなど、スケジュールを動かしやすいリスクも見えてきます。公開日が決まっている場合は、最初にお知らせください。
クリエイティブ開発とインタラクティブ3Dサイトのどちらを選ぶべきですか?
従来型のページで、モーション、スクロール、トランジションがストーリーを担う場合は、クリエイティブ開発が向いています。訪問者が物体、場所、システムを3次元で探索する必要がある場合は、インタラクティブ3Dサイトを選びましょう。両方を組み合わせるプロジェクトも多くあります。判断のポイントは、訪問者の操作によって得られる理解が変わるのか、それとも適切なテンポの演出のほうがよく伝わるのか、という点です。
