【LP】【オリジナル作品】【PC】100%オーガニックヘアオイル《制作》2023/6/25～2023/7/5

はじめに

本作品は、私がデザインを学習し始めた2023年6月以降、初めて取り組んだランディングページです。

架空の商品を想定し、デザインのみでなく原稿も含め、１から制作することを目標として取り組みました。

また、本ノートは「私の『人となり』を知って頂きたいという気持ちから作成致しました。そのため学習要素の強いパート（特に最後の「感想」）もある点について予めお断り致します。

制作内容

本デザイン制作の中で具体的に取り組んだ工程は以下の通りです。

1. 架空商品の決定
2. 商品に関連する情報（ヘアオイル・アルガンオイル）の収集および整理
3. ペルソナの設計
4. 参考LPサイトの収集<br>
5. キャッチコピー・原稿の作成
6. ワイヤーフレーム作成（手書きノートでパートごとに作成→Figmaでデータ化の流れ）
7. デザイン素材の収集
8. デザイン作成（素材加工にPhotoshopを使用）

使用ツール

1. Photoshop
2. Figma
3. VScode　→　情報整理に使用

意識したポイント

前述の工程通りのご紹介とはなりませんが、各作業で意識したポイントがそれぞれございました。かいつまむ形となりますが、記載をさせて頂きます。

架空商品に関する情報収集

まずはじめに取り組んだのが、架空商品として設計した「ヘアオイル」とその類似商品の「ヘアミルク」また、架空商品に使用されているとした「アルガンオイル」に関する情報収集でした。

ランディングページは何らかの形で「欲求（悩み・課題など）」を抱えているお客様へ訴求をし、商品やサービスの購入などを促すという役割を持っていると心得ています。

ランディングページを制作するということは、その「欲求」に訴えかける「訴求」を形にするということです。

そのため、まずは商品が持つ特徴や性質、さらには類似商品との違いを正しく理解しておく必要があると考え、第一に情報収集をある程度しっかり行うことで、

この後の工程で設計したペルソナへの訴求ポイントを選定するための基礎をつくりました。

※情報収集に際しましては、簡単にメモをしてもある程度見栄えがよくできる「マークダウン形式」を採用し、ツールとしてVScodeを利用しました。

ペルソナの設計

なるべく具体的に性別・年代・悩み事を考案し、どんな人柄なのかがイメージできるよう詳細に設計することを心掛けました。

◇実際に設計した内容

1. 性別：女性
2. 年代：20代後半
3. 悩み事：髪がパサつく・ボリューム感がない・人の視線が気になる（どう思われているのか気になる）・ヘアオイルやヘアミルクは色々試しているけど、中々思ったように改善されない・外出にハードルを感じ始めていて、気が重い

原稿作成

今回は、「髪のことで悩み、外出にハードルを感じるほど気に病んでいる女性」がターゲットということで、文章の作成にあたっては以下の点を意識しました。

1. 理屈っぽくなりすぎないよう、実際の使用後の状態が直感的に伝わりやすいように擬音を多めに使用
2. 「お客様の声」の要素を取り入れ、同じような悩みを抱えている人が、「これまでとは違う手応えを感じている」ということを伝える　※完全に架空の商品ということもあり、「お客様の声」に該当する原稿もある意味都合よく考えることができてしまいました。

また、キャッチコピーにおいては、商品の主張ポイントというよりも、商品を使用することで、お客様が「どう変われるのか」という点がより伝わりやすくなることを意識して作成しました。

配色選定

今回、架空商品が100%オーガニック性のヘアオイルであったため、緑を基調とした自然っぽさ、女性向け商品らしく淡いピンクを配色として取り入れました。また、ヘアオイルを想像させるオイル感を演出することも意識しました。

デザイン作成

デザイン作成において下記を意識しました。

1. 各セクションの役割を考慮した上での要素配置
2. ユーザが読み飽きてしまわないように、各セクションのデザインが似たり単調になりすぎないよう意識（背景に透過画像を置く・画像を揺らすように配置する――など）
3. 各セクションの「つなぎ」となるパーツを複数パターン用意
4. 「使用方法」のパートではアクセントと視線誘導を目的とし、誘導線をデザイン的に取り入れました。

全体を通しての感想

今回、初めてのランディングページ作成に取組み、経験値を積むとともに、様々な気づきを得ることができました。

◇デザイン作成時のキャンバスサイズ

小さすぎると実際に使用する際にぼける可能性があるため、２倍～のサイズで作成しておくと調整がしやすいと感じました。

◇デザイン要素をどこまでグループ化してファイル管理するか

デザインは複数の要素で構成されています。その要素を、１つのデータとして扱うのか、あるいは各要素を別々のファイルデータとして扱うのかによって、汎用性・ファイル管理の煩雑さに影響があると感じました。

……が、各要素をPhotoshopで別々のファイルとして作成し、Figmaなどのデザインツールに個別配置→必要に応じて複数要素をグループとして書き出し、という流れを取るようにするのが最も扱いやすいかもしれないと思いました。

◇アニメーションを意識したデザイン作成＝要素は分解する

前述のグループ化の話に関連して、昨今のwebサイトではランディングページに限らずアニメーションを使用することが当たり前になってきている、といちユーザ目線となりますが感じています。

私は本ノート執筆時点（2023年7月）のほんの１か月ほど前まではサーバーサイド言語の学習・個人開発に取り組んでおり、その中でJavascript周りのスキルも基礎レベルではあるものの習得致しました。

それを元に考えると、デザイン要素は作成段階でしっかり分解しておかないと個別のアニメーションが設定できないため、やはりデザイン要素はある程度、別々に管理しておく必要があると感じました。

終わりに

本作品の作成工程および作成中に感じたことなどを、かいつまむ形とはなりましたがご紹介させて頂きました。

冒頭にも記載させて頂きました通り、少しでも私の「人となり」がお伝えできたなら幸いです。

2023年7月現在、まだまだ駆け出したばかりの新米デザイナーではございますが、お仕事のご依頼を頂けたなら全力丁寧に取り組ませて頂きます。

ご依頼、心よりお待ちしております。

最後までお読み下さりありがとうございました。