![見出し画像](https://assets.st-note.com/production/uploads/images/119384894/rectangle_large_type_2_1eb6210088bc62e57f525525234ca60b.png?width=1200)
SOMPO Digital Labサイト リニューアルの立役者に話を聞いてみた
こんにちは。
SOMPO Digital Lab サービスデザイナーの山﨑です。実は8月末に、我々デザイナーチームが所属するSOMPO Digital Lab (以下SDL)のWEBサイトがひっそりと、でも大幅にリニューアルされていたのはご存知でしょうか?
今回の記事では、WEBサイト改修の立役者だった2名に制作(裏)話を伺っていきたいと思います。
WEBサイトリニューアルの背景
SDLが立ち上がってから7年。グループ全体でSDLに求められる役割、組織規模、対外的な見え方なども大きく変わってきており、必然的にWEBサイトに求められる役割も変わってきました。
その変化に合わせ、組織としてより飛躍するためにWEBサイトのリニューアルを決定。
サービスデザイナーの和嶋さん、プロダクトデザイナーの林さんを中心に、今年の4月にWEBサイトリニューアルチームが発足し、8月の公開まで一気に駆け抜けたプロジェクトとなります。そもそも、SDLがどういう組織なのか概要を知りたいという方はこちらからどうぞ。
旧サイトの制作経緯がわからない?から始まったリニューアルプロジェクト
<登場人物紹介>
♦️サービスデザイナー(以下SD) → 和嶋さん(最近の執筆記事はこちら)
❤︎プロダクトデザイナー(以下PD) → 林さん(最近の執筆記事はこちら)
♣️インタビュアー → 山﨑(最近の執筆記事はこちら)
♣️山﨑(インタビュアー)
まずはこのプロジェクトの全体像からお話を伺わせていただきます。
今回のサイトリニューアルの一番の目的はどういった点にあったのでしょう?
♦️和嶋(SD)
実は一番最初、その目的自体がなかったんです。
♣️山﨑(インタビュアー)
おっと?笑
それはどういうことでしょう?
♦️和嶋(SD)
SDLは東京、イスラエルのテルアビブ、アメリカのシリコンバレーと3箇所に拠点を置いています。2020年に、当時のWEBサイト開発を主導していたのは、イスラエルのテルアビブでした。なので、その時のWEBサイト制作経緯やサイト構成、目的を把握することが難しい状況でした。
また、2020年頃のSDL東京の業務は、外部に公開できないSOMPOグループ内のPoCなどがメインだったので、WEBサイトで公開できる情報にも限りがあったのではないかと思います。
そういった経緯から、今回のリニューアルではとにかく情報を集めるところ、現状を把握するところから手探りで始めています。
❤︎林(PD)
最初はふたりともその経緯も知らなかったので、結構ビックリしました。
海外オフィス主導はちょっと予想外でしたね。
♣️山﨑(インタビュアー)
当事者から話を聞けない、当時の情報が残っていないのはなかなかハードですね。
では、WEBサイトリニューアルプロジェクトは
具体的にはどんなプロセスで進められたんですか?
♦️和嶋(SD)
大きくは、以下の流れで進行していきました。
【1:現状把握、ステークホルダー整理、他社リサーチ】
【2:課題抽出、目的設定】
【3:ターゲット策定、ペルソナ作成、体験設計、機能要件策定】
【4:サイトマップ作成、デザインコンセプト策定】
【5:UIデザイン作成、実装】
![](https://assets.st-note.com/img/1697768660428-D5qn7VJBte.png?width=1200)
![](https://assets.st-note.com/img/1697768682326-oFhH13NXjF.png?width=1200)
![](https://assets.st-note.com/img/1697768679101-Ii024UQeBU.png?width=1200)
![](https://assets.st-note.com/img/1697768699191-478jQTwnxu.png?width=1200)
![](https://assets.st-note.com/img/1697768718447-2s74Yvb8uy.png?width=1200)
![](https://assets.st-note.com/img/1697768741601-pvhy47Eewo.png?width=1200)
先にお話ししていたように、【1:現行サイトや他社事例の分析、ステークホルダーの整理】は、現行サイト制作経緯の情報が少ないだけでなく、ステークホルダーも把握しきれていない状態で始まったので結構手探り状態でした。
かつ、公開まで4ヶ月と時間もあまりなかったので、
最初からPDの林さんと伴走し、ふたりであらゆる情報を共有し続けられたことで解像度を高く保て、最終的なアウトプットは良い仕上がりになったと思っています。
❤︎林(PD)
ですね。UX→UIでのデザイン開発は、SDLの現状に即した良いデザインにできたと思っています。
私たちはどう見られたい?をふたりで突き詰めていった
♣️山﨑(インタビュアー)
では、おふたりが各工程の中で具体的にどんなことをされていたのか、伺わせてください。
♦️和嶋(SD)
【1:現状把握、ステークホルダー整理、他社リサーチ】【2:課題抽出、目的設定】については、旧サイト制作当時のことが分からないこともあり、1ヶ月ほど時間をかけてしっかり行っています。
今のSDLのサイトに何が求められているかのヒアリングをSOMPOグループ内のステークホルダーに行い、GA解析、他社サイトのリサーチなども並行して行い、課題抽出を進めました。その結果、以下のような整理が行えました。
【課題仮説】
・SDLのカルチャーや組織の特徴に興味を持った、組織外からのニーズにサイトが対応できていない
・採用の導線が転職検討者にとって使いやすいものになっていない
【サイト大目的】
転職希望者がSDLに興味を持ち、応募までスムーズに移れる
❤︎林(PD)
状況把握する中で見えてきたことなんですが、応募窓口が職種によって異なっていたり、グループ間での連携がうまく機能していなかったりと、採用に対する課題がかなり大きくあることが明確になってきましたね。
♦️和嶋(SD)
目的設定までできた段階で、仮説をもとに職種・年代・性別がバラバラな3人の仮説ペルソナを作成し、実際にSDLに転職されてきた社員の方達10名弱の方にご協力いただき、アンケートやインタビューを行いました。
SDLに入られた方が並行して検討していた企業はどんなところなのか、SDLに転職を決めた決め手はなんだったのかなどを精査し、課題仮説の検証をしつつ、大目的達成のための要件定義を行っています。
♣️山﨑(インタビュアー)
なるほど、ではそこで定めた目的に沿って、UI開発に進んでいった感じですかね?
♦️和嶋(SD)
いえ、それが実は問題が発生しました。サイトリニューアルの大目的に置いた「転職希望者がSDLに興味を持ち、応募までスムーズに移れる」なのですが、SDLへ興味を持ってもらうコンテンツへの導線がWEBサイトとリンクされていなかったり、職種によって外部サイトの遷移先が異なっていて回遊導線が整っていなかったり、単純にWEBサイトを改修するだけでは目的を達成できないことが分かったんです。
そこまで全てを改善しようとすると、8月のサイト公開の時間軸には間に合わなくなってしまう、と。
♣️山﨑(インタビュアー)
結構クリティカルな問題ですね。
♦️和嶋(SD)
はい。なので、採用という大目的はブラさずに、8月ローンチの中で採用に対して効果効率が高い機能から開発し、徐々にサイトを拡充していこうと、林さんと決めました。
♣️山﨑(インタビュアー)
具体的には、どんな機能に絞ったんでしょうか?
♦️和嶋(SD)
先に行ったインタビュー、アンケート結果などから、彼ら(転職検討者)がどんな価値を感じてくれればSDLに興味を持ってくれるかは見えていました。
なので、それを表現しているコンテンツへの導線を再度設計しました。
それをもとに林さんとサイトマップ作成、デザインコンセプト策定を行い、UI開発に着手しました。
体験設計、機能要件の変更があったため、この時点で7月になってしまっていた気がします。
❤︎林(PD)
でしたね〜。こりゃ気合を入れねばと思いましたね 笑
組織と個人が持つ価値観の親和性の高さ
♣️山﨑(インタビュアー)
紆余曲折を経て着手されたUI開発は、どんなことに注力されていましたか
❤︎林(PD)
まず良かったのは、和嶋さんと最初からペアワークのように進めていたおかげでアンケートを含めた事前調査結果、採用競合となる企業の傾向などまで
UX設計の時点からデザインコンセプトを考えられ始めていた点です。その中で最初に着手したのが、SDLのポジショニングです。
♣️山﨑(インタビュアー)
なるほど。SDとPDがお互いの領域まで染み出しあって進行できたからこその結果ですね。では、SDLはどんなポジションだったんでしょう?
❤︎林(PD)
一言で言うと「繊細」「堅実」というポジションになります。SDLは転職検討者からITコンサル、メガベンチャー、大企業内のDX推進組織と比較される傾向が強くあったので、代表的な競合企業を4章限に分類するところから始めました。詳しくはお見せできないのですが、下記のように分類し、分析を行っています。ところで山崎さん、SDLのビジョンってご存知ですか?
![](https://assets.st-note.com/img/1697768911149-n1RMDx0gwL.png?width=1200)
♣️山﨑(インタビュアー)
教えてもらった覚えはあるのですが、すみませんうろ覚えです。
❤︎林(PD)
いえいえ。「事故をなくす。災害をなくす。病をなくす。目指すのは、保険が必要ないほどの安心・安全・健康な世界」という組織ビジョンなんですが、実はこれって、全然知られていないんです…。私も入社してから知りました。初めて知った時、デジタル部門の組織が掲げるビジョンにしては、かなりコンセプチュアルな印象だなと思いました。でも、生活に根付いている感じがとてもいいなと思ったんです。
この価値観をちゃんと体現し、共感できる人がSDLに興味持ってくれるようにしようと考え、デザインコンセプトを開発しました。
♣️山﨑(インタビュアー)
なるほど。でも、こういうフワッとしたビジョンを掲げるところって結構ある気もしません?
❤︎林(PD)
もちろん、同じような粒度のビジョンを掲げている企業は他にもあります。
でも、デザインコンセプトと内部組織の実情が一貫しているところって、
あまりない印象を個人的には受けたんですよね。やっぱりそこに乖離があると、最終的にはみんなにとって不幸だと思うんです。
SDLに転職されてくる方って、スケール感などに大小はあれど「誰かの役に立ちたい」「社会に還元したい」など、公共性の高い価値観を持っている方が多いんです。
これはアンケート結果からも明らかに出ている組織の特徴でした。「目指すのは、保険が必要ないほどの安心・安全・健康な世界」という組織ビジョンと、「他利思考の傾向がある」という個人の価値観の親和性が高いので、そのことを丁寧にデザインにしようと考えました。
♣️山﨑(インタビュアー)
確かにその通りですね。私も日々感じますが、組織ビジョンと転職者のマインドギャップはあまりないと思います。デザイン制作に着手する上で、気にしていたことはありますか?
❤︎林(PD)
やはり、安直なデジタル感は避けたかったですね。組織の名前に「Digital Lab」とあるように、何もしなくてもデジタル感が前面に出てきます。でも、SOMPOグループのアセット上、SDLのアウトプットはデジタルプロダクトだけではないので、デジタル完結のような見え方にはしたくなかったんです。デジタルを売りにしているのではなく、あくまでデジタルは手段、という考え方を大切にしたいなと考えデザインしました。
♦️和嶋(SD)
内部のメンバーや価値観が透けて見えるようなもの、情緒を感じられるデザインを目指したって感じですね。
❤︎林(PD)
そうそう。まさにそんな感じです。エモさというか。
♣️山﨑(インタビュアー)
なるほど。では、そこから具体的にはどんな進め方をされたんですか?
❤︎林(PD)
「エモさ」や「中の人を感じる」のように、見えていたいくつかのキーワードを元に、海外含め多数のサイトから、目指す姿を具体化するデザインエッセンスを抽出していきました。
♦️和嶋(SD)
PDの松葉さん(最近の執筆記事はこちら)にもご協力いただき、FigmaとMiro上でアイディエーションをしていきました。トータルだと100サイト以上は見ていると思います。
❤︎林(PD)
かなりの数のWEBサイトみましたよね。そうして3人でアイディエーションと収束を何度か行っていきました。
![](https://assets.st-note.com/img/1697768968421-LctfKstG5c.png?width=1200)
その過程を経て、最終的なビジュアルコンセプトを端的に言うと、こちらになります。
ビジョンのもつ優しさを表現しつつも、プロフェッショナルなデジタル組織としてのモダンさ・スタイリッシュさを感じられるデザイン
![](https://assets.st-note.com/img/1697768865724-CDMW6ZrW1T.png?width=1200)
このコンセプトを元に、Figmaでデザイン制作を進めていきました。また、実装も松葉さんにSTUDIOでしていただけることに決まったので、アドバイスをもらいながら、実装可能なデザインやサイト上の演出を検討しています。
♣️山﨑(インタビュアー)
では、ビジュアルデザインの中でこだわったところについて教えてもらっても良いでしょうか?
❤︎林(PD)
SDLは、組織の性質上良くも悪くも「具体的にコレをつくっている」とは言えないチームなので、サイト全体でのキーとなるモチーフ選びには気を使いました。最終的にキービジュアルは地球というかなり抽象度の高いモチーフを選びましたが、その分、保険以外のSOMPOの事業アセットである、介護・ヘルスケアなどが具体的にイメージできるよう、コピーと画像を用いて、その直下のステイトメントセクションを工夫しています。
また、わかりやすいデジタル表現を避けつつ、スタイリッシュさや先進的なデジタル組織感を演出する目的で、グラデーションの有機的な表現を採用しました。
♣️山﨑(インタビュアー)
確かに、このグラデーション表現は、組織ビジョンとの親和性も高くて、個人的にも素敵だなと思っていました。
❤︎林(PD)
ありがとうございます。実はもうひとつあって、これは松葉さんが実装時に採用してくれた演出なのですが、サイト内の画像がフィルム写真のような見え方になっていると思うんですが、実は動的なテクスチャーを重ねているんです。
♣️山﨑(インタビュアー)
あ!このチリチリ感ですね!芸が細かい!これは画像だとわからないので、ぜひWEBサイト見ていただきたいですね 笑
❤︎林(PD)
ぜひ見てみてください 。松葉さんがデザインと並行しながら実装を進めてくださったので、最終的なアウトプットが、よりブラッシュアップできたなと思っています。
また、松葉さんは普段私と同じようにPDとして勤務されていて、
言語化しきれなかった箇所や説明が足りなかった内容に対して「ここはこういう意図でデザインしているんだろうな、だったらこういう演出にしたいのでは?」というように、私の意図を汲み上げてくださりました。
♣️山﨑(インタビュアー)
そうなんですね。確かに、PD同士だからこそ可能な進め方だったんでんすね。ありがとうございます。では最後に、今後このサイトをどう育てていこうと考えられていますか?
❤︎林(PD)
そうですね。やはり大目的の採用に関わるところからですね。WEBサイトのビジュアルデザインだけでは「SDLが何をしているのか」の具体や内側までは見えてこないので、それをちゃんと拡充できるコンテンツ制作を進めていきたいと考えています。
♦️和嶋(SD)
あとは、外部も含めた採用導線の見直しを行い、全体設計をユーザーにとって使いやすいものにしていきたいですね。
♣️山﨑(インタビュアー)
そうですね。その辺りはまだ道半ばですもんね。WEBサイトはSDLの顔のようなものなので、これからの展開も楽しみにしています。今回は、お時間いただきありがとうございました。
弊社ではデザイナーを絶賛募集中です。少しでもご興味を持っていただけた方はご連絡いただけますと幸いです。まずはライトにカジュアル面談しましょう!