スクリーンショット撮影ツールGyazoのランディングページのデザインを行った。デザイン / 動線設計 / 実装までを担当。期間は構想からリリースまで10日間。かなりスピーディーに動いた。

esports市場の拡大に伴いGyazoをゲーム用キャプチャとして利用するユーザも増加している。ところが現状のGyazoのランディングページはオフィスワーカーに向けた仕様になっており、ゲームユーザーに対する訴求力が低い問題を抱えている。そこでゲーム利用に特化したランディングページを新たに作成し、アプリのダウンロードCVRの向上を図ることにした。

目的とゴールを言葉にして明確化

KPIを設定し関連メンバー全員に共有

Google AnalyticsおよびMixpanelから現在のCVRを算出し、LPの更新による期待値を設定。

今回はこの準備フェーズをしっかり実施した。これまでの施策では効果計測が曖昧なケースが多く、成否に関わらずその後の学びに繋げることができていなかった。現状と実施後の差を明示することで、その理由を考えるきっかけにできるはず。

今回のLPデザインで表現すべき性格のようなものをこの時点で整理しておく。現状のLPはオフィスツールとして「クリーン、シンプル、簡単、安心」のようなテーマを元に作られている。今回はゲームユーザー向けの性格づけとして「未来感、ワクワク感、エキサイティング」などの言葉を挙げた。

↓ 現状のランディングページ。コンテンツ・雰囲気共にゲームユーザにマッチしない

時間短縮のために、基本的なレイアウトと雰囲気を見据えながらワイヤーフレームを作成した。

レイアウト検討時にはカラーを排除してグレースケールの強弱のみを加えた状態で行う。初めての試みだったがかなり効果的だった。最低限強調したい箇所を確認しながらバランスの当たりを取れる。

メイン機能である動画キャプチャーを強調するために、Heroヘッダ部分の画像は動画を使用。

ただの動画ではなく mix-blend-mode の重ね技で 未来感を演出した。

検証中