【架空案件】 京都はんなり女子旅おすすめモデルコース紹介
WEBデザインスクールの課題で制作しました。 制作ツールはfigmaです。 LPのサイズは、スマートフォンでの閲覧を想定して横幅:375pxとなっています。 LPの全体像は最下段に画像があります。
〜制作について〜
制作の流れ：ペルソナ＆トンマナ設定→ワイヤーフレーム作成→1st viewから実装→
完成（仮）→WEBデザインスクールの先生に添削していただき、修正→最終版の完成
カラーについて：クライアント様のご希望に沿った、「京都らしい」とされるカラーを使用しました。加えて、提供いただいた画像群の雰囲気も崩さないようにとの注意も払いました。
フォントに使用してるカラーは、メインとアクセントのカラーに囲まれた中での見やすさかつ落ち着きを考えた結果、選ばれたカラーです。
背景は、使用カラーがそれぞれしっかりと個性が出るので、それらの邪魔にならないようにシンプルにしました。
タイポグラフィ：「しっぽり明朝」のフォントを使用し、全体的に京都のはんなり、しとやかな感じに仕上げました。
「Noto Sans JP」のフォントは、viewのタイトルの見やすさのために使用しました。
【補足画像リンク：カラーコードを画像で掲載しています。
情報設計：2nd viewのメインとなる内容の上部に、3rd viewの内容を簡略化した情報とCVボタンを配置しました。
一通りLPを閲覧したユーザーが、もう一度情報を見直そうとして上の方のviewを閲覧する＝上の方へスクロールするという行動を予測し、次のような設計に仕上げました。
スクロールして2nd viewに戻ってきたタイミングで、3rd viewのみでは獲得できなかったCVを獲得できるようにという設計です。
工夫ポイント：全体の工夫ポイントは、単調なのっぺりしたLPにならないようにした点です。グラデーション、あしらいを各所に使用し、情報を閲覧しているユーザーが、
単調な1色のベタ塗りな雰囲気に飽きてしまう＝離脱とならないようにと考えました。
具体的な内容は以下の通りです。
1st view→キャッチコピーを、Photoshopのグラデーション機能でメインビジュアル仕様にした事。
2nd view→figmaの機能を駆使したviewとなっています。グラデーションを文字はもちろん、「京都女子旅おすすめモデルコース」の各セクション枠内へ配置しました。
各セクション枠内のグラデーションは、赤系統のカラー1色よりも提供いただいた画像と紹介文を美しく目立たせる事ができたかと感じています。
あしらいについては、手まり柄のものは、各セクション間に繋がりがある事を見せるための工夫です。
文字の周りのあしらいは、単調さを減らすための配置、工夫です。
３rd view→2nd viewと同じ工夫ポイントを踏まえていますが、着物の画像のあしらいに
次の通りの作業が加えられています。
プラン内容の各セクション枠の上部のあしらい：元の画像の色合いををPhotoshopで調整し、figmaの方で柔らかめのグラデーションをかけました。すなわち、2段重ねの工程となりました。
この2段重ね工程は、1st、2nd viewの雰囲気から離れた暗い色合いや、反対にパキッとした明るすぎる色合いが入り込まないように、統一感を損なわないようにするために行いました。
制作期間：1ヶ月半
