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部分までできたらなと思います。

禿げシミュレーションver.1.2

前回のシミュレーションver.1.1のアップデート版ですよ。

禿げシミュレーションについてはこちらをご覧ください。

ninebird.hateblo.jp

変更点

洗髪による脱毛を実装

自然脱毛だけではなく、洗髪による脱毛を実装しました。

洗髪による脱毛は50～70本/日とのことなので、50/100,000（0.05%）の確率で髪が抜ける機能を追加しました。 SSRキャラです！

シミュレーション開始

初期値

初期値の変更はありません。

• 髪の毛はすべて3.0mm
• 各髪年齢はランダムで割り当て
• 各髪にヘアサイクルを割り当て
• 毛量は10万本

シミュレーション結果

禿げる人は成長期間が少ない（数か月～1年）ようなので、 今回は成長期を変更したものと比較してみました。

濃い青のグラフは成長期が4～6年、薄い青のグラフは成長期が6ヵ月～1年です。 通常の成長期間のものは約314.1mmで推移、成長期間の短いものは58.9mmで推移しています。

考察

成長期間に関わらずグラフが長期にわたって下がることはない

禿げるグラフは下に下がっていくものと思っていたがどうやら成長期間の如何に関わらず、成長期間が固定されていれば グラフが下がることはないようです。 成長期間は毛量の最大値（収束値）に関係があり、最大値の大小で禿げか否かが決定するようです。

禿げるとは、徐々に各毛の成長期間が狭まっていく現象と予想されます（グラフの点線）。

洗髪による脱毛を実装したことによる変化について

前回、自然脱毛数は平均53.5本/日でしたが、洗髪による脱毛を実装したことにより脱毛数が平均81.5本/日になりました。 100本/日脱毛をなかなかイイ感じにシミュレートできたと思います。

成長期間が少ない場合の脱毛数

今回、成長期間を単に6ヵ月～1年に変更することにより成長期間が少ない場合をシミュレートしました。 これにより、休止期間が相対的に長くなりライフサイクルの38.3%～45.2%となりました。 通常この期間はライフサイクルの10%ほどらしいのですが、禿げる人も同じ割合なのかは不明です。今後調査します。

これにより、脱毛数は平均374本/日となりました。

ver.1.3に向けて

次回アップデートでは、徐々に成長期間を狭めていくとどうなるかシミュレートしてみようと思います。 実際の「禿げる」に近い現象が観測できることを期待します。