（2023/11/18）テーマをコクーンからライトニングに変えたら表示が崩れた。ヘッダーのビデオを一時的に非表示にしています。時間配分などの都合により、デザイン案2のページの更新を優先。
以後は、こちらのページ（デザイン案2）を閲覧してください。

コメント（2023/11/14）
任天堂のサイト（スーパーマリオブラザーズ　ワンダーの紹介ページ）のマリオの紹介ページに使われている『波打った境界線』は、SVGを用いた流体シェイプと推測されます。
取り急ぎ、ツールで作った流体シェイプをここに載せておきます。

形状を修正すると、似たデザインになるはずです。また、形状を変更し、アニメーションやマスク処理を入れて動画を表示させると、クックパッドのサイトに近いものを作れるはずです。（現在、制作中）

コメント
（2023/11/14）
次のデザイン案の下準備


（2023/11/13）
スマホの縦画面の時のみ、画面内にスキマが生じる現象の対策を検討
※この下の画像の黄色い部分が該当します（普段は、背景色を黒にしてごまかしています）
使っている動画の解像度とスマホ（縦画面）の解像度が嚙み合っていないのでは？と推測。

問題点1.容量が大きすぎてアップロードできないため、HD画質の動画の使用を断念
（アップローダーの上限が16MBで、HD画質の動画は16.4MBとなり、容量オーバー。設定でアップロード上限を変えられるらしい？未着手）

今後の予定
・SVGの流体シェイプを使用した演出（デザイン案2）の制作に切り替え
→任天堂のスーパーマリオシリーズの紹介ページを意識したデザインにする

・流体シェイプはツールで作る（SVGのコードを出力させる）
（手作業で作れなくはないようですが、相当な手間がかかるそうです）

（11/13　制作中のメモ）
元の動画の解像度（1280×720）と、スマホの解像度（機種によって差がありますが、750×350前後の数値になります）が噛み合っていないと推測し、HD画質の素材をダウンロードしてきましたが、こちらも解像度が同じなのと、アップローダーの上限に引っかかってしまい、テストを中断。（単品のファイルで16MBを越えてしまう）
仮にアップロードできても、2つの動画を表示する仕組みなので32MB強の容量となるため、読み込み遅延も懸念される。（ページ読み込みが遅すぎて離脱されたら本末転倒）

表示テスト1（2023/11/10～2023/11/13）
デザイン案1.画面をスクロールするとメニューが出てくるパターン
（上記メニューの細かい配置は、別途調整する予定です。なお、出演情報、タンバリン教室を優先して表示させています）←現在公開されているページに対して、意図的に配置（メニューの順番）を変えています

ページを読み込んだ直後は何も見えないのですが、ブラウザの画面外（ウィンドウの下から100vh分の高さの余白があります）に、メニューなどの項目が存在しています。