【自主制作】コワーキングスペースLP　デザインカンプ

目次

(1) 制作したデザインカンプ(PC)

(2) 制作要件

(3) 工夫したこと

(4) 制作を通して学んだこと

(1) 制作したデザインカンプ(PC)

(2) 制作要件

・クライアント詳細（架空）

クライアント名：WORK ,inc.

女性向けのビジネススクールを展開。会員はキャリアアップのためにビジネススキルを学ぶ20~30代女性が多い。

・制作目的

コワーキングスペース「WORK lounge Aoyama」について知ってもらうこと

・ターゲット

ビジネススクールWORKの会員、または気になっている人

・必要要素

クライアントから渡されたワイヤーフレームを元に追加・改善

・トンマナ

「仕事で結果を出したい」「同じ志を持つ仲間と交流したい」と考えている方がターゲットであるという情報から自身で策定

(3) 工夫したこと

①キーワードを分解し、ガイドラインを策定することでブレないコンセプトを実現

「仕事で成果を出したい」というペルソナのゴールから、「理想の自分を追い求める上昇志向の高い女性」に刺さるデザインを考え、イメージボードを作成しました。

ピックアップしたキーワードを以下のモチーフを用いて表現しました。

◎女性・憧れる：配色・フォントで表現(詳細は後述)

◎モダン・洗練：レイアウト・あしらいで表現(詳細は後述)

②フォント・配色で「憧れ」「大人の女性」を表現

メインフォント：游ゴシック…可読性が高く、上品な印象も演出。

英字フォント：Montserrat…モダンで女性らしい印象を演出。

アクセント：Homemade Apple…アクセントとして抜け感を出すために使用。

ベースカラー：白…モダンで大人っぽさを演出。

メインカラー(文字色)：黒…大人っぽさと視認性を考慮。トンマナに合うよう明度を少し上げた#222222を使用。

アクセントカラー：ピンク…ひと目で女性向けのサービスと分かるように使用。「憧れる」感を演出するためにニュアンスカラーを意識してくすんだ色味に調整。

③重ねる・ずらすレイアウトを反復することでモダンで洗練された印象を演出

MV…タイトルと写真と背景色を重ねてそれぞれずらす。写真は一辺断ち落としにすることで、余白を残して上品な雰囲気も保ちつつ空間の広がりを演出。

SERVICEセクション…写真の上にテキスト部分を重ね、単調にならないように交互に写真と文字を配置。アクセントとしてあしらい的にスクリプト体のテキストを挿入。

SYSTEMセクション…順序の説明部分となるので、階段を登るイメージで右肩上がりにずらして配置。

(4) 制作を通して学んだこと

①「ひと目で伝わる情報構成」を想定して作成すること

WEBデザインでは大きな画面の中で制作が進むため、「分かりやすく伝えたい情報を伝えること」をより意識する必要があると学びました。具体的には

・同じセクション内ではレイアウトを統一して反復すること

・特に目立たせたい情報は背景色などを使ってメリハリをつけること

等、デザイン基本原則の重要性を改めて感じさせられました。

②使いやすいUIを意識すること

バナーデザインやフライヤーデザインとは異なり、ボタンやスライダーなどのユーザーインターフェースがあるWEBデザインだからこそ「見せ方」よりも「ユーザビリティ」を優先して設計しなければならない場面もよくあることを学びました。デザイナー本位の制作にならないよう、常にユーザー目線を念頭に置いて検討することが必要だと感じました。