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

関連記事

  1. Web関連

    基本中の基本!webで行う品質を上げるための対策3か条!

    Webサイトのデザインを制作しているとよくあるのですが、いかにカッコイ…

  2. Web関連

    初心者WEB担当者が勘違いしてるUI/UX

    最近、散歩がマイブームになりつつあるIAの加藤です。街を、散歩…

  3. Web関連

    ITやWebの力を1番借りたい業界は、観光業界かも?

    あらゆる業界でWebはもちろんのこと、ITの活用やIoTへの取り組…

  4. Web関連

    楽にできる?!レスポンシブWEBデザイン

    皆さんもスマホ対応しなければと思い、ホームページをリニューアルされ…

  5. Web関連

    【ホームページ制作】UI設計の基礎の基礎!WEBサイトに必要不可欠なナビゲーション5種類

    多様化を極め飽和状態にあるWEBデザイン。どんなにカッコイイサイトでも…

  6. Web関連

    Webサイト売上げアップに使える”行動心理学” その4

    みなさんは、個人が個人に物を売るECサイトがあることを知っていますか?…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    使わなくなったPCを再利用するためにLinux Mintをインストールします
  2. Web関連

    和とパララックスデザインから生み出される魅力
  3. Web関連

    売れるキャッチコピーを作る法則とは…
  4. AIさくらさん

    アフターコロナのニューノーマルはAI×非接触か?
  5. Web関連

    売り上げ(コンバージョン・問い合わせ数)を上げたい
PAGE TOP