黒鍵盤に光沢を入れたら、レビューが少しだけ優しくなった

機能の前に、見た目を整える

ピアノアプリの開発を続けていると、新機能ばかり追加したくなります。録音、サスティン、ベロシティ…ただ、ユーザーが日常的に目にするのは結局「鍵盤」そのものです。

ある日、自分のアプリを久しぶりに普通に触ってみて、「黒鍵盤、ちょっと安っぽいな」と感じました。フラットな単色塗りで、本物のピアノとは似ても似つかない、いかにもデジタル然とした見た目です。

光沢グラデーションを足してみる

やったのはシンプルで、黒鍵盤のレイヤーに線形グラデーションを重ねただけ。最初は垂直方向のグラデーションを入れたのですが、なんとなく面白くない。試しに斜めにしてみたら、急に「本物っぽさ」が出ました。

gradient: LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  colors: [Color(0xFF222222), Color(0xFF555555), Color(0xFF1A1A1A)],
  stops: [0.0, 0.4, 1.0],
),

微妙な光沢の山を作るために、3 色のストップを置くのがコツでした。

CustomPainter で塗る場合は、Paint.shader に LinearGradient.createShader を渡すのが定番です。鍵盤の Rect を渡すだけで、角度・色の停止位置をパラメータで自由に試せます。

class BlackKeyPainter extends CustomPainter {
  const BlackKeyPainter({required this.rect});
  final Rect rect;

  @override
  void paint(Canvas canvas, Size size) {
    final gradient = LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: const [
        Color(0xFF222222),
        Color(0xFF555555),
        Color(0xFF1A1A1A),
      ],
      stops: const [0.0, 0.4, 1.0],
    );
    final paint = Paint()..shader = gradient.createShader(rect);
    final rrect = RRect.fromRectAndRadius(rect, const Radius.circular(3));
    canvas.drawRRect(rrect, paint);
  }

  @override
  bool shouldRepaint(covariant BlackKeyPainter old) => old.rect != rect;
}

スクリーンショットを撮り直す

リリース時に App Store のスクリーンショットも撮り直しました。光沢のある黒鍵盤が並んでいると、それだけで「ちょっと高級そう」に見えます。スクリーンショット差し替え以降、ダウンロード率（CVR）が微増した実感もあります。

機能追加とデザインのバランス

この改修は、コードで言えば 30 行いかない程度の修正です。けれど、ユーザー体験への寄与は地味に大きい。「機能はあるのに見た目で損している」アプリは多くて、機能の優先度ばかり考えていると、こういう改修は後回しになりがちです。

おまけ: 鍵盤押下時のアニメーション

勢いで「白鍵盤の押下時に音名表示をアニメーション」する改修もこの時期に入れました。ふわっと音名が浮き上がる程度の控えめな演出ですが、押した手応えが増します。

学び

• 機能追加が止まったタイミングで、見た目を見直すと効果が大きい
• 黒一色より、3 ストップのグラデーションのほうがリアルに見える
• スクリーンショットの更新もセットでやると、ストアでの印象が変わる

機能 8 割、見た目 2 割みたいなバランスでアップデートしていくと、ユーザーの満足度は持続します。