【課題】Webページトレース・分析

OVERVIEW

SHElikes MULTI CREATOR COURSEの課題で、Webページのトレースとスタイルガイドの作成、PCとSPのレイアウト分析を行いました。🗓 2022/4

YEAR 2022

制作時間:約50時間

制作期間:約3週間

使用ツール:Photoshop

見本LP のURL:https://www.jal.com/ja/csr/soraiku/concept/#world

| Webページトレース

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

| スタイルガイド

| PCとSPのレイアウト分析

| 工夫したポイント

◆忠実にトレースしたこと

・まずWebページの特徴を理解するために、デベロッパーツールを使いながら観察と分析を行いスタイルガイドを作成しました。そこから忠実にトレースを行うことを意識しました。

◆デザインの分析と考察

・スタイルガイド作成や、PCとSPで異なるレイアウトの分析ではじっくり観察と考察を繰り返し、デザインを言語化しました。

・また実際にPCとSPの両方でサイトを確認し、分析を行いました。

| 学んだポイント

◆優しさと誠実さのデザイン

・空育という教育を優しさや誠実さで表現されていることが色使いや余白、丸み、フォント、フォントサイズ、グレースケールから伝え、細かくデザインすることの意味を学ぶ。

・一つ一つのデザインに意味を持って表現することで、伝えたい世界観を出せること。

◆Webページのレイアウト

・トレースとスタイルガイドの作成、PCとSPのレイアウト分析を行ったことで、Webページの大まかな構成を理解することができたこと。

・同じセクションではフォントサイズや余白、セクションでは反復が行われ統一感があり、情報も入りやすくなっている。