Web関連

パララックスデザインのサイトって使いにくくない?

0

結構こなれてきた感もあって、あちこちで見かけるようになったパララックスですが、正直なところ、扱いにくいな…
なんて思った事はないでしょうか。作るのになかなかの手間が掛かる割に、効果はどうなのか?
ユーザーはどう思っているのか?そこの所を考えていきます。

パララックスの集大成

pararaxyoshida_15062001.pnghttp://www.world-of-swiss.com/ja

スイスの航空会社SWISSのサイトです。
いやー、よく作り込まれています。動画が随所に効果的に配置され、全体的に美しくまとまっている良いサイト。すごいなぁと思うんです。これだけの情報量をまとめて、上手くパララックス上で表現するのって、並大抵の事ではありません。
どんな風に設計して、どんな構成書いたんだろう?と制作風景を見てみたくなります。

ただ、ここで意地悪言ってしまうんですが、これ、パララックスにする必要ないんじゃないですかね。
パララックスにしては情報が多いので、全体が見渡しずらく、目的の物を見つけようと思ったときには、立ち往生してしまいます。
「ちがうんだ!SWISSの世界観を感じてくれよ!航空会社としてのブランディングを…操作性は二の次だ!」という制作側の声が聞こえてきそうです。
そう、話題性も狙っているでしょうし、このコンセプトはありで、パララックスの良い成功例だと思います。
FWAのSITE OF THE DAYとってますし。
ただ、我々が陥ってはいけないのが、そこにユーザー目線があるのかと言う事です。
SWISSカッコイイから、同じようなパララックスデザインのサイトを作りたい…なんてかっこよさ先行でサイトを作ろうとするとまずいと言う事です。

パララックスデザインでサイトを作る理由

pararaxyoshida_15062002.jpg

なぜパララックスを使うのかと言えば、ズバリ!人目を惹きたいからですよね。それ以外の理由はないはずです。
ダイナミックな動きで人目を惹く、そしてその先どうするのか?重要なのはここです。
エフェクトにこだわり抜いて、他にはない動きをするパララックスデザインのサイトを作っても「面白い動きのサイトだったなー」で終わってしまったら何の意味もありません。
昔Flashアニメーションが流行りはじめた頃、Flash、Flash言うクライアントを揶揄して「子猫みたいですよね」と代理店の方が言っていたのを思い出します。とりあえず動く物に飛びつくという…。それではいけないわけです。
きちんとユーザーに何を感じさせたいのか、どんな行動を取らせたいのかを決めて、それに基づいて設計しましょう。

最低限のユーザビリティを

スクロールすれば動きがあるパララックスですが、中にはそのスクロールに気づけないような、不親切なサイトもあります。
一画面で完結しているように見えて、どこもクリックできない。よく見ると、小さく↓の矢印が…
または、スクロールで発動するトリガーが遅く、数回まわして初めて動きがある…と言ったサイトもあります。
せっかくこだわりの動きを作ったのに、ユーザーに気づいてもらえなかったらお終いです。
↓の矢印を上下に動かすアニメーションを付ける、ちょっとだけ自動でスクロールさせるなど、スクロールを促す仕掛けをきちんと付けて、サイトを訪れたユーザーが確実に見てくれるようにしましょう。
また、長大なスクロールを項目毎にショートカットするナビゲーションも必要です。
最近のパララックスサイトにはほとんど付いていますが、これが無いとホイールを延々と回し続けなければなりません。

「パララックスは、ユーザビリティが良くない」という事を念頭に置いて、ユーザーが不自由することなく操作できる仕組みをきちんと設けることが重要です。

0

サイトの骨格、ワイヤーフレームとは前のページ

紙媒体のものから電子○○へ次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新しい販売形態であるDtoCについて考えてみる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    1から調べてみた「SDGs」について

    皆さんは「SDGs(エスディージーズ)」という言葉を聞いたことはありま…

  2. Web関連

    今さら聞けない、Google タグマネージャ活用方法

    こんにちは。育児に家事に大忙しのディレクター、望月です。今…

  3. Web関連

    離脱されないECサイトに必ずある9つのポイント

    最近一人暮らしを始めてから、食糧からマンガ、家具までほとんどネットで購…

  4. Web関連

    顧客満足度向上ってどうすればいいの?仕事をとおして学んだこと

    最近、CS推進や顧客満足度向上のために対策を行う企業も増えてきました。…

  5. Web関連

    LINE ~拡大するコミュニケーション~

    リアルタイムコミュニケーションとは?近年、電話や電子メールに代わる新…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    業界のWebトレンド調査!スポーツ用品メーカーのサイトについてまとめてみました
  2. Web関連

    初心者WEBデザイナー必見!アイデアを引き出すための秘訣3選
  3. Web関連

    動画コンテンツは一般ユーザーには響いてなかった!
  4. Web関連

    これだけは覚えておいてほしい、地味に使えるExcelの時短ワザ3選。
  5. Web関連

    どうしても目に留まっちゃうアメコミ風企業サイトまとめ!
PAGE TOP