LP制作が1つ出来たので見てみてください。

成果物はコチラです

レンタルサーバーに載せているものはコチラです。(レイアウトだけなので、お問い合わせは出来ません)

【公式】トータルサポートジム|Muscle Expert[マッスルエキスパート]

講座内のサンプルをそれなりに流用しているものの、中身を変えて作成してみました。
制作時間は凡そ3日間くらいです。ちょっと掛かりすぎなので、もう少し早く作成出来るようになりたいです。

成果物の概要

では成果物を見ていきます。
内容としてはMuscle Expertという架空のトータルサポートジムのお問い合わせページ(LP)を作成しています。
ジム入会のお問い合わせを目的としており、ABOUTでは起承転結を心掛けた内容にしています。
配色は背景に黒(濃紫)、銀、文字色に紫、アクセントに金を使用して高級感を出しています。
一方でスポーティな雰囲気も出すために、英字部分のフォントは太くポップなものにしています。

トップ(ヒーローヘッダー)

トップ部分(ヒーローヘッダー)の Your muscles won’t betray you は、「筋肉は裏切らない」という意味です。
PCから見た場合はホバー時に拡大し、文字色が紫から金に変わります。(拡大し過ぎているせいか、スマホで見るとカクつくのはイマイチ)
また、トップ画像の半裸の左向きマッチョはパララックスデザイン(視差効果)になっています。(スクロールしても、画像は止まっている)
ちなみにこの投稿↓をしたときはまだ気付いていませんでしたが、当初はiOSから見た場合に画像が乱れるバグが発生していました。

原因として、
background-attachment:fixed;
background-size: cover;
このセットでパララックスデザインを作成しようとすると、iOSだけバグるようになっているようです。
:beforeという疑似要素を作成し、スタイルをあてるように修正しています。参考↓

background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう - YCOMのホームページの制作・運営に役立つブログ

自宅もちょっと作業がしやすい環境になってきて、休日でもブログを書けるようになってきました。休日は仕事しないっ

レスポンシブデザイン

画面サイズ(横幅)はPC用の980px、スマホ、タブレット用の768pxの2パターンで作成しています。(レスポンシブデザイン)
980~768pxは余白が出来てしまうのと、1200px以上だと小さく見えてしまう部分については工数の関係で割愛しています。
768px以下の場合は、メニューがハンバーガー(横棒3本)になるようにしています。
ハンバーガーを押すと、×ボタンになります。囲っている◯は、一瞬だけ金色が混ざるように作成しています。
メニューが開いている場合は、スクロールしても背景がスクロールしないように、JSを使用してhtmlにoverflow:hiddenを付けています。
通常のメニューではトップへのリンクを付けていませんが(左上のロゴを押せば更新されるし、横幅から見ても必要ない)、ハンバーガ押下時のナビゲーションメニューにはtopを付けて飛べるようにしています。

その他

タイトルやリンクについてはPCでホバー、スマホで長押しすると文字色が金色になるようにしています。
押せる部分についてはカーソルがポインター(指)になります。(ハンバーガー部分については対応が漏れているので、後ほど修正しておきます。)
1番人気のバッジはホバーすると回転するようにしています。(意外とこれは簡単)
細かい部分ですが、ファビコンをマッチョの画像にしています。これがあるとタブの部分やショートカット作成時にマッチョが現れます。
ちなみにレンタルサーバのサブドメインを作成してFTPでアップロードするのに若干手こずりました。(サブドメイン作成して10分くらいは待機時間があります。)
また、自分で設定したドメイン名なのに間違って打ち込んでいて、暫く表示されない状況に陥りました。笑

作成した感想

今回はiPhoneでのバグが見つかりましたが、端末はMacbook、andoroid、iPhone、そしてブラウザはクロームとサファリで確認しています。
他の端末やブラウザで確認すると、もう少しバグが出てくるのではないかと思います。
作成してみた感覚としては1枚ペラのLPなので、phpを使用したwebサービスと比べるとかなり楽に作成できた印象です。(流用しているからです。笑)
楽にできたという割に結構時間が掛かってしまっているので、時間を掛けずにできるようにしたいです。
また、次は自分で構成を考えて、CSS設計も行ってLPを作成してみようと思います。

リンク