重なった写真を、本物の山っぽく見せる工夫 | 開発ノート

めぐる日記では、1日の記録に複数枚の写真を添えられる。最初はただ横に並べて表示していたんだけど、味気ない見た目だったので、机の上にポラロイド写真を無造作に積んだような、少し重なって斜めにズレている見せ方に変えてみた。

回転とズレを、規則的に散らす

完全にランダムな角度で重ねると、表示するたびに角度が変わってチラついて見えるし、時にはバランスの悪い見た目になってしまう。そこで、写真の並び順(1枚目、2枚目、3枚目…)に応じて、あらかじめ決まった角度とズレ幅を割り当てることにした。1枚目は正面、2枚目は右にちょっと傾いて右下にズレる、3枚目は左に傾いて左下にズレる、というように。同じ日の写真なら毎回同じ見え方になるので、安定して自然に見える。

見せる枚数は最大3枚までにして、4枚目以降があれば「+2」のような数字を添えるバッジを重ねて、枚数が多いことだけ分かるようにした。全部重ねて表示すると逆に何が写っているのか分からなくなってしまうので、ここは欲張らないようにした。

タップと長押しの両立

この写真の山は、タップすると写真が大きく表示されて、長押しすると編集画面が開く、という2つの操作を持たせている。単純に両方のジェスチャーを同じ場所に付けると、タップしたつもりが長押し判定されたり、逆に長押ししたつもりがタップ扱いになったりして、操作感がちぐはぐになりやすい。長押しの判定が始まった瞬間に「今は長押し中」というフラグを立てて、そのすぐ後に来るタップの判定を1回だけ無視するようにしたら、両方が自然に共存するようになった。

持ち帰ったこと

「ランダムに見えるけど実は規則的」にした方が、見た目の自然さと安定性を両立できることが多い
情報を盛り込みすぎず、あえて見せる枚数に上限を設けた方が結果的に見やすい
タップと長押しを同じ場所に共存させる時は、判定の順番と「直後の別ジェスチャーを一度だけ無視する」仕組みが効く