Facebook 【工夫したポイント】
Logo

【HerTech 架空案件】料理教室

クレジット
Avatar
Webコーダー
【HerTech 架空案件】料理教室-1
シェア
制作ノート
【工夫したポイント】

・ヘッダー(レスポンシブ対応)

 PC表示からタブレット・スマホサイズに変わる際、ナビゲーション(ABOUT US / COURSE / CONTACT)をハンバーガーメニューへ切り替え、画面をすっきりまとめました。

・メインビジュアル(視認性と強調)

メイン画像を少し暗めに調整することで、上に乗せる文字の視認性を高めました。また、キャッチコピーには陰影をつけて立体感を出し、印象に残るよう強調しています。

・コースセクション(読みやすさ)

 適切な余白(マージン・パディング)を確保し、コンテンツ全体の統一感と読みやすさを意識しました。

・お申し込みセクション(CTAの工夫)

背景色を変えてメリハリをつけました。また、統一感を持たせたアクションボタンを再利用することで、ユーザーのクリックを促す設計にしています。

シェア
【工夫したポイント】

・ヘッダー(レスポンシブ対応)

 PC表示からタブレット・スマホサイズに変わる際、ナビゲーション(ABOUT US / COURSE / CONTACT)をハンバーガーメニューへ切り替え、画面をすっきりまとめました。

・メインビジュアル(視認性と強調)

メイン画像を少し暗めに調整することで、上に乗せる文字の視認性を高めました。また、キャッチコピーには陰影をつけて立体感を出し、印象に残るよう強調しています。

・コースセクション(読みやすさ)

 適切な余白(マージン・パディング)を確保し、コンテンツ全体の統一感と読みやすさを意識しました。

・お申し込みセクション(CTAの工夫)

背景色を変えてメリハリをつけました。また、統一感を持たせたアクションボタンを再利用することで、ユーザーのクリックを促す設計にしています。

シェア
foriio

あなたのforiioを無料で作成

fori.io/
【HerTech 架空案件】料理教室-1
【工夫したポイント】

・ヘッダー(レスポンシブ対応)

 PC表示からタブレット・スマホサイズに変わる際、ナビゲーション(ABOUT US / COURSE / CONTACT)をハンバーガーメニューへ切り替え、画面をすっきりまとめました。

・メインビジュアル(視認性と強調)

メイン画像を少し暗めに調整することで、上に乗せる文字の視認性を高めました。また、キャッチコピーには陰影をつけて立体感を出し、印象に残るよう強調しています。

・コースセクション(読みやすさ)

 適切な余白(マージン・パディング)を確保し、コンテンツ全体の統一感と読みやすさを意識しました。

・お申し込みセクション(CTAの工夫)

背景色を変えてメリハリをつけました。また、統一感を持たせたアクションボタンを再利用することで、ユーザーのクリックを促す設計にしています。

シェア
foriio

あなたのforiioを無料で作成

fori.io/