Worksシステム開発会社 LPデザイン
概要
CodeCamp（プログラミングスクール）開催の第5回デザインアワードに応募した作品です。
「株式会社CC tech」という架空のシステム開発会社のLPのデザインを考えるというお題でした。
課題要件
- ロゴとワイヤーフレームの支給があり、そちらに基づいてデザインをおこなう
- ターゲット層はシステム開発導入に困っている企業の担当者
- システム開発導入が初めてのお客様でも不安にならないデザインをお願いしたい
制作について
システム開発導入が初めての方に向けて、システム導入のハードルの高さを感じさせないようなページを目指しました。
- 親しみやすさや、やわらかい雰囲気を感じてもらうため、淡い色使いのイラストを使用する
- 使用する画像はイラストのみに限定せず、「安心感」を感じてもらえるよう所々に写真を使用し、システム開発会社に関わる人の様子が見えるようにする
- 全体的に明度が高く彩度が低い色を使用し、見る人に明るいイメージが伝わるようにする
- 見積もり依頼のボタンは目立たせる必要があるが、キツい印象を与えることを避けるため、彩度が高くなりすぎないように気をつける
- 文字間は少し広めにとり、文字が読みやすいようにする
フィードバックを受けて改善した点
以下のフィードバックをいただきました。
- 文字が全てボールドなのでメリハリをつけるためにボディコピーはレギュラー・ミディアムにウェイトを落とす
- 見出しの下の線が小さいながらも太く濃いためやや存在感が強い
- コンバージョンエリアにおいてボタンより電話番号のホワイトが目立っている
一人では気づけない細かな点をご指摘いただき、以下のように調整しました。
- 見出しの下の線は細くし、それに合わせて文字のウェイトも落とす
- コンバージョンエリアに使っていた電話番号の囲み枠の塗りをなくし、コンバージョンボタンをより目立たせる
制作環境
Adobe Photoshop・Adobe Illustrator
約4日