loftwork Designing Approach #2
BtoBにおけるUX設計
ユーザーニーズの顕在化と課題発見のプロセス

今回事例として紹介したのは、金属やプラスチックを加工したときにできる「バリ」の除去・研磨の自動化を実現したジーベックテクノロジー社のWebサイトリニューアル（上記はリニューアル後のサイトビジュアル）。

「ジェス・J・ギャレットが提唱したことで知られるUXの5段階モデル（※）で見てみると、表面化している課題は視覚的なデザイン面にすぎない」と切り出し、「ユーザーニーズの顕在化」をテーマにサイトリニューアルのプロセスを解説。※http://www.jjg.net/elements/pdf/elements.pdf

まずプロジェクトの全工程をUX 5段階モデルをベースに紹介。クリエイティブディレクターの菊地充が担当したのは、一番深い部分に位置する戦略策定と要件定義でした。

【プロジェクト工程の大枠】
戦略策定

• サイトの現状把握
• ユーザーニーズの分析
• サイトの目的を設定

要件定義

• サイトの機能要件の策定
• サイトのコンテンツ要件の策定

徹底的なヒアリングが現状把握の入り口

情報設計を可能にするチャレンジポイント

「分析したユーザーニーズの共通項を見つけ出し、まずはチャレンジするテーマを『バリ問題解決の糸口が見つかるサイト』と設定。そして、そのテーマと自社のもつ“強み”と“弱み”を結び付け、課題感の強いものから今回のプロジェクトで解決すべきチャレンジポイントとして5つを選定しました」

新しいサイトで新しく用意すべきコンテンツが明確になるだけでなく、すでに現状サイトに情報として公開されているコンテンツの改善点も同時に見つけることができますね。

サイトリニューアルで注力すべきポイントが見えてきましたが、これらをどのようにサイトの設計にひも付けていくのか、ドキュメント化の必要性を指摘しながら方針策定フェーズの最終工程を解説しました。

なぜドキュメントにしておくのか？

方針策定に使用したドキュメント一覧は、以下の通り。

・リニューアル方針策定書
-設定したチャレンジポイントを具体化したサイトコンテンツの施策
-今の姿とあるべき姿を並べたサイトの情報設計
-グローバルナビゲーションの設計
などを含んだドキュメント

・プロジェクトマネジメント計画書
要件の整理、両者のプロジェクト期間内の作業範囲の打ち分け、品質管理の計画に用いられる

・WBS（Work Breakdown Structure） ガントチャート式のスケジュール表

記載項目が細かく説明の多い書類をたくさん用意するのは骨が折れること。それでも取り組む理由を、「なぜインタビューやリサーチなどで明らかになったことを、方針策定書やプロジェクトマネジメント計画書としてドキュメントに残すのか。勿論、プロジェクト期間中に何かの判断で迷ったときに立ち戻る場所になるという面もありますが、一番はプロジェクトメンバーが全員同じ目線でゴールを目指す意識を持つためです」と解説。

そして、「ただ青写真を描くだけではなく、プロジェクト全体のデザインと具体的な作業単位に落とすところまでを一気にやり切ることが大切。そうすることで、サイト構築時にクリエイティブ面に集中することができるほか、ドキュメント化されているので常に原点に立ち返ることができます。結果、プロジェクト、制作物、すべての品質が上がることにつながるのです」と締めくくりました。

サイトリニューアルの方針策定フェーズについて話した菊地に続き、具体の情報設計とデザインについてクリエイティブディレクターの佐々木星児が紹介しました。UX 5段階モデルの上層部分、構造、骨格、表面がここにあたります。

すべてはチャレンジポイント達成のため

「プロジェクトのゴールでは、要件定義のステップで設定したチャレンジポイントをクリアすることが大切」と佐々木。今回は“バリ問題解決の糸口が見つかるサイト”というチャレンジポイントを達成するための施策に取り組みました。

●自分ごと化できるソリューション・改善事例の作成
●高品質画像を用いた製品力・品質のアピール
物撮りを得意とするフォトグラファーをプロジェクトチームに迎え、13〜14ほどの製品を約12時間かけて撮影。研削力・継続性といった製品の魅力を確実に伝え、クオリティ訴求を強化。

●様々な課題を相談できる会社としての強み・スタッフ力のアピール
テスト導入といえる商材レンタルのサービスのコンテンツは既存していましたが十分にアピールされていなかったため、サポートコンテンツの充実化を目指し、製品のテスト導入ページへの導線を強化。ユーザーが最初に着地するトップページにナビゲーションボタンを設け、見つけやすい設計にしています。また、テスト導入を申請する際、PDFに記入するという手間のかかるフローを専用フォームに置き換えました。

「上記の施策を新しい情報コンテンツとして落とし込むと同時に、既存の情報にも注目しました。リニューアルでは、現状サイトの情報（＝会社の資源）をどう活かすかが重要だと考えています。1から新しい情報をまとめるのは時間も要するので、はじめに情報整理を行い、足りない部分を新たに制作するのが全体の品質をあげる要因」と佐々木。

これで既存の情報の中から何を残して、どんなコンテンツを新設すべきかが明確になり、新しいサイトがもつべき情報が一目瞭然になりました。
でもこの内容からはどんなサイトのページになるかはイメージできないですよね。どんな色にするのか、どんなデザインの表現があるのかわかりません。ポイントや整理した情報は具体的にどのようにデザインになっていくのでしょうか。

言語化を助けるメタファー

実際にデザインに落とすための、コンセプト策定のフローは以下の通り。

キーワード　→　メタファー　→　言語化（＋イメージボード）

「はじめにワークショップを開催し、自社の“強み”を単語ベースで発散。スピーディー、探求姿勢、独自技術、などたくさんのキーワードがでてきたら、今度はその発散された言葉の中からキーワードとなるものを抽出します」

「次に行うのがメタファー（隠喩表現）の活用。抽出されたキーワードから、会社のあるべきデザインを考える際の軸となるイメージを、メタファーを使って連想します」
メタファーには大きく2つの役割があると佐々木は説明します。

1）デザインをわかりやすくする

2）デザインに個性を出す

「たとえば、『スピーディ』というワードなら『リニアモーターカー』。こうしたメタファーが見つかれば伝えたいコンセプトも明確になり、デザインに落とし込める。メタファーを見つけた後は、言語化し、イメージをさらに具体化させます」。

デザインコンセプトの策定、キーワードの抽出、メタファーの設定、言語化とイメージボードの活用。ひとつひとつがデザインを描くステップとしてデザイナーやプログラマーへ共有され、新しいWebサイトが制作されます。

徹底的なヒアリングからはじめ、現状リサーチとプロジェクト方針の明確化、そしてデザインコンセプト策定からデザインへ落とし込むための言語化のステップの大切さ。想定するエンドユーザーも鮮明になり、抽象的だったデザイン提案をもっと具体的で説得力のあるものにできそうですね。

ついつい表面的な課題に目が向きがちなWebサイト、リニューアル方針や改修方針でお悩みの方は、サイトの目的やユーザーニーズを一から考え直してみるのも良いかもしれません。

「ユーザーエクスペリエンスの創造」をベースに、新しい価値をデザインするロフトワーク。loftwork Designing Approachでは、ロフトワークのプロジェクト事例を通じて制作プロセスやプロジェクト手法など、クリエイティブの質を向上させるための実践をご紹介します。

#2のテーマはBtoBのWebにおけるUX設計プロセスです。

商品やサービスの使いやすさや、心地よい体験を作り出すためのUXデザインは、ビジネス成果へのインパクトや顧客との継続的なコミュニケーションの観点から、BtoBビジネスにおいても重要だと考えています。

UXの設計において、ユーザーの複雑な心理や深いニーズを探る”デザインリサーチ”は初期フェーズの重要なステップのひとつ。ロフトワークでは深いニーズを引き出すデプスインタビューやカスタマージャーニーなど様々な手法を組み合わせながら、UXデザインを進めていきます。

しかし、エンドユーザーが見えづらく、ユーザーインタビューなどデザインリサーチ手法を活用しにくいイメージのあるBtoBのWebサイトリニューアル。今回はロフトワークが手がけたBtoB企業のWebリニューアル事例をもとに、UX設計のプロセスをご紹介します。toC, toBに限らずユーザーニーズの発見と課題設定のプロセスに関心がある方は、ぜひお越しください。

開催概要