Webサイトトレース5日目 （基本デザイン完成）
トレース５日目です。前回までの進捗はこちら。
本日の作業
ビルボードにムービーをはめる
ビルボード部分を作っていきます。
ムービーの方はフリー素材を使用しています。このムービーの上にロゴをオーバレイで乗せます。 ロゴはposition: absoluteでtop, right, left, bottomを0に、margin:autoで中央寄せできます。画像幅も指定しておきます。
ムービーを扱うのは初めてだったりしたので色々と調べていたら時間を取ってしまいました。 3時間経過。ここまで11時間50分。
メニューボタンの修正
メニューボタンにhoverを実装し、背景色も変更しました。 マウスオンで少し背景色が変わります。
ビルボードの実装も含めた結果がこちら
基本デザインの完成
ということで、基本的なデザインが完成しました。
一部hover系はまだ実装していませんが、ペラは一応完成しました。 ここまで約12時間。当初はレスポンシブも含めて12時間の予定ではあったのですが…。 調べる時間に半分以上使われてしまったのですが、順調にいけば１日で作れそうだということがわかりました。
これからの作業
マウスオンで動く部分をちょこちょこ実装しようと思います。メニュー部分は既に実装済みです。
Webサイトトレース４日目
トレース４日目です。前回までの進捗はこちら。
本日の作業
採用バナー部分とフッタ、コピーライト部分を作っていきます。 今日はごたごたしてたのでbillboard部分は後日手を加えます。
バナー部分の作成
特に難しいことはありませんでした。
25分かかり、ここまで7時間経過。
フッタのナビゲーション作成
タグをどう使うかとても迷いました。 高さを揃えるところも数値指定するか否かでとても迷いました。結局簡単な数値指定で揃えることにしました。
コピーライトの部分も簡単に作ります。
110分かかり、ここまで8時間50分です。
ここまでの進捗
ということで、ここまでの進捗です。
あとはbillboard部分だけです。かなり時間がかかってしまいました(´・ω・`)
今日はここまで
次回はbillboardの部分をなんとかしようと試みてみます。
Webサイトトレース３日目
トレース３日目です。前回までの進捗はこちら
本日の作業
前回の予告通り、SERVICEとMEMBER部分を作っていきます。
SERVICE部分の作成
一見４枚の画像が使われてそうな背景。画面を伸縮させてみると１枚画像っぽい？ 画面サイズに応じて背景画像を切り替えればよさそうなので今は手を付けずに、こつこつとコンテンツを配置していくことにします。
背景に気を取られ過ぎて時間がかかり90分。ここまで6時間5分。
MEMBER部分の作成
配置はSERVICEとほぼ同じなのでそれほど時間はかかりません。 画像はCSS側で丸くしておきましょう。
ちなみにですが、文章や名前はダミーネームとか生成してくれるサイトがあるのでそちらを利用します。 何となく聞いたことのある名前。
30分で完成。ここまで6時間35分です。
今日はここまで
次回は採用バナー部分とフッタ、コピーライト部分を作っていきます。 余裕があればbillboard部分をなんとかしていきたいです。
ここまでくれば基本形が完成です。基本形が完成したら細かいギミックを実装していきます。
