自主制作：LP（PC/SPデザイン・実装）

【要件定義】

◎ターゲット
・よりよく生きて行きたいが、なかなか行動に移せていない人
・「SDGs」「サスティナブル」という言葉に対し、意識高い人が関わるものと考え、毛嫌いしてしまっている人
・自己投資をし、より良い生き方をしたいが「意識高い」とは言われたくない、10代後半から30代前半の女性

◎トーンアンドマナー
・「健康」「サスティナブル」という単語から浮かぶナチュラルな感じとは相反しているポップなイメージを与える色合い。●を使いポップな印象を与える

◎目的
・LPを通して、コミュニティの世界観に共感し、オンラインサロンに入会していただく
・「意識高い」という印象よりも「なんだか楽しそう」という印象を与えるようにデザインを構築

◾︎工夫した箇所

1. 「意識高い人だと思われたくない」というインサイトからトンマナを設定

「SDGs」「サスティナブル」「beauty」などのコンテンツについても学びを深めて行くオンラインサロンにする予定です。しかしこのような内容を扱うサイトやショップのデザインはナチュラルでシンプルなものが多い。そのデザインを見るだけで「意識高そう、自分には関係なさそう」と考える人が多いと感じていた。

学ぶことで自分の人生が良くなることはたくさんあるけれども、デザインによりその道が閉ざされるのはあまりにも勿体無いと思い、ポップなトンマナに設定し、入り口のハードルを下げるように意識しました。

2.初めて手をつけたコーディング

まずは紙にLPのラフ案を書き、どのようにグループ化をしていったらコーディングしやすいかを考えて取り掛かりました。グループ化ができている部分は、時短にもなり、大きな間違いにも繋がらずスッキリとまとめることができた。

また疑問点は、本・YouTubeで調べる、SHElikesというスクールのデザイナーさんへ質問などをして解決していきました。

◾制作を通して学んだこと

1. コーディングの実装を意識したデザインを制作する重要性

初めてLPをコーディングするということもあり、「どのようなデザインがコーディングしやすいか」というのが分からないまま始めて行きました。その結果、実装が困難になり途中でデザインを変えることもありました。

引き続きデザインやコーディングを学ぶ中で引き出しを増やし、デザイン案を出す段階からコーディングを意識して制作に取り掛かります。

2.目的の軸をいつもブラさないことの重要性

デザインを考える際、またコーディングやjQueryを使いサイトに動きを取り入れる際、「このページの目的は＊＊」と意識をすることで、世界観がぶれることなく最後まで制作に取り掛かることができました。

目的が明確であればあるほど、目的に沿わないものは排除するという選択をすぐにすることができる。逆に目的が明確でないと、軸がブレることにより統一した世界観を出すのが難しいことが分かった。

制作に入る前に要件定義をしっかりと決め、ブレない軸を作ることの重要性を学びました。

《PCワイヤーフレーム》

《SPワイヤーフレーム》

《PCデザインカンプ》