こんにちは、デザイナーの小林です。
久々の3連休、いかがお過ごしでしたでしょうか？私は実家へ帰省して神輿を担いできました。当初はそんな予定はなかったのですが、うちの地区が5年に1度、神輿を担ぐ権利を与えられる当番町とのことで、せっかくだから参加してきました。おかげで肩がバキバキです。今週もガンバりましょう。
さて、最近のwebデザイン（特に海外）では、背景にポリゴンや、ボケ（ブラー）を効かしたデザインが多くなっています、いや、もはや定番となりつつあるかもしれません。
ポリゴンを使用したサイト。（http://airesecintra.arq.br/）
ブラーな背景と半透明のパネルを組みあせたUI。（https://dribbble.com/shots/1619914-Sports-UI）
ただ、ポリゴンに関してはややクセがあるので今後少しずつ減っていくのではと思っています。しかしこのシャープな未来的な印象の表現は今後も需要あると思いますので無くなるということはないでしょうが、何か違った形で表現する必要が出てきそうです。
そんなとき、三角形のモザイク柄を使用してみてはいかがでしょうか？
before
After（1）
After（2）
After（3）
作り方は非常に簡単です。
作り方
①まず画像を開きます。
②2回レイヤーを複製します。
③一番上のレイヤーを[Ctrl（Macの場合はCmd）] +[T]のあと、上部のコントロールパネルから、「H」に45と入力します。（変形の基準点は真ん中にしてください。）
④そのレイヤーを選択したまま、上部のメニューバーから「フィルター」 → 「ピクセル」 → 「モザイク」を選択します。ダイアログが出るので、任意のセルの大きさを指定します。「プレビュー」にチェックを入れて、自分の好みで合わせて下さい。（今回はひとまず20で進めます）
⑤再び[Ctrl]+[T]を押したあと、「H」の値を③とは逆に-45にします。
⑥このレイヤーの不透明度を50％にします。これでこの一番上のレイヤーの処理は終わりです。
⑦真ん中のレイヤーを選択して、③～⑤までの手順を、角度を逆にして行います。つまり最初の変形の傾きを-45°、モザイクかけたあとの変形の傾きは45°にします。
⑧もうほぼ完成なのですが、モザイクの重なりで若干ズレているところがあるので少し調整します。
どっちのレイヤーでも良いので、矢印キーで左右にずらすとズレがなくなります。
⑨完成です！このモザイクにしたレイヤーの描画モードを変えたり、マスクを一部にかけたり、白黒にしたり…いろいろしてみるとまた違った印象になるので試してみると良いと思います。
一番上のレイヤーモードをオーバーレイにして、モザイクにした2枚のレイヤーをフォルダーまとめてブラシでポンポンとレイヤーマスクをかけました。モザイクのかかり方が多少ランダムになっています。
まとめ
いかがでしたでしょうか？モザイク柄はもう長いこと歴史ある模様なのでなくならないでしょうし、それを三角形にすることで今っぽさがぐっと生まれていると思います。この幾何学柄自体がトレンドではありますが、定番技として覚えておいて損はないでしょう。
