FIRPENG STUDIO

besuccess:コンテンツ専門家再教育コース詳細ページデザイン

besuccess:コンテンツ専門家再教育コース詳細ページデザイン

共通の情報レイアウト(グリッド)に各カリキュラム独自のキーカラーを適用した、教育課程募集ウェブ詳細ページのデザイン

主催・企画・運営団体

ビーサクセス

サービス

詳細ページ

はじめに

besuccessが運営した、2025コンテンツ専門人材再教育プログラム「CONTENT STEP UP」のコース別受講生募集LP(ランディングページ)のデザイン制作実績です。サウンド・バーチャルプロダクション・アニメーションなど、性質の異なるコースを同一プラットフォーム上で並列に訴求する必要があったため、ヘッダー・募集期間・教育期間・コース案内・講師紹介・カリキュラム表という情報設計のフレームを全コースで共通化し、コースごとにキーカラーのみを変更するグリッドシステムを採用しました。ヘッダー部分は、パープルとブルーのグラデーションをベースに協賛企業のロゴを配置し、どの企業と連携したコースであるかを一目で認知できるよう設計。募集期間と教育期間はラベルバッジで視覚的に分離し、ユーザーの誤認を防いでいます。本文領域は「左カラム:項目名、右カラム:コンテンツ」の2カラムレイアウトを反復させることで、ロングスクロールになっても視線のブレが生じない高い可読性を確保しました。カリキュラムはセクションごとの表組み(テーブルレイアウト)に整理し、講師プロフィールはタグ形式に圧縮。縦に長い1カラムのデザインでありながら、情報の密度が均一に維持されるようエディトリアルデザインの視点から編集しています。教育機関やプラットフォーム運営会社で、教育プロセスの受講生募集LPやWebランディングページのデザイン制作をご検討中の担当者様に最適なソリューションです。

対応範囲

デザイン

主催・企画・運営団体

ビーサクセス

サービス

詳細ページ

はじめに

besuccessが運営した、2025コンテンツ専門人材再教育プログラム「CONTENT STEP UP」のコース別受講生募集LP(ランディングページ)のデザイン制作実績です。サウンド・バーチャルプロダクション・アニメーションなど、性質の異なるコースを同一プラットフォーム上で並列に訴求する必要があったため、ヘッダー・募集期間・教育期間・コース案内・講師紹介・カリキュラム表という情報設計のフレームを全コースで共通化し、コースごとにキーカラーのみを変更するグリッドシステムを採用しました。ヘッダー部分は、パープルとブルーのグラデーションをベースに協賛企業のロゴを配置し、どの企業と連携したコースであるかを一目で認知できるよう設計。募集期間と教育期間はラベルバッジで視覚的に分離し、ユーザーの誤認を防いでいます。本文領域は「左カラム:項目名、右カラム:コンテンツ」の2カラムレイアウトを反復させることで、ロングスクロールになっても視線のブレが生じない高い可読性を確保しました。カリキュラムはセクションごとの表組み(テーブルレイアウト)に整理し、講師プロフィールはタグ形式に圧縮。縦に長い1カラムのデザインでありながら、情報の密度が均一に維持されるようエディトリアルデザインの視点から編集しています。教育機関やプラットフォーム運営会社で、教育プロセスの受講生募集LPやWebランディングページのデザイン制作をご検討中の担当者様に最適なソリューションです。

対応範囲

デザイン

主催・企画・運営団体

ビーサクセス

サービス

詳細ページ

はじめに

besuccessが運営した、2025コンテンツ専門人材再教育プログラム「CONTENT STEP UP」のコース別受講生募集LP(ランディングページ)のデザイン制作実績です。サウンド・バーチャルプロダクション・アニメーションなど、性質の異なるコースを同一プラットフォーム上で並列に訴求する必要があったため、ヘッダー・募集期間・教育期間・コース案内・講師紹介・カリキュラム表という情報設計のフレームを全コースで共通化し、コースごとにキーカラーのみを変更するグリッドシステムを採用しました。ヘッダー部分は、パープルとブルーのグラデーションをベースに協賛企業のロゴを配置し、どの企業と連携したコースであるかを一目で認知できるよう設計。募集期間と教育期間はラベルバッジで視覚的に分離し、ユーザーの誤認を防いでいます。本文領域は「左カラム:項目名、右カラム:コンテンツ」の2カラムレイアウトを反復させることで、ロングスクロールになっても視線のブレが生じない高い可読性を確保しました。カリキュラムはセクションごとの表組み(テーブルレイアウト)に整理し、講師プロフィールはタグ形式に圧縮。縦に長い1カラムのデザインでありながら、情報の密度が均一に維持されるようエディトリアルデザインの視点から編集しています。教育機関やプラットフォーム運営会社で、教育プロセスの受講生募集LPやWebランディングページのデザイン制作をご検討中の担当者様に最適なソリューションです。

対応範囲

デザイン