「そろそろ会社のWebサイトをリニューアルしよう」
そんな上司の一言から、突然プロジェクトの担当になった、なんて方もいらっしゃるのではないでしょうか。
でも、いざ始めようとすると、
「まず何をすればいいんだろう？」
「社内から何を集めればいい？」
「制作会社に相談する前に、どこまで決めておけばいい？」
と、意外と分からないことが多いものです。
Webサイトのリニューアルというと、新しいデザインや写真、ページ構成などに目が向きがちです。
でも、私たちがその前に一緒に考えたいのが「情報設計」です。
少し専門的な言葉に聞こえますが、ざっくり言えば、誰に、何を、どんな順番で伝えるのかを整理すること。
今回は、これからWebサイトのリニューアルを進める方に向けて、情報設計とは何なのか、なぜリニューアルの最初に考えておきたいのかをご紹介します。
こんな方におすすめです
・はじめてWebサイトのリニューアルを担当する方
・何から手をつければいいのか分からず困っている方
・社内から出てくる要望をうまく整理できていない方
・制作会社に相談する前に、何を考えておけばいいのか知りたい方
投稿者：bravesoft株式会社 CDO室 デザインディレクター 後藤洋介
まず起きるのが「あれも載せたい、これも載せたい」
リニューアルが始まると、社内のいろいろな部署から要望が集まってきます。
「このサービスをもっと目立たせたい」
「採用情報を充実させたい」
「会社の取り組みも紹介したい」
「代表メッセージもちゃんと見せたい」
どれも大切な話なので、全部載せたくなります。
ただ、情報が増えれば増えるほど、サイトを訪れた人には「結局、何を見ればいいんだろう？」と分かりにくくなることもあります。
そんなとき、私たちは一度、見る人の立場に戻って考えてみます。
このサイトには、どんな人が来るのでしょうか。
・サービスを探している人
・転職先を探している人
・取引を検討している企業の担当者
同じWebサイトでも、訪れる人によって知りたいことは違います。
たとえばサービスの導入を考えている人なら、
「どんなことができる会社なんだろう」
「自分たちの課題を相談できそうだろうか」
「どんな実績があるんだろう」
そんなことから知りたいのかもしれません。
一方で、会社側にも「ここはぜひ伝えたい」ということがあります。
会社が伝えたいことと、ユーザーが知りたいことを整理して、その間をつなぐ。
ここから情報設計は始まります。
「何を載せるか」が決まったら、「どんな順番で伝えるか」
必要な情報が見えてきたら、次に考えるのは伝える順番です。
たとえばサービス紹介のページで、最初から細かな機能や料金がずらっと並んでいても、まだサービス自体をよく知らない人には少し分かりにくいですよね。
まず、
「これはどんなサービスなのか」
を知ってもらう。
そこから、
「どんな課題を解決できるのか」
「具体的に何ができるのか」
「どんな実績があるのか」
と、少しずつ理解を深めてもらう。
そして興味を持ったら、問い合わせや資料請求へ進めるようにする。
こうして考えると、Webサイトは情報を置いておく場所というより、順番に理解してもらう場所でもあります。
これは、文章を書くことにも少し似ています。
文章にはタイトルがあり、見出しがあり、その下に本文があります。
Webサイトも同じで、情報にはそれぞれ役割や強弱があります。
たとえば会社概要のページなら、「会社概要」というページ全体のテーマがあり、その中に「会社情報」「代表メッセージ」「アクセス」といった情報があります。
さらにその下に、それぞれの詳しい内容があります。
普段はひとつの画面として見ているWebサイトですが、その裏側にあるHTML（Webページの文書構造を記述するためのマークアップ言語）も、こうした情報の構造を表現しています。
H1、H2、H3といった見出しも、単に文字を大きくしたり小さくしたりするためのものではなく、情報同士の関係や階層を表すものです。
そして、この情報の関係が整理できると、デザインにも自然と理由が生まれてきます。
・大切だから、目につきやすくする
・関連するものだから、近くに置く
・話題が変わるから、余白を取る
・次に見てほしいページがあるから、リンクを置く
つまり、見た目の強弱をつける前に、情報そのものの強弱を整理しておくわけです。
逆に、ここが整理できていないと、
「ここをもっと目立たせたい」
「これも重要なので大きくしたい」
「この情報もトップページに追加したい」
といった話が増え、気づけば全部が目立つサイトになってしまうこともあります。
そんなときは、デザインを直し続けるよりも、一度、
「そもそも、このページで一番伝えたいことは何だっけ？」
と戻ってみる。
それだけで、意外と整理できることがあります。
情報が整理できると、サイトの形も見えてくる
誰に、何を、どんな順番で伝えるのか。
そこが少しずつ見えてくると、サイト全体の構成も考えやすくなります。
・どんなページが必要なのか
・トップページでは何を見せるのか
・どのページから、どこへ進んでもらうのか
・問い合わせまで、どんな流れをつくるのか
こうしたことを整理した結果として、サイトマップやページ構成、ナビゲーション、ワイヤーフレームなどができていきます。
そのため、情報設計というと「サイトマップをつくる作業」をイメージされることがありますが、実際にはもう少し手前から始まっています。
そもそも、このWebサイトは誰に、何を伝えるためのものなのか。
そこを考えることも、情報設計の大切な部分です。
また、情報がきれいに整理されていることはSEO対策にもつながります。
ページごとのテーマが分かりやすく、関連する情報が整理され、サイト内のページ同士も自然につながっている。
そうしたサイトは、人にとって分かりやすいだけでなく、検索エンジンにとってもページの内容を理解しやすい構造になります。
SEOというとキーワードや検索順位に目が向きがちですが、その前にあるのは、探している人に、必要な情報をきちんと届けること。
まずはそこから考えるのが、自然なのではないでしょうか。
最初から、全部決めておかなくても大丈夫です
ここまで読むと、
「制作会社に相談する前に、ここまで全部整理しておかないといけないの？」
と思うかもしれません。
もちろん、そんなことはありません。
「何を載せればいいか、まだ決まっていない」
「社内からいろいろな意見が出ていて、整理できていない」
「今のサイトに何となく不満はあるけれど、何が問題なのか言葉にできない」
そんな段階から、一緒に考えていくことも制作会社の役割だと私たちは考えています。
Webサイトのリニューアルでは、最初から答えがひとつに決まっているとは限りません。
だからこそ、
「なぜリニューアルするのか」
「誰に何を伝えたいのか」
「今のサイトでは、なぜそれが伝わっていないのか」
といったことから、一緒に整理していくことが大切です。
意思決定を支援するbravesoftのデザイン
bravesoftでは、デザインを「見た目をきれいにすること」だけだとは考えていません。
デザイン業務を通じて、クライアントの意思決定を支援することも、私たちが大切にしている考え方のひとつです。
Webサイトをつくっていると、ひとつの課題に対して複数の選択肢が出てくることがあります。
たとえばA案、B案、C案という3つの方向性が考えられたとします。
そこで私たちが、
「3案つくったので、好きなものを選んでください」
とだけ伝えるのでは、十分な支援とは言えません。
・ユーザーにとっての分かりやすさ
・事業上の目的
・ブランドとの整合性
・実現したい体験
そうしたことを整理したうえで、
「私たちは、この理由からA案が最適だと考えています」
と、できるだけ根拠を持って提案する。
そのうえで、
「実際の事業としてはどうでしょうか」
「現場のユーザーを考えると、この考え方で合っていますか」
と、クライアントの皆様とディスカッションする。
制作会社が一方的に正解を決めるのでもなく、すべての判断をクライアントに委ねるのでもありません。
クライアントが持つ事業や現場への理解と、私たちが持つデザインやUI/UXの知見を持ち寄り、一緒に最適な意思決定をしていく。
これが、bravesoftが大切にしているデザインの進め方です。
そして、この考え方は情報設計にもそのまま当てはまります。
「この情報は本当に必要なのか」
「AとBなら、どちらを先に伝えるべきなのか」
「そもそもこのページは必要なのか」
情報設計にも、たくさんの意思決定があります。
だからこそ、なんとなく配置するのではなく、事業・ユーザー・目的を踏まえて、一つひとつの判断に理由を持たせることを大切にしています。
実際のプロジェクトでも、「誰に、どう使ってもらうか」から考える
こうした考え方は、実際のプロジェクトでも大切にしてきました。
株式会社集英社様「ヤンジャン! webサイト」
株式会社集英社様の「ヤンジャン! webサイト」では、青年マンガ総合サイトのリニューアルを、企画・デザインから開発までbravesoftが担当しました。
このプロジェクトで求められたことのひとつが、ユーザーがワクワクできる体験です。
漫画を読みに来る読者はもちろん、作品を生み出す作家の方々にとっても心が躍るようなUI/UXを目指しました。
ただ、単純に派手な演出を増やせば「ワクワクするサイト」になるわけではありません。
大前提として大切なのは、ユーザーがストレスなく作品を読めること。
そこで、あえてWebの基本的な使いやすさに立ち返りながら、その上に画面いっぱいを使ったプロモーションや、テーマパークを訪れたような楽しさを感じられる体験を組み立てていきました。
「ワクワクさせたい」という目的と、「漫画を快適に読める」というユーザー体験。その両方をどう成立させるか。
これも、誰に何を届けるのかを整理し、優先順位をつけながら意思決定していく情報設計のひとつです。
株式会社ベネッセコーポレーション様「ミライシード」
ベネッセコーポレーション様の教育プラットフォーム「ミライシード」では、その一部である「テストパーク」のデザインとフロント開発をbravesoftが担当しました。
このプロジェクトで求められたのは、「圧倒的な使いやすさ」でした。
教育サービスの難しいところのひとつは、「ユーザー」をひと括りにできないことです。
・実際に操作する子どもたち。
・授業や学習状況を管理する先生。
・そして、サービスや学習結果に触れる可能性のある保護者。
同じサービスでも、立場によって知りたい情報も、使う場面も、ITへの慣れ方も違います。
子どもにとって分かりやすいことと、先生にとって効率的であることが、必ずしも同じとは限りません。
だからこそ、
「この画面は誰が見るのか」
「その人は、どんな状況で使うのか」
「そのとき、一番必要な情報は何なのか」
「次にどんな行動をしたいのか」
と、それぞれの利用者の視点から情報を整理する必要があります。
利用する人が変われば、優先すべき情報や導線も変わる。
これはまさに、情報設計が重要になる場面です。
単に見た目を分かりやすくするだけではなく、さまざまな立場のユーザーを想定しながら、誰に何をどの順番で届けるのかを考えていく。
その答えを見つけるために、bravesoft社内でも議論を重ね、株式会社ベネッセコーポレーション様のご担当者とも長い時間をかけてディスカッションしながらUI/UXを検討していきました。
ベネッセ様が持つ教育現場やユーザーへの深い理解と、bravesoftが持つUI/UXやデザインの知見を持ち寄り、一緒に最適な形を探していく。
その結果、「ミライシード」プロダクト内の1つのサービスである「テストパーク」は、教育現場における多様な利用者の使いやすさと、学習体験を支えるUI/UXが評価され、グッドデザイン賞を受賞しました。
これは、見た目の美しさだけではなく、子ども、先生、保護者それぞれの利用シーンを見据え、情報の優先順位や操作の流れを丁寧に設計したことが評価された結果だと考えています。
「意思決定を支援するデザイン」を表す、ひとつの事例です。
情報設計から、使いたくなるデザインへ
情報がきれいに整理されていることは、良いWebサイトをつくるための大切な土台です。
でも、正しく整理されているだけで、人が使いたくなるWebサイトになるわけではありません。
・分かりやすい
・迷わず使える
・その企業やサービスらしさを感じられる
・ときには触ってみたくなるような楽しさがある
情報設計によって整理した「誰に、何を、どう伝えるか」を、実際の体験へ変えていくのがUI/UXデザインです。
bravesoftには、グッドデザイン賞の受賞実績を持つデザイナーをはじめ、さまざまなサービスやプロダクトのUI/UXに向き合ってきたメンバーがいます。
ただ、賞を取ることがデザインの目的ではありません。
ヤンジャン! webサイトであれば、「作品を読む」という基本的な体験を守りながら、どうワクワクを生み出すのか。
ミライシードであれば、子ども、先生、保護者など異なる利用者を考えながら、どう「使いやすさ」をつくるのか。
プロジェクトごとに、答えは違います。
だからこそ私たちは、
「今、どんなことに困っているのか」
「誰に何を伝えたいのか」
「その人に、どんな体験をしてほしいのか」
「このWebサイトで、これから何を実現したいのか」
というところから、クライアントの皆さまと一緒に考えることを大切にしています。
Webサイトのリニューアルは、単に古くなったデザインを新しくするだけではありません。
会社の中にある情報を改めて整理し、
「私たちは、誰に何を伝えたいのか」
を考え直す機会でもあります。
見た目をきれいにする前に、情報をきれいにする。
そして、その情報を、分かりやすく、使いやすく、その企業やサービスらしい体験へ変えていく。
そこまで含めて、bravesoftではWebサイトづくりだと考えています。
Webサイトのリニューアル、まずは今のお悩みからお聞かせください
「リニューアルしたいけれど、何から始めればいいか分からない」
「社内の要望が多く、まだ整理できていない」
「今のWebサイトの課題から一緒に考えてほしい」
まだ具体的な要件が決まっていなくても大丈夫です。
bravesoftでは、完成した要件を受け取ってデザインするだけではなく、「何をつくるべきか」「誰に何を伝えるべきか」というところから、一緒に考えていきます。
情報設計からUI/UXデザイン、開発まで、プロジェクトに合わせてご支援します。
まずは、今感じている課題から気軽にご相談ください。
投稿者プロフィール
