合同説明会に特化したオウンドメディアデザインを制作。 読者のターゲットが瞬時に把握できるような仕組みを作りました。
合同説明会にフィーチャーしたオウンドメディアのHPデザインを担当しました。
運営元は当該メディア以外にも複数オウンドメディアを運営しています。
そのため、「他メディアとある程度トンマナを連動させる」ことも視野に入れて作成しました。
最終ゴールは「オウンドメディアを通して運営元の企業を知ってもらうこと」
「将来的にメディアからサービスの契約を狙う」
ことの2点であったため、今回新規で会社をご紹介するコンテンツの追加をご提案しました。
コンセプト
記事を読んでもらいたい対象を
瞬時に把握できるよう工夫。
本オウンドメディアは参加学生に加えて、ブースを出展する人事・企業、開催される会場エリア別の情報など、読み手のターゲットが多岐に渡るのが特徴です。
「誰に向けた記事」なのかが一目でわかるよう、ターゲットごとにテーマカラーを決め、各デザインに取り入れました。
クライアントからのフィードバック
情報がまとまっていて見やすい
情報がまとまって見やすいとフィードバックをいただきました。
さらに、記事だけでなくトップページ中盤にある「会社概要」の新規追加についてお気に召していただきました。
ぜひ他のメディアにも同様の会社概要をお入れして欲しいとご要望を追加でいただいております。
WEBPAGE DESIGN
画像をクリックすると拡大します。
① トップページ
(1) メインビジュアル〜カテゴリー一覧
(2) メディア概要、おすすめ記事
(3) 会社概要、お問い合わせフォーム
(4) フッター
② メインビジュアル
メインビジュアルは以下のようなスライドショーで表示されます。
WORKS INFO
制作情報
イメージ
カジュアル
「合同説明会のノウハウをまとめたメモ帳」をイメージしています。
運用中の他オウンドメディアはアイソメトリックを中心としたイラストを使用しているため本HPは写真素材を主で使用しました。
レイアウト
メインビジュアル(ファーストビュー)を目立たせて、メディアらしいデザインを採用。
いわゆる「ブログっぽいデザイン」は避けるようご依頼がありました。
SEO対策の観点からも、トップページ単体に記事コンテンツを多数盛り込んでいます。
あしらい
付箋とメモ帳をイメージ
アイキャッチやメインビジュアルの左右(または右側のみ)にある英語と四角形のあしらいは、付箋のイメージで世界観の統一を試みています
フォント
和文：Noto Sans
欧文：DIN
オウンドメディアで文字数が増えるため、可読性を担保するのが目的です。
採用したゴシック体もシンプルで癖のないものを選びました。
配色
ターゲットごとに以下の色分けを設定。
・人事企業：赤
・参加学生：青
・会場エリア：緑
上記のターゲット別で使用する色が増えるため、サイト全体のカラーは淡い水色や薄いグレー、柔らかい黒色で画面をすっきりとまとめました。
受託情報
クライアント
株式会社プロ人事様
※2025年現在、業務委託契約にて稼働中
制作日時
2024年9月
担当業務
HPデザイン
デザイン実装
ディレクション
記事執筆、編集 (一部)
制作環境
制作所要時間
10時間
※以下の操作・制作対応を除く
・WordPressの初期設定
・ロゴ、アイキャッチ画像作成
使用ソフト
画像作成
・Canva
・Adobe Photoshop CC2024
サイト構築
・WordPress
・テーマ：Swell
・CSS
(簡易なカスタマイズにて使用)
