ランディングページ

コーディングを全て担当。フルスクラッチでスマホ用ランディングページを制作。制作期間5日間。

制作環境

• HTML / CSS

動画埋め込み

YouTubeやmp3などの動画を埋め込み、画面幅によって横幅が変わるよう対応した。
全体の横幅はタブレットおよびPCで見たときに大きくなり過ぎないよう650pxで止まるようになっており、
動画を横幅100%で余白いっぱいまで設定した際に横650px以上に拡大しないよう設定している。

複雑なデザインに対応するCSS

ネガティブマージンを用いることで、画像を使わずにセクションの背景を設定した。
（画像を背景に設定した場合、文字の長さによってセクション毎に引き伸ばしの割合が変わり、統一感のないデザインになるため）

急な打ち換え変更への対応

メンテナンスの負担を減らすために、カレンダーなどの打ち換えが発生するデザインは全てスタイルで対応。