可愛いパターン画像がWeb上で作れる「Patterninja」

2016年12月26日

パターン画像といえば、背景画像や壁紙にしたり、印刷して包装紙やカードのデザインに使うのもいいですよね。今日は、ブラウザ上で手軽にかわいいパターン画像が作れる「Patterninja」をご紹介します。このサイトでは、グラフィックソフトを使わずにブラウザ上だけでオリジナルの可愛いパターン画像を作成することができます！

「Patterninja」の使い方

Patterninjaのサイトにアクセスをしたら、最初にチュートリアルが表示されますので、それをチェックしましょう。英語で説明が表示されますが、PhotoshopやIllustratorなどのグラフィックソフトを操作したことがある方であれば、直感的に使用できるようなインターフェースになっています。

新しいパターン画像を作成したければ、画面右のツールボックス一番上の「Create new pattern」ボタンをクリックしましょう。最初の何もレイヤーがない状態が表示されます。

そこに色をつけたり（Pick colors）、パターンで使うアイコン素材を選んだり（Images library）することができます。
このアイコン画像がまたハイクオリティなものばかり。フリーのものばかりですが、それぞれのアイコンの項目のところに「license info」というリンクがあるので、使用前に必ずそちらを一読してから利用してくださいね。また、自分の好きな画像をアップロードしてパターンに使うこともできます。

気に入ったパターン画像ができたら、「Download the pattern」でダウンロードするか、「Share the pattern」でSNSなどにシェアすることができます。

このサイトは、HTML5で作られたWebアプリケーションです。ソースコードを見ると、svgタグを使って作成されています。svg関連のドローイングツールは世の中にたくさんありますが、こういったアプリケーションがHTMLとCSSといったWeb技術だけで誰でも作れるようになっている、と考えるとすごいことですよね。HTML5に興味がある方は、ぜひこのサイトのソースコードも覗いてみてはいかがでしょうか。