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

やれPC版が終わりました。10時から割とぶっ続けでやったので３字間程度でしょうか。SP版を先にやっていたのでだいぶん楽でした。

今回は全体像をYouTubeに上げてみました。noteは直接動画を差し込めないので。

トレースしたサイト

https://hokkaidotogo.com/

使用したアプリケーション

AdobeXD…レイヤー名とかつけた方がいいのかな。トレース段階だったらいいかな、別に。レイヤーパネル開いたら怖いことになってそう。開かないでおこう。そうしよう。
Google Chrome…検証画面でお世話になりました。フルサイズ画面スクリーンショットが役に立たなかった。DOMとの関係かなぁ。読み込んでないからかなぁ。
Photoshop CC 2020…というわけでスクショを手動で切って貼ってくっつけるように使いました。

作業時間

SP…６時間程度
PC…3字間程度
タブレット用のbreak-pointも見かけましたがみなかったことにしました。

感想

今回からちゃんとスペックシートを残すようにしました。
試作段階なのでこれで固定ではないけれど。
見づらいのでcommentの部分を抜粋してここに残しておきます。
あとこれをコーディング…とか考えたら一瞬気を失いそうになりました。お腹すいているからだよね、もう14時だもんね。うんうん。

以下comment部分：北海道の雄大さや力強さをDIN condencedやNoto Sans JP の太めのゴシックを使うことで表現されていた。ベースカラーは白、メインをほぼ黒にすることでメリハリの効いた力強いwebサイトになっていた。日米中語に対応し、海外からの観光客も視野に入れたサイト作りになっていた。

明日からはPC版、SP版まとめての記事を書いていこうと思います。昨日は書かないとモチベーションが戻りそうで。ここまで読んでいただきありがとうございました。ではまた。