Webデザインの勉強法として、トレースは非常に効果的です。他のデザイナーの作品をトレースすることで、実践的なスキルや新しいアイデアを獲得することが可能です。またトレースすることで、他のデザイナーの技術やアプローチを学び、自身のデザインスキルを向上させることができます!

トレースの準備作業

トレースを始める前には、デザインの目的やコンセプトを理解することが不可欠です。この理解により、トレースする際の方針やポイントが明確になります。
また、トレース作業では、検証ツールを活用してフォントや要素の詳細を把握します。特にフォントに関しては、自身のPCにそれがない場合でも、類似フォントを探して対応することが重要です。また、フォントファミリーやサイズ、ウェイト、文字間、行間などの詳細を検討し、レイアウトの統一感やバランスを考慮します。同様に、画像や配色、装飾についても詳細を把握し、一貫性を保ちながらトレースを進めます。

トレースの成果を活かす

トレース後は、デザイン要素を評価し分析します。文字の可読性や視認性、レイアウトとの調和など、フォントに関する要素を検討します。また、画像や配色、装飾についてもデザインの目的やコンセプトに合致しているかどうかを確認します。更に、トレースしたデザインとオリジナルデザインを比較し、改善の余地や優れている点を明確にします。

👇こんな感じでざっくりでもOKです!

【トレースメモ📝】
・色だけ、書体だけ、写真だけ、レイアウトだけで印象を決定づけているのではなく、それぞれの要素のバランスで印象が決まっている。
・ただし、意図しない、文脈にそぐわない要素が入ってしまうと世界観が崩れてしまう。
・リズムを崩したレイアウトとオーソドックスなレイアウトの配分も
・デザイン全体の印象に影響がある。
・メリハリだけで過度な装飾なしでも見出しと本文の区別が容易につく。
・並列に並んでいるサイトでも文字とかイラストとかで動きを出している。(イラストは自由に配置している。)
・コーポレートサイトや採用サイトはNoto Sansが使われていることが多い?
お洒落で清潔感があり、洗練されたデザイン
・欧文和文共にウエイトの細いフォントを使用し、文字間をゆったりめに設定していること。
・和文の文字色を、薄いグレー、茶色系に設定していること。
・ページ全体的に、文字量が少ないこと
・細い明朝が使われているのにフォントをダウンロードできるところがあまりない
  -webkit-font-smoothing: antialiased; で設定している?

最終的には、、、

トレースから得られた知見や気付きを自身のデザインに反映させることが重要です。これにより、デザインの理解が深まり、より高度なスキルを獲得することが可能となります。トレースを通じて、自身のデザインに新たなアイデアやテクニックを取り入れ、成長を遂げましょう!