Main menu

Designing Approach#2
  • 17
    6月
  • 無料
  • 東京

レポート掲載中

THE ROOM DAIKANYAMA

Designing Approach#2

抽象的なデザイン提案をぐっと具体的に、わかりやすく。 BtoBビジネスにおけるUX設計を行うには?

インターフェイスのデザインからサービスデザインまで広がりを持つUXデザイン。その中間に位置するWeb制作に焦点を当て、6月17日に「loftwork Designing Approach #2 BtoBにおけるUX設計 ユーザーニーズの顕在化と課題発見のプロセス」を開催しました。

エンドユーザーが見えづらい時。抽象的な説明になりがちなデザイン提案をわかりやすいものにしたい時。どうすればよりよいクリエイティブが生み出せるのだろうーー。そんな疑問の答えが見えたセミナーを、ディレクター松本がレポートします。

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

方針策定でブレないリニューアルの戦略をつくる

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

http://www.jjg.net/elements/pdf/elements.pdf

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

【プロジェクト工程の大枠】
戦略策定
・サイトの現状把握
・ユーザーニーズの分析
・サイトの目的を設定

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

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

「一般的に、プロジェクト当初のヒアリングは特別なことをしなくても価値ある情報を得られる大事な機会です。営業担当者へのヒアリングやインタビューを徹底することで、その情報から大まかなカスタマージャーニーマップ(ユーザーのサービスプロセスを図式化したもの)も作成できますよね」と菊地。Webプロジェクトの場合も一足飛びに情報設計を始めるのではなく、まずは声を聞き、得た情報を整理し、Web以外のチャネルを含めたUXを一枚のマップとして俯瞰する必要があるのだと言います。

【ヒアリング&インタビューで聞く項目例】
・事業概要
・リニューアルの背景/目標
・ビジネス目標
・競合/ベンチマーク
・顧客(業種/割合)
・必須条件
・業務フロー
・商流
・全広告施策/チャネル
・問い合わせ数/媒体別の比率
・サーバー構成/課題/スペック
・CMS課題/求めること
・運用課題/体制 etc……

方針策定フェーズでは、ヒアリングのほか全7つの施策を実施。

「ユーザーのニーズを明確にしたら、次に行うのがチャレンジポイントの設定です。言わばこのプロジェクトで解決すべきコアな課題にあたります」と菊地が続けます。


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

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

「バリ取りツールを提供するジーベック社」の強み、弱み、チャレンジポイントとしての「バリ取り問題解決の糸口が見つかるサイト」というコンセプトをつないだ図

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

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


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

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

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

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

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

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

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

課題解決のためのサイト設計・デザイン

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

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

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

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

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

  • Designing Approach#2
    Designing Approach#2
  • Designing Approach#2
    Designing Approach#2
  • Designing Approach#2
    Designing Approach#2

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

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


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

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

キーワード → メタファー → 言語化(+イメージボード)

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

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

1)デザインをわかりやすくする
2)デザインに個性を出す

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

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

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

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

コメント

blog comments powered by Disqus

次回セミナーのご案内

  • 23
    8月

渋谷極小特区計画 〜道玄坂花壇 HACK編〜

求む!次世代アーバニスト! 極小パブリックスペース=「渋谷道玄坂 花壇」の課題を無くすツールをつくる、ハッカソン開催。 道玄坂の花壇の課題から、今の超都心に必要なパブリックスペースのヒントを浮き彫りに...

このイベントに申し込む

お申し込みを受け付けております。