動きのあるサイトに強い制作会社の選び方

「アニメーションの効いた、印象に残るサイトにしたい」——そう伝えたのに、上がってきたのは動きがぎこちなく、スマホでは重いだけのサイトだった。中小企業の担当者さんから、こうした相談を本当によくいただきます。動きのあるサイトは、作れる会社と作り慣れている会社の差が驚くほど大きい領域です。

この記事では、ホームページ制作会社の選び方を「動きの実装力」という切り口で整理します。実績ページのどこを見るか、何を基準に比較するか、具体的にお伝えします。

まず実績ページを「スマホで」開く

会社案内のきれいな言葉より、実績ページのほうが雄弁です。ただし見る順番にコツがあります。

1. PCではなくスマホから見る

動きが得意な会社ほど、スマホでの省略設計が上手です。PCで派手に動くのにスマホでも同じ量を動かしている制作会社は、負荷設計を考えていない可能性があります。スクロールしてカクつく、文字が読む前に流れていく——こうしたサイトが並んでいたら要注意です。

2. 「スクロールして初めて分かる動き」があるか

ロード時のアニメーションは誰でも作れます。差が出るのは、スクロール連動の演出です。たとえばカードが順番に起き上がる動きは、実際に動くとこうなります。

この程度の挙動でも、要素の出現タイミング（stagger）、イージング、画面外での発火判定など、調整すべき点は多数あります。実績ページに同種の表現が複数あるかを確認してください。

3. 実績の「リンク先」が生きているか

意外な盲点です。実績として並ぶサムネイルをクリックして、実際の公開サイトに飛べるか。飛べない、あるいはリンク切れが多い会社は、保守の意識が低いと判断できます。

4. 同じテンプレートの使い回しになっていないか

3〜4件見て、ヒーローの動きもスクロール演出も同じなら、テンプレート納品の可能性があります。業種が違えば適切な動きも違うはずです。

比較で見るべき5つの基準

相見積もりを取る際は、以下の軸で揃えて比較すると差が見えます。

4番目について補足します。OSの「視差効果を減らす」設定をオンにしているユーザーには、アニメーションを止める配慮が必要です。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

この数行が入っているかどうかは、公開サイトのCSSを検索すれば確認できます。実績サイトで実際に調べてみると、対応している会社は決して多くありません。選定の判断材料になります。

見積もり前に投げる3つの質問

1. 「動きの仕様はどの段階で決まりますか」 — ワイヤーフレーム段階で動きの指示書を作る会社は信頼できます。デザイン確定後に「じゃあ動かします」では、手戻りが起きます。 2. 「JSライブラリは何を使いますか」 — GSAP、Lenis、素のIntersection Observerなど、具体名が即答で出るか。名前が出ない場合は外注の可能性があります。 3. 「公開後、文章だけ自社で直せますか」 — 動きの実装とCMSの編集性は両立が難しい部分です。ここを曖昧にすると、後から修正費が積み上がります。

認識をそろえるには「見せる」のが一番早い

打ち合わせで「かっこよく動かしてください」は、最も危険な依頼の仕方です。言葉の解釈が双方でズレます。リニューアル提案でビフォーアフターを見せるこんな比較表現も、実際に動くとこうなります。

参考例を集めるなら、動きの名前と挙動がセットで確認できるカタログが便利です。たとえばmotionAETHERは500点のWebパーツが実際に動く状態で並んでおり、無料で閲覧できます。「この動きの、この速さで」と画面を指して伝えられれば、見積もりの精度も上がります。

まとめ

制作会社選びは、実績ページをスマホで開くところから始めてください。そして、動きの希望は言葉ではなく実例で渡す。この2つだけで、失敗の確率は大きく下がります。まずは候補3社の実績を、今日スマホで見比べてみましょう。