サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2>はじめに</h2>

<p>こんにちは、プラットフォーム事業本部 第一開発部&nbsp;CSプラットフォームグループの小杉です。<br />
私は2022〜2023年中頃にかけて、ヘルプ・問い合わせサイトとその管理システム（現：ヘルプセンターシステム）のリプレイスプロジェクトに携わりました。<br />
本プロジェクトの概要に関しては以下の記事をお読みください。<br />
<a href="https://inside.dmm.com/articles/new-helpcentersystem/">https://inside.dmm.com/articles/new-helpcentersystem/</a></p>

<p>&nbsp;</p>

<p>本プロジェクトにおいて、私は主にヘルプセンターシステムおよび管理画面のUX・UIの改善提案や関連部署との連携を担当しました。<br />
これまではエンジニアとしてPHPのコードを書くことがほとんどでしたが、UX・UIに関して改善案を出し、中心となって改善を行うのは本リプレイスが初めてでした。<br />
いろいろな挑戦をさせてもらえるのはDMMの良いところだなと感じます。<br />
今回はリプレイス内で実施した改善事例と、そこから得た学びと反省点について、それぞれピックアップして紹介します。</p>

<h2>改善事例について</h2>

<p>今回のリプレイスでは軽微なものから大掛かりなものまで、いくつもの改善を実施しました。その中でもエンドユーザー向けの改善について以下3点を紹介します。</p>

<h3>FAQサイトと問い合わせサイトの統合</h3>

<p>リプレイス前ではFAQを集めた自己解決用「DMMヘルプ」と、カスタマーサポートに問い合わせるための「DMMサポートセンター」という2つのサイトが別々に存在している状態でした。<br />
DMMには非常に多くのサービスが存在し、サービスごとにFAQ記事や問い合わせフォームが作成され、階層ごとにページが作成されていたために以下のような問題がありました。</p>

<ul>
	<li>FAQで自己解決ができない場合に、別の問い合わせ用サイトに遷移した上で一から問い合わせ先を探す必要がある</li>
	<li>本来、FAQを閲覧すれば問い合わせせずに問題解決できる可能性が高いのに対し、FAQを閲覧することなく問い合わせに至ってしまう</li>
</ul>

<p><img alt="" data-base-url="https://confl.arms.dmm.com" data-image-height="512" data-image-src="/download/attachments/1724399477/inside%E6%8C%BF%E5%85%A5%E5%9B%B3-%E3%83%98%E3%83%AB%E3%83%95%E3%82%9A%EF%BC%8B%E3%82%B5%E3%83%9B%E3%82%9A%E3%83%BC%E3%83%88%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%BC.drawio%20%282%29.png?version=1&amp;modificationDate=1708959067098&amp;api=v2" data-image-width="733" data-linked-resource-container-version="17" data-linked-resource-content-type="image/png" data-linked-resource-default-alias="inside挿入図-ヘルプ＋サポートセンター.drawio (2).png" data-linked-resource-id="1905104376" data-linked-resource-type="attachment" data-linked-resource-version="1" data-location="小杉 鞠奈@PF開発部 &gt; inside_shirousagi関連 &gt; inside挿入図-ヘルプ＋サポートセンター.drawio (2).png" data-unresolved-comment-count="0" height="250" src="https://confl.arms.dmm.com/download/attachments/1724399477/inside%E6%8C%BF%E5%85%A5%E5%9B%B3-%E3%83%98%E3%83%AB%E3%83%95%E3%82%9A%EF%BC%8B%E3%82%B5%E3%83%9B%E3%82%9A%E3%83%BC%E3%83%88%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%BC.drawio%20%282%29.png?version=1&amp;modificationDate=1708959067098&amp;api=v2" title="小杉 鞠奈@PF開発部 &gt; inside_shirousagi関連 &gt; inside挿入図-ヘルプ＋サポートセンター.drawio (2).png" /><img alt="" height="348" src="https://image.dmm-corp.com/ovrz6qhg1qwnt05yews9mgmw59dy" width="498" /></p>

<p>そこで今回のリプレイスでは、ユーザー側の不要な回遊やアクションの手間を減らすことを目的に「DMMヘルプセンター」として2つのサイトを統合することにしました。</p>

<p>DMMヘルプセンターでは、ユーザーが困った際に先にFAQ記事を閲覧してもらい、その上で自己解決ができなかった場合に問い合わせフォームへ遷移できるようなサイト構成となっています。</p>

<p><img alt="" height="373" src="https://image.dmm-corp.com/xcttrnznlkanskyzk7xzkxrk6ldr" width="440" /></p>

<h3>FAQ記事の統一</h3>

<p>リプレイス前では、「DMMヘルプ」のFAQ記事はデバイスごとに内容を書き分ける必要がありました。具体的には、スマートフォンで記事を閲覧した際にはスマートフォン向けの情報のみが表示され、パソコンで閲覧した際にはパソコン向けの情報のみが表示される状況が存在していました。</p>

<p><img alt="" height="263" src="https://image.dmm-corp.com/e8p0hd0063y40z9giutvlmah83cc" width="482" /></p>

<p><img alt="" data-base-url="https://confl.arms.dmm.com" data-image-height="263" data-image-src="/download/attachments/1724399477/inside%E6%8C%BF%E5%85%A5%E5%9B%B3-%E6%97%A7%E8%A8%98%E4%BA%8B.drawio.png?version=1&amp;modificationDate=1708337667396&amp;api=v2" data-image-width="482" data-linked-resource-container-version="17" data-linked-resource-content-type="image/png" data-linked-resource-default-alias="inside挿入図-旧記事.drawio.png" data-linked-resource-id="1892752891" data-linked-resource-type="attachment" data-linked-resource-version="1" data-location="小杉 鞠奈@PF開発部 &gt; inside_shirousagi関連 &gt; inside挿入図-旧記事.drawio.png" data-unresolved-comment-count="0" height="250" src="https://confl.arms.dmm.com/download/attachments/1724399477/inside%E6%8C%BF%E5%85%A5%E5%9B%B3-%E6%97%A7%E8%A8%98%E4%BA%8B.drawio.png?version=1&amp;modificationDate=1708337667396&amp;api=v2" title="小杉 鞠奈@PF開発部 &gt; inside_shirousagi関連 &gt; inside挿入図-旧記事.drawio.png" /></p>

<p>これは、過去にDMMにフィーチャーフォン（ガラケー）用のサイトが存在していた頃の名残で、フィーチャーフォン用サイトは現在閉鎖されています。<br />
またパソコン用とスマートフォン用のサイトでは同じサービスが提供されています。<br />
そのため、同一ユーザーによる複数デバイスの使い分け傾向の高さや、FAQ記事を閲覧するデバイスと実際にサービス利用に用いるデバイスが異なる可能性も考えられるようになりました。<br />
パソコンやスマートフォンに限らず、現代ではさまざまなデバイスが市場に出ており、&ldquo;デバイス間で情報共有&rdquo;のニーズが高まっています。<br />
一部のDMMサービスでは、テレビやPlayStationといった多様なデバイスを介してサービス利用できるようにもなっています。<br />
そこで新しいヘルプセンターにおいても、「どのようなデバイス環境下であっても、ユーザーは同じ情報を得ることができる」ことを目的とし、デバイスごとに存在していたFAQ記事を統一。1つの記事の中でサービス提供がされている全てのデバイス情報が得られるような構成に変更しました。</p>

<p><img alt="" height="132" src="https://image.dmm-corp.com/xdqx07041gp6p4g06l2bsjbrqet2" width="506" /></p>

<p>&nbsp;</p>

<h3>ライティングルールの統一</h3>

<p>「DMMヘルプ」の管理システムでは、ヘルプ記事の作成のために書式設定用の多様なプラグインが存在し、またHTMLを直接編集できるWYSIWYGエディターが提供されていました。<br />
このエディターは自由度が高く、さまざまな表現が可能なために書き手によって表現方法が異なることで、統一感に欠けたヘルプ記事を生み出してしまっていました。</p>

<p><img alt="" height="202" src="https://image.dmm-corp.com/zzxqanu9lq3y4exxrs49y38iujee" width="260" /></p>

<p><img alt="" data-base-url="https://confl.arms.dmm.com" data-image-height="202" data-image-src="/download/attachments/1724399477/inside%E6%8C%BF%E5%85%A5%E5%9B%B3-%E6%97%A7%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF.drawio.png?version=1&amp;modificationDate=1708475394981&amp;api=v2" data-image-width="260" data-linked-resource-container-version="17" data-linked-resource-content-type="image/png" data-linked-resource-default-alias="inside挿入図-旧エディタ.drawio.png" data-linked-resource-id="1892760959" data-linked-resource-type="attachment" data-linked-resource-version="1" data-location="小杉 鞠奈@PF開発部 &gt; inside_shirousagi関連 &gt; inside挿入図-旧エディタ.drawio.png" data-unresolved-comment-count="0" height="202" src="https://confl.arms.dmm.com/download/thumbnails/1724399477/inside%E6%8C%BF%E5%85%A5%E5%9B%B3-%E6%97%A7%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF.drawio.png?version=1&amp;modificationDate=1708475394981&amp;api=v2" title="小杉 鞠奈@PF開発部 &gt; inside_shirousagi関連 &gt; inside挿入図-旧エディタ.drawio.png" /></p>

<p>またどのケースで、どのようなスタイルを当てるかという&ldquo;見た目のわかりやすさ&rdquo;に関しても、書き手のスキルに委ねられていました。<br />
さらに自由なエディターで作成される記事は、ウェブアクセシビリティの観点からも課題を生みやすくなります。その例として、表が複雑に結合されて表現されてしまうことで、スクリーンリーダー等の視覚的な支援技術を用いるユーザーの理解に影響が出るケースがありました。<br />
これらの事象は全て、ユーザーにとって記事内容の理解が難しくなるという問題に帰結していました。<br />
記事を書く際のライティングルールをまとめた資料もありましたが、人力で全てを統一するのは難しい状況でした。</p>

<p>そこで、今回のリプレイスでは少しでもそこの負担を減らし、ライティングルールが統一できるようにエディターのカスタマイズも行いました。<br />
「Tips記載用」「注意喚起用」といった形でスタイルを用途ごとに用意し、HTMLの直接編集を禁止することで誰が記事を作成してもスタイルに差が出ず、ウェブアクセシビリティにも準拠した形のエディターに一新しました。</p>

<p><img alt="" height="112" src="https://image.dmm-corp.com/r02d7g2oguvrceegwebxwws9fpbi" width="212" /></p>

<p>&nbsp;</p>

<p>これにより、記事の表現方法のばらつきやウェブアクセシビリティの問題、そして作成者のスキルに左右される&ldquo;見た目のわかりやすさ&rdquo;といった課題を大幅に改善することが可能となりました。</p>

<h2>リプレイスにおける学びと反省</h2>

<h3>利用者の声をいかに反映していくか</h3>

<p>DMMヘルプセンターの管理画面の設計をしていたときの話です。</p>

<p>DMMには複数のカスタマーサポート部署が存在しており、ヘルプセンターの管理システムはそれらの部署により利用されています。<br />
UIの設計段階では、GoogleやSlack等社内で使い慣れたシステムのUIを参考に組み立てるように意識したり、根拠となる事例を探して設計を進めたりしました。</p>

<p>そうして作られたUIを元に管理システムの利用者にフィードバックを依頼した結果、各部署で相反する意見や要望があることだけでなく、広く使われているツールを参考にして設計したという理由では相手の納得を得ることが難しいこともわかってきました。<br />
管理システムの利用者からの要望をそのまま受け取るのではなく、その背後にある真のニーズを把握し、その解決のために最適なアイデアを導き出すスキルの重要性を感じました。<br />
「他のツールがそうだから」と主張しきるのではなく、「なぜそのUI設計が適しているのか」を明確に理解した上で、その理由を利用者に具体的に説明できればスムーズに理解と納得を得られたと思います。そういった気づきは得られたものの、これらのスキルに関してはまだまだ勉強不足です。<br />
引き続き、より良いUI・UXを追求してまいります。</p>

<h3>データ移行の手間から学ぶ設計の重要性</h3>

<p>改善事例として記載したFAQ記事内容の統一やライティングルールの統一にあたり、既存の記事に関しても内容の統一を行い、新しいエディターに沿ったルールとなるようにHTMLの置き換えを行いました。</p>

<p>今回私たちが再利用したかったのは記事の文面そのものであり、その文面に付随するスタイル等の表現方法ではありませんでしたが、無秩序に作成された旧記事のデータには独自のJavaScriptが埋め込まれていたり、CSSが直接記載されていたりしました。</p>

<p>FAQ記事は3000件以上存在しており、かつ規則性のないものが多かったこともあり、スクリプトを利用した自動置き換えに全てを任せられず、手動で1つずつ記事を修正する作業に約1.5人月を要しました。</p>

<p>データ作成の自由度が高すぎることは前述したユーザビリティに関する問題点のみならず、生成されたデータの再利用の容易さという観点からも大きな問題を生むことを身をもって実感しました。</p>

<h3>QAチームとの連携に苦戦</h3>

<p>案件内で私の業務の1つであった関連部署との連携には、QAチームとの調整が含まれていました。</p>

<p>検証担当のQAチームへの仕様共有は、ある程度実装が進んだ段階からFigmaに起こしたデザインやユースケース図といった画面仕様書をベースに行っていました。</p>

<p>ところが、メール送受信システム等の画面に現れない仕様の共有漏れにより検証が抜けてしまう部分がいくつもありました。<br />
検証が漏れた部分では、リリース後の不具合が頻発し、結果的に利用者であるカスタマーサポートメンバーの手を煩わせることにもつながりました。<br />
QAチームはUIだけでなく、さまざまな観点からテスト項目に関する提案をしてくれるものの、開発側からの情報共有がないことには進みません。<br />
そのため、もっと早い段階からQAチームと連携し、仕様の検討段階から会議に参加してもらうなど細かな情報共有を行うべきであったと感じました。</p>

<h2>さいごに</h2>

<p>大規模リプレイスにおけるはじめてのUI・UX改善で、個人としては達成感とともに反省点も多いプロジェクトとなりました。<br />
また、今回のリプレイスは技術負債からの脱却に焦点が当てられたこともあり、リプレイス内では実現できなかった改善も多くあります。<br />
そのため脱却が完了した現在でも、CSプラットフォームグループではヘルプセンターに関わる多くの機能改善を実施しており、今後もたくさんの改善を予定しています。<br />
DMMヘルプセンターの今後にご期待ください！<br />
最後までお読みくださりありがとうございました。</p>


本記事では、未経験の元エンジニアがヘルプセンターシステムのリプレイスでUX・UI改善に携わった話として、改善事例とそこから得た学び・反省について紹介しています。

プラットフォーム

サイト設計

開発ディレクション

プラットフォーム開発本部

新ヘルプセンターシステム#5 リプレイスにおけるはじめてのUX・UI改善

新ヘルプセンターシステム#5 リプレイスにおけるはじめてのUX・UI改善

シェア

関連する求人

関連する記事