1秒でWebサイトの背景イメージを変えてくれるブックマークレットが便利すぎる！

最近、作業効率を上げるためにブックマークレットを多用している僕ですが、今回見つけた「SubtlePatterns Bookmarklet」というブックマークレットは、Web制作に携わる人なら「使っておいて損はない便利なもの」だったので、紹介させてもらいます。

SubtlePatterns Bookmarkletとは？

SubtlePatterns Bookmarkletとは、簡単に言えば、Webサイトの背景に「用意されている画像ファイル」を貼り付けたイメージを提供してくれるものとなっています。

Webサイトをデザインしている時（特にリニューアル時）に、背景にどんな画像をいれたらイメージアップになるかなぁなんて思いながら、使えそうな背景画像を一個一個アップロードしながらデザインのチェックをしたりしていたんですけど、この「SubtlePatterns Bookmarklet」を使えば、ざっくりとしたイメージを簡単に確認できちゃうのです。

では、使用方法を紹介します。

SubtlePatterns Bookmarkletの使い方

まずは、SubtlePatterns Bookmarkletの公式サイトにアクセスしていただいて、ブックマークをしておきます。

続いて、Webサイトの背景を切り替えたいと思っているサイトにアクセスをして、先ほど登録をした「SubtlePatterns Bookmarkletのブックマーク」をクリックします。

ここでは「当サイト」をベースに紹介します。

すると、左下にアイコンのようなものが表示されます。

続いて、SubtlePatterns Bookmarkletの設定画面の右上の歯車のマークをクリックして、「Change Background Selector」をクリックします。

すると、Web画面上にマウスを動かしてみると、破線が出てくるようになったと思います。

あとは、背景画像をいれてみたい所にてクリックを押してみます。例えば、当サイトの記事の部分をクリックすると・・・

こんな感じに変化しました。続いて、背景画像をページ全体に設定をしてみた感じが以下の画像です。

とりあえず、画像をいれただけの状態になりますので、文字の装飾や、その他の全体のバランスは見ていかないといけないものの、ざっくりと「画像」を使ったらどのような変化を起こせるのか？が簡単に試せますので、大変便利です。

また、背景画像については矢印のボタンをクリックするだけで自動で変更してくれますので、自分のサイトにぴったりの画像を直ぐに見つけることが出来るかと思います。

あとは、矢印の方向にクリックをしてもらえれば、様々な背景画像が自動的にWebサイトに反映されていきますので、お好みの画像が見つかるまでひたすらクリックしてみましょう。

背景に画像をいれたらどんな風になるかな？と想像をしながらデザインをするものありですが、こういったブックマークレットを活用して実際に画面で見ながらイメージを固めていくのもかなりの時短につながるかと思いますので、ぜひ気になった方は試して見て下さい。