UXデザインに取り組んで開発されたUTSUWAテーマの裏側

こんにちは、デザイナーの森田です！

本記事では a-blog cms 公式テーマ「UTSUWA」の開発の裏側をUXデザインに取り組んだ視点を中心にご紹介します。
UTSUWAテーマの最終的なアウトプットについては、すでに開発ブログでご紹介しているため、ご興味ある方はご覧いただければと思います。

アップルップルではクライアントワークではお客様のご要望をヒアリングした内容を元に制作していくフローをとっていますが、今回はa-blog cms 本体に同梱されるテーマを開発するため、実際の a-blog cms ユーザーへインタビューし、ユーザー中心設計による開発を行いました。

ユーザー中心設計にたどり着いた経緯

すでにブログ用、学習用、機能面で充実しているデモ用テーマを提供している中で、今までになく需要のあるものを考えた時に実用性のあるテーマが意見にあがり、新しいテーマ開発のプロジェクトが立ち上がるきっかけになりました。

当初は他のCMSで採用されているテーマが参考例としていくつか挙げられましたが、表層の部分だけではなく製品としての規模やユーザーが開発しているなどのそもそもサービスとしての成り立ちを分析した結果、メンテナンスできるリソースが限られている中で価値のあるものにフォーカスして提供することになりました。
弊社のCMS開発の独自のコンテキストに寄り添い、すこしでも確実性を高めていく手法として、ユーザー中心設計つまりはUXデザインを起点とした新規テーマ開発を行うことになりました。

行った調査の過程

UXリサーチを行うためにはさまざまな調査方法がありますが、今回は実際の利用ユーザーとお話をして事実を得られるデプスインタビューを採用しました。

調査には、以下の過程で行いました。

• アンケートによるインフォーマントの募集
• インタビュー設計
• ユーザーインタビュー実践
• KA法
• 価値統合マップの作成
• ペルソナの作成
• コンセプトの策定
• ジャーニーマップの作成
• アイデア発想
• プロトタイプの作成
• アイデア検証

それでは、一部のプロセスを抜粋してご紹介します。※掲載している図は実際の調査データではなく、サンプルデータを使用しています

アンケートによるインフォーマントの募集

調査時には、どのようにインフォーマント（情報提供者）を集めるのかが今後の調査結果を左右する大事なポイントの1つになります。どのような調査を行いたいのか明確に計画していないと意図しない人をアサインしてしまう可能性があるため、実際の調査を始める前に計画を立てておくことが大切です。今回は基本的に一人で調査を行っていますが、社内に相談相手をみつけ、第三者の視点を借りることで穴がないか確認していました。

さらに、アンケートとして正常に機能するか（予測していなかった使えないデータを収集してしまわないか、誤入力を引き起こさないか）を検証するために、社内の人たちに協力していただき、実際にアンケートに記入してテストしていただきました。

インタビュー設計

今回は半構造化インタビューの形式を取ることになったので、事前に項目を洗い出します。半構造化インタビューは、あらかじめ質問項目は用意しつつも、項目にない項目も柔軟に情報を引き出すことができるインタビューの方法です。

インタビュー設計は事前に質問内容を洗い出し、グルーピングします。その後、優先順位や順番を決めます。下図はMiroでグルーピングしたものをさらにインタビューで使用しやすいようにスプレッドシートに書き起こしたものです。

図のようにマストで聞きたい項目と時間があったり聞けそうだったら聞きたい項目をセルで色分けしておくことで、インタビューしている際に慌てず質問をピックアップできるようにしています。

さらにインタビュー参加者に事前にお答えいただいたアンケートと製品の利用状況などのインフォーマントに関する調査に必要な情報を事前にまとめておきました。

ユーザーインタビュー実践

今回は、Zoomを使ってリモートでインタビューを行いました。

今回は私一人で調査を行ったため、内容は録画しておき、インタビュー終了後にすべての内容をスプレッドシートに書き起こしました。

このとき少し大変ですが、「えーと」「うーん」などの詰まった言葉も一言一句残さずしっかりと書き起こしておくことで、後から見たときに状況を思い出しやすく、後の工程に当たるKA法を使った際にユーザーの価値を書き出しやすくなりました。

KA法

KA法で先程のインタビューで得た質的データから、ユーザーの価値を導き出します。このとき、価値意外にも未充足の価値も注意して抜き出していきます。

価値統合マップ

価値統合マップでは、KA法で抜き出した価値をグルーピングし、どのような価値観がインタビュー内容から現れてきたかを図にまとめます。初めはグルーピングした見出しを使って簡単な図をいくつか納得するまで書いていき、ある程度まとまったらどのような価値観が現れているか文字を書き足していき、最終的に価値統合マップ自体にどのような価値観が表れているかを示すタイトルをつけてまとめます。

この工程までくると、複数人いたインフォーマントのバラバラだった価値観がまとまったものになってきます。

ペルソナ

ペルソナ作成時には、インタビューから得られた重要な価値や期待、解決すべき未充足、インサイト、キーファインディングズを記入していきます。そしてそれらに基づくエンドゴール、ライフゴールの順に導き出し、キャッチフレーズを決めていきました。デモグラフィックの情報は後から付け足していきます。デモグラフィックから想像してしまいがちになりますが、あくまでもインタビューから得られた内容から発展させていくことが大事なので、順番を守って記入していきます。   ペルソナは今後の調査やアイデア発想でも軸となるため、気づいた点や見直すべき点があれば他の工程に写っていても修正作業に戻り、ブラッシュアップするように心がけていました。

コンセプトの策定

ペルソナを作成したら、「誰」の「どんな問題を解決するor充足」させる「どのようなテーマ」かを定義したコンセプトを作成します。今まで作成したペルソナや、KAシートなどから導き出していきます。

ジャーニーマップ作成

ジャーニーマップ作成時には、どのような期間を対象するかがポイントになってくるので、ジャーニーマップを書き出す前によく検討しました。参考例の図では、Web制作者が受注する〜次の制作へ移るまでにフォーカスしています。

期間が決まったら、行動、感情・思考、ステークホルダー、ペイン・フェイル、感情曲線、理想の状態、解決策のためのアイデアの順番で記入していきます。 順番を守ることで、実際のユーザーの行動をもとに解決のためのアイデアを出していくことができます。

アイデア発想

ジャーニーマップで洗い出された解決のためのアイデアをもとにアイデア発想を行なっていきます。できるだけたくさんの量を出します。アイデアは、ある程度出したら複数をまとめてもう一つのアイデアを作り出したりして増やしていきます。

最終的に一つを選んでそのアイデアをベースにプロトタイプ作りを始めます。

プロトタイプの制作

UXリサーチにて大まかなユーザー調査を終えたら、さらに具体化していくためにa-blog cms でできている100サイトを実際にリサーチしました。その100サイトの中から、公式テーマとしての汎用性とユーザーインタビューから得たコンセプトに合わさる条件を探していきます。

テーマの実装時には、a-blog cms の特徴でもあるローコード（コードが少なく開発できる）なCMSということを前提に、更新のしやすさと実装のしやすさの塩梅を検討していきます。

アイデアの検証方法

プロトタイプをインフォーマントに見せる

ユーザーインタビューにご参加いただいた一部の方にアポを取り、プロトタイプを見ていただき、仮説を検証します。事前にプロトタイプ検証用にインタビュー時のように質問を設計しておきます。
このときにご指摘を受けた部分や気付いた部分があれば修正し次のバージョンに反映します。

この時点で仮説の検証とユーザーさんからの評価を確認できたことから、調査期間もそれなりにかかっているので少しホッとすることができました。

ベータ版をリリースして配布する

2020/12/24にベータ版としてテーマを配布しました。テーマ内にGoogleフォームを仕込んでおき、いつでも気軽にフィードバックできる仕組みを用意し、教えていただいたところがあれば修正を行い反映します。

ベースキャンプ名古屋に来訪されたユーザーさんにご紹介する

とてもラフな方法になりますが、たまたま弊社が運営しているベースキャンプ名古屋に来訪いただいたユーザーさんには雑談混じりにご紹介して、隙あらばご意見をお聞きしていました。

イベントで発表する

a-blog cms Training Camp 2021 Autumn にて複数の a-blog cms ユーザーさんに向けてUTSUWAテーマを紹介し、事前に評価の確認を行いました。セッションの満足度としては、5点満点中4.9点の評価をいただくことができました。
a-blog cms Training Camp は a-blog cms のイベントの中でも大きなイベントで、ご参加いただいているユーザーの皆さんも開発の進捗を楽しみにしていることから高めであると推測しているてんもありますが、それでもいただいた評価からこの時点で開発したテーマへの期待値をリリース前に実感することができました。

これまでの調査のまとめ

一連の調査時に気をつけていたのは、「ユーザーから得られた事実から離れない」ことです。常にユーザーインタビューから得た事実から調査や発想を発展させていくようにします。そうすることで、事実に基づくアイデアの発想と展開が行えるようになります。

リリース後の反応について

インストール型のCMSという特性上、厳密には計測できないのが難点ではありますが、毎月ブランドサイトで配布しているUTSUWAテーマのXDファイルはダウンロードがあり少しずつご利用いただいてます。
また、しばしばUTSUWAで制作したというご報告をユーザーさんから直接いただいております。

納品後のエンドユーザーさんからの反応

アップルップルでも実際に今回開発したUTSUWAテーマを使っていくつかWebサイト制作を納品しているのですが、納品後にいくつか「お問い合わせが増えた」とご連絡いただいています。ユーザーインタビューの調査結果から、ユーザーさんが効果的なWebサイトを作成することに価値を置いていることがわかり、テーマ内で導線を設計したおかげではないかと思っています。

中でも私がこのUTSUWAテーマ開発で驚いたのは、a-blog cms ユーザーさんに対して調査を行ったのに関わらず、結果的にエンドユーザーさんの成果に繋がったことです。今回インタビューを行った a-blog cms ユーザーさんが自身のクライアントさんの成果を考えていて、その思考がインタビュー内容に反映されたからだと思っています。製品に対して発言することは発展のためにとても大事なことだと実感でき、個人的には印象的だったできごとでした。

ユーザー中心設計でテーマ開発をしてよかったこと

• コンセプトを事実から設計することで、原点に帰ったときにあとからブレにくい
• ユーザーさんからの情報を元に開発したおかげで、価値に寄り添ったテーマが生まれた
• 結果的に複数のユーザーさんから評価してもらえた
• 結果的に納品したエンドユーザーさんの成果につながった
• 自分だけでは発想しなかったであろうテーマを開発できた

なによりもユーザー調査を行なったことにより、当初の自分は予想していなかったテーマを開発する結果になってとても驚いています。おそらくご参加いただいたインフォーマントが異なっていたり、私の他にリサーチャーが加わっていたらまったく別のものが生まれていたと思います。UTSUWAテーマが生まれたのはご協力いただいたユーザーの皆様のおかげだと思っています。ご協力いただいたみなさま、ありがとうございました！

また、今回のUTSUWAテーマ開発のプロジェクトはリサーチ、デザイン、実装まで私一人で行なっており、長期間の開発となったため、途比較的不確実性が少ない状態でリリースできたこともよかったです。

それでは、今回の記事は以上になります！
引き続きa-blog cms に関わる方々のWeb制作やお仕事に貢献できるよう、今後も勤めてまいりたいです。