LP制作(PC・SPデザイン)

OVERVIEW

SHElikes MULTI CREATOR COURSEの課題で、スクール会員限定コワーキングスペース のLP制作に取組みました。クライアントからの要件書とワイヤーフレームを元に、 適切な配置の提案も加えたPCとSPのデザインカンプを制作しました。※架空クライアント※

YEAR 2022

----------------------------------------------------------------------------------使用ツール:Photoshop

制作時間 :40h

制作内容 :ワイヤーフレーム構築・デザインカンプ作成

目的   :ターゲット・目的に応じたLPデザインの配置構成を自ら考える力をつける

----------------------------------------------------------------------------------

>クライアント情報

20〜30代の女性をターゲットとしたキャリアスクール。

キャリアアップのためのスキルを学べ、アウトプットの場としてのイベントも開催。


>要件

ターゲット:スクール会員及びスクールに興味のある方

ペルソナ :都内在住の既婚30歳女性

      (キャリアアップと社外の人脈作りをしたいと考えている)

目的   :会員限定コワーキングスペースの認知拡大、利用拡大


>制作物

PCのデザインカンプ


スマホのワイヤーフレーム


>POINT

1.余白の使い方

1,440pxあるPCサイトの中でも余白を180pxと大きく用いて、見やすさ・安心感を出せる

ようにしました。コンテンツ間の縦幅には110px,文字同士には10~30pxの余白を開けました。

2.ターゲットと目的に応じたコンテンツ配置

ペルソナの設定が、30代・ゲーム業界の部長ということもあり、

ハイクラス(高級感)のあるイメージの中でも、遊び心や柔らかさのある感じを全体的に

出すようにしました。

配色もペルソナに合わせて、清潔感・安心感のあるホワイト、企業に対してしっかりした印象を持っていただくためにネイビーを中心にして、女性らしさのあるピンクと遊び心や向上心という意味も含めてアクセントにオレンジを入れました。これから仕事で成果を出したいという女性なので挑戦というイメージと、普段の生活からの使いやすさ(この方の場合には部長職に就いていることもあって高級感)を1番に考えました。


   #F6E5CC      #F7E5E2      #293D46     #DFDFDF

3.ターゲット層の希望にあったコンテンツの追加

顧客の希望は学べる場の他にも、同じ志をもった方との交流が希望としてあったため、

せっかくキャリアスクールとしてのイベントを活かせる場があるため、

それが興味に繋がってくれることを考え、セミナーやイベントの開催案内のコンテンツを

作成しました。

また利用方法については、アイコンを用い、利用方法をわかりやすくしました。

さらに、アプリをDLしていただくことで利用者の増加・認知拡大にも広がることを考え、

アプリのDLのコンテンツを目につきやすいように上部に1つ、下部にも1つ設置しました。

普段自分自身が仕事終わりにコワーキングスペースを利用することが多いので、

ペルソナの女性も役職があり、なかなか移動して仕事や勉強を始めるとなると、

空席状況やログイン、情報などアプリで完結し、ドロップインしやすいように作成しました。


>課題を通して学んだこと

今回はペルソナからどんなLPが適しているのか、「ニーズ」にあったLPを作ることを意識して作成しました。

余裕のある女性・高級感思考と考えると余白を多く取ったり、文字や説明よりもイメージしてもらいやすい画像やアイコンを配置するようにしました。


LP作成を通して、全体像を考えるパートと個々にコンテンツを考えるパートがあり、

全体を俯瞰して見られる力が必要だと改めて感じました。

今回は自分なりの解釈でLPを作成して見ましたが、実際のお仕事では周りの人の意見も反映できるようなデザインに落とし込みたいなと思います。