ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

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

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

パララックス、アニメーションによる画面遷移、上質な動画…ミニマルデザインを飾る3つの要素

  • WEBデザイン

017年のWEBデザイントレンドも、引き続きシンプル・ミニマルなデザインが大きな流れを占める中、シンプルゆえに単調になったり、無個性になることを避けるための工夫を凝らすことが必須になってきています。例えば、メイン画像や動画のクオリティを高めたり、アニメーションやページ遷移時のエフェクトに凝ったり、サイト全体にパララックスを取り入れたりといったものです。

今回はこうしたクオリティや細部へのこだわりが活きているのあるサイトをご紹介します。自社のホームページにシンプル・ミニマルデザインをと考えている方はぜひ参考になさってください。

 

パララックスサイト

パララックスとは「視差効果」と呼ばれるエフェクトで、スクロールをするときに、複数のレイヤーにある視覚要素を異なるスピードで動かすことで視差を生み出し、立体感や奥行きを演出する手法です。すでに技法としては使われ慣れてこなれた感があり、「その応用」とも呼べるような新しいパララックスサイトも増えてきています。

 

TOKYO BASE CO.,LTD.

http://www.tokyobase.co.jp/

 

 

PEUGEOT

http://web.peugeot.co.jp/bluehdi/

 

DOOMSDAY

http://www.doomsdayent.com/

 

トップページの高品質なアニメーションや動画

 

デザインを極力までにシンプルにする代わりに、トップページにハイクオリティの動画やアニメーションを配置するサイトが増えています。そのクオリティ、メッセージ性、デザイン性の高さをもって、ブランドのなんたるかを語るのが狙いですので、各サイト力の入れようが半端ではありません。

 

STANDARD

http://standardfilms.tv/

 

TAKUMI HASEGAWA

https://tkmh.me/

 

アニメーションを活用したページ遷移・画面遷移

サイト内のページ遷移や画面の遷移の際に、ローディング時間を感じさせないようにするためのアニメーションのあしらいをするエフェクトは、いままでもたくさんありましたが、最近のWEBサイトにおけるアニメーション技術は次元が違うほどに進化しています。

サイト全体の画面遷移がすべてアニメーションで構成されているもの、アニメーションの動き自体が美しくアート性のあるものなどさまざまですが、昨今はさまざまなjavascript のプラグインも発表されているので、試してみるのもいいでしょう。

 

waaark

http://waaark.com/

 

Tokyo Mild Foundation

http://tokyomildfoundation.com/

 

まとめ

いかがでしたか。弊社のデザイナー・エンジニアの間でも最近話題になることが多いのがページ遷移・画面遷移に関するjavascript に関する事柄です。それだけシンプル・ミニマルなデザインにしたいが、作りは凝ったものにしたいと希望するクライアントが多いからかもしれません。

ぜひ自社サイトの作成、リニューアルの際の参考になさってください。

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  5. 5

    言葉に悩むあなたに。文章作成を助けてくれる便利ツール9選

  6. 6

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

  7. 7

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

  8. 8

    コンテンツマーケティングのお手本になる、企業オウンドメディア事例25選【2015年・BtoC編】

  9. 9

    【WEBデザイン10選】クリスマスから年末年始まで!「冬のキャンペーン」サイトまとめ

  10. 10

    【WEBデザイン10選】ナチュラルさが上手く表現されたWEBサイトまとめ

総合

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

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

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog
さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

ワンクリックに命がけのホームページ制作会社M-HAND