Webサイトトレース３日目
トレース３日目です。前回までの進捗はこちら
本日の作業
前回の予告通り、SERVICEとMEMBER部分を作っていきます。
SERVICE部分の作成
一見４枚の画像が使われてそうな背景。画面を伸縮させてみると１枚画像っぽい？ 画面サイズに応じて背景画像を切り替えればよさそうなので今は手を付けずに、こつこつとコンテンツを配置していくことにします。
背景に気を取られ過ぎて時間がかかり90分。ここまで6時間5分。
MEMBER部分の作成
配置はSERVICEとほぼ同じなのでそれほど時間はかかりません。 画像はCSS側で丸くしておきましょう。
ちなみにですが、文章や名前はダミーネームとか生成してくれるサイトがあるのでそちらを利用します。 何となく聞いたことのある名前。
30分で完成。ここまで6時間35分です。
今日はここまで
次回は採用バナー部分とフッタ、コピーライト部分を作っていきます。 余裕があればbillboard部分をなんとかしていきたいです。
ここまでくれば基本形が完成です。基本形が完成したら細かいギミックを実装していきます。
Webサイトトレース２日目
昨日から引き続きトレースしていきます。
あ、ちなみにですが、マイルールとして本家のソースを見ずに書いていきます。
昨日の修正
メディアクエリの変更
768pxだけブレイクポイントを設定していましたが、スマホ用に600px部分にもブレイクポイントを設定しました。
本日の作業
NEWS部分の作成
幅768px固定でセンタリング。 中のテキストは中央寄せするだけなので簡単にできました。
RELEASE部分の作成
幅100%内に画像３枚を並べます。 画像には仮の画像を差し込んでおきます。
ここまでで85分使用。計3時間5分経過です。
COLUMN部分の作成
要素が多く組み合わさっているので時間がかかりました。 フレームのネストが深くなるとサイズの関係性保持が難しくなるので、親要素から丁寧にサイズ決めをしていく必要があると改めて感じました。 box-sizing様様です！
素材画像は仮の画像を差し込んでおきます。
COLUMNで90分使用。計4時間35分経過です。
今日はここまで
本日のノルマ達成です。まだスマホ版のCSS適用もありますが間に合うのでしょうか？
次回はSERVICEとMEMBER部分を作成していきます。
Webサイトトレース１日目
”Webサイトトレース”をご存知ですか？ その名の通りWebサイトを模写することなのですが、模写することによりデザイン力を高めることができたりするようです。
そしてこの度これに挑戦してみようと思うのですが、私の場合は能力測定のためにやってみようと思います。 どのくらいのことが、どのくらいのスピードでできるのか確認しようと思います。 これにより、コーディング工程における見積もりが可能になります。 デザインについては触れません。
そして、今日がその１日目です。
トレースするページ
今回トレースするのは、株式会社モンスター・ラボさんのWebサイトのトップページになります。 配置はシンプルですが、ひとつひとつのギミックが凝っていて大半の時間はそちらに割かれそうです。
目標は12時間以内ですが、厳しそうです。
構成を理解する
まずは大まかなワイヤフレームを考えていきます。 最近のWebサイトはレスポンシブが常識になっています。ウィンドウサイズを伸縮させたりして挙動を確認します。 何pxから表示を変えるかは厳密には再現しませんし、PCとスマホの２パターンが書ければ十分でしょう。
レイアウトがある程度理解できたら、早速HTMLタグを打ち込んでいきます。 完成形があるので、わざわざ紙に配置を書き出してなんてことをすることもなくどんどん書きます。 タグの打ち込みだけなので出力を見てもなんのこっちゃです。
ここまでで約40分。遅い気がします。
各部品にスタイルを適用していく
各部品についてCSSを適用していきます。 この段階では詳細なギミック（ホバーや色）は実装せず”見た感じ”を再現していきます。
また、このページでのメディアクエリは768pxをブレイクポイントに設定しました。
メニューボタンを整える
メニューボタンを整えます。配置っていつやっても細かいところを忘れてしまい、調べ直す羽目になりますね(´・ω・`) とりあえずこんな感じでしょうか。素材の適用もここではしないので、バナーもありません。 ハンバーガーボタンやサブメニューの展開なども実装していません。
ここまで約100分。間に合うのか？
今日はここまで
次回はbillboard部分といきたいところですが、この部分は動画が必要ですのでスルーします。 なので、NEWSとRELEASE部分までできたらなと思います。
