• ホーム
  • このブログについて
  • Flipsについて

Flips Blog Web担の小技

ウェブ担当者の為の小技&小ネタ

あぁこれがパララックス効果の使い方かと納得のパララックスWebデザイン7つ

0
  • 投稿者: Yamada_nt
  • カテゴリー: Webデザイン
  • — 2014年01月25日

パララックス効果

今回は、パララックス効果を用いた結果、口コミで広がり、海外でもわりと多くのシェアを誇るサイトを7つご紹介。

実は2014年のトレンドの一つとして、海外では

  • 表示速度をあげる
  • 六角形(蜂の巣)
  • 軽量化
  • 最小限
  • モバイルファースト
  • コンテンツ最優先表示

というのが上げられていまして、もしかすると今年パララックスは減少傾向になると予測されています。
しかし、コンテンツ最優先表示では、いまだパララックスがもっとも適しているとも言われ、判断が難しいところです。また、これは海外の事情でして、日本では最小限というWebサイトが成功しているところが驚くほど少なく、今年も日本独自のテキスト大量主義は変わらない気がします。

日本人は、短いキャッチコピーよりも、たとえ少し長くなっても、感情を動かされるテキストを愛する傾向にあるんですよね。

クリエイティブなパララックス7つ

3-on-3 | Longform – SI.com

3-on-3 | Longform - SI.com

3On3の紹介ですが、躍動感が半端ないですね。
正直、いままで色々なパララックスを取り入れてきたサイトを見てきましたが、これは「あ、これがパララックス効果のある意味正しい使い方か」と納得するほどのものです。

パララックス効果のメリットが、スクロールによって大きなフルスクリーン画像を、テキストとテキストの間に埋め込むことが出来るという利点ですが、これを最大限に引き出している秀作です。
普通のページでは、これほどまでの躍動感は演出できないと思いますので、すごく参考になりますよ。

 

Alee Foroughi – Portfolio

aleeforoughi

フリーのグラフィックデザイナー、ALEE Foroughi氏のポートフォリオサイト。

パララックス体験の一つとして、works(仕事)の情報にスクロールが到達した時、これまで作成してきたロゴ、Webサイト、ブランドの数がカウントされ始めます。これは非常にインパクトがあって面白いですよね。
また、滑り出しのところで、パララックスがアクセントとして入っていると、最後までスクロールしてみようかなと思わせる吸引力があります。

 

ASCAP 100 Years in 100 Days: Film, Song and Interactive Timeline

ASCAP 100 Years in 100 Days: Film, Song and Interactive Timeline

年代をパララックス効果に落とし込んだアイデア。
ただ、年代ごとにスクロールが到達してから読み込みを開始するため、若干表示にラグがあり、テンポが少し遅れてしまうのが残念。

 

Klaus

Klaus

このページの素晴らしいところは、パララックス効果を全面に出すのではなく、あくまでもポイントごとにさり気なく演出しているところ。
実は少し前まで、全体的に躍動感のあるパララックス効果を取り入れていたページだったんですが、リニューアル後、ごくわずかなポイントごとにパララックスを導入するようになっていました。このリニューアル、非常にクールだなぁと感じた次第です。

 

Laura Pausini Official Site

Laura Pausini Official Site

スクロールが表示ウィンドウごとに進むスタイル。
なにげなく、トップのこの画面。人にマウスを当てると人にフォーカスがあたり、背景のテキストっぽいところにマウスを当てると、背景にフォーカスが移動するんですが、これも素敵ですよね。

 

Visual history of computing by Akita Systems

Visual history of computing by Akita Systems

2010年から、10年ずつ遡っていく形のWebデザイン。やっぱり年代系の使い方としては、パララックスが非常に役立つように見えます。
テキストが複雑ではないため、Google翻訳しても普通に日本語で閲覧出来ます。

 

First Aid Dorset (UK) – First Aid Training Courses

First Aid Dorset

最後はこちら。

パララックス効果の王道的な使い方です。
あくまでもテキストがメインであり、そのテキストを読み進めるところで、内容に沿ったイメージ画像を入ってくるというもの。

こうしてみると、ブログのように、テキストばかりの内容でも、途中に画像が入ってくるだけで読みやすくなるという利点を、上手くパララックスに活用しているところがわりと海外ではよく紹介されているような気がします。

それでは、また。

 

 

このエントリーをはてなブックマークに追加
Pocket

Share

タグ: CSSデザイン

Flips 手軽に始めるビジネスホームページ

— Yamada_nt

1999年より、Web制作、ウェブサイト運営支援を行なっており、Web担当者へお勧めの情報を共有しています。2007年より「ホームページを作る人のネタ帳」というブログをはじめ、現在はプロブロガーとして生活。 2008年、アルファーブロガーアワード受賞。 全国各地でブログセミナーや、サイト運営に関する様々な運営ノウハウセミナーなども行なっております。

  • 前の記事 企業ブログの記事は短いほうが良いのか長いほうが良いのか?
  • 次の記事 一度は読んで頭に叩き込んでおきたい惹きつけられる5つの読み物

関連する記事

  • HTML5UP 20以上のレスポンシブ対応の無料htmlテンプレート HTML5UP 2014年05月15日
  • オススメフォント 個人的ベスト|フォント好きの為のフォント、2015年版 2015年10月29日
  • 404エラー 404ページが可愛くて、トップページよりアクセスが高いと話題に 2014年08月31日
  • SVGロゴファイル SVGファイルの設置方法とSVGロゴをだらだらと見ていくことができるSVGロゴコレクションサイト 2015年07月15日
  • 新しい記事

    • 新着記事
    • タグ
    • クリエイターInstagramアカウント海外で人気のデザイナーのInstagramアカウント2016年5月24日
    • スワイプ対応レスポンシブでスワイプをサポートしているjQueryカルーセルプラグイン2016年5月13日
    • サイコロブロガーが陥る「サイコロのふりすぎ」と「時間の使いすぎ」問題2016年4月30日
    • デザインエディタ最近見つけたBeFunky Photo EditorとかいうWebフォトエディタサービスがスゴイ2016年4月29日
    • 新入社員研修とある新入社員研修の無駄なこと無駄なこと・・・2016年4月26日
    • Adobe CSS Excel Facebook Google Illustrator JavaScript jQuery Mac Photoshop SEO SVG お知らせ アイコン インスピレーション エクセル サイト運営 サービス デザイン パワーポイント フォント フラットデザイン フリーソフト ブログ プレゼン マーケティング ライフハック 中小企業に訊く 便利 文章術 素材 運用
  • 記事の検索ができます

  • 人気記事

    • 国内人気のクレジット不要、商用利用可の無料素材サイト24+シェアランキング
    • 2015下半期Webデザイナー、ディレクターなら絶対読んでおかないと後悔する厳選記事まとめ
    • 今度こそ3日で覚えるパワーポイントテクニック集、デザイン、表現力アップまとめ
    • 配色センスが全くない?それならマテリアルパレットをちょっと使ってみて?
    • 適切な伝え方|とにかく人にものを伝えるのが苦手な人が一度は読むべき5つのコツ
    • 20以上のレスポンシブ対応の無料htmlテンプレート HTML5UP
    • 無料素材のチョークデザイン100個|バッジ、リボン、インフォグラフィクス等
    • 2014年版ブログにトラフィックを集める7つの方法
    • ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事
  • アーカイブ

  • Twitter

    @flips_jp からのツイート
  • Facebookページ

  • 最近の投稿

    • 海外で人気のデザイナーのInstagramアカウント 2016年5月24日
    • レスポンシブでスワイプをサポートしているjQueryカルーセルプラグイン 2016年5月13日
    • ブロガーが陥る「サイコロのふりすぎ」と「時間の使いすぎ」問題 2016年4月30日
    • 最近見つけたBeFunky Photo EditorとかいうWebフォトエディタサービスがスゴイ 2016年4月29日
    • とある新入社員研修の無駄なこと無駄なこと・・・ 2016年4月26日
  • カテゴリ

    • Chrome
    • JavaScript
    • SEO
    • Webデザイン
    • おしらせ
    • サイト運営のコツ
    • サービス
    • ソーシャルメディア
    • テンプレート
    • フリーソフト
    • フリーフォント
    • プレゼン資料の作り方
    • ライフハック
    • 未分類
    • 無料アイコン
    • 無料素材
  • サイト内検索

© Copyright 2019 Flips Blog Web担の小技. Typegrid Theme by WPBandit.