架空LP制作（PCデザイン・SPワイヤーフレーム）

【所要時間】約3週間

【使用ツール】Photoshop

目次

①要件

②制作したLP

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

④工夫したこと

①要件

・クライアント情報

女性向けのビジネススクールを展開している。会員は20~30代の女性が多く、キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。

・目的

会員様限定のカフェ&コワーキングスペースをオープンすることとなり、利用方法やアクセス情報を載せたWebサイトを制作してWORK lounge Aoyamaについて知ってもらいたい。

・ターゲット

ビジネススクールWORKの会員様
ビジネススクールWORKの会員ではないがWORKが気になっている方

・ペルソナとユーザーストーリー

・ワイヤーフレーム

②制作したLP

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

・ユーザーストーリー、スタイルガイドの必要性

最初にユーザーストーリーを設定しておくことで、目的やゴールを明確にすることができ、ユーザー心理に沿って情報設計することができると学びました。

サイトのレイアウトを考える時に、文字の太さや大きさを各セクションごとで揃えたり、余白の幅を５の倍数で揃えたりしていくことで、情報がすっきりとまとまって見えることがわかりました。

・LP全体の世界観を統一することの重要性

ペルソナから受ける印象や雰囲気を「仕事熱心」「知的な女性」などと、自分なりに言語化していくことで、サイトのトンマナ作りの近道になるのではと考えました。

サイトの印象は配色だけでなく、文字のフォントやあしらいによっても変わってくるので、ビジネス感を与えつつ、女性が憧れるオシャレなカフェ感も取り入れるように、「曲線的・暖色系」というよりは「直線的・寒色系」を意識することで、サイトの世界観が統一されることに気付きました。また作り始めに与えたい印象を言語化し、いくつかキーワードをあげることで、作りたいデザインのイメージが整いやすいと学びました。

④工夫したこと

・ユーザーストーリーの設定

セクションごとにユーザーの視点に立ってユーザー心理を考え情報設計していくことで、より目的やゴールが明確になり、目立たせたい要素や伝えたい情報を自分の中に落とし込むことに努めました。またペルソナの情報から「仕事熱心」「知的な女性」というようなキーワードをいくつか洗い出し、トンマナの世界観を膨らましていくことに努めました。

・ワイヤーフレームの修正点

コアワーキングスペースの雰囲気がひと目見ただけでわかるように、キービジュアルにさらに写真のスライドを付け加えました。

さらにサービスのセクションも付け加えて、一目で利便性が伝わるように電子機器やアメニティのアイコンを並べ、視認性を良くしました。

利用方法は写真とセットにして順序がターゲットに分かりやすく伝わるように、近接・整列・反復を意識して配置しました。またアプリのダウンロード訴求も間に入れ込むことで、ターゲットに一押しできるポイントになると考えました。ボタンのUIは直感的にわかることを第一に考えて、押したくなるようなデザインにしました。

会員になるとお得であることをもう一押し伝えたいと考え、最後にイベント情報のセクションを付け加え、ターゲットに試してみたい！と思ってもらえるような工夫を施しました。

・配色 

「青」は「集中」「沈静」というイメージがあり、気持ちを落ち着かせたり集中させたりする力があると思ったため、仕事をする空間にぴったりな印象を与えられると思い、まずメインカラーを落ち着いていてオシャレさもある、インディゴブルーにしようと考えました。

「ベージュ」を用いた理由は、集中できる空間でありつつも、カフェの親しみやすさや居心地の良さもアピールしたいと思ったので、コーヒーや紅茶のカラーである「ベージュ」を選びました。またペルソナに人脈を広げたいという情報があったため、青だけではかしこまった印象になってしまうと考え、誰でも参加しやすいという印象にしたく、温かみのある優しい色を使いたいと思ったのも理由の一つです。

・フォント

20代後半〜30代前半、繋がりを求めるキャリアウーマンというペルソナから、以下のキーワードを設定しました。

遊明朝体：上品、知的、洗練、女性らしさ、都会的

遊ゴシック体：可読性高、シンプル、スタイリッシュ、スマート

手書きフォント：カジュアル、オシャレ、カフェ感

・余白

基本的に５の倍数で設定し、全体的に要素が目に入りやすくシンプルでまとまりのあるレイアウトにしました。

・写真

ペルソナと同じ年代の女性写真を選ぶように意識し、LP全体の世界観に合った大人っぽくてシックな印象があるものを選びました。

メインビジュアルの写真は、彩度やコントラストを配色に合わせて設定し、トンマナを統一するように意識しました。