Main menu

[ワークショップ] Web担が知っておきたいプロトタイプ活用講座 開催レポート
  • 25
    9月
  • 有料
  • 東京

レポート掲載中

loftwork Lab

[ワークショップ] Web担が知っておきたいプロトタイプ活用講座 開催レポート

一般に“プロトタイピング”というと、いわゆるプロダクト開発などの“ものづくり”を想像しますが、実はWeb制作の現場にも有効な手法です。特にWeb担当者やマーケティング担当者によるプロトタイピングの活用は、プロジェクトにおける様々な課題の解決に大いに役立つと考えられます。そこでロフトワークは、実際にZ会様のサイトを題材にして、よりリアルにプロトタイピングを体験できる貴重な機会を用意。参加者たちは自らの手を動かし頭で考えながら、明日から使える実践的ノウハウを学びました。

本当に大事なことは、プロトタイピングすればわかる!

講師を務めたロフトワーク 入谷聡

講師を務めるロフトワークの入谷がワークショップ立ち上げの経緯を振り返りつつ、「本日は、みなさんの苦悩を払拭するワイヤーフレームという武器を持ち帰っていただきたい。考えていることを紙に書き出してみることで、社内外に明確な意図を伝えたり調整をしたり、イノベーティブなアイデアを生み出せるようになることが目標です。当社のクライアントであるZ会様のリアルなサイトを使って作業に取り組んでいきましょう」と説明。

続いてアドバイザーを務めるロフトワークのシニアディレクター陣を紹介。その後、参加者20名による自己紹介を経て、5チームに分かれてのワークが始まりました。

自己紹介の様子

各チームが取り組むのは、紙を使ったペーパープロトタイピングです。「ものづくりで言う試作品を作るのと同じ。ディテールやデザインにこだわるより、伝えるべき価値、重要なコンテンツや機能など、本質に目を向けるためのプロセスです。お手元の紙やペンなどの小物を自由に使って体験してほしい」と入谷。

タイムテーブルは大きく分けて次の3ステップで構成されました。

1.Learn(ユーザーやサービス、コンテンツを理解する)

2.Make(作ってみる、テストしてみる)

3.Share(プレゼンテーション、トークセッション)

[Learn]関係者の頭の中にあるものを紙に書き出して可視化する

Z会 伊豆蔵氏

プロトタイプの作成に入る前に、Z会の伊豆蔵氏が同社のユーザー、サービス、コンテンツの現状を説明。それぞれの説明を受けて、各チームで実際に手を動かしながら、サイトのあり方を模索するための前提情報を整理していきました。

Learn1:Z会のユーザー像を理解する

今回のワークでフォーカスするユーザーは、新しく中学生になる子どもの保護者。そこで、彼らが五感で感じているもの(聞こえるもの、見えるもの、言っていること、感じていること、していること)を想像して付箋紙に書き出し、模造紙に貼り付けていくという「共感図法」の実践に取り組みました。これは、ユーザー像を整理するだけでなく、ユーザー像について関係者の目線を揃えるのにも効果的な手法です。

Learn2:Z会のサービスを理解する

続いて伊豆蔵氏より、プロトタイピングの対象となるZ会のサービスについて情報が提供されました。これらを踏まえて、今回は中学生向けページのワイヤーフレームを作ることになります。

競合に対する優位性:教材選びや学習ペースの自由度の高さ、シンプルな教材、豊富な合格実績
課題:目的ページへの導線づくり(ストーリーが作れていない)、ユーザーを説得するコンテンツの不足、切り口の再考(現状の商品別から学年別の見せ方への変更が必要?)

Learn3:Z会のコンテンツを理解する

Learnステップの最後は、実際のZ会サイトや競合サイトを見ながらのリサーチ。ターゲットに向けてページに必要なコンテンツを付箋紙に書き出していきました。

[Make]書いては捨て、書いては捨てて、有意義な検討を重ねる

いよいよ、ペーパープロトタイプの作成作業です。目的は、新しく中学生になる子どもを持つ保護者のニーズや課題に対して、Z会がどのように課題解決できるか、そのコミュニケーションのあり方を考えること。作成対象は、中学・通信教育トップと、任意の下層記事ページ。A4のシートを1280×800の画面に見立て、各ページの中身を書いていきます。

「ペーパープロトタイピングのメリットは、パッと書けること、気軽に捨てて書き直せること。ムダを気にせず作れるので、どんどん絵に書いて検討してみてほしい。その際、誰のためのサイトか、何のためのページかを見失わないこと。今回の題材では、新しく中学生になる子どもを持つ保護者の勉強面の不安を解消したり、学習向上の手段を検討・選択したりするための情報が得られるサイトです。」(入谷)

各チーム、ひととおりプロトタイプの作成が完了した時点でメンバーシャッフルを実施。各チームの2名が“旅人”として他チームに出向き、感じたことを相手チームに伝え、自チームに戻った“旅人”の情報を元にプロトタイプを仕上げるという作業です。これは、第三者の客観的な視点を入れる効果を狙ったワーク。さらにここで個人作業の時間を設け、改めて自分なりにワイヤーフレームを書いてみて、出てきたアイデアを再びチームにぶつけることでプロトタイプの完成度を高めていきました。

[Share]やりたいこと、やるべきことを目に見える形で共有する

チームごとに完成したプロトタイプを発表。異なる視点でまとめられた多様なプロトタイプが出揃い、作成の意図、工夫点、検討の経緯などが説明されました。

Aチーム

保護者が持つ不安を解消するというお題に沿って設計。現状ページと大きく変えたのは、メインビジュアルをインパクトのある大きな画像にしたことと、コースへのリンクを上から下に移動したこと。今まではエントランス的な機能をしていたが、保護者にとってどんなコンテンツが前に出ていると興味を持ってもらえるかに重点を置きました。

Bチーム

他社との違いであるZ会の敷居の高さ、クオリティの高さを訴求しつつ、より幅広い層を取り込むための要素を配置。一回の訪問で入会までは到達しにくいとの予測のもと、Z会のハートを理解してもらい、まず資料請求してもらうことを重視。それだけだと尖り過ぎなので、一番下にはユーザーを説得するコラム的なコンテンツも用意しました。

Cチーム

とにかくエリアの役割を意識しました。メインビジュアルはファーストインパクトを重視し、数値で実績を強調。現状サイトでは目に入りづらい要点も明確に。また、初めて訪れた人の迷いを払拭するボタンを右ナビの目につきやすいところに置き、ママ友コミュニティなどへの拡散を狙って「いいね!」ボタンも付けました。体験談だけでなく、リアルタイムの声も大事。

Dチーム

他社比較の上、悪い点を改善する方法を探りました。ユーザーは自分の子どもに関係のあるコンテンツだけを見たいはず。セカンダリーナビを置くことで、興味のあるものだけを前に出せるようにしています。また、わからない人にもすぐに伝わるように、画像も直感的なものにしたいと考えました。保護者が抱える課題からコースを選べるのもポイントです。

Eチーム

ストーリーを先に考えました。キャッチは不安ではなくポジティブで煽り、ユーザーに読みたい!と思わせて、そのあとに安心や信頼を与えるコンテンツを配置。今資料請求しなくても・・・という気持ち(やらない理由)を上から打ち消していく流れを作っています。子ども向けとは別に保護者向けにページを作るというアイデアも大きな変更点です。

パネルディスカッション

プレゼンテーション後は、ロフトワークのシニアディレクター陣(山口、川上、西本、寺井)によるパネルディスカッションを実施。休憩時間に集められた会場からの質問に対し、それぞれの経験に基づく実践的なノウハウやヒントが提供され、ワークショップの締めにふさわしい有意義な時間となりました。プロジェクトの初期段階において、プロトタイピングをはじめとする“可視化”のプロセスがいかに重要か。体験後に聴く話は、多くの参加者に強い実感として響いたようでした。

コメント

blog comments powered by Disqus

次回セミナーのご案内

  • 19
    11月

エネルギー、知ってデザインする  -Planting seeds of inspiration.-

本プログラムは、MTRL Kyotoで開催する、イベントの転載です。 エネルギー、知ってデザインする  -Planting seeds of inspiration.-第一回:手のひらサイズの小さ...

このイベントに申し込む

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