IT系女子ログスマートフォン用の表示で見るIT系女子ログWebデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。引用画像に透かしテキストを表示しました。)webデザインの基礎スキル不足を実感していて、必要な経験を得るためにサイトのトレースをしました。1pxのズレもない見た目の再現を目標にトレースしてみたら、見応えのあるボリュームになったので、まとめ記事とレポートを公開します。レポート全ページのPDFは、ページ後半の「参考」コンテンツにあるリンクから閲覧できます。知識の抜け漏れをなくす経験不足や技術力不足を補うデザイン分析の解像度を高める特に知識の抜け漏れを無くしていきたかったので、初心に立ち戻ってがっつり細部まで再現することを目標にしました。トレースする上質で王道のデザインの中から、LIONの新卒採用サイトのトレースを行いました。穏やかな色づかいだけれど、さみしく感じないのはどこに工夫があるのか?ファーストビューと続くコンテンツの崩したレイアウトの基準は何か?など、気になったことを考察しつつ進めていきました。※現在はリニューアルされているようです。1pxのズレもない見た目の再現を目指すテキスト、装飾などは色を変えたり半透明にして重ねながら完全再現に挑戦しました写真は限りなく同じ印象を目指して探したものに差し替えていきます。ロゴはオリジナルのキャプチャを利用しています。オリジナルを透かしてズレがなくなるよう調整します同じ印象になるような写真を探して配置します考察するトレース中にとったメモをもとに、考察してみました。タイポグラフィのウェイトやカーニングでの誤差の調整と、同じ印象の写真の検索がとにかく難しく、たくさん悩みました。同じ印象の写真を探すのに苦労しました写真の検索がほんとうに時間がかかりました。なんとか自分なりに見つけたのですが、いい方法をご存知の方教えていただけるとありがたいです...。夕焼け」など思いつく限りのキーワードで検索したのですが、思うような結果につながらず、かなり苦しみました。妄想ガイドラインを作るより詳細を考察するために、トレースしたサイトのガイドラインを妄想で作ってみました。タイポグラフィ、カラー、言語イメージ、コンテンツ幅の可変具合を調べてみると、同じに見えていた箇所が違う数値になっていることを発見できました。他にもコンテンツ幅可変の基準や上下のコンテンツ同士の余白、入力要素の状態変化などもおもしろそうです。思いつく限り考察をするアクセントカラー使用箇所が少ないのに単調に見えないのはレイアウトのバランス?背景の使い方でバランスを取っている?タイトル欧文フォントのアクセントが効いている(ジャンプ率が高い、ボールド、サンセリフ、太めの下線)黒色が文字色と背景色とで同じ色のように見えるが、数値上は違う(文字色#282727、背景色#1f1f1f)大きな違いはないけれど、本文の源ノ明朝の印象を少し弱めることで全体のバランスが良くなっている?写真がコントラスト低めで白飛びあまりしていないもので統一されている?→写真の印象:おだやかな、自然な、知的な、気品のある、慎ましい...「LIONのプロジェクト」コンテンツがあることで引き締まっているトレース前に疑問だったレイアウトの崩しの部分の基準は見つけられませんでした。全体のバランスが恐ろしく整っていて美しいので、ランダムに配置しているわけではなく、何か基準がありそうなんですが......いろんなデザインを考察してみて目を鍛えたいようと思います。色だけ、書体だけ、写真だけ、レイアウトだけで印象を決定づけているのではなく、それぞれの要素のバランスで印象が決まっている。意図しない、文脈にそぐわない要素が入ってしまうと世界観が崩れてしまう。リズムを崩したレイアウトとオーソドックスなレイアウトの配分もデザイン全体の印象に影響がある。メリハリだけで過度な装飾なしでも見出しと本文の区別が容易につく。参考レポート全ページ実際にまとめたレポートは下記リンクから閲覧できます。特記事項レポートは勉強用に作成したものです。個人の勉強の範囲内でのご利用をお願いいたします。レポート内で使用している画像はすべて引用しています。16ページで画像が多めなので、読み込みに時間がかかるかもしれません。MB)表示パスワード:tossyおといあわせレポートに関するおといあわせはTwitterアカウントまでお願いします。ご意見ご感想などいただけると、とっても嬉しいです!匿名ご希望のかたはマシュマロからどうぞ。言語イメージスケール言語イメージスケールは、日本カラーデザイン研究所さんのものを活用させていただきました。配色イメージが言語とともにマッピングされていて関係がわかりやすく、デザイン言語化訓練中の私のよりどころです。小さくて持ち運びやすいのでカバンに1冊入れておくと便利です。単行本(ソフトカバー)がっつりトレースしてみてトレースは強制的にインプットとアウトプットが行えるトレースは実証がすぐ得られるので、想像するだけに比べ深い考察ができる苦難を乗り越えた先には大きな学びがある経験は武器になる、トレースは経験を作れる抽象的ですがほんとうに学びが深く、実際やってみることに意味がある勉強法だと思いました。自分で苦悩するのが一番勉強になります。妄想ガイドラインは妄想でしかないので、手数を増やすために次回からはコンパクトにまとめようと思います。来年はさらに基礎勉強を徹底したいので、トレース修行に出ることにします。何年かかるかわかりませんが、凝視だけでもガチトレース並みの考察ができるくらい悟りたいです。»SearchProfileWebデザイナー4年目。ヒトクセあるけど軽やかでふところの深いデザイナー、目指してます。読者になるRankingRecommend2018-12-17ジェネレーティブアートに挑戦するならp5.jsがはじめやすい2018-12-11【2018年版】社内じんわりアクセシビリティ普及活動記録2018-11-26デザイナーが1pxを大切にしたい理由2018-08-15好きなはずのデザインが苦しかった、あの頃の私へはてなブログをはじめよう!tosssaurusさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。