（課題）コワーキングスペース WORK lounge AOYAMA ｜LPデザイン・制作

｜制作想定

・チーム案件として受注。要件定義分析、分析結果による配色、キーワード、方向性の確定。LP制作部分を担当。

｜制作時間

・約15時間

｜使用ツール

・Photoshop

｜クライアント及び要件定義分析

LPデザイン・制作事前準備としてクライアント及び要件定義についてブレスト、分析しました。

分析過程にて、当初イメージしていた配色から２段階の検討を経て、ベースカラー、メインカラー、アクセントカラーを確定させました。

｜制作したLP

｜LPデザイン・制作における工夫点

▼ クライアント、要件定義の分析

実案件を想定し、クライアントの要望及び要件定義についてのブレスト、分析に時間をかけました。目的、ターゲット（ペルソナ）を具体的に言語化し、ユーザーストーリーを作り込むことで必要なデザイン、情報が絞り込めました。今回のペルソナについては、思考のシンプルさが特徴的に感じたため、デザイン、配色、タイポグラフィはシンプルに、余白を多く取ることで落ち着きを表現しました。

▼ 実装を想定したフォントサイズ、余白の設定

要素をレイアウトするにあたり、10以上の類似サイトを開発ツールで分析しました。閲覧者がPC幅で見た時、スクロールする時、目に入るデザイン、情報にどんな印象を持つかを意識し、設定しました。サイズ感の微調整を重ね、PC幅で1スクロールに1項目の情報が目に収まるように制作できました。

▼ デザインにおける4つの原則の意識

近接、整列、反復、対比をデザインに取り込みました。各コンテンツ毎の余白を大きく取り、スクロールごとに目に入る情報が同じコンテンツになるよう工夫しています。コンテンツ幅には、余白に8の倍数のルールを設け、pixelでの微調整を実施しました。デザインの部分では、あしらいや背景に反復の要素を持たせました。ベースカラーに白と黒、写真にはエメラルドグリーンとオレンジというはっきりとした色味を採用し、背景やあしらいに淡い色味を採用することでコントラストを表現しました。

▼ ペルソナにフィットする写真選定

ペルソナ、デザインのトンマナに合わせて、スタイリッシュな写真を選定しました。主に、ペルソナ分析で結論付けた、シンプルな思考と上昇志向の部分にフィットさせた結果となりました。

▼ スクロール毎に移動するCTA

今回のクライアント要望はコワーキングスペースの周知（雰囲気を知ってもらうこと）がメインだったため、定量的なビジネス数値達成を目論む要素は最小限に抑えています。その中で工夫した点は、右端に設置したスクロース毎に移動する想定のCTAボタンです。LPの雰囲気、デザイン、各情報の印象から、閲覧者が「入会したい！」と感じる瞬間にCTAボタンが目に入っていることで離脱防止になると考え、設置しました。

｜ ラーニング｜機会点

▼ 実案件、実装を想定した制作の重要性

実案件、実装を想定し、要件を具体化、言語化することで事前課題がクリアになると感じています。事前課題を認識することでクライアントとのコミュニケーションがスムーズになり、作業効率向上で捻出される時間をクリエイティブな作業に充てることができます。その結果、より良い制作物をクライアントに提案、提供でき、満足度の向上に繋げられると学びました。

▼ 情報量が多い場合の文字の視認性の向上

伝える情報量が多い場合（今回だとターゲットを惹きつけるコンテンツとしてのセミナーやコンテスト内容）、文字量が多くなるため、文字間やフォントサイズに注意が必要と感じました。ゆとりを持たせる微調整の重要性を感じました。

▼ あしらいの配置スキルの向上

英字のあしらいを左右に振っていますが、日本語の見出しとともに左端に寄せる案もありました。スタイリッシュな印象から左右にふることを選択しましたが、配置についてはクライアントと相談が必要だと感じました。