見出し画像

Webデザインのトレース分析とトレースの役割を考える

最近レイアウトを集中的に勉強する中で、Webデザインのトレースはしたことがなかったので、1件お試しでやってみました。
勉強になることも多々ありますが、自分的に他のやり方も合っているかなと考えるきっかけにもなったのでまとめました。
まとめていたら長くなったのでnoteに投稿します。
前半はトレース分析で後半は自分自身の振り替えりですのであくまで自分語りしてるなレベルで読んでいただければと思います。

今回トレースさせていただいたのは
株式会社 喜信 https://kishin-fukuoka.com/ 様です。
エクステリアや庭・ガレージをデザイン~施工まで行う会社です。

まずは何時間でトレースできるのか計るために、シンプルなデザインを選びました。
左がデザイン元で右がトレースです。
所要時間:3hほど
細かい文字は自分自身で今は違うなと思いトレースしていないです。

画像1

レイアウト
・基本的にシンプルで落ち着いたグリッドレイアウト
・大きさの違いでメリハリを出すことで単調さを回避
・WORKSとPEOPLEのセクションは背景や写真を重ねて奥行きを出している
奥行きの効果参考:https://note.com/seikei_kin/n/n3a94fbb2f652 (シンプルさの脱却)

カラー
ベースカラー 白
メインカラー 緑 #238F55
アクセント 黄 生成り色~ライトトーン系の黄#eed262

フォント
・ナビ 13px
・見出し 48px Roboto Slab', serif
・フッター 14px
・ボタン16px
・ご相談 18px

Webデザインは16px以上が良しとされていると見るのですが、14~15pxでも割りと読みやすいです(デザインがシンプルっていうのも理由の一つかな)

あしらい
トップページや会社紹介はシンプル
worksの詳細ページではイラストなど使って柔らかい

余白
ニュース 60px
バナー 100px
service 115px
問い合わせ 50px
余白広めに取って落着き

トレースの振り返り
・良かった点
目で気付かない余白間に気付けるのは良かったです。
なんとなくの観察だと、いざデザインを作るときに余白が広すぎたりそもそもの基準がよくわからなくなるので実際に手を動かすのも大切だと思いました。
全体のレイアウトを捉えるのにも良いと思います。
最近は特にレイアウトを勉強したくて本を読んだりしていますが、サイトを見る時は基本スクロールなので、全体を俯瞰して見ることもすごく勉強になりました。

・イマイチの点
1日1サイトをトレースするには3hとかなり時間がかかって難しいなと思いました。
今回はお試しでシンプルデザインをトレースしましたが、もう少しポップなデザインもしてみたいと思っていたので、毎日続けるのはなかなか現実的ではないかもしれないです。

自分は、何のためにやるのか自分自身が納得して手を動かさないと、かなり腰が重くなることにも気付きました。
例えばフォントサイズはトレースだと単純作業になるし、デバイスで大きさも変わるので、デベロッパーツールで調べてまとめる方がより多くのサイトを見れるので良いと思いました。
ただしトレースをしようと行動することで、持っていないフォントをインストールすることもできたので、「トレースをする」という心構えで色々調べるのは意味がありました。

ツールの使い方もまだ自分が知らない技もあるかもしれないのでやってみる価値ありです。
今回で言えば、イラレはアートボードをオブジェクト全体に合わせるって項目があるので、いちいち手作業でアートボードを調整しなくて良いんだ…と知ることができました。気付くの遅い?(笑)

・改善点
Webデザインのレイアウトを勉強するのには良かったので、ワイヤーフレームの状態を完成形としてトレースするのが自分は続けやすいと思いました。
フォントを勉強するならバナートレースのほうがあまり時間をかけすぎずできると思うので、臨機応変にトレースしていきたいです。
Webデザインは「この部分自分も作ってみたい!」や「どうやって作っているんだろう」と思った部分を優先的にトレースしてみます。

何にせよ家にいる時間が長いので、無理なく勉強を続けていきたいです。
ゆるく長くがモットー!

この記事が参加している募集

おうち時間を工夫で楽しく

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
6
転職の話など
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。