はじめに

WEBデザインに興味のある人や、ノン・WEBデザイナーの人におすすめしたい、WEB見本を収集する方法を紹介します。WEB見本をたくさんスクラップして、デザインのインスピレーションや参考にお役立てください。

収集手順

以下のSTEPの手順になります。

STEP1 RSS登録

GoogleReaderにWEBデザインのギャラリーサイトを登録します。
※ギャラリーサイトの紹介について後述します。

STEP2 WEB閲覧

ブックマークレットを使って、FirefoxでWEBページを閲覧します。

ブックマークレットの利用方法:
GoogleReaderの設定追加機能で、特定のタグの「次へ」ブックマークレットを、ブックマークバーにドラッグします。

STEP3 スクラップ収集

さいごに、スクラップの収集を行ないます。ブラウザは、Firefoxを使用し、Tomblooというアドオンを使ってスクラップをします。

Tomblooを使うと、Tumblrへの収集が楽々スピーディーにできます。

※Tumblrの説明とスクラップ方法については後述します。

どんなギャラリーサイトがあるの?

さて、どんなギャラリーサイトがあるのでしょうか?

ギャラリーサイトはたくさん公開されていますが、特におすすめのサイトを以下に紹介します。(ここでは登録数が少ないサイトやRSS配信の無いサイトは除外してます)

国内のWEBデザインが多くまとめられたサイト

海外のWEBデザインが多くまとめられたサイト

国内&海外のWEBデザインが多くまとめられたサイト

どれを登録して見ればいいの?

上記にあげたのは、ほんの一部ですが、これだけでも、すべてをRSS登録して見ていくのは時間がかかり非効率です。

なので、自分の好みのサイトだけに絞って登録するようにしましょう。同じようなサイトいくつも登録すると、重複してしまうことがありますのでご注意ください。

個人的には以下のサイトをおすすめしたいです。

国内

Web Design Clipはクオリティーの高い国内のFLASHが多く紹介されているサイトです。

bookma!はユーザがいいと思ったサイトを投稿して集めているサイトです。審査があるので一定のクオリティーが保たれています。

WP Design Galleryは国内のWordPressで作られたサイトを紹介しているサイトです。

Good Design Webは個人の方が集めたサイトです。ほかではあまり見られないサイトを見られるので登録しています。

海外

CSS Maniaは世界中のWEBデザイナーの優れたサイトを紹介しています。

WEBデザインのトレンドはここから発信されているといってもいいくらい、はやりのデザインのサイトがたくさん紹介されています。サイト数も群を抜いており、更新も頻繁にあるので、海外のはこれ一択です。

以上、5つのサイトを登録しています。これだけでも、デザインの参考資料としても十分な数を得られます。

それから、モバイルデバイスのサイトを参考にされたい方は、下記をご参照下さい。

KAYAC DESIGNER'S BLOG:
デザイナー必見!ポータルのポータル【モバイルデバイス編】

スクラップするには?

FirefoxとTumblrを使います。

Firefoxには、TomblooというTumblrのアドオンがあり、これを使うとWEB見本のスクラップがとても楽にできます。

Tomblooをインストールしたら右クリックから該当メニューを選択するだけで、ページのキャプチャ画像などをスクラップできます(下図)

↓Tumblr初心者の方はこちらをご参照下さい
Tumblrってなに?ビギナーのための基礎知識や始め方・使い方

↓Tomblooのインストールはこちらからできます
Home - tombloo - GitHub

↓Tomblooの使い方はこちらをご参照下さい
Tumblr用Firefoxアドオン『Tombloo』使い方まとめ

ブックマーク保存じゃだめなの?

ブックマークではなく、Tumblrを使う理由は、

  • サムネイルで閲覧できる
  • ページ全体のキャプチャを見たまま保存(Tombloo使用)
  • サイトがCloseされてもデザインが参照できる
  • AutoPagerやAutopagerizeなどのアドオンの追加で、"次へ"のページ送りが自動でできる

...ということで、ブックマークじゃないほうがWEB見本の収集に適していると思います。

さらに、

  • URLの保存
  • タグで種類分け
  • コメントの記入
  • 検索
  • Twitterに同時POST

...などができるので、実用的だと思います。(たくさんPOSTすると重くなりがちですが、、)

おわりに

Tumblrでの収集をおすすめするわけは、上記の理由から参照しやすいことと、そして、ただ見るだけではなく自分のフィルターを通してタグで分類したり、コメントを残したりしながらスクラップすると収集する価値が深まることです。

WEBデザインじゃなくても、アートな画像やイラストを収集したり、自分だけの”スクラップブック”を作ってみてください。

↓たとえば、こんな感じの画面に作ることができます
http://hrweb-collection.tumblr.com/(デザインテーマは自由に設定可能)