コードで「手作り感」を出す3つのテクニック — Flutterの微妙な傾き・テープ・付箋

綴Photo の詳細画面を作っていて、どうしても「コードで手作り感」を出したくなった。

「きっちりしてる」は、写真日記には合わない

UI を整えていくと、自然と「きれいに揃える」方向に行きます。中央揃え、等間隔、シンメトリーなレイアウト。

見た目はきれいだが、なんか「写真アルバム感」が出ません。

本物のアルバムは、もう少しバラついています。テープが少し曲がっている、写真が微妙にズレている、付箋がちょっと傾いています。その「ほんのわずかなズレ」が温かみを作っている と気づいた。

Flutter で、そのズレをコードで再現することにした。

テクニック①: 写真カードをほんの少し傾ける

まずは写真カード自体の傾き。

dart

Transform.rotate(
  angle: 0.014, // ラジアン。約0.8度
  child: PhotoCard(...),
)

0.014 ラジアン、度数に直すと約0.8度。逆に2〜3度傾けると「崩れてる」に見えてしまいます。

0.014 という絶妙な小ささが、「ちょっとズレてる」と「気になる」の境界線だった。

テクニック②: テープを2箇所、異なる角度で貼る

本物のアルバムのテープは、同じ角度で2枚同じ向きには貼りません。

dart

// テープの1枚目
Transform.rotate(
  angle: -0.052, // 約 -3度
  child: Container(width: 60, height: 20, color: AppColors.albumTape),
),
// テープの2枚目
Transform.rotate(
  angle: 0.035, // 約 +2度
  child: Container(width: 55, height: 20, color: AppColors.albumTape),
),

テープ自体はシンプルな半透明の矩形（Container）で十分。角度が全部やってくれます。ここも数度ぶんの小ささ（約3度・2度）がポイントで、大きく振ると「崩れてる」に寄ってしまいます。

テクニック③: 付箋を偶数・奇数で左右交互に傾ける

写真に添える付箋メモを、リスト表示するとき。全部同じ向きに並ぶと、デジタルの整列感が出てしまいます。

解決策は偶数・奇数で傾きを変えること。

dart

final angle = (index.isEven ? -3.8 : 3.2) * (math.pi / 180); // -3.8° / +3.2°
Transform.rotate(
  angle: angle,
  child: StickyNote(text: meaning.text),
),

対称じゃなく、微妙にズラすのがポイント。完全に左右対称だと「交互に並べた」感が出てしまいます。非対称な傾きが「自然にそこにある」印象を作ってくれます。

おまけ: 背景にドット紙を入れる

3つのテクニックに加えて、背景もこだわった。CustomPainter を使ってドット紙の質感を再現。

dart

class DotPaperPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = AppColors.memoryDetailDot // 暖色のベージュをごく薄く（alpha 約0.13）
      ..style = PaintingStyle.fill;
 
    const spacing = 14.0;
    for (double x = spacing / 2; x < size.width; x += spacing) {
      for (double y = spacing / 2; y < size.height; y += spacing) {
        canvas.drawCircle(Offset(x, y), 1.0, paint);
      }
    }
  }
}

色は暖色のベージュをごく薄く（透明度13%ほど）。グレーで均等に打つより、テーマに馴染む暖色を薄く置くほうが「ノートの地の質感」に寄ります。これも「主張しすぎない」が大事で、背景に溶け込むくらいの薄さにした。

まとめ

微妙な傾き(0.014ラジアン)が「手作り感」のすべてを決めます。

こういう細部のこだわりは、機能としては何も増えません。

でも、綴Photo を開いたときに「なんか温かい」と感じてもらえるなら、それがユーザー体験として一番重要なことだと思っている。デジタルにアナログの質感を入れる面白さ、一緒に探っている人がいたら嬉しい。

この記事は2026年4月時点の実装内容で書いています。Flutter の Transform.rotate や CustomPainter の API は安定しているが、見た目の調整値(角度・余白)はアプリのテーマに応じて変わるはずなので、参考程度に。