kintone

ファーストビューで何を見せているか

白い角丸のヘッダーが浮いた形で置かれ、上段に「エンタープライズ企業の方／ご利用中の方／ログイン」、下段に主要ナビ（キントーンについて／活用方法／機能／事例／料金）。右に「さくっと体験」「無料お試し」の2ボタンが並びます。背景はごく淡いクリーム色で、左上からオレンジの円がのぞく構成。「みんな、つくれる。」の大きなコピーの下に、AIとノーコードで業務アプリを作れるサイボウズの業務改善プラットフォームであることが4行で説明されています。

発注者が持ち帰れる考え方

• UIを見せるのに、実際の画面を使っていない。右側のイラストは、文字を伏せたグレーのバーで組まれた抽象化されたワイヤーフレームです。実画面は情報量が多すぎて「難しそう」に見え、しかもUI更新のたびに撮り直しが必要になります。抽象化は、その両方を同時に解決する手です。
• キャッチコピーを短く、説明を直下に置く。「みんな、つくれる。」だけでは何のサービスか分かりませんが、すぐ下の4行で補われています。短いコピー＋直下の平易な説明文は、ほぼ定型として使えます。
• 入口を温度別に3つ用意している。「さくっと体験」「無料お試し」「セミナー」。同じ資料請求でも、体験・試用・学習と入口を分けることで、検討段階の違う訪問者を同じページで受けられます。

制作面のメモ

ヘッダーを画面上端に密着させず、角丸のカードとして浮かせるのは近年よく見る手法です。背景色と近い淡色を使うと圧迫感が出ない反面、コントラストが不足するとナビが読みづらくなります。淡色配色を採用するときは、文字色のコントラスト比を必ず実測してください。

同じSaaS・ITではSmartHR、Backlogもあわせてご覧ください。