Website demonstration

スライダーは長く使われている定番の機能で、サイトトップや事例など「注目して欲しい」コンテンツによく利用されます。スライダーに特殊なエフェクトを追加することでユーザーの興味を引き、伝えたいコンテンツへ円滑に誘導します。デモではドリンクのスライドショーに合わせて流体のように画像が切り替わるエフェクト効果を追加しました。

idea

テーマに合わせてさまざまなエフェクトで画像を切り替えたり、カルーセルやティッカーもひと味違った見せ方で注目を集めることができます。よくある機能にも工夫を加えることで上質なサイトに生まれ変わります。

型に合わせて遅延してスライドさせるとシンボルマークが浮かび上がる
カルーセルなら奥行きを使ったダイナミックな動きや、しなやかに湾曲させるなどさまざまな表現が可能です

SLIDER EFFECT

Ajaxサイトはページ全体を再読み込みせずに必要な部分だけを切り替えるため、表示がスムーズでストレスの少ない操作感を実現できます。ページ遷移にアニメーションを挟んでページ間をシームレスに繋ぎユーザー体験を向上。サイト全体の品質を底上げします。

idea

コンテンツの絞り込みや、タブ切り替え、ブログのページングなど、ベースになるUIは共通でコンテンツだけが切り替わるシーンは多々あります。更新する度ページトップに戻ってしまう煩わしさも、Ajaxで必要な部分だけを書き換えればストレスなくコンテンツを閲覧できます。

表現の点でも、例えば背景に流している動画を再生したままページ遷移させたりすることで、ページ毎の隔たりをなくしサイト全体で一つのアプリのように機能させることも可能です。

部分的にローディングすることでスムーズにサイトを閲覧できます
映像やアニメーションはそのままにページ遷移が可能

AJAX + PUSHSTATE

データと座標情報をリンクさせ可視化させます。デモでは人口データを日本地図にプロットし、人口の多さによってピンの大きさを段階的に調整しています。都市部と周辺地域の人口量を感覚的に掴むことができ、ピンをクリックすれば詳細情報を表示します。データはデータベースからでもエクセルから作成するcsvからでも取得できるので、現状のデータ管理に与える影響も最小限に留められます。

idea

地図は日本地図でなくても大丈夫。イラストマップと合わせて周辺の情報を表示させるキャンペーンサイトや、モールや商店街の案内や、地域のコミュニティサイト、地域戦略の見える化などにも。データをヒートマップのように表示したりとアイデア次第でさまざまな用途に使用できます。

イラストマップで周辺スポットやイベント情報を表示
投稿を地図にプロットして地域のコミュニティサイトへ
路線図に駅周辺の観光案内情報を追加
ヒートマップで表示してデータ分析に利用

DATA VISUALIZATION

360°を撮影する特殊なカメラで撮影した動画や静止画を表示させることができます。その場の臨場感や魅力、通常の写真では伝わらない細やかな情報までユーザーに届けサイト体験を向上させます。

idea

360°VIEWのバーチャルツアーは、物件の紹介や宿泊施設の案内などで利用すればその魅力をしっかりと伝えることができます。ほかにも観光地や、商業施設、イベントの紹介など使い所はさまざまです。

物件内覧に利用すれば、現地に行く前に高い精度で目星をつけることができます。確認したい箇所なども事前に想定しやすいので、実際の内覧もスムーズになります。
ECサイトに利用すれば、3D空間での新しいショッピング体験に。

360°VIEW

一つの動画データにさまざまな演出を施すことができます。ユーザー操作に合わせて演出を切り替えられるので複数動画を用意する方法ではできない、インタラクティブな表現を実現します。動画表現にアクセントを効かせ、サイトに彩りを添えます。

idea

例えばメニューやポップアップを表示中にはエフェクトを加えて状態をわかりやすくする使い方や、マウスポインターの周辺のみエフェクトを加えるなどという使い方もできます。映像だけでなくCG表現にも使用可能です。

VIDEO EFECTOR

たくさんの「点」をコントロールしてサイトの表現に使用します。「デジタル」「科学」「技術」などをイメージさせるような前衛的な表現でよく利用されます。デモは「点」が文字や画像を作り上げるような表現に利用しています。

idea

雪を降らせる、星や花火などを表現する、マウスポインターを追従する光の粒子など使い方はさまざまです。点は線になり面となるので、表現の主役にも優秀な脇役にもなります。あえて抽象的なイメージで伝える場合にも有効です。

ページを通して雪を降らせる演出で印象を深める
抽象的なモチーフの表現に利用

PARTICLE SYSTEM

スクロールに応じてデッサン画のような表現で画像コンテンツを表示させます。シンプルなフェードインに比べてユーザーの目を引き、表示する画像にもよって手作り感や馴染み深さを感じることができます。他サイトとはひとあじ違う表現で、自社のブランドを印象付けます。

idea

スプレーや筆のような表現に変更すれば、また違った表現も可能になります。「自社の事業に合う表現はないか」、「こんな表現はできないか」などお気軽にお問い合わせください。

SKETCH

マウスの動きやスマホでの画面タッチに合わせて波紋が立つ演出をスライドショーに追加しています。インパクトの強い演出で、「水」に関する事業内容などと関連づければユーザーの印象に強く残すことができます。

idea

ポイントはマウス（タッチ）座標に合わせた演出です。操作に合わせて独自の演出をすることでユーザーの印象に残りやすく、興味を引くことができます。「自社の事業に合う表現はないか」、「こんな表現はできないか」などお気軽にお問い合わせください。

WAVES

Presented by