トレース09

対象サイト

LINE Payさんのキャンペーンサイトをトレースしました。スマホサイトです。

10yenpingpong.line.me

見本

トレースしました

※注意事項は省略してトレースしました。
※XDを使用しました。

考察

• スマホで見たときに最適な文字数、文字サイズ、改行になっていました。
• 緑色のまるに文字を入れた見出しデザインが珍しいですね。10円玉とかけているのかな？

• この赤枠内の画像は<img>で配置されているのかなと思ったのですが、<figure> というタグが使用されていて、CSSの backgroundプロパティ で画像が配置されていました。
  
  www.htmq.com
  

   図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

  figureには初めて出会ったので、勉強になりました。（とはいえまだ１００％理解できていない状態です）
  
  Chromeの検証機能で深掘りしたところ、もともとはいろんな画像がつらなった１つの画像で、赤枠部分だけが切りとられて表示されていることがわかりました。
  
  だから<figure>を使っているのか、真偽は分かっていないのですが、この方法だと新規画像を追加することになった場合、
  　①大元の画像を更新
  　②追加部分だけHTMLなりCSSを修正する
  という2ステップで完結しそう。かなり便利ですね。

まとめ

フォントは、英数字がHelvetica、日本語がHiragino Kaku Gothic Proでした。

緑色が濃度で異なっていたり、グラデーションになっていたりと、少なくとも4色は使われていたかとおもいます。

けやきざかさんの衣装の色と緑色がマッチしていますね。