本文にスキップ プロジェクトの相談を申し込む

BlueCanvasツール紹介・009 インタラクティブウェブ ウェブサイト制作 スクロールモーション

スクロールすると話が続くインタラクティブウェブサイトを紹介します

読むのに約3分 BlueCanvas

インタラクティブウェブサイトはどんなウェブサイトですか?

スクロールに合わせてシーンが変わり、ポインタやタッチに反応し、モバイルとアクセシビリティまで一緒に設計したウェブサイトです。BlueCanvasは、企画、デザイン、開発にモバイル最適化、検索対応、管理者機能と運用まで、プロジェクトに必要な範囲をまとめています。

キーサマリー

  • スクロールするとシーンが変わり、話が続く インタラクティブなウェブサイト。をBlueCanvasが企画、デザイン、開発するという紹介映像です。
  • 映像はスクロールストーリーテリング、指先に反応する立体感、モバイルとアクセシビリティ、ブランドごとに異なる第一印象を順番に示しています。

映像で見せたシーン

映像はウェブサイトが見るだけで十分かどうかを尋ねる場面から始まり、ブランドを経験させようという言葉につながります。続くシーンは、紹介ページが説明する4つの経験に触れています。

シーン映像と紹介ページの説明
スクロールストーリーテリング小さなスクロールにもシーンが反応します。動くほど拡大し、回転し、重なり、ブランドの話を続けていきます。
指先に反応する深さポインタの方向に依存する視点と繊細な反応で、製品やコンテンツをより近づけるインタラクションを作成します。
小さな画面でも自然にモバイルでは、タッチと読み取りに合わせて動きを調整します。デバイスの動作を減らす設定を尊重し、キーボードでコンテンツを閲覧できるようにします。
ブランドごとに異なる第一印象異なるブランドに合わせたデザインを企画から開発、運営まで続けて作ります。

制作事例 シーンは紹介ページに載っている実際の制作事例イメージです。

どんな状況で見ればいいのか

  • ブランドの第一印象をウェブでより鮮明に見せたいとき
  • スクロールに沿って話が続く構成でナビゲーションからお問い合わせまでご案内したいとき
  • モバイルでタッチと読書に合った画面が必要で、アクセシビリティも一緒に手に入れたいとき
  • 検索に必要なコンテンツ構造や管理者機能、問い合わせ連動、運営まで一箇所で決めたいとき

始める方法

サイト上部のSERVICEメニューから インタラクティブウェブに入ると、紹介ページが開きます。ページの下部には、プロジェクトを話すボタンと、まず制作範囲と予算を調べるリンクがあります。

  1. 視線をつかむ:ブランドの最初のシーンを作成します。
  2. 話を続けて:スクロールに合わせて情報を表示します。
  3. アクションでつながる:ナビゲーションからお問い合わせまで自然に案内します。

企業とブランドのホームページ構築が気になる場合 ホームページ制作 紹介も一緒にご覧ください。

使用方法と環境

制作範囲は紹介ページに沿って企画、デザイン、開発に加え、モバイル最適化、アクセシビリティ、検索対応、管理者機能や運営まで行われます。実際のビジネスに必要な範囲は、プロジェクトごとにまとめると案内されています。

映像字幕専門(6シーン)

見るだけで十分でしょうか?

ウェブサイトが見るだけで十分かどうかを尋ねて、ブランドを経験させようという言葉で映像が始まります。

スクロールストーリーテリング

スクロールするとシーンが変わり、話が続きます。探索からお問い合わせまで自然に案内します。

指先に反応する立体感

指先に反応する立体感で、製品やコンテンツをより近づけます。

モバイルとアクセシビリティ

モバイルでは、タッチと読み取りに合わせて動きを調整し、アクセシビリティまで一緒に設計します。

ブランドごとに異なる第一印象

異なるブランドに合わせたデザインを企画から開発、運営まで続けて作ります。

次回覚えるウェブサイト

次に覚えているウェブサイトをあなたのブランドから始めようという言葉で映像が終わります。

よくある質問

インタラクティブウェブサイトは何を作るサービスですか?

スクロールに反応するシーン切り替え、パララックス、3Dインタラクションでブランドを経験させるウェブサイトを企画、デザイン、開発するサービスです。モバイル最適化、アクセシビリティ、検索対応、管理者機能と運用まで一緒にします。

モバイルでも同じ動きが出ますか?

モバイルでは、タッチと読み取りに合わせて動きを調整します。デバイスの動作を減らす設定を尊重し、キーボードでもコンテンツを閲覧できるようにすることを紹介ページに案内しています。

制作範囲はどのように決めますか?

検索に必要なコンテンツ構造から管理者機能、問い合わせ連動、運用まで、実際のビジネスに必要な範囲をまとめています。紹介ページで、制作範囲と予算を最初に確認することもできます。

私たちのブランドの最初のシーンを紹介ページで確認してください

BlueCanvasインタラクティブWeb紹介ページでスクロールシーンの切り替え、立体反応、モバイル対応と制作事例を確認できます。

インタラクティブWebの紹介を見る

他のショットインサイト

ショートフォームのインサイト 全て表示→