見出し画像

UIトレースレッスン03-1 | HOKKAIDO TO GO-SP

だいぶ間が空いてしまいましたがちょっと本腰入れました。
森で遊びすぎた。
>森で遊びすぎているアカウントはこちら

ずっとポートフォリオサイトに掲載する素材を悩んでいたのですが、やっと「これ作りたい!」ってものができて。何かと言うと。

わたしの(どうぶつの森の)島に遊びに来て!」

っていうサイトです。
実際にあるお店とか団体のサイトの方がいいのは重々把握しているのですが、素材が…。知り合いもいないし…。ということでずっとモチベが上がらなくて。

観光、移住なんかの「体験」って、コロナ前にはとってももてはやされていた(言い方)ジャンルだったと思うんですが、コロナ後の世界でもやはりそれは重きを持たれるんじゃないかって思ってて。こう、地域のつながりとか、人とのつながりの大きさを改めて考えさせられたので、ちょっと向かい合ってみたいなと思い、このテーマのサイトを作ろうと思いました。

前置きが長くなりましたが、そんなこんなで観光系のサイトを(素材はどうぶつの森で)作ろうと思い、今日から同業研究ということでトレース復帰しました。
とあるきっかけでXDがちょっと使えるようになったので(笑)、今回のトレースは3時間程度かかりました。うち1時間はコピペ元サイトのスクショ撮って切って貼って繋げてしていました。JSの関係か、Chrome拡張機能でフルサイズスクショが全然うまく撮れなくて。これが一番しんどかった…。

今回トレスさせていただいたのは、「HOKKAIDO TO GO」というサイトです。いけてるwebサイトまとめサイトで紹介されていました。
トレス結果はこちらからどうぞ。PWは「UItrace-03」です。

・使用フォント
日本語:游ゴシック 英語:DIN Condenced
1rem=14px


・使用カラー
文字色:#1a1a1a
カテゴリー(3色):#009d95, #e96076, #004da0

テキスト多めで結構読ませるサイトでした。Fsも14pxとちょっと小さめ。游ゴ(weightはbold)とDIN Condencedの組み合わせで、結構太めのフォントでもバランスが良く、読みやすいなぁと感じました。プロの技だ。JSでの動きも結構ゴリゴリあって(今回ここまでは再現していません)、それでも読み込みはそんなに遅くなく。
あと今回、FBのところがちょっと記事数が5件で長かったのではしょりました。技術的にはできるんですが、そんなに長くなってもね、ということで。

ってか今書きながら気づいたのですが、結構どっしり系のサイトだったので、どうぶつの森を素材につかう私にはあまり参考にならなかったかもしれないです。しまった。そのことを考えていなかった。まぁいいか。

というわけで今日からまたぼちぼち記事を上げていこうと思います。
とりあえずいいなと思ったサイトがあと3件あったのでそこをトレスして、自サイト作ってみて、コーディングして…といった内容をnoteに備忘録がわりに上げていこうと思います。ではまた。ここまで読んでいただきありがとうございました。今日は打って出しするので校閲しないです。

ポチる前にそのお金であったかい飲み物買いましょう。