IT系女子ログ

Webデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。

webデザイントレースのレポートをすべて公開します

(2019年1月 引用画像に透かしテキストを表示しました。)

webデザインの基礎スキル不足を実感していて、必要な経験を得るためにサイトのトレースをしました。

1pxのズレもない見た目の再現を目標にトレースしてみたら、見応えのあるボリュームになったので、まとめ記事とレポートを公開します。

レポート全ページのPDFは、ページ後半の「参考」コンテンツにあるリンクから閲覧できます。

 

トレースの目的

  • 知識の抜け漏れをなくす
  • 経験不足や技術力不足を補う
  • デザイン分析の解像度を高める

特に知識の抜け漏れを無くしていきたかったので、初心に立ち戻ってがっつり細部まで再現することを目標にしました。

  

トレースする

上質で王道のデザインの中から、LIONの新卒採用サイトのトレースを行いました。

  • 穏やかな色づかいだけれど、さみしく感じないのはどこに工夫があるのか?
  • ファーストビューと続くコンテンツの崩したレイアウトの基準は何か?

など、気になったことを考察しつつ進めていきました。

オリジナル ウインドウサイズ1280px時

※現在はリニューアルされているようです。

 

1pxのズレもない見た目の再現を目指す

テキスト、装飾などは色を変えたり半透明にして重ねながら完全再現に挑戦しました

写真は限りなく同じ印象を目指して探したものに差し替えていきます。
ロゴはオリジナルのキャプチャを利用しています。 

オリジナルを透かしてズレがなくなるよう調整します

 

同じ印象になるような写真を探して配置します

 

考察する

トレース中にとったメモをもとに、考察してみました。

タイポグラフィのウェイトやカーニングでの誤差の調整と、同じ印象の写真の検索がとにかく難しく、たくさん悩みました。


f:id:tosssaurus:20181228010018j:plain

同じ印象の写真を探すのに苦労しました

 

写真の検索がほんとうに時間がかかりました。
なんとか自分なりに見つけたのですが、いい方法をご存知の方教えていただけるとありがたいです…。

私はPinterestやGoogle画像検索で「母 こども」「家族 夕焼け」など思いつく限りのキーワードで検索したのですが、思うような結果につながらず、かなり苦しみました。 

 

妄想ガイドラインを作る

より詳細を考察するために、トレースしたサイトのガイドラインを妄想で作ってみました。タイポグラフィ、カラー、言語イメージ、コンテンツ幅の可変具合を調べてみると、同じに見えていた箇所が違う数値になっていることを発見できました。

デザインガイドライン:タイポグラフィコンテンツの一部分

デザインガイドライン:カラーコンテンツの一部分

デザインガイドライン:言語イメージコンテンツの一部分

ウインドウサイズ 1900px時のコンテンツ横幅の可変具合

 

他にもコンテンツ幅可変の基準や上下のコンテンツ同士の余白、入力要素の状態変化などもおもしろそうです。

  

思いつく限り考察をする

  • アクセントカラー使用箇所が少ないのに単調に見えないのはレイアウトのバランス?
  • 背景の使い方でバランスを取っている?
  • タイトル欧文フォントのアクセントが効いている
    (ジャンプ率が高い、ボールド、サンセリフ、太めの下線)
  • 黒色が文字色と背景色とで同じ色のように見えるが、数値上は違う(文字色#282727、背景色#1f1f1f)
  • 大きな違いはないけれど、本文の源ノ明朝の印象を少し弱めることで全体のバランスが良くなっている?

  • 写真がコントラスト低めで白飛びあまりしていないもので統一されている?

  • →写真の印象:おだやかな、自然な、知的な、気品のある、慎ましい…

  • 「LIONのプロジェクト」コンテンツがあることで引き締まっている

トレース前に疑問だったレイアウトの崩しの部分の基準は見つけられませんでした。
全体のバランスが恐ろしく整っていて美しいので、ランダムに配置しているわけではなく、何か基準がありそうなんですが……いろんなデザインを考察してみて目を鍛えたいようと思います。

 

結論

  • 色だけ、書体だけ、写真だけ、レイアウトだけで印象を決定づけているのではなく、それぞれの要素のバランスで印象が決まっている。
  • ただし、意図しない、文脈にそぐわない要素が入ってしまうと世界観が崩れてしまう。
  • リズムを崩したレイアウトとオーソドックスなレイアウトの配分も
  • デザイン全体の印象に影響がある。
  • メリハリだけで過度な装飾なしでも見出しと本文の区別が容易につく。

 

参考

レポート全ページ

実際にまとめたレポートは下記リンクから閲覧できます。

 

特記事項

レポートは勉強用に作成したものです。個人の勉強の範囲内でのご利用をお願いいたします。
レポート内で使用している画像はすべて引用しています。

 

16ページで画像が多めなので、読み込みに時間がかかるかもしれません。

トレースレポート|LION新卒採用(PDF/148.7 MB)

表示パスワード:tossy

 

おといあわせ

レポートに関するおといあわせはTwitterアカウントまでお願いします。

ご意見ご感想などいただけると、とっても嬉しいです!
匿名ご希望のかたはマシュマロからどうぞ。

 

言語イメージスケール

言語イメージスケールは、日本カラーデザイン研究所さんのものを活用させていただきました。

配色イメージが言語とともにマッピングされていて関係がわかりやすく、デザイン言語化訓練中の私のよりどころです。小さくて持ち運びやすいのでカバンに1冊入れておくと便利です。

カラーイメージスケール 改訂版

カラーイメージスケール 改訂版

  • 作者: 小林重順,日本カラーデザイン研究所
  • 出版社/メーカー: 講談社
  • 発売日: 2001/11/14
  • メディア: 単行本(ソフトカバー)
 

 

がっつりトレースしてみて

  • トレースは強制的にインプットとアウトプットが行える
  • トレースは実証がすぐ得られるので、想像するだけに比べ深い考察ができる
  • 苦難を乗り越えた先には大きな学びがある
  • 経験は武器になる、トレースは経験を作れる

抽象的ですがほんとうに学びが深く、実際やってみることに意味がある勉強法だと思いました。自分で苦悩するのが一番勉強になります

 

妄想ガイドラインは妄想でしかないので、手数を増やすために次回からはコンパクトにまとめようと思います。

そして来年はさらに基礎勉強を徹底したいので、トレース修行に出ることにします。
何年かかるかわかりませんが、凝視だけでもガチトレース並みの考察ができるくらい悟りたいです。