2024.02.20 - Tue
アニメーションを取り入れたホームページデザイン【厳選12社】
「スタイリッシュ」に動く！デザイン事例
ジェイエムシー 株式会社
https://www.jmc-ltd.co.jp/ （制作：株式会社リーピー）
斜めに開くローディングから始まり、トップ画面ではキャッチコピーにかかった青いグラデーションが滑らかに動きます。スクロールに合わせて緩やかな線が流れたりと、目線を誘導させる要素が満載です！
制作実績ページ：『ジェイエムシー株式会社｜採用サイト・求人サイト｜制作実績｜株式会社リーピー』
株式会社 キャリアスカウトジャパン
https://www.careerscout.co.jp/（制作：株式会社リーピー）
鋭い斜めのラインアニメーションが要所で活用され、インパクトのある印象を感じます。さらに、スクロールに合わせて画像が優雅にスライドする美しい演出も際立っていますね。テーマカラーをアニメーションに組み込むことで、より視覚的にアピールすることが可能です！
制作実績ページ：『株式会社キャリアスカウトジャパン｜コーポレートサイト｜制作実績｜株式会社リーピー』
株式会社 HPS Link
https://hps-link.com/ （制作：株式会社リーピー）
パズルのように切り替わるスライドショーの一部にコンテナの画像が組み込まれいる演出がとってもユニークです。他にも逆方向の横スクロールアニメーションを掛け合わせることで、物流のイメージを一層魅力的に描き出しています。
制作実績ページ：『株式会社HPS Link｜コーポレートサイト｜制作実績｜株式会社リーピー』
「ポップ」な動きが楽しい！デザイン事例
オリザ油化 株式会社（オリザの米油）
http://komeabura.life/（制作：株式会社リーピー）
油を連想させるような水面のアニメーションが目を惹きます。さらに、製品が軽やかに浮かび上がったり、吹き出しが弾むように登場するなど、リズム感あふれるウェブサイトです。
制作実績ページ：『オリザの米油（オリザ油化株式会社）｜ブランドサイト・サービスサイト｜制作実績｜株式会社リーピー』
瑞浪市観光協会
https://xn--w0w51m.com/（制作：株式会社リーピー）
カラフルな装飾があしらわれた、ポップで賑やかなデザイン。重なり合った画像が奥行きを感じさせ、眺めているだけでワクワクするようなサイトです。写真や装飾が躍動感あるアニメーションで動くことで、ユーザーの興味を引き立て、サイトの魅力が一層際立っています。
制作実績ページ：『瑞浪市観光協会｜特設・プロモーションサイト｜制作実績｜株式会社リーピー』
みんなのハチドリ（認定特定非営利活動法人ぎふハチドリ基金）
https://minnano-hachidori.jp/ （制作：株式会社リーピー）
タイルのアニメーションは、異なる動きのパターンを持ち、愛らしいおもちゃのような魅力を放っています。また、慣性スクロールの活用により背景の雲が生き生きと動くような効果や、鳥や植物がゆったりと揺れる美しいアニメーションが楽しめます。
制作実績ページ：『認定特定非営利活動法人ぎふハチドリ基金｜ポータルサイト・メディア・情報サイト｜制作実績｜株式会社リーピー』
株式会社 アルファ・パートナー
https://www.alpha-pt.co.jp/ （制作：株式会社リーピー）
斜めに流れるスライドショーの写真と、ぽわんと浮かび上がるイラストを組み合わせることで、企業の雰囲気を伝えつつ柔らかい印象につなげています。マウスをかざすと、文字やアイコンが躍動的に浮かび上がり、細部にまでこだわったデザインが楽しめますよ！
制作実績ページ：『株式会社アルファ・パートナー｜コーポレートサイト｜制作実績｜株式会社リーピー』
しみず整形外科リハビリクリニック
https://www.shimizuseikei-clinic.com/ （制作：株式会社リーピー）
症状ごとに用意されたイラストには、カードをめくるような動きをつけたり、吹き出しがポップに浮かび上がるアニメーションが施され、親しみやすさを感じます。遅延して表示されるアニメーションは、ページの中でもアクセントとして引き立っています。
制作実績ページ：『しみず整形外科リハビリクリニック｜コーポレートサイト｜制作実績｜株式会社リーピー』
ゆったりとした動きで「エレガント」な印象を与えるデザイン事例
宿いとう（株式会社 十八楼）
https://yadoito.18rou.com/ （制作：株式会社リーピー）
ゆっくりと浮かび上がる写真や文章から、上品なイメージがありますよね。また、パララックス（視差）効果がサイトの奥行きを強調して、引き寄せられるような感覚を生み出しています。
制作実績ページ：『宿いとう（株式会社十八楼）｜ブランドサイト・サービスサイト｜制作実績｜株式会社リーピー』
クラフトコーポレーション
https://craftcorp.jp/ （制作：株式会社リーピー）
豊富な写真を活用し、多彩なアニメーションで魅力を引き立てて、まるで雑誌をめくるような楽しさを提供しています。ボリュームのあるページにも動きを加えることで、ユーザーが持続的に楽しむことができるホームページとなっています。
制作実績ページ：『クラフトコーポレーション様｜コーポレートサイト｜制作実績｜株式会社リーピー』
ボリーナ アヴァンティ（株式会社TKS）
https://bollina.jp/avanti/ （制作：株式会社リーピー）
ウェブサイト内をスクロールすると画像が優雅に動くことで、洗練された印象を受けますね。ゆっくりとしたアニメーションは、時が緩やかに流れるような感覚を提供できるため、文章や写真を際立たせたい場合に効果的です。
制作実績ページ：『ボリーナ アヴァンティ（株式会社TKS）｜LP（ランディングページ）｜制作実績｜株式会社リーピー』
アーバナイズ株式会社
ローディングやページ移動するときに遷移アニメーションをつけることで、ホームページをよりリッチなものに見せています。スクロールごとにふわりと現れる要素は、ホームページに緩急をつけ余韻を持たせてくれます。
アニメーションを有効活用することで、より魅力的なウェブサイトに
いかがでしたでしょうか？
サイトの雰囲気に合わせたアニメーションを取り入れることで、ウェブサイトをより魅力的に伝えることが可能です。
当社ではホームページ制作経験が豊富にございますので、ホームページ作成・リニューアルなどをお考えのご担当者様は、ぜひリーピーへご相談ください。
また当社では、売上げ向上を踏まえた戦略的Webサイト制作はもちろん、専属デザイナーによる「視覚的デザイン」を取り入れたホームページのご提案も行っておりますので、
- 競合とホームページから差をつけたい！
- ワンランク上の法人向けサイトを開設したい！
- その業界において「地域No.1」を目指したい！
という企業の方は、ぜひ一度リーピーのWebサイト制作にお任せください！
※ご紹介しているサイトの中で、「（制作：株式会社リーピー）」と書かれたサイトは当社の制作実績です。その他のサイトは当社の制作実績ではございませんが、デザイン性などが優れているため、事例としてご紹介させて頂きました。制作をされた制作会社様で、掲載の取り消しをご希望の場合は速やかに対処いたしますので、当社までご連絡くださいませ。
