トレース03：デジハリ LP

デジハリさんのLPをトレースしました。

模写させていただいたwebサイト

https://online.dhw.co.jp/lp/webdesigner/

見本

トレース

• 派手じゃないけど、訴求がすごく伝わってくるのは、目立たせたいところでメリハリをつけているからかな？と思いました。 例えばファーストビューの見出しの「No.1」の部分だけを大きくしていたり、黄色のマーカー風ラインをここぞというところで使用していたり、伝えたいポイントはポイント用の枠を作って他と差別化しているところなど。
• オレンジのボタンが目を引きます。
• 理由１、２、３の円形の見出しは、てっきり画像だと思ったのですがコーディングでできるというのに驚きました。
• アンダーラインの見出しもおしゃれです。

まとめ

• 英数字はLatoを使用していて、Latoだと若干文字幅がひろがるので、詰まってる感じがしないのかな？と思いました。

コーディング

「理由１」のコーディングをトレースしました。 気づきはソースと一緒にコメントしております。

完成図

HTML

<div style="width: 600px; margin:10px auto;">
　<div class="point-group"> 
 　　<p class="text">理由</p>
 　　<p class="num">1</p>
　</div>

　<div class="title-group">
　　<h3>テキストテキストテキスト</h3>
　</div>

　<div class="text-group"><p>テキストテキストテキストテキストテキストテキスト</p></div>

</div>

CSS

 @charset "UTF-8";

.point-group {
  /*オレンジの丸をつくる*/
  background-color: #ee7610;
  border: solid 1px #ee7610;
  border-radius: 37px;
  width: 75px;
  height: 75px;
  font-size: 18px;
  text-align: center;
  /*配置を変えるやつだけど、いる？*/
  position: relative;
  /*要素のボックスからはみ出た部分を隠す*/
  overflow: hidden;
  /*title・text-groupと横並びにするため*/
  float: left;
}

.point-group > p.text {
  /*余白をなくす*/
  margin: 0;
  /*背景を白にする*/
  background-color: #fff;
  /*位置調整*/
  padding-top: 10px;
  /*高さ調整*/
  height: 30px;
  color: #ee7610;
}

.point-group > p.num {
  /*余白をなくす*/
  margin: 0;
  /*高さ、幅ともに中央に寄せる*/
  line-height: 33px;
  color: #fff;
}

.title-group {
  padding-top: 20px;
}

.title-group, .text-group {
  width: 500px;
  float: right;
}

.text-group {
  padding-top: 10px;
}```