HRogメディアのデザインリニューアルしてみた【前編】

HRog（フロッグ）は、「人材業界の一歩先を照らすメディア」をコンセプトとし、人材業界に関する最新ニュースや求人市場の動向、業界の専門家へのインタビュー記事を提供するサイトです。こちらのブログでは、HRogのサイトデザインリニューアルに際し、実施した取り組みについて紹介します。

サイトリニューアル前の準備

① ヒアリング

サイトのデザインを変更する前に、マーケティングチームの担当者と打ち合わせを実施しました。事前に参考サイトや要望がまとめられていたため、ヒアリングでは、サイトの看板となるFV（ファーストビュー）に含める要素や、現行サイトで維持したい部分について確認しました。

ヒアリングの結果として、以下の要件が挙げられました。

• シンプルな構成で視認性を高める
• 読者のUX（ユーザーエクスペリエンス）の向上
• 「頼れるメディア」として想起してもらうためのエンゲージメント率の向上

② リサーチ

サイトデザインの方向性を決定するために、競合のオウンドメディアサイトを調査しました。特に、カードデザインや情報の見せ方を中心に分析し、視認性やユーザビリティの向上を考慮しました。

サイボウズ式

サイボウズが運用するメディアサイト「サイボウズ式」では、3列のカードレイアウトを採用し、ホバー時にシャドウがかかるデザインになっています。これにより、読者がコンテンツに視線を誘導しやすくなる設計がなされています。

「読者と編集部がつながる」をテーマにイベント情報やサイボウズ式に関わる人々が見えるように構成、サイボウズ式が伝えたいことを手助けする見やすいけれどシャープすぎないデザインで制作。

https://www.moreworks.jp/works/7437より引用

フルスイング（DeNA）

DeNAが運用するメディアサイト「フルスイング」では、新着記事のピックアップをFV（ファーストビュー）に配置し、カードを4列表示にすることで、シンプルなデザインを実現しています。企業ブランディングの観点から、コーポレートサイトと統一感のあるデザインが採用されています。

また、オウンドメディア制作時の参考として、以下のサイトも活用しました。

• オウンドメディアのデザインまとめサイト（matome）
• オウンドメディアの成功事例50選
• UIライブラリー（Webデザイン参考ギャラリー）

ブランディングの観点からも、企業イメージを統一していきたいという話もありました。DeNAコーポレートサイトとのデザインの連動感はもちろんですが、“『フルスイング』らしさ”は出したい。どういうスパイスを入れるのかがチャレンジというか、デザインのポイントだったかなと思います。
「ラベル」には、DeNAの「ミッション・ビジョン・バリュー」のワードを英語で入れています。DeNAのみんなが、DeNAのミッション・ビジョン・バリューを軸として、社会に多くの「Delight」を届けるために働いていることをサイトで体現しました。

https://fullswing.dena.com/archives/100011/より引用

③ コンポーネントの作成

リニューアルに際し、メインカラーには従来の緑を継続採用し、白を基調としたシンプルなデザインに統一しました。

特にこだわったのはシャドウのデザインであり、カードの状態変化を視認しやすくするために、ホバー時にカードが浮き立つ仕様を取り入れました。背景色には白や薄いグレーを使用し、明るく清潔感のある印象を保ちながら、情報の識別を容易にしました。

サムネイルに使用している記事はこちら。内容は新卒2年目の社内メンバーが実際にタイミーで働いているレポート記事になります。面白いので気になった方はぜひご一読ください！

さいごに

今回は、HRogのサイトリニューアルにおいて、デザイン着手前に実施した取り組みについて紹介しました。

情シスナビを運用している株式会社HumAInでは、求人メディアサイトの制作を5年以上手掛けています。UIUX設計からIndeedとの連携、運用・保守まで、幅広いサポートを提供しております。求人メディアや求人サイトのノウハウも多数あり、開発・デザインの実績も豊富ですので、気になった方やお困りの方はこちらからお気軽にお問い合わせください。