ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

【WEBデザイン10選】ページ遷移のエフェクトが心地よいサイトまとめ

  • WEBデザイン

近年のWEBデザインを見ると、フラットデザインやレスポンシブWEBデザインなどの流れもあって、よりシンプルに、そしてすっきりした作りのサイトが増えています。このようなトレンドはマルチデバイスへの対応にも適していると言えますが、結果的に似たようなデザインのサイトが多くなり、シンプルである分、個性やインパクトに欠けてしまいがちです。

そこで、そのような欠点を補うために増えてきたのが、さりげないアニメーションやパララックスが施されているサイト。センスの良いものを多く見かけます。今回はそんな中でも「ページ遷移時のエフェクト」に注目して、心地よいエフェクトでページが切り替わるサイトをまとめてご紹介します。

iRobot ロボット掃除機ルンバ スペシャルサイト

01
http://www.irobot-jp.com/roomba/800series/

業種:家電
サイトの目的:製品紹介サイト
サイトの特長:パララックス

ロボット掃除機ルンバ の最上位機種、800シリーズを紹介するスペシャルサイトです。トップページにあるEnterをクリックすると、画面が立体的にキューブのように回転してページ遷移。さらに、そのページの下部にあるNextを押すとルンバが登場。掃除をし終わるとページが切り替わるという凝った作りになっています。他にもパララックスの処理が効果的に使われており、クオリティーの高いサイトになっています。

小浜こども園

01
http://obama-kodomoen.jp/

業種:幼稚園、保育園
サイトの目的:園紹介サイト
サイトの特長:フラットデザイン、イラスト

長崎県にある幼保連携型認定こども園のWEBサイトです。ページ遷移の際に、園のロゴマークをローディングで表示。さらに、そのマークが上から落ちてくるというアニメーションがつけられています。アイコンやイラストを使って、かわいいテイストにまとめられたページデザインに、このエフェクトがよく合っており、サイトの楽しく明るい印象をより強調しています。

株式会社ブリッジコーポレーション

01
https://www.bridge-net.co.jp/

業種:ITサービス
サイトの目的:コーポレートサイト
サイトの特長:アニメーション

京都にあるIT企業のコーポレートサイト。どの画面でもシンボルマークのごく一部だけが見えていて、グローバルメニューをクリックすると、そのマークが大胆なアニメーションで登場。その後、ページ遷移をするという作りになっています。白ベースで、差し色にシンボルマークのオレンジが使われたシンプルなデザインの中で、ダイナミックなページ遷移のアニメーションが躍動感を生み出しています。

株式会社アーキタイプ

01
http://www.archetyp.jp/

業種:クリエイティブ
サイトの目的:コーポレートサイト
サイトの特長:レスポンシブWEBデザイン

東京にあるWEBアプリケーション制作会社のコーポレートサイト。ページごとに、奥から手前にフェードインするような動きや、その逆、さらにはキューブがぐるっと回転するような動きなど、様々なエフェクトを効かせながらページ遷移するようになっています。基本はスッキリとしたレスポンシブWEBデザインのサイトで、それらの動きが良いアクセントになっています。

FOURDIGIT DESIGN

01
http://4dd.jp/

業種:クリエイティブ
サイトの目的:コーポレートサイト
サイトの特長:レスポンシブWEBデザイン

こちらもWEBアプリケーション制作会社のコーポレートサイトです。このサイトのページ遷移は、グローバルナビゲーションのコンテンツをクリックすると、白い画面に設計図のように線が引かれ、その中にコンテンツが入っていくような凝った作りになっています。このページ遷移のエフェクトは、ただ動きをつけるだけではなく、ものづくりに対するこだわりやクオリティーの高さを感じさせるためにもプラスになっています。

Tokyo Mild Foundation

01
“http://tokyomildfoundation.com/

業種:クリエイティブ
サイトの目的:コーポレートサイト
サイトの特長:アニメーション

動画を中心にした映像プロモーション会社のコーポレートサイトです。モノクロのシックなトーンを基調にデザインされたサイトで、コンテンツをクリックすると、ローディングしてコンテンツ名が表示され、奥から手前にページの内容がフェードインされるという作りになっています。全体的に細かなアニメーション処理がされており、映像の専門集団らしさを感じさせるクオリティーの高いサイトに仕上がっています。

KENJI ENDO

01
http://kenjiendo.com/

業種:音楽
サイトの目的:アーティストの紹介サイト
サイトの特長:レスポンシブWEBデザイン、ワンカラムデザイン、パララックス

アーティストの紹介サイトです。ワンカラムのレスポンシブWEBデザインで、パララックス処理もされており、背景には大きく画像を使っているというWEBデザインのトレンドを集約したようなクリエイティブなサイトです。ページ遷移は、背景が先にフェードインし、その後コンテンツタイトルの文字が下から上にフェードインされるというもの。さりげない動きですが、スッキリしたサイトのデザインにあった効果的なエフェクトになっています。

夏井景子

01
http://natsuikeiko.com/

業種:料理研究家
サイトの目的:料理研究家の紹介サイト
サイトの特長:パララックス

料理研究家夏井景子さんの紹介サイト。アナログ感のある手書き文字やイラストを使い、女性らしさとかわいらしさを感じさせるデザインになっています。各ページの表示の際に、奥から手前に要素がフェードインするようなエフェクトが使われており、ページ遷移にエフェクトを設定したのと同じ効果を生み出しています。さりげないアニメーションで、主張しすぎないほどよい感じがサイトのテイストによく合っています。

Ayers Rock Boat

01
http://www.ayersrockboat.com/

業種:音楽イベント
サイトの目的:施設紹介
サイトの特長:パララックス

フランスの船上パーティーの紹介サイトです。凝ったアニメーションのページ遷移が施され、コンテンツをクリックすると、「船上」ということを表現するための波の背景イラストが上から下に表示され、その上にページの内容を表す写真やテキストが載っていくという2段階の作りになっています。船上パーティーという訴求s内容をうまく反映させた、ページ遷移のエフェクトになっています。

Coralie Castot Directrice artistique

01
http://coralie-castot.fr/

業種:クリエイティブ
サイトのコーポレートサイト
サイトの特長:レスポンシブWEBデザイン、パララックス

フランスのクリエイティブ会社のコーポレートサイトです。蜂の巣のような八角形を大胆に使ったサイトになっています。ページ遷移のエフェクトも、その八角形のモチーフが使われており、プロジェクトを見るボタンをクリックすると、画面に八角形が敷き詰められて、それが消えるとページの内容が現れるという面白い作りになっています。日本とはまた一味違うデザインテイストが、参考になります。

今回のまとめ

今回は、ページ遷移のエフェクトに注目してさまざまなサイトを見てきました。こだわりがあり、細部まで凝った表現をしているということで、今回の事例ではクリエイティブ系のサイトが多くなりました。しかし冒頭でも書いたように、シンプルでミニマルなデザインのサイトの中で、ページ遷移にさりげないエフェクトを取り入れることは、良いアクセントになり、印象にも残りやくなります。ぜひ今回紹介したようなサイトを参考に、ワンポイントだけでも取り入れてみてはいかがでしょうか?

<関連記事>
これは上手い!縦の文字組みを効果的に使ったサイトまとめ
【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ
【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」