Mr.kintai

架空の勤怠管理サービス『Mr.kintai』の訴求ページ。
Webサイトのデザインからコーディングまでを一貫して行うことを目標に作成。

ビジネス系のサービスだと緑や青、オレンジが多いと感じており、それらを避けて差別化を図りたいことと、
あまり使ったことがない配色に挑戦したいと考え、青緑とピンクを選択した。

オーソドックスな「課題」「サービス概要」「導入事例」「導入方法」「CVA」の流れのサイトを作成したいと考え、レイアウトを検討。

また、下層ページとして無料お試し用のフォームを作成しており、「無料お試し」から見ることが出来る。

コンセプト

最初にコンセプトを検討し、勤怠関連の業務に時間がかかっている企業の労務担当者のためのサービスとした。
ペルソナ

実際に自社の担当者が月末に定時で帰れていないという現状があったため、その人たちを元にペルソナを検討した。
ワイヤーフレーム&デザイン

ビジネス系のサイトや商品訴求系のLPを参考にしながらコンテンツを検討。
デザインのコンセプトとしては「信頼感7割、親しみやすさ3割」とした。

親しみやすさよりも信頼感が必要だと考え、やや硬さのあるパキッとした印象を目指したが、無機質になりすぎるのも避けたいため、人が描かれているイラストを使用することで親しみやすさを補った。
最終成果物（PC）
スクロールすると要素がふわっと表示したり、ボタンはホバーで見た目が変わったりするなどインタラクションにも気を配りながら作成。

W3Cのバリデーターを使用し、HTMLに問題がないことを確認した。
- ページを見る
最終成果物（SP）
SP版のキービジュアルと「こんなお悩みありませんか？」の部分はかなり複雑だったが、単位や切り替えのタイミングを工夫し、崩れないようコーディングをした。
- ページを見る