Google Inbox にインスパイアされた ユーザーアイコンを色分けするプログラム

なにがしたい？

Google Inbox って、メールアドレスの（ドメインかユーザー名の）頭文字によって色分けしてくれるんですよね。これが「だれからきたのか？」「同じ人からどれだけ来ているのか？」「前にいつ来たのか？」ということが、ひとめでわかる。コレ欲しい！

はいどうぞー

なんでも良いので文字列を与えると、それに基づいてパレットから1色返してくれる君をつくりました。なるべく28色をまんべんなく使いたいのでハッシュしてるのがポイントと言えばポイントですが、コード自体は特別なことは何もして無くて、超カンタンです。

超カンタンだけど、イチから作ると いい感じのカラーパレットを用意 したり、ハッシュは何をどうしようかと考えるのがめんどくさいかなーと。コピペできるコードを貼り付けておいたら便利に使ってもらえるかなーというのがこの記事の趣旨です。

function getIdColor( $str )
{
    $colors = [
        '#c31a15', '#c84318', '#ec6d20', '#fe8a27',
        '#9aca28', '#c8b654', '#c79b38', '#ca7620',
        '#86b042', '#53a527', '#67981b', '#13864b',
        '#21aa66', '#66b393', '#1897a6', '#70b3b9',
        '#3cb7e3', '#1a9acb', '#1993e8', '#1789cf',
        '#8266ca', '#754cb2', '#6568c9', '#1b57b7',
        '#a969ca', '#983bca', '#c35d7e', '#e42664',        
    ];
    $count = count( $colors );

    return $colors[ crc32($str) % $count ];
}

適用例

右側が適用したものです。名前にモザイクしていますが、誰の発言かわかりますよね。

余談

デザインの要素にはいろいろありますが、人間が物体を認識する順序＝デザイン要素の重要度は、

1. 色
2. カタチ
3. 質感

だと思っています。色が人に与えるイメージは意外なほど固定的だし、なにより色の認識スピードは異常に速い。なにかを区別してほしかったら、色分けするのが一番効果的。それを突き詰めたのが近年のフラットデザインかなーと解釈していて、個人的には説明が不要になって仕事がやりやすいです（笑）。

UIデザインは色分けがうまくできるかどうかがスタート地点。でも、やたらめったらカラフルにするわけにもいかず、腕が試されるところです。