Webサイトトレース１日目
”Webサイトトレース”をご存知ですか？ その名の通りWebサイトを模写することなのですが、模写することによりデザイン力を高めることができたりするようです。
そしてこの度これに挑戦してみようと思うのですが、私の場合は能力測定のためにやってみようと思います。 どのくらいのことが、どのくらいのスピードでできるのか確認しようと思います。 これにより、コーディング工程における見積もりが可能になります。 デザインについては触れません。
そして、今日がその１日目です。
トレースするページ
今回トレースするのは、株式会社モンスター・ラボさんのWebサイトのトップページになります。 配置はシンプルですが、ひとつひとつのギミックが凝っていて大半の時間はそちらに割かれそうです。
目標は12時間以内ですが、厳しそうです。
構成を理解する
まずは大まかなワイヤフレームを考えていきます。 最近のWebサイトはレスポンシブが常識になっています。ウィンドウサイズを伸縮させたりして挙動を確認します。 何pxから表示を変えるかは厳密には再現しませんし、PCとスマホの２パターンが書ければ十分でしょう。
レイアウトがある程度理解できたら、早速HTMLタグを打ち込んでいきます。 完成形があるので、わざわざ紙に配置を書き出してなんてことをすることもなくどんどん書きます。 タグの打ち込みだけなので出力を見てもなんのこっちゃです。
ここまでで約40分。遅い気がします。
各部品にスタイルを適用していく
各部品についてCSSを適用していきます。 この段階では詳細なギミック（ホバーや色）は実装せず”見た感じ”を再現していきます。
また、このページでのメディアクエリは768pxをブレイクポイントに設定しました。
メニューボタンを整える
メニューボタンを整えます。配置っていつやっても細かいところを忘れてしまい、調べ直す羽目になりますね(´・ω・`) とりあえずこんな感じでしょうか。素材の適用もここではしないので、バナーもありません。 ハンバーガーボタンやサブメニューの展開なども実装していません。
ここまで約100分。間に合うのか？
今日はここまで
次回はbillboard部分といきたいところですが、この部分は動画が必要ですのでスルーします。 なので、NEWSとRELEASE部分までできたらなと思います。
