LPトレース

💻　制作物

１　スタイルガイド

２　LPトレース

３　PCとSPでレイアウトが異なる箇所の分析

🕛　制作時間：34時間

🔗　トレース元URL

空育って、なに？｜空育®︎｜CSR情報｜JAL企業サイト

https://www.jal.com/ja/csr/soraiku/concept/#world

制作物１｜スタイルガイド

１　配色

• ブランドカラーはメインカラーとして使用されることが多いが、本サイトではアクセントカラーとして使用されている。赤は注意喚起を促す目的で使用されることが多く、メインカラーにすると分量が多くなり主張が強すぎてしまうため、配色を考慮したと思われる。
•  グレースケールにより微妙な色の濃淡が調整されており、限られた色数でも見やすくなっている。

２　フォント

• 日本語文は「Noto Sans CJK JP」と「游ゴシック」が使い分けられており、「Noto Sans CJK JP」は主にタイトル、「游ゴシック」は主に本文で使用されている。
• 日本語文・欧文ともに可読性の高いフォントが採用されており、ユーザビリティが意識されている。
• 「Yaku Han JP」の使用により約物と文字の間隔が調整されており、見た目のバランスが美しく整えられている。
•  ”What’s SORAIKU?”は斜体になっており、細部にまでこだわりが感じられる。

３　余白

• 各見出し番号から見出しタイトルまでは80px、見出しタイトルから本文までは32pxの余白が共通して用いられており、規則性がある。あらかじめ設定した複数の余白から最適な大きさの余白を選択しているものと思われる。
• コンテンツが切り替わる部分で広めの余白がとられており、内容が変わる箇所が分かりやすくなっている。
• Webデザインにおける余白や要素のサイズとしてよく使用される8の倍数が本サイトでも多用されている。

制作物２｜LPトレース

制作物３｜PCとSPでレイアウトが異なる箇所の分析

工夫したこと

１　再現度を高めるための微調整

デベロッパーツールを活用して文字間隔を調べ、letter-spacingの値(em)を1000倍した値で見本通りに近づけるようにしました。デベロッパーツールで調べきれない箇所は適宜スクリーンショットをとり、上からなぞって調べました。ガイドを引いたり、余白の長方形を置いたり、見本画像の表示／非表示を切り替えたりしながら見本とのズレを適宜修正し、可能な限り再現度を高めることにこだわりました。

２　デザインの基本原則の徹底

トレースだけでなくスタイルガイドやPC・SPの分析まとめにおいても、デザインの基本原則を意識して制作しました。

学んだこと

１　スタイルガイドの役割

スタイルガイドの作成により事前に基本設定を決めておくことで、スムーズに制作を進められることを学びました。特にチームで新たなサイトを制作する際は、関係者間で認識を統一する必要があるため、スタイルガイドは重要な設計図になるのだろうと想像しました。

２　ユーザビリティの重要性

トレースを通して配色やフォントサイズ、余白の取り方など、細部にまでユーザビリティを意識した工夫が施されていることに気づきました。Webサイトには写真やイラスト等と文章が混在しているため、視認性・可読性ともに意識する必要があります。今回はトレースでしたが、自分で一から制作する際もユーザーの視点を大切にしたいです。

感想

今回デベロッパーツールを用いて細かく分析したことで、デザインが感覚的なものではなく、一定のルールや規則に基づいた理論的なものであると感じました。普段からWebサイトを漫然と眺めるのではなく、使用されているフォントの色や種類・サイズ、余白それぞれに意図があることを意識して観察するようにしたいです。また「なぜそうなっているのか」という疑問を持ち、自分の言葉で説明できるようにする練習を重ねていきたいと思います。