“読みやすさ”をとことん追求!「マネ会」リニューアルについて社員インタビュー

開発メンバーの写真

株式会社CyberOwlが運営する、知って得するお金の情報メディア「マネ会 by Ameba」(以下、「マネ会」)を2023年7月にリニューアルいたしました。トップ画面のロゴや記事の表示も大きく変化。“読みやすさ”を追求した仕様となっています。

今回は開発に携わった方々のなかから、システム戦略室エンジニア執行役員の浅田亨さん、デザイン戦略室デザイナーの金子 善博さん、そして教育メディア事業部プランナーの四宮 未貴さんの3人にお話を伺いました。

エンジニア執行役員 浅田亨の写真


【プロフィール】
浅田亨:株式会社CyberOwl執行役員。WEB受託企業を経て、2016年に株式会社CyberOwlの前身である株式会社CyberSSへ中途入社。エンジニアとして比較メディアのサーバーサイド開発に従事。現在はプレイヤーとして「テラコヤプラス by Ameba」の開発をおこなうほか、エンジニアメンバーのマネジメントや採用活動、開発に関わる社外との連携など幅広い業務を担っている。 

 デザイナー 金子善博の写真


【プロフィール】
金子善博:2007年に株式会社サイバーエージェントに中途入社し、株式会社CAテクノロジーへ出向。その後、株式会社サイバーエージェントのネットビジネス総合事業本部への異動を経て、2014年に株式会社CyberOwlの前身である株式会社CyberSSへ異動。現在自社メディアのデザイナーとして従事している。

プランナー 四宮未貴の写真


【プロフィール】
四宮未貴:2019年に株式会社サイバーエージェントに入社し、株式会社CyberOwlへ配属。「モノレコ(現:モノレコ by Ameba)」「マネ会(現:マネ会 by Ameba)」「LessMo by Ameba」などのプランナーに従事。現在は「テラコヤプラス by Ameba」のプロデューサーとしてメディアグロース業務に従事している。

「マネ会」リニューアル!その目的は?

「マネ会」リニューアル


ー「マネ会」のリニューアルお疲れ様でした。社内でも「見やすくなった」と評判ですね!

浅田: ありがとうございます。無事に終わり安心しています。リニューアル後の仕上がりについても満足していますが、自分たちで決めた期限内にできたという点にも達成感を感じています。

金子: 正直、「もしリニューアルして数字が落ちてしまったら…」という不安があったのですが、「順調ですよ」という報告をもらい、それだけでもよかったです。

四宮: 社長からも「すごく見やすくなった」と言っていただきました。社内のチャットなどでも皆さんからお褒めの言葉をたくさんいただいてとても嬉しいです。

ーまずは、今回のリニューアルにあたり、皆さんの役割を教えてください。

四宮: 私はプロデューサーとして、ユーザビリティ(※1)を改善するためにどのような施策が必要なのかを分析し、デザイナーやエンジニアと一緒に施策を進めていきました。普段は「テラコヤプラス by Ameba」という教育メディアを担当しており、「マネ会」に携わるのは入社1年目以来の約4年ぶりに。

金子: 僕は自社メディア全般のデザイン業務に従事していて、今回のリニューアルでも、四宮さんが分析してくれた結果をもとにモジュール(※2)のデザインやページの余白、文字の大きさなど目に見える部分のデザインを4人のデザイナーと共に担当しました。

浅田: 僕はエンジニアとして、デザイナーさんが仕上げてくれたデザインを実際のウェブページとして作る、サーバーサイド(※3)とフロントエンド(※4)の開発をおこないました。

※1 ユーザーにとっての使いやすさ
※2 いくつかの要素を一つにまとめたもの
※3 データ管理などのユーザーの目に見えない部分
※4 直接ユーザーが目に触れる部分

ー今回のリニューアルの目的を教えてください。

浅田: 「狙っている検索キーワードで1位になる」という「マネ会」立ち上げ当初から掲げている目的のためです。

そのためには、UI(※5)UX(※6)を改善することが必要なのでは、という社長からの提案がきっかけで今回のリニューアルに至りました。ユーザーがより見やすく、使いやすいメディアを目指し、その結果として検索順位が上がることを目標にしています。

四宮: スマートフォンから「マネ会」をご利用いただいているユーザーの方が圧倒的に多くなってきた背景もあります。

スマートフォンユーザーにとってさらに使いやすい仕様に変えていくべきではという社長や役員の方々からのご指摘のもと、“読みやすさ”にとことんこだわることにしました。

※5 User Interfaceの略。ユーザーが触れる、あるいは目にするすべての情報
※6 User Experienceの略。ユーザーが製品やサービスから得る体験

―人によって“読みやすさ”は違いますよね。リニューアルに携わった方、全員が納得するような“読みやすさ”に至るまでにはどのような話し合いがおこなわれましたか?

金子: まず、「マネ会」と検索順位を競い合っている“競合サイト”を見比べるところからスタート。

プランナー、デザイナー、編集…職種や役職などが異なる15人に競合サイトをいくつか見てもらい、「読みやすさ」「デザイン」「モジュール」など各項目に点数をつけてもらいました。

四宮: そのうえで、なぜ高い点数をつけたのか低い点数をつけたのか、丁寧にヒアリングを実施。そのなかで、「こういう方が読みやすいのでは?」など多少意見が割れたこともありました。それでも最終的にまとまることができたのは「読みやすくしたい」という共通の理想があったから。

さまざまな意見を交わせたことで、よりユーザビリティを追求したリニューアル仕様になったと思います。

「1ピクセルの違いにもこだわった」“読みやすさ”に振り切ったデザイン

社員が話す写真


―“読みやすさ”追求のために、特にこだわった点は何ですか?

四宮: デザイン文字サイズです。デザインでは、サイトを訪れた方がパッと見てほしい情報がどこにあるかすぐ伝わるようなモジュールデザインを目指しました。

金子: デザインチームとしても“読みやすさ”に振り切り、フォントや行間、マージン(※7)などさまざまなパターンをチームで作り、社長など役員も含めたミーティングでフィードバックをいただき、ブラッシュアップを繰り返しました。

四宮: また、文字サイズは記事の読みやすさに直結するため、微調整を繰り返しながら1ピクセルの違いにまでこだわりました。

開発当初は、「記事本文がこれだから見出しは一つ大きいこの文字サイズで」などと進めていたのですが、社長から「この記事にとって、この部分がいかに大切であるかを文字サイズで表現した方がいいよ」とアドバイスをいただき、大見出し中見出し、そして本文の文字サイズの差には妥協せずに追求しました。

※7 各要素の間にある余白

―リニューアルにあたって特に大変だったことはなんでしょう?

浅田: 「マネ会」はアウルが運営する自社メディアのなかでも歴史のあるサイトです。大規模なリニューアルは今回が初めてですが、歴史のなかで少しずつ改善を加えてきていたものも多々あり、サイトのなかで仕様が混在していました。

それらすべてを今回のリニューアルルールに沿ったものへ変更すべく、見落としがないかの目視での確認作業が大変でしたね。

金子さんからご提案いただいて、その確認のためにほぼ一日使ってロングミーティングをしたことも。

金子: 画面を見ながら2人で一気にチューニングして、 デバッグ(※8)したんですよね。楽しかったですね。

浅田: 大変だったけれど楽しかったですよね。でもデザインが決定するまではいろいろな意見も聞いて、金子さん大変だったんじゃないですか?

金子: 基本的に僕は意見をいただけると「すごく助かる」という考え方なんです。僕にない視点ばかりなので。

もちろん全部を受け入れると芯の部分が崩れてしまうので、いただいた意見の取捨選択はしてきましたが。

四宮: 浅田さんも金子さんもベテランでいらっしゃるので、難易度が高い開発もとてもスムーズに進行していただきました。

私は開発に携わった方々全員にとって納得のいくものにするために、社長や役員だけでなく全員が意見を出しやすいようにするのが少し大変でしたね。

ミーティングを設定したり、意見を書き込めるようなスプレッドシートを用意するなど工夫をしました。

浅田: 今回4年ぶりにこの3人でチームとなり「マネ会」に携わったんですが、四宮さんもベテランの域に入り、僕たちにも論理的にさまざまな指摘を入れてくれて頼もしかったですね。

指摘し合ってよりよいものを作り上げたいなと思いながら開発に臨みました。

四宮: 入社1年目のときに、自由に仕事をさせていただくなかでお二人からたくさんご指摘をいただいたお陰で今があると思っているんです。

今回の施策を通して成長した姿をお見せできていたら嬉しいですね。

※8 プログラム内の誤りを見つけて修正する作業

「相手の立場に立つ」対話の基本が成果に直結

社員が話す写真


―リニューアルを終えてみていかがですか?

浅田: 一番は自分たちで決めた期日どおりに終わってよかったと安心しています。疑問に思うことなど少しでも迷いがあれば、その都度連絡をとりあうように心がけていたので、進行に遅延が発生するようなミスなどなく円滑に進められたからではないでしょうか。

また、お互いの業務状況を見ながら意識的にフォローし合えることもできていたなと感じました。

金子: 僕も浅田さんがとてもお忙しい方なので負荷がかからないように、自然と意識していましたね。

浅田:ありがとうございます。それはひしひしと感じていました。

金子:今、リニューアルに携わったメンバーのグループチャットの会話を見直したのですが、プランナーもエンジニアも職種は違えど相手の立場に立ってコミュニケーションをとろうと意識しているのが伝わってきて、業務進行においてだけでなく何気ないコミュニケーションの面でも相互理解ができているのが、今回無事に終えることができた要因ですよね。

四宮: 私もみなさんと一緒にお仕事ができてすごく楽しかったです。いいものができたなと満足しています!また、1ピクセルの違いを追求するなど、パッと見では誰にも伝わらないような細部にまでこだわることが読みやすさにつながると学びました。今後の業務でも活かしていきたいですね。

今回のリニューアルによって「マネ会」ユーザーの方がより快適にご利用いただけて、「気づいたらいろいろな記事を読み進めてた」と自然と頭に入ってくるようなそんなサイトになっていたら嬉しいです。

採用・文化ブログ 新着記事一覧