Webサイトリニューアルの成功の鍵~インフォグラフィックの力~
近年、オリンピックや公共施設などの場所からインターネット上まで、あらゆる場所で「インフォグラフィック」を目にするようになりました。Webサイトにインフォグラフィックをもちいることで、ユーザーへ視覚的に情報を分かりやすく提供できます。現在のWebサイトのデザインや操作性、ユーザーへの情報の伝達性などで悩んでいる場合、インフォグラフィックを採用することで課題解決につながるかもしれません。
今回の記事では、インフォグラフィックの概要や重要性、役割や効果、インフォグラフィックを活用したWebサイトの事例を紹介します。これからWebサイトのリニューアルを検討している方は、ぜひ参考にしてください。
インフォグラフィックとは
インフォグラフィックとは、情報を見やすく整理し、視覚的に表現したデザインのことです。テキストでは複雑になりがちなデータや情報も、インフォグラフィックをもちいることでシンプルに整理し、ユーザーへ視覚的に表示できます。
インフォグラフィックは新聞や雑誌、Webサイト、公共の場所の案内図や路線図など、ユーザーへ正しい情報を簡潔に伝えるための手段として広く利用されています。
なぜWebサイトでインフォグラフィックが重要なのか
インフォグラフィックは公共の場所や新聞、雑誌のほか、Webサイトでも多く活用されています。Webサイトにおける、インフォグラフィックの重要性について解説します。
短時間で情報の取得ができる重要性
インフォグラフィックは、一目でユーザーへ伝えたい情報を伝えられます。Webサイトでインフォグラフィックをもちいれば、情報を伝えるためのテキストや画像を減らせるため、ユーザーが情報を得るために画面を何度もスクロールする必要もありません。
多くの情報を伝えたいときでもインフォグラフィックによってユーザーへの情報の過多感を軽減できるため、特にモバイルデバイスで閲覧しているユーザーの離脱を防げます。
視覚的な言語として機能する重要性
インフォグラフィックをもちいれば、ユーザーへ視覚的に情報を伝えられます。そのため、言語の壁の影響を受けず情報を伝えることが可能です。たとえば日本語で構築されたサイトを異なる言語を話すユーザーが閲覧する場合でも、インフォグラフィックで情報を伝えることができます。
異なる言語を使用するユーザーでもサイトの内容すべてを翻訳することなく、正しい情報を得るのにインフォグラフィックは役立つでしょう。
インフォグラフィックの役割と効果
インフォグラフィックの主な役割と効果を紹介します。
情報の視覚化
インフォグラフィックは、テキストよりも視覚的でわかりやすい方法で情報を表現できます。たとえば数字、データ、統計情報などは、数値やテキストでは図やグラフに変換することで、情報に具体性が出ます。複雑な情報を伝えたいときでも、インフォグラフィックによって一目で内容を理解できるようになるでしょう。
情報の要約
インフォグラフィックを活用することで、情報を要約できます。大量の情報をテキストのみで表現しようとすると、多くのスペースが必要です。インフォグラフィックをもちいることで、限られたスペースの中でも多くの情報を伝えられます。情報をひとつの視覚的な観点へまとめることも可能になり、ユーザーが欲しい情報をすぐに得ることもできます。
興味を惹く
インフォグラフィックは、ただ正確な情報を要約して伝えるだけでなく、読者やユーザーの興味を惹くのにも効果的です。たとえばカラフルで魅力的なデザインのインフォグラフィックを使用することで、読者やユーザーの注意を惹き付けることができます。企業のメッセージなど、他のコンテンツよりもユーザーに伝えたい情報を注目させたいときにも、インフォグラフィックの活用が有効です。
ブランドの強化
人は情報を取り入れる際に、文字よりも画像として視覚的に取り入れた方が印象に残りやすいという特性を持っています。これを活かして、インフォグラフィックは、企業のブランドイメージを強化するのにも有効です。たとえばブランドのカラーを使用し、一貫性のあるデザインを作成すれば、ユーザーや読者へのブランディングにも役立つでしょう。また企業の価値観やメッセージを視覚的に伝えることもできます。
情報の共有と拡散
インフォグラフィックは画像のため、SNS(ソーシャルメディア)やWebサイトで簡単に共有できます。SNSやWebサイトで共有されたインフォグラフィックは、拡散が期待できるため多くの人に情報を効果的に伝えることも期待できます。
インフォグラフィックを活用した事例
インフォグラフィックを活用したWebサイトの事例として求人求職サイト「フリーランスフィールド」を紹介します。「フリーランスフィールド」は、フリーランスのIT人材と企業をマッチングさせるサービスを提供しています。
「フリーランスフィールド」のWebサイトの「私達の特徴・強み」のページでは、取引者数や支払いサイト数、福利厚生や各種就業サポートについてのデータ部分にインフォグラフィックを活用しています。閲覧者が参照したいデータが一目で分かるのと同時に、フリーランスフィールドの持つ特徴や強みに関する情報へ閲覧者の注意を引き付けられます。
フリーランスからの問い合わせから案件参画までの流れの説明にも、インフォグラフィックを使用しています。はじめてフリーランスフィールドを利用して案件を得たいフリーランスの閲覧者も、インフォグラフィックによって具体的な問い合わせ後の流れが一目で把握できます。
インフォグラフィックを制作するプロセス
インフォグラフィックは画像のため、Webサイトで活用するにはデザイン制作が必要です。効果的なインフォグラフィックを制作するためのプロセスを順に解説します。
1.目的の明確化
最初に、インフォグラフィックを制作する目的を明確にしましょう。何を伝えたいのか、どのような情報を提供するのかなどを明確にし、必要な情報を集めます。目的が明確になっていないと、収集する情報やデータの方向性が定まらない、収集した情報やデータが雑多で要約に時間がかかる、ユーザーに伝えたい情報がブレる、などの問題が発生します。まずは目的を明確にしましょう。
なお、目的を設定後収集する情報やデータは、一次情報を取り扱うようにしましょう。一次情報からのみ情報やデータを収集することで、正確な情報をユーザーへ伝えられます。
2.ターゲットの理解
インフォグラフィックの目的を明確にしたら、次にターゲットを設定します。インフォグラフィックは、ターゲットの特性やニーズを考慮して制作する必要があるためです。インフォグラフィックを誰に向けて制作するかを明確にするために、男性か女性か、子どもか高齢者か、学生か社会人か、などターゲットを細かく設定し、理解したうえでインフォグラフィックの制作に取り入れましょう。
3.情報の整理
設定した目的に合わせて収集した情報やデータを整理します。強調したい部分やターゲットへ伝えたい内容を絞り込むために、情報やデータに優先順位を付けましょう。優先順位を付けたあと、不要な情報は削除します。
情報を整理しないままインフォグラフィックを制作してしまうと、ユーザーへ伝えるべき情報やデータがうまく伝わらない可能性が高いです。インフォグラフィックの目的を達成するためにも、必ず集めた情報やデータは適切に整理し、インフォグラフィックに活用するようにしましょう。
ただ情報を整理するだけでなく、どのような切り口で情報を伝えるかを考えるのも重要です。情報の切り口を間違えてしまうと、伝えたい情報が曖昧なインフォグラフィックになったり、異なる情報が伝わってしまうインフォグラフィックとなってしまったりする可能性があります。情報を整理し、切り口や視点を設定しておくことも重要です。
4.デザイン作成
ユーザーへ伝えたい情報や強調したい情報を整理できたら、それらを基にインフォグラフィックのデザインを作成します。いきなりパーツのデザインを書きはじめるのではなく、まずインフォグラフィックの全体的なレイアウトを決めましょう。
その後大きな部分をデザインし、徐々に個々のパーツ作成へ入るのがデザイン作成のコツです。この手順を踏むことで、伝えたい情報や強調したい情報をはっきり伝えられるインフォグラフィックのデザイン作成ができます。
グラフやチャート、アイコンなどを組み込む、特定の情報はフォントのサイズやデザインを大きくする、などしてインフォグラフィックのデザイン作成を進めていきましょう。
【参考】言語を超えた効果的な情報伝達!デジタル庁とオリンピックでのインフォグラフィック
情報を一目で分かりやすく伝えられる、かつ言語の影響を受けないインフォグラフィックは公の機関であるデジタル庁や、オリンピックでも採用されています。参考として、デジタル庁とオリンピックでのインフォグラフィックを紹介します。
デジタル庁が推奨するサービスデザイン
デジタル庁では「誰一人取り残されない社会」の実現のための行政サービスデザインを掲げています。利用者の多様なニーズを効率的、かつ効果的に達成するために、利用者中心のデザインを推奨しているのが特徴です。
デジタル庁では、デジタル機器やデジタルサービスをただ使いやすくするだけでなく、デジタル機器やサービスを通じて利用者の課題解決や目的の達成、利便性の向上が図られるべきとしています。そのために必要なのが、利用者中心(人間中心)を原則とする行政サービスデザイン体制の確立です。
誰が見ても分かりやすい行政サービスデザインを掲げることで、デジタルデバイドの是正、デジタル機器・サービスに関わるアクセシビリティの向上の促進を目指しています。
デジタル庁は、Webサイト内の最近の取組情報やサービスを使いやすく提供する方法を示唆しており、その中でインフォグラフィックは複雑なプロセスや手順を視覚的に整理し、ユーザーが分かりやすく情報を理解できるツールとしての役割を果たしています。
たとえばマイナンバーカードの良くある質問や問い合わせ内容に関するページへの誘導には、マイナンバーカードを持つ手のインフォグラフィックを掲載しています。
オリンピックで使用されるピクトグラム
オリンピックでは、競技情報の提供手段としてインフォグラフィックの一種であるピクトグラムを採用しています。ピクトグラムをもちいることで、世界各国の人へ言語の壁を越えての競技情報の提供が可能になるほか、異文化や他国のスポーツへの国際的な共感が得られる可能性も高いです。
近年では2021年に開催された東京オリンピックでピクトグラムが採用されたほか、2024年のパリオリンピックにもピクトグラムが使用されることが発表されました。
パリオリンピックのピクトグラムは、ファッションの都パリらしい上品さを持つデザインと、フランスの多様性や豊かさを青、赤、緑、紫の色彩で表現しているのが特徴です。
また、オリンピックのピクトグラムはただスポーツの種目を端的に表現しただけでなく、家族、誇り、価値観、地域社会を表す名誉の印でもあり、参加者たちがそれぞれのスポーツファミリーに属し、素晴らしいスポーツコミュニティとの絆を持つ証や象徴としての役割も果たしています。
まとめ
インフォグラフィックの概要や重要性、役割や効果、制作手順、インフォグラフィックの活用事例を解説しました。一目で伝えたい情報を言語の壁を越えて伝えられるインフォグラフィックは、Webサイトで複雑かつ多くの情報をユーザーへ効果的に伝える手段としても有効です。
「ユーザーへ情報をうまく伝えられない」「情報ページの途中でユーザーが離脱してしまう」といった課題は、インフォグラフィックを導入することで解決できるでしょう。
インフォグラフィック制作を含め、Webサイトのリニューアルでお悩みのさいには、ぜひ「チームNext!」を運営するオニオン新聞社へご相談ください。業種を問わず、多くのWebサイトをリニューアルし、集客などの成果を出した実績がございます。ぜひお気軽にご相談ください。