128591903f7c4acd

飛行機教育サイトWEBページトレース

OVERVIEW

キャリアスクールSHElikesの Multi Creator Courseの課題で制作したWEBページトレース。 トレースと並行してページの分析も行い、分析結果をまとめたスタイルガイドを制作しました。【使用ツール:Photoshop】

YEAR 2021

◇制作時間:約2週間

◇課題概要

事前に用意されたWEBページ候補の中から自分で選択し、該当ページをトレースする。該当ページを分析したスタイルガイドを制作する。

◇選択したWEBページと選択理由

トレースページ:空育(JAL)https://www.jal.com/ja/csr/soraiku/concept/#world
選択理由:候補のなかでサイトのデザインが最もシンプルなのにもかかわらず全体を通し
     て飽きずに内容が伝わるのはなぜか分析したいと思ったことと、色の使い方に
     ついて考察を深めたいと思っておりグレースケールについて学べる該当ページ
     を選択しました。

◇学んだこと

・同じ系統の色味を細かく使い分けることによって見やすくなるかつトンマナを崩さない 
 で表現できる
・赤を使用しても工夫で優しさを出せる
・余白は倍数の大きさを使い回すことによって均等な配置に設定することができている
・フォントの大きさは規則性というより視認性、デザインによって読みやすさを考慮して 
 設定されている
・フォントの種類はペルソナに一番受け入れられるもの(今回の場合は子供向けサービス
 についてなので読みやすくて丸みがあり柔らかさや優しさが出せるもの)が選ばれてい
 おり、視認性の点でもペルソナ対象に合わせてジャンプ率などが考慮されている(子供
 向けながら親世代、祖父祖母世代など幅広い世代が閲覧することを意識されている)
・SPサイトはWEBサイトと比べて画面の大きさが異なるのと直接画面にユーザーが触れ
 て操作するのでデザインもそれに応じた工夫が必要になる

◇スタイルガイド

検証ツールを用いて使用されているカラー/フォント/スペース/SPとWEBでのデザインの違いについてそれぞれ分析、考察しました。特にカラーについて学びになることが多く、考察に時間を割きました。トレースサイトのアクセントカラーである赤を意識して同系色を使用し、デザイン4原則に則って制作しました。

◇WEBページトレース
フォントのカーニング/写真/図形の位置を見本に忠実に、正確にトレースするよう心がけました。メインビジュアルのグラデーションも同じように見えるようグラデ具合を調整してトレースしました。