コラム
Webサイト制作において、とても効果的かつ重要度の高いもの（2020年2月27日配信）
クロスメディア部
◎ コラム ◎ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
UI・UXをより効果的にするために、重要なこと
—————————————————————————-
現在のWebサイトのデザインにおいて、
パララックス・マイクロインタラクションといった手法が、
UI・UXにおいてとても効果的、かつ重要度の高いと言われています。
パララックス・マイクロインタラクションという名前から
複雑なもののように感じてしまいますが、
皆様もきっとご覧になったことのある表現手法です。
パララックス・マイクロインタラクションとはどのようなものか、
また、どのような場面で用いられるているかなどについてご紹介します。
————————————————————————–
□パララックス・マイクロインタラクションとは？
————————————————————————–
聞いたことがあるような気がするけど、どういうものかわからない……。
「パララックス」と「マイクロインタラクション」とは、一体どのようなものでしょうか。
◆パララックスとは
日本語では「視差効果」とも呼ばれ、以下のような動きをするデザインを言います。
・スクロールに応じて、要素がフワッと現れるようにアニメーションをつける
・通常のWebサイトだとスクロールと一緒に背景や文章が動くところを、
あえて一部の要素だけスクロールの速度とズラして表わす
・紙芝居のように１枚１枚がめくりあがるような展開をつける
このような効果を導入することにより、Webサイトに変化や遊びをつけることができ、
アクセスしてくれた人を楽しませたり、
魅力的に見せることによってブランディング効果を押し上げたりなど、
様々なメリットがございます。
具体的には、もっとも見られるTOPページに使用する、
特設ページを効果的に見せる、といったケースに用いることができると思います。
（参考サイト：https://haniwaman.com/parallax/）
◆マイクロインタラクションとは
ユーザーのアクションに対する
フィードバックやステータスの変化を正しく伝えるための、細かなデザインのことです。
例にあげると、
・ボタンを押した時、そのアクションが正しく実行されたことを色やアイコンサイズに変化をつけて表示する
・動画など読み込みに時間がかかる際に、読み込み状況をユーザーに示す
このような、何かのアクションやステータスの変化をユーザーに伝えるためのデザインを言います。
また、お客様情報の登録時や商品を発注した際の内容登録時などにも応用できます。
（参考サイト：https://webdesign-trends.net/entry/7583）
これらの効果を用いることにより、
質感・触感を感じるようなwebサイトのモチーフになったり、
UXを高められるようなサイトを仕上げることができます。
————————————————————————–
□５Ｇ（第5世代移動通信システム）サービススタートでも期待
————————————————————————–
今春から５Ｇ（第5世代移動通信システム）サービスがスタートします。
それにより、Webサイトにおいても様々な変化が期待できます。
５Ｇの特徴は大きく３つ
１）通信速度の向上が著しく、今までの４Ｇの１０倍速くなります。
２）超低速遅延となり、インターネット回線・ビデオ通話・動画などにおいて
ダウンロードを待つことなく、すぐに見ることができます。
３）多数同時接続が可能となり、イベント会場やコンサート会場で回線がパンクする事態を防ぐことができます。
他にも様々な特徴があり、情報の伝達方法が大きく変化する
「コンテンツシフト」が起きようとしています。
動画のダウンロードに時間がかからなくなるため、
認知を獲得したい場合はユーザー数の多いYouTubeやLINEを動画の配信先として選択肢としたり、
購入や問い合わせなどの獲得目的であれば、
ターゲティング精度の高いFacebookとInstagram、Twitterを選択できるようになります。
1分間の動画が伝える情報量は１８０万語、
Webサイト３,６００ページ分に相当するとも言われています。
５Ｇによる変化で、さらなる可能性の広がりを見せるでしょう。
出版社での視点で考えると、
５Ｇとパララックス・マイクロインタラクションを掛け合わせることにより、
紙特有の質感あるアニメ―ションや、
試し読みページを手で触れたようにめくる表現ができるかと思います。
また、顧客の視点（求めている情報・使いやすさ）と
社内間の視点をうまく組み合わせることにより、さらに良い制作物を作られるようになるかと思います。
▼参考サイト
5Gで動画広告はどう変わる？市場動向と成功のノウハウを徹底解説 | 動画制作ツール RICHKA（リチカ）
https://richka.co/times/13592/
UI・UXをより効果的にするために、重要なこと
—————————————————————————-
現在のWebサイトのデザインにおいて、
パララックス・マイクロインタラクションといった手法が、
UI・UXにおいてとても効果的、かつ重要度の高いと言われています。
パララックス・マイクロインタラクションという名前から
複雑なもののように感じてしまいますが、
皆様もきっとご覧になったことのある表現手法です。
パララックス・マイクロインタラクションとはどのようなものか、
また、どのような場面で用いられるているかなどについてご紹介します。
————————————————————————–
□パララックス・マイクロインタラクションとは？
————————————————————————–
聞いたことがあるような気がするけど、どういうものかわからない……。
「パララックス」と「マイクロインタラクション」とは、一体どのようなものでしょうか。
◆パララックスとは
日本語では「視差効果」とも呼ばれ、以下のような動きをするデザインを言います。
・スクロールに応じて、要素がフワッと現れるようにアニメーションをつける
・通常のWebサイトだとスクロールと一緒に背景や文章が動くところを、
あえて一部の要素だけスクロールの速度とズラして表わす
・紙芝居のように１枚１枚がめくりあがるような展開をつける
このような効果を導入することにより、Webサイトに変化や遊びをつけることができ、
アクセスしてくれた人を楽しませたり、
魅力的に見せることによってブランディング効果を押し上げたりなど、
様々なメリットがございます。
具体的には、もっとも見られるTOPページに使用する、
特設ページを効果的に見せる、といったケースに用いることができると思います。
（参考サイト：https://haniwaman.com/parallax/）
◆マイクロインタラクションとは
ユーザーのアクションに対する
フィードバックやステータスの変化を正しく伝えるための、細かなデザインのことです。
例にあげると、
・ボタンを押した時、そのアクションが正しく実行されたことを色やアイコンサイズに変化をつけて表示する
・動画など読み込みに時間がかかる際に、読み込み状況をユーザーに示す
このような、何かのアクションやステータスの変化をユーザーに伝えるためのデザインを言います。
また、お客様情報の登録時や商品を発注した際の内容登録時などにも応用できます。
（参考サイト：https://webdesign-trends.net/entry/7583）
これらの効果を用いることにより、
質感・触感を感じるようなwebサイトのモチーフになったり、
UXを高められるようなサイトを仕上げることができます。
————————————————————————–
□５Ｇ（第5世代移動通信システム）サービススタートでも期待
————————————————————————–
今春から５Ｇ（第5世代移動通信システム）サービスがスタートします。
それにより、Webサイトにおいても様々な変化が期待できます。
５Ｇの特徴は大きく３つ
１）通信速度の向上が著しく、今までの４Ｇの１０倍速くなります。
２）超低速遅延となり、インターネット回線・ビデオ通話・動画などにおいて
ダウンロードを待つことなく、すぐに見ることができます。
３）多数同時接続が可能となり、イベント会場やコンサート会場で回線がパンクする事態を防ぐことができます。
他にも様々な特徴があり、情報の伝達方法が大きく変化する
「コンテンツシフト」が起きようとしています。
動画のダウンロードに時間がかからなくなるため、
認知を獲得したい場合はユーザー数の多いYouTubeやLINEを動画の配信先として選択肢としたり、
購入や問い合わせなどの獲得目的であれば、
ターゲティング精度の高いFacebookとInstagram、Twitterを選択できるようになります。
1分間の動画が伝える情報量は１８０万語、
Webサイト３,６００ページ分に相当するとも言われています。
５Ｇによる変化で、さらなる可能性の広がりを見せるでしょう。
出版社での視点で考えると、
５Ｇとパララックス・マイクロインタラクションを掛け合わせることにより、
紙特有の質感あるアニメ―ションや、
試し読みページを手で触れたようにめくる表現ができるかと思います。
また、顧客の視点（求めている情報・使いやすさ）と
社内間の視点をうまく組み合わせることにより、さらに良い制作物を作られるようになるかと思います。
▼参考サイト
5Gで動画広告はどう変わる？市場動向と成功のノウハウを徹底解説 | 動画制作ツール RICHKA（リチカ）
https://richka.co/times/13592/
