TumblrでWebデザインギャラリーを作成しました！手順を公開します


tumblr03

デザイン力をつけるためには、たくさんの素敵なWEBデザインを見て引き出しを広げることも大事だと思っています。そのため、いいなと思うWEBサイトを見つけてはスクリーンショットを撮ってEvernoteに保存してたのですが、意外と手間も時間もかかる…。

もっと楽にできたらいいのにと @globalwe6 さんと探っていて、Tumblrを使うと非常に手軽にスクリーンショットを保存できることに気が付きました。
今回は、Tumblrを使って簡単にWebデザインギャラリーを作成する方法をご紹介します。
かなりオススメです！

Tumblrアカウントを作成する

まずはTumblrのアカウントを作成します！私はだいぶ前にアカウント登録してたものの、活用方法が思いつかず使っていなかったので、そのIDを使用しました。アカウントを持っていない方はtumblrのサイト右上の登録するボタンから作成します。Tumblrの基本的な使い方などはナナピにわかりやすく載っていましたのでそちらを参考にしてください!

Tomblooをインストールする

続いては、この作業に欠かせない重要ツール、Tomblooをインストールします。
Tomblooは写真やメモ、ブックマークや引用などを、いろいろなサービスにかんたんにポストできるFirefox拡張です。Google Chromeを使っている方は、同じような機能をもったTaberareloo という拡張機能があるそうなのでそちらが使えそうですね。
TomblooのページからインストールしてFireFoxのアドオン設定を有効にしてください。

いいなと思ったWEBサイトをクリッピングしてみよう！

試しにWEBサイトをクリッピングしてみましょう！サイトを開いた状態で右クリック→ share → photo-capture を選びます。

tumblr01

次に選択という画面がでてくるので、サイト全体を選びたいならばPage、見えている範囲だけならばViewを選びます。OKを選ぶとサイトのスクリーンショットが表示されます。

photoの右側の三角をクリックすると、タグや説明を入れられるフォームがでてくるので、必要な方は入力してください。その下のアイコンをクリックすると、Tumblr以外にも同時投稿できるようになります。入力したらPostを押します。これで自分のTumblrに投稿されました！スクリーンショットだけでなくURLやサイト名つきでちゃんと投稿されていますよ。簡単にPostできるのでいくつかPostしてみましょう。

テーマを変えてみよう

デフォルトのテーマだと見にくいので、自分のTumblrのテーマを変えてみましょう！かちびとさんで素敵なまとめ記事を見つけたので、私はこちらから選びました。テーマ選びも楽しいですね。

これで完成です！

これで完成です！もっと何か作業をしたかったですか ? がっかりさせてゴメンナサイ。これだけです !

後は気に入ったサイトをTomblooでどんどんクリッピングしていくだけですね。以上のフローで作成した、私と@globalwe6 さんのTumblrはこちらになります！Tumblrを使っている方がいたら気軽にフォローやリブログしてくださいね！

簡単に補足いろいろ

Tumblrには独自ドメインが設定できます。また、デザインの変更もカスタマイズ画面からhtml cssで修正できるので、自分好みのテーマを作ってみるのもいいですね。
最後に、Tumblrは検索機能が弱いと言われているそうなのですが、後で投稿を見直す際に自分のつけたタグから探す方法をご紹介します。

自分のTumblrURL/tagged/タグ名 こちらのアドレスで、タグ付したものを一覧表示できます。例えば、私がsimple natural とそれぞれタグづけしたものを、一覧表示させたい時は以下のようなアドレスで見ることができます。

Tumblrを使い始めたのは本当に最近なので知らないことだらけだったのですが、それでも簡単にギャラリーサイトを作成することができました。デザイナーさんやディレクターさんなどで、同じようにWEBデザインを自分で集めている方はきっとたくさんいると思います。そんな方にかなりオススメなので是非一度試してみてくださいね。