（課題）シェアするスクーター HELLO SCOOTER 様｜LP 分析・スタイルガイド制作

｜制作想定

・チーム案件を想定。競合他社に勝つための自社webサイト制作プロジェクトにおいて、チームの共通言語となるスタイルガイド、LP分析を担当。

｜制作時間

・スタイルガイド：約5時間

・LP分析：約2時間

｜使用ツール

・Photoshop

｜トレース、分析したLP

HELLO SCOOTER様のLPをトレース・分析し、スタイルガイドを制作しました（実際のサイトはこちらです）。 

▼トレースLP

｜PC・SP考察

｜制作したスタイルガイド

｜スタイルガイド制作おける工夫点

▼ チーム案件を意識した情報収集

複数人で1案件に取り組む場合、スタイルガイドを共有することで作業効率性が向上したり、手戻りが少ないと考えました。その状況を想定し、配色、タイポグラフィ、スペーシングの可能な限りの詳細情報をまとめました。

▼ 余白の工夫

スタイルガイドは作業中に繰り返し見返す資料だと考えました。必要な情報を一目で掴め作業効率が落ちないよう、繰り返し確認してもストレスのないよう、余白に余裕を持たせました。

▼ 整列の工夫

同上で、繰り返し確認してもストレスのないよう整列を意識して要素を統一化し、見やすさにこだわりました。

▼ 配色の工夫

スタイルガイド自体の配色をLPの配色と同じにしました。チームや複数人で案件に取り組む際、制作するWebサイトに対する印象を統一できると考えました。

▼ 開発ツールの駆使

配色、タイポグラフィ、スペーシングにおいて、Chromeの開発ツールで1要素ずつ確認、分析を進めました。

｜ラーニング｜機会点

▼ LP制作におけるスタイルガイドの充実の重要性

LP制作着手前におおよその配色、タイポグラフィ、スペーシングのイメージを持ち、具体化、言語化することで方向性がブレることなく業務が遂行できると感じました。制作過程で変更、修正は必ずあるにしても、事前準備としてスタイルガイドを持つことが業務をスムーズにする、ひいては納入の納期管理がスムーズになると学びました。

▼ 各カラー、タイポグラフィ、スペーシング採用箇所の明記

機会点としては、上記3要素において、どの部分にしようされているのか、使用される予定なのかを明記できればベターだったと考えました。LPトレース時に、このカラーやスペーシングはどこだったかと振り返ることが多かったことからのラーニングでした。実案件では、取り込みたいと思います。