株式会社ニューロマジック

スクラム開発におけるUI／UX設計〜フロントエンド実装協力 【Keywords】 UXデザイン/コミュニケーションデザイン/デザインシステム/クリエイティブ開発/HRtech === ■Project あしたのチーム SaaS型プラットフォーム開発協力 ■Clients 株式会社あしたのチーム ■Released 2020.6 === 【背景】 人事評価や社員情報の管理、組織図の作成といった企業の経営者や総務担当者の業務をオンラインで管理・サポートするSaaS型のプラットフォーム「あしたのクラウド」の機能拡張プロジェクトです。 他社エンジニアやデザイナーと協業するスクラム開発体制でUI／UX設計〜フロントエンド実装担当として参加しました。 【設定した課題】 ユーザー調査・分析によって提起された課題からの、ニーズに対応する社員情報の管理機能の追加開発およびUI改善。 【プロセス】 ■要件定義 本プロジェクトはアジャイル型で、スクラム開発体制で参画しています。 新しい機能実装が多いため結合する既存の複雑な基幹システムを正しく理解し、その仕様を前提とした要件定義や仕様策定に時間をかけました。 ■UX設計 新機能の組織図アプリケーション設計・実装に際して、インタビューを実施し、ペルソナとカスタマージャーニーマップを作成。 これをもとにユースケース図やUML図を作成、既存仕様といかに折り合いをつけて要求を達成するかの設計に取り組みました。 ■UIデザイン 今回の機能拡張のタイミングで、兼ねてから導入が検討されていたアトミックデザインが採用され、Vue.jsを使用した実装レベルのコンポーネント管理を前提としたUIを設計することになりました。既存仕様と採用するライブラリの制約を踏まえたUI設計に取り組みました。 また、以降の運用で参加するデザイナーやエンジニアたちがパフォーマンスを発揮しやすいように、UX原則やUI原則に言及したデザインガイドを弊社デザイナーが作成しました。 ■開発 最終的なシステムとインターフェースの完成に至る途中で、動的なデータを扱う共通モジュールの大量作成・管理が必要でした。 設計と実装には通常のフロントエンド開発よりも配慮や工夫が必要とされ、ソースコードのレビューと修正はかなり入念に実施されることになりました。

設立から90年をこえる水質観測機器の老舗メーカー、鶴見精機のコーポレートサイトをフルリニューアル。 経営層や関係部署を巻き込み「目指すべきブランドのあり方」を共創することで、社内組織の空気や文化までも変えていくという、プロセスも重視したご提案となりました。 【Keywords】 ブランドデザイン/UXデザイン/コミュニケーションデザイン/サービスデザイン/デザインスプリント/EX（従業員体験）設計 === ■Project 鶴見精機 コーポレートサイトリニューアル https://tsurumi-seiki.co.jp/ ■Clients 株式会社 鶴見精機 ■Released 2021.4.26 === 【背景】 長年使われてきたコーポレートサイトのリデザインが数年来進んでいない中、2020年度の品質方針の柱の一つに「ブランド力のアップ」が掲げられ、広報活動及び企業イメージアップによる販売促進・雇用促進の一環としてコーポレートサイトのリニューアルを推進することとなりました。 また併せて鶴見精機が目指すべき姿の再定義を行い、組織文化を見直していくためのシンボルマークのリニューアルも行いたいという、インナーブランディングへの期待もありました。 それらを上手く進めるためにも、経営層や関係部署を巻き込みながらの「共創型プロセス」にしていくべく、プロジェクトがスタートしていきました。 【課題の精査】 ■共創型未来創造ワークショップ 経営層・関係部署それぞれの意見や知見を言語化・可視化する共創ワークショップのプロセスを導入しました。 ＜経営層向けワークショップメニュー＞ ・ペルソナ ユーザーリサーチから得られた情報をもとに、ターゲットユーザーの属性に共通する特徴を持ったペルソナを2種類作成。 ・[長期目標と短期目標]自社のデジタルコミュニケーションにおける5年後および2年後の目標を設定 ・[予想できる問題]設定された長期目標と短期目標を達成するために障壁になりうる要素 ・[UVP（ユニークバリュープロポジション）]自社の競合優位になりうる特徴を言語化 ＜関係部署向けワークショップメニュー＞ ・[ペルソナ]コーポレートサイトを訪問するユーザー像を明らかにする ・[カスタマージャーニーマップ]明らかになったユーザー像の、サイト上での行動と離脱タイミングを特定する ・[ムードボード]社外の人に持ってもらいたい自社イメージについて意見を出し合い、ビジュアル化 ワークショップにおいて、ニューロマジックは双方の考えを引き出すファシリテーションと、それらを読み取りやすいデザインにまとめることで貢献。その結果、経営層と関係部署の間でこれまで共有されてこなかった意向や課題意識が可視化され、相互理解が進み、組織の共通認識醸成やコミュニケーション活性化につながりました。 ＜経営層向けワークショップで得られた課題＞ 伝えるべきブランド像は「ユーザーニーズに沿った開発から保守・運用まで伴走する企業」であることがわかった一方、現状のコーポレートサイトで与える印象はプロダクトアウトのメーカーの域を出ていないというギャップが明らかになりました。 ＜関係部署向けワークショップで得られた課題＞ Webサイトのターゲットとしたいセグメントが特定できたことで、ターゲットユーザーが製品の置き換えや購入を検討するために必要な情報が不足していることや、該当するコンテンツがあったとしてもそこに至る導線に複雑さを感じていることがわかりました。 【設定した課題】 ワークショップの結果をふまえ、2つの課題を設定しました。 1.幅広いユーザーに対して、鶴見精機の価値や企業姿勢を一貫した形で表明し、鶴見精機のブランド認知と理解を促進する -「長年の歴史によるブランド力もあるが、常に新しいことにも挑戦している会社である」ということが伝わる -ただ製品を開発して終わりではなく、アフターフォローなど、サポートサービスがあることが伝わる -製品情報や開発プロセス、その意図が発信できていて、鶴見精機の活動を正しく理解してもらえる 2.Webサイトを来訪する様々なニーズを持ったユーザーそれぞれに必要な情報を用意。またそれらを探索しやすい導線の実現 -ニーズの高い情報である製品やカタログ、提供サービスが探索しやすい -困りごとや相談したいことを問い合わせしやすい -現状不足している、サポート体制や活動に関するコンテンツの強化 【具体化プロセス】 課題を受けて、力点を置いたのは2点。まずひとつには現行サイトで実現できていないブランドの認知・理解を、トップページのコンテンツやサイト全体のトーン&マナー、ロゴのリデザインで解決すること。もうひとつは、設定したターゲットの行動に即した、コンテンツの拡充と導線設計のためのUXデザインでした。 ■デザイン 関係部署向けワークショップで完成したムードボードを参考に、コーポレートサイトで表現したいパーソナリティを定めていきました。ブランドの歴史が長い分、硬直化してしまうブランドイメージを払拭し、現状ない新たな一面を見せたいというご意見から、「爽やかさ」や「ユーモア」を押し出したトンマナ、コピー、メインビジュアルをご提案し、採用いただきました。メインビジュアルでは、多岐にわたっていて難解だった事業内容説明を、伝わりやすく親しみやすいものにするために、アイソメトリックなイラストを描き起こしています。 ■UXデザイン 顧客接点のあるメンバーと共にカスタマージャーニーマップを作成したところ、社名で検索してトップページにランディングするユーザーが多いことが判明。そこでトップページは、ブランドの認知と理解に貢献し、ユーザーが必要とする情報の入り口を配置する作りとしました。例えば、お問い合わせや製品情報取得を目的とするユーザーが多いという観点から、お問い合わせ導線のわかりやすさ、製品やカタログの探しやすさを改善しています。 また、アフターフォローやサポートの手厚さなど、従来伝えきれていなかった情報をカバーするコンテンツを作成しました。 ■ブランディング・CI 「水の観測のプロであること」を軸に据え、そこに推進力・正確性・資源/環境・伴走/協調といったキーワードを掛け合わせたロゴ案を16パターン作成しました。また、ロゴ案を「強い意志」を感じさせる「堅」の印象から、繋がりや親近感を感じさせる「軟」の印象まで並べ、クライアントが選択するための軸を明確にし、ご提案しました。 ■エンジニアリング Wordpress.comにてコーポレートサイトの実装を0から実施しました。 本来の鶴見精機の取り組みが、機器開発だけではなく、クライアントとその事業に寄り添う存在であるというイメージを強く持ってもらえるようなブランドおよびコーポレートサイトになったと思います。鶴見精機がクライアントと対峙する姿勢や、ニーズを実現する製造実現力、環境調査活動への貢献など幅広い活動を社内外にアピールする場を作ることができました。またリニューアル後は、ウェブサイトのKPI指標の1つであるリード数が前年の1.5倍を超え定量成果も出ています。 【お客様の声】 ワークショップは、普段出ないような議論もあり、参加メンバーの新たな人となりの一面を見られた点、すごく良かったです。また、細部を議論していく過程で経営と現場の白熱した議論も生まれました。経営、現場双方の想いが整理され、新たにまとまるこのプロジェクトは、ウェブサイトという成果物作り以上に組織体へのカンフル剤の役割を担っていました。組織をまとめるひとつの手段としても活用させていただきました。 株式会社 鶴見精機 Brand Activation 立川正太郎氏

ユーザーが登録してからコンシェルジュと面談するまでのサービス最初の体験フェーズを最適化すべく、ユーザーとクライアント社内の両面から課題を探るUX診断プロセスをご提案しました。 【Keywords】 UXデザイン/サービスデザイン/デザインリサーチ/EX（従業員体験）設計 ===== ■Project ワークポート　エントリーフェーズUX診断 ■Clients 株式会社ワークポート ■Released 2021.7 ===== 【背景】 ワークポートは様々なジャンルの転職サービスを提供する総合転職エージェントです。 ワークポートでは、サイトにユーザー登録してから面談に至るまでのコミュニケーションを最適化し、面談や応募に進むユーザーを増やしたいという課題がありました。担当者は口コミなどの情報から、この登録から面談までのフェーズにおけるユーザー体験に何らかの問題が生じているのではと感じていました。 そこで、ユーザーとオペレーションの両面から課題を特定し、登録から面談までの最適化を探るべく、プロジェクトをスタートさせました。 【プロセス】 ■競合調査 ワークポートの競合となるサービスについてユーザー目線で調べ、転職業界のデフォルトスタンダードやワークポートが差別化できるポイントを探りました。 ■ターゲットユーザーインタビュー サイトを訪問するユーザーを理解し、また訪問から面談までのユーザー体験を把握するために、インタビュー調査を行いました。 ■社員インタビュー オペレーション改善に向けて、現場の担当者さんからヒアリング。現状の業務フローを把握するとともに、従業員とビジネスの視点における気づきを収集しました。 【結果】 各リサーチで得られた情報の整理と可視化、分析を行いました。 ■情報の整理と可視化 まずはターゲットユーザーのペルソナを作成し、訪問ユーザーの期待や最上位欲求を言語化。次に、サービスマップを活用してサービスフローとユーザーのタッチポイントを可視化しました。 これにより、エントリーフェーズの目指すべき姿を次のように定義しました。 「個別最適化された不快感のない呼び込み」 ・ユーザーの最終ゴールはワークポートで満足いく転職をすること。 ・そのために、自分の状況に合ったサービスを最初から最後まで提供してほしい。 ・従業員もユーザーに寄り添った対応で心地よく働きたい。 ■分析 ペルソナを踏まえて、ユーザー体験上の課題と改善点を抽出。そこにサービスマップを重ねることで、具体的なサービスフローの改善点を導き出しました。最終的には理想のコミュニケーションフローをサービスブループリントの形に落とし込み、さらに課題と改善方針、改善案をレポートとして提示しました。 【お客様の声】 社内の人間だけでオペレーション業務の改善を行なう場合、どうしても効率化ばかりに目が向いてしまう傾向にあります。改善のつもりがユーザー満足度を下げる結果になってしまっていないかと、常々危惧しておりました。 そこで今回、フラットな目線で改善ポイントを洗い出すために、ニューロマジック様にサービス登録から面談日時設定までのUX診断をしていただきました。 インタビュー等の調査を通じて、ユーザーが弊社のサービスについて感じていることを掘り下げ、ニーズを整理していただいたことで、オペレーションの改善点を明確にすることができました。 更にご提案いただいた施策を一つひとつ実施したことで、ユーザーのサービス満足度向上につなげることができました。ありがとうございました。 株式会社ワークポート 事業推進部 エグゼクティブマネージャー 林英二氏

Spreadyは、紹介者を介して大手企業の新規事業と個人をマッチングさせるプラットフォームです。本件では、Spreadyのアクティブ率の改善／新規ユーザーの獲得の必要性から、サービスサイトのリニューアル及びサービスログイン後の一部UI改修など、体験の改善についてのご相談をいただきました。 ニューロマジックからは、そもそもどんなユーザーに向き合うべきか、そのようなユーザーへサービスをどのように紹介するべきか、ユーザーリサーチを通じて仮説検証しつつ、利用者目線での改善を重点的にご提案しました。 【Keywords】 コ・クリエーション/ブランドデザイン/UXデザイン/コミュニケーションデザイン/デザインリサーチ/サービスデザイン/デザインスプリント ===== ■Project Spready サービスサイトリニューアル／サービスログイン後UI改善 https://spready.jp/ ■Clients Spready株式会社 ■Released 2021.10.13 ===== 【背景】 Spreadyは企業が募集するプロジェクトにマッチする個人を紹介するサービスですが、鍵となるのは企業募集に個人を紹介するユーザー＝スプレッダーの存在です。ですので、次のようなことを精査するところからプロジェクトはスタートしました。 ・スプレッダーになってくれる理想的なユーザーとはどんなヒトなのか ・ひるがえって、サービスはどのような世界観でどのようなメッセージを伝えるべきか ・初見のユーザーやサービスを継続的に利用するユーザーにとってはそれぞれ何が重要なのか 【課題の精査】 ■クライアントインタビュー 参加スタッフがサービスを深く理解することと並行して、次のようなことのヒアリング／整理を進めました。 1：サービスが目指す方向性、ターゲットとなるユーザー属性の仮説について 2：市場／競合分析 3：その他、サービスについての詳細 　　・これまでの歩みの振り返りと課題の抽出 　　・ユーザーのマッチングがうまくいくパターンとそうではない場合の原因について 　　・サービスがドライブする仮説とその要因 ■ユーザーフロー（ASIS） 既存サービスサイトでのユーザー体験上の課題を、時間軸に沿った画面ごとの体験一覧として資料化し、現在のサイトにおいてボトルネックになっているポイントを可視化しました。 ■ユーザーリサーチ ＜リサーチの被験者選出＞ リサーチのインタビュイー選出は大別して2種類としました。 ・現在のサービス利用者（コアユーザー） ・未来のコアユーザーとなる可能性のある属性のユーザー ＜リサーチ実査＞ 以下のようなポイントについてヒアリングを実施しました。 ・サービス利用者へのサイト訪問〜利用の振り返りを実施。登録のきっかけ、利用のモチベーションなどヒアリング ・ユーザーインサイト発掘。仕事や生き方を考えた時、どのような課題を持っているか。現状感じているペインは何か。自分の世界を広げるためにどんな行動をしているか。人を紹介することについての考え、何にベネフィットを感じるのか ・既存サイトに対する意見。Webサイトから受けた印象、良い点、分かりにくい点 ＜リサーチ結果の考察＞ リサーチ結果を経た分析から、コアユーザーのサービス利用におけるモチベーションのあり方を3つのタイプに分類しました。 A ：新しい人・世界との出会いが好き／友達の力になりたいタイプ B ：自身の成長のため、情報収集のためタイプ C ：案件ベース、適材適所が大事でしょタイプ このうち、特に当該サービスと相性のよい属性はA・Bであると方向づけて、以降のワークショップへと進めました。 ■共創型未来創造ワークショップ Spready社のみなさまと一緒に、ユーザーリサーチの結果を踏まえて、Spreadyに向いているA・Bのターゲット属性をペルソナ化する前提で、以下のワークショップを実施しました。 ・[ペルソナ]ユーザーリサーチから得られた情報をもとに、ターゲットユーザーの属性に共通する特徴を持ったペルソナを2種類作成。 ・[カスタマージャーニーマップ]作成した2種類のペルソナがサービスに出会うところから、継続利用に至るまでの理想の体験のジャーニーマップを作成。 ・[ユニークバリュープロポジション（UVP）]ユーザーの課題をサービスがどのように解決、改善するのかが明確となるUVPを文章化。 【設定した課題】 サービスサイトで謳っていくべきキーコンセプトについて議論する過程で、優先的なターゲットをひとつのペルソナに集約していくことになりました。結果、課題としてサービスサイトが実現を目指すところも次のようにシンプルにすることができました。 「サービスを詳細に理解せずとも、まずは試しにユーザー登録してみよう、と思ってもらえるようにする」 そのために、想定するペルソナ像にとってSpreadyが魅力的に見えるような表現を探っていきました。 【具現化プロセス】 ■サービスサイトのキーコンセプト／キーコピー策定 ユーザーとサービスについて検証した仮説から、コンテンツや表現はどのようなものがよいか、数回にわたって複数のキーコンセプト／キーコピーをご提案し、選定を進めました。 ■トーン＆マナー提案／キーカラー提案／イラストレーション開発 今回のリニューアルを期に、ブランドのキーカラーやモチーフを刷新するVIを設計しました。ビジュアルコンセプトを定義しなおし、そこからサービスを象徴するグラフィックエレメントやイラストレーションを新たに開発するご提案となりました。 ■ユーザーフロー（TOBE） ワークショップで作成した理想の体験のジャーニーマップをベースに、時間軸に沿った画面ごとの体験と、キーポイントとなる要素を書き出し、これをレイアウトデザインや画面設計の拠り所としました。 ■UIデザイン／フロントエンド実装 サービスサイトについて、フロントエンド実装までを担当しました。そして、キーカラーの変更を期に、ログイン後画面の一部も改修を担当しています。 システムに組み込まれているログイン後画面については、多くがすでにコンポーネント化、モジュール化された状態であったため、実装の影響範囲を調査しつつ、バックエンドエンジニアと協議の上、実装の仕方について調整しながら作業を進行しました。 ■ユーザーテスト コアユーザー属性に近しい特徴の被験者を集めたユーザーテストを実施し、テストの結果を踏まえて、イントロのアニメーションやコピー表現をチューニングし、最終的なリリースへ進めました。 【お客様の声】 創業者の想いが詰まったサービスは時にユーザーを置いてけぼりにすることがあります。 これまで私自身がメッセージを考え、サービスディレクションをしてきましたが、リニューアルのタイミングで信頼できるニューロマジック様に出会い、どんなユーザーさんへ何を伝えるべきなのか、一緒に考えていただく機会をつくりました。 結果的に自前で作っていたときより、よりメッセージが伝わる想いのこもったサービスになりました。 またそのプロセスに社内を巻き込むワークショップを実施いただき、みんなの想いをひとつにすることもできました。伴走いただき、大変満足しております。 Spready株式会社 Co-Founder,取締役 柳川裕美氏