ヒーローヘッダーを使ったページ制作

要件定義

レストランサイトの作成
ページ構成：シングルページ

ページ内容

• メインビジュアル（3枚の画像をスライド）
• ナビゲーションメニュー（pcからハンバーガーメニュー）
• ロゴ（svg）
• ニューステキストの差し込み（ajaxを使って外部データを読み込む）
• 動画の埋め込み(youtubeのデータを読み込む)
• モーダルウィンドウの埋め込み（Lightboxプラグインを使用）
• SNSの埋め込み（TwitterAPIを使ってタイムラインを埋め込む）
• GoogleMapの埋め込み
• GoogleFormの埋め込み

ポイント

• 補色を使用したカラーマネジメント
• ベースカラー（画面全体の色、清潔感のある色、白に近い色）
• メインカラー＃DA5019
• アクセントカラー#A6E39D
• 日本語・欧文フォントをGoogleFonts
• スライドで使用する大きいサイズの画像を圧縮

用意する物

• メインビジュアル画像ｘ3枚（サイズ：1920x1080）cssでトリミング
• モーダル用の画像x3枚（サイズ：1000x750）
• オリジナルロゴデータｘ1個（svg）

使用するプラグイン

・Hamburgers by Jonathan Suh
Hamburgers by Jonathan Suh

・Lightbox
https://lokeshdhakar.com/projects/lightbox2/

・bxslider
https://bxslider.com/

作例

felica29.starfree.jp