スピッカートでは、Webサイトでサービスや会社の「世界観」を表現することを大切にしています。
サービスや会社が大切にしている価値観や事業への想い、雰囲気など、他にはない「らしさ」を丁寧に形にすることで世界観が生まれ、サイトを訪れただけでその魅力が伝わります。
これらを伝える手段のひとつが、アニメーションやインタラクションなどの“動き”の表現です。
例えば、スクロールに合わせて要素が浮かび上がる動きや、ふわっと現れて視線を誘導する表示アニメーション、マウス操作に反応して要素が軽やかに動くインタラクションなどがあります。こうした動きは単なる装飾ではなく、サイトの世界観を補強しながら、ユーザーが内容を自然に理解できる流れをつくります。
“動き”は、デザインを魅力的に見せるためだけでなく、サイトの世界観や意図を伝えるうえでも大切な要素。そしてスピッカートは、そうした動きを活かした表現が得意です。
今回は、「スピッカート流、世界観を表現するために実装で心がけていること」について、実際のサイトを例にご紹介します。
昭和工業さま
【サイトコンセプト】
蛇口をひねればきれいな水が出てくること。使用した水が下水道を通って再びきれいに循環すること。こうした日常の「当たり前」は、実際には多くの人の管理や清掃によって支えられています。本コンテンツは、その存在を過度に堅い説明ではなく、親しみを感じられる形で伝えることを目的として制作しました。
水の流れを想起させる「なみなみ」の動きによって循環を表現し、アイソメトリック（立体を斜め上から見たような視点で描くイラスト表現）なイラストを常に動かすことで、見えない場所で継続的に管理・清掃が行われている様子を視覚的に伝えています。
また、ポップなホバーインタラクションや要素の表示アニメーションを取り入れることで、堅くなりすぎない親しみやすい体験設計としています。
結果として、水を巡らせる仕組みと、それを支える人の存在を、視覚的かつ体験的に理解できるサイトとなりました。
伊藤農園さま 採用サイト
【サイトコンセプト】
制作を進める中で印象的だったのは、スタッフの皆さんが持つ「人のあたたかさ」でした。クレドが現場に浸透し、同じ方向を見て業務に取り組まれている姿が強く印象に残っています。本サイトではその空気感を伝えることをテーマに、みかんに向き合うスタッフの姿に焦点を当て、自然の豊かさと人のあたたかさを感じられる表現を目指しました。
Web上ではスクロールに合わせてみかんやドットが浮かび上がる演出により、サイト全体でみかんを想起させる構成としました。また、要素はふわっと現れる動きにすることで、柔らかくあたたかな印象を演出しています。
ファーストビューではコピーのみをアニメーションで表示し、メッセージを印象づける設計としました。さらに写真にはわずかな輝きの表現を加え、農園の太陽のまぶしさを感じられるようにしています。
これらの表現により、自然の恵みと、それを支える人のあたたかさを視覚的・体験的に伝える構成としています。
あすかのサマバケさま
【サイトコンセプト】
明日香村の風景や空気感を感じられる世界観を大切にしながら、主役である子どもたちやその親御さんに自然と届く、やさしく親しみやすいデザインを目指しました。
石舞台古墳や猿石など、明日香村の風景に溶け込む“石”をモチーフに、少し不思議でどこか懐かしい印象を持つビジュアルを構成。石が転がり、重なり合うようなイメージを取り入れ、子どもたちや人々の関わり合いを感じられる表現としています。
全体として、明日香村らしい穏やかで温かい雰囲気を感じながら、楽しく参加したくなるような軽やかさと親しみやすさを備えたデザインにまとめています。
MVに配置されているロゴでは、文字同士がぶつかり合いながら少しずつ磨かれていくようなアニメーションを取り入れ、石をモチーフとしたコンセプトを動きの中でも表現しています。さらに、石ひとつひとつに異なる動きを与えることで、それぞれの個性が集まり、にぎやかな場が生まれていく様子を表しました。
全体のモーションは、あえて少しカクカクとしたポップな動きを取り入れ、子どもたちが集まるイベントらしい楽しさや軽やかさを演出しています。にぎやかで親しみやすい雰囲気の中に、明日香村にしかない、自然のおおらかさと歴史が混ざり合う不思議な世界観を表現しています。
株式会社セキュリティさま
【サイトコンセプト】
専門性の高いサービスを扱うサイトでありながら、安心感と親しみやすさを感じられるビジュアルを意識してデザインしました。営業後にWebサイトを閲覧される方が多いことを踏まえ、社長やスタッフの顔が見える写真を活かし、信頼感と相談しやすさが伝わる雰囲気を大切にしています。
また、防犯カメラというテーマにありがちな“堅くて怖い”印象を和らげるため、オリジナルキャラクターを随所に取り入れ、やわらかく親しみのある印象に。全体として、専門性を感じさせながらも、気軽に相談できる安心感のあるトーンにまとめています。
監視カメラのサービスを扱うサイトの特性を活かし、サイト内のアニメーションにも「監視カメラの視点」を感じられる演出を取り入れました。ホバー時の動きや画像表示のモーションには、カメラが対象を捉えるような表現を実装。さらに、画面に現れる監視枠はGifアニメーションでゆっくりと表示させることで、防犯サイトにありがちな緊張感を和らげ、やわらかな印象になるよう工夫しています。
また、営業時にWebサイトを見せながら説明する場面も想定し、楽しく愛着を持ってもらえる仕掛けも取り入れました。スクリーンセーバー機能を設けるほか、右上のオリジナルキャラクター「防犯カメラくん」がマウスの動きに合わせて首を振るインタラクションを実装。
実用性だけでなく、遊び心のある体験も加えることで、印象に残るサイトとなるよう設計しています。
AICHLERさま
【サイトコンセプト】
AICHLERの住まいが持つ上質さと、人の暮らしのあたたかさが伝わるよう、落ち着いたトーンでデザインしました。写真は人の気配や生活の温度が感じられるものを選び、ブランドの世界観を視覚的に表現しています。
土地を象徴する“四角”のエレメントには神戸の自然をイメージした色彩を用い、写真と連動して展開することで、土地から物語のある家づくりが生まれていく様子を表現。また、モノクロからカラーへ移り変わるビジュアルにより、住まいと暮らしが時間とともに色づいていく過程を演出しています。
写真はモノクロからカラーへと移り変わる表現を取り入れ、住まいと暮らしが時間とともに色づいていくイメージをモーションで補強しています。 また、デザインモチーフである“四角”のエレメントを写真の表示と連動して展開することで、土地から物語が広がっていく世界観を表現しました。
モーションは全体的にゆったりとしたフェードや移動を中心に設計し、住宅ブランドとしての落ち着きや上質な雰囲気を損なわないよう配慮しています。
最後に
アニメーションやインタラクションは単なる演出ではなく、デザインやコンセプトをより伝わりやすくするための手段のひとつです。
スピッカートでは、サイトごとの目的や世界観に合わせてモーションを設計し、ブランドの価値やストーリーが自然と伝わるWebサイトづくりを心がけています。
サービスや会社の「らしさ」を丁寧に掘り下げ、それをデザインと実装の両面から形にしていくこと。それが、私たちの考える「スピッカート流、世界観を表現するWebサイト制作」です。
世界観を大切にしたWebサイト制作や、アニメーションを活かした表現についてご興味がありましたら、ぜひお気軽にお問い合わせください。