見る人
情報収集中のユーザー
LP / Web Detail Case
提案見本親しみやすさと明るさを伝える、教育サービス向けオウンドメディア
教
教
制作実績・提案見本を含むデザイン事例集のうち、提案見本として構成・デザインの方向性を示す事例です。
Overview
オウンドメディア制作
教育領域のオウンドメディアを想定し、ブランド認知向上, 情報発信強化につながる構成へ整理したデザインサンプルです。ファーストビューでは親しみやすさを強く出し、中盤以降ではサービス理解と行動導線を段階的に設計します。
Project Fit
このページが想定している対象と目的
設計
ブランド認知向上
実装
情報設計
改善
親しみやすさ
目的
想定ターゲット
制作範囲
ラベル
Main Visuals
ヒーロー、PC、Tablet、SP の主要ビジュアル
親しみやすさが伝わる第一印象を作り、情報収集中のユーザーが短時間で価値を理解できる状態を目指す。
Thumbnails
PC / SP の画面上部サムネイル
一覧だけでは見えないセクション単位の見せ方まで確認できます。
PCサムネイル
SPサムネイル
Feature Visuals
訴求ポイントごとの補助ビジュアル
レイアウト、配色、タイポグラフィ、モバイルUIなど、どこを見せたい事例なのかを補助的に切り出しています。
Appeal Points
訴求の組み立て
第一印象
親しみやすさが伝わる第一印象
パステル系を基調にした落ち着いたビジュアルで、初見のユーザーに親しみやすさを感じてもらう。
情報理解
内容を短時間で理解できる構成
オウンドメディアに必要な情報を段階的に整理し、情報収集中のユーザーが迷わず読み進められる流れを作る。
行動喚起
目的につながるCTA導線
ブランド認知向上につながるように、ファーストビュー、中盤、終盤に自然な相談・行動導線を配置する。
ブランド表現
教育らしさを表現する世界観
配色、余白、写真・イラスト、UIトーンを統一し、教育の魅力が伝わる見え方に整える。
Design Features
デザインの特徴
レイアウト設計
余白を活かした見通しの良いレイアウト
セクションの役割を明確にし、視線が自然に流れる構成にする。
配色設計
パステル系を軸にした配色設計
ライトブルー, 淡いピンク, ラベンダーを中心に使い、親しみやすさと読みやすさを両立する。
タイポグラフィ
見出しと本文に強弱をつけた文字設計
大きな見出しで印象を作り、本文は読みやすい行間と文字量に抑える。
UI / デバイス最適化
デバイスごとに最適化されたUI
PCでは一覧性、スマホでは読み進めやすさとタップしやすさを重視する。
