現在、わたくし殺人的なスケジュールで仕事に追われておりまして・・・
もうすぐお迎えがくる気配でございます。。。

というわけで、週末気分転換に日系の本屋さんに出かけまして、雑誌でも買おうかと思っておったのですが。。

ふと気になった本を見つけて、買ってしまいました。。

TIME HACKS!

小山 龍介

東洋経済新報社 2006-12-01
売り上げランキング : 949

おすすめ平均
時間管理の出発点
自分に合うHACKを頂きました。
切り口が斬新で面白い。

まぁ、本を読んでる暇もないほど忙しいのですが。。。とりあえず、買ってあとでゆっくり読もうと思っております。。

この本の感想は、読んだ後にでも。。

っちゅうわけで、本日は無料で使えるスケジュール管理に便利な9ツールをご紹介。。

スケジュールをweb上に保存することで、インターネットにつながってればどこからでも確認できるのが良いですよね。。
スケジュールの変更、追加、削除なんかが、簡単にできるし、プリントアウトして持ち歩いても便利ですよねぇ。。。

1. ちょー助

友達とか、会社の同僚とか、複数人のスケジュール調整するのに便利なツール。。候補の日時と、参加者リストをつくって、みんなに○△×で都合の良い日時を入れてもらう。。こりゃ便利っすね。

2. Remember The Milk

ToDoリストの完成系？仕事、個人、勉強のタブに分けられていて、キー操作で簡単に優先順位をつけられます。
その名のごとく、牛乳を買うことも忘れなくなります？最近牛乳買ってないなぁ。。って事を思い出した。。

3. PocketMod

スケジュールはやっぱり手書きで管理したい！そんな人におすすめのツール。
あらかじめ用意された手帳のフォーマットを選択して、プリントしたら、自分好みの手帳を作れます。なかなかおもしろいサービスですね。。

4. check*pad

人気ブログidea * ideaさんの作者さん達が開発されている、ToDoツール。やることを記入して、終わったら消す。ものすごくシンプルなので、使い方は感覚で分かると思います。。結構便利なので、わたくしも使わせていただいております。

5. Google Calendar

先日買った、『TIME HACKS!』でも、取り上げられている、Google Calendarは、やっぱり便利ですね。。日、週、月、次の4日間などなど、タブで簡単に切り替えられるし、プリントアウトも楽チン。

6. kiko

デザインが洗練されていて、個人的には一番好きかも。設定で、日本語にも設定できるので、ご心配なく。。

7. 30 Boxes

こちらのカレンダーもなかなか使えそうですね。。テーマを変えたりして自分好みの色合いに変えられるの良いですね。
webtop viewに変更すると、ページ自体がウインドウズのデスクトップ見たくなります。。残念ながら、こちらは英語設定のみみたい。。

8. ClendarHub

結構似たような、カレンダーツールっていろいろあるもんですねぇ。。こちらは、日、週、月、年と表示切替えができます。こちらも英語のみっぽい。。

9. HipCal

最後に、もうひとつ。こちらも英語のみ。

まだまだ、スケジュールに関する便利ツールは色々ありそうですねぇ。。
いろんなツールを使って時間の使い方をもう一度見直して見よっと。。

先日、SiMPLE*SiMPLEさんで紹介されていた、「Web2.0風デザインのための秀逸チュートリアル68選」

これは、ものすごくいいですね！どれも参考になるチュートリアルばかりですね。。
見てるだけでちょっぴりPhotoshopが上達したような気がしますよね。。。

っと思って実際Photoshopを立ち上げて、チュートリアルを見ながら、手順通りすすめてみても・・・

英語で手順が書かれているので途中で見失う。。
実際のサンプル通りに仕上がらない。。。

という方々も多いのでは？

っちゅうわけで、実際にいくつかのチュートリアルを試してみました。。で、今回試してみたPhotoshopファイルをアップしてみたので、欲しい方はご自由にDLして参考にしてみてくださいな～。。

途中、面倒くさくなって細部をはしょっていたり、チュートリアルに書かれているやり方とは微妙に違う部分もありますが。。。すんません。。。

1. Three Girls
Web 2.0っぽい放射線状のグラデーションに人の影をつけるチュートリアル。色をピンクにしてみました。。。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

2. Rainbow
Web 2.0っぽい波状のボーダーを背景に人の影をつけるチュートリアル。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

3. Flower
Web 2.0っぽいグラデーションのチュートリアル。花の中心部は今回は、面倒なのでパス。。。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

いやぁ、しかしPhotoshopって奥が深いですね。。。

デザインblogランキング

みなさんご存知のサイトも、そうでないサイトも。。。とにかく世界的に（って言うか全部英語圏ですが。。。）アクセスを集めている、いわゆるWEB2.0的といわれているサイトのロゴを100個ひたすら並べてみました。。

それぞれのロゴをクリックすると、別ウインドウでそのサイトにリンクしてます。
さすがにロゴ100個並べてみると、どえりゃぁカラフルになりますね。。

単純にロゴを見て楽しんでみたり。
リンク先のサイトで遊んでみたり。
ロゴを作るときの参考にしたり。
ウェブデザインの参考にしてみたり。
新しいウェブサービスの参考にしてみたり。

どのサイトもかなりのアクセスを集めてるところばかりなので、どれをみてもそれなりに楽しめるはず。。。

こりゃぁ当分暇つぶしできそう。。。

デザインblogランキング

web2.0のこのご時世、いろいろな便利ツールが無料で公開されております。
専門的な知識の無い方でも、データを入力すればジェネレーターが作り上げてくれます。

例えば、サイト名を入力するだけで、ロゴを作ってくれたり･･･色を指定するだけで、テンプレート作ってくれたり。。。
えらい便利な世の中になりましたねぇ。。。

っちゅうわけで、本日は便利なジェネレーターツールをざっと、まとめてみたのじゃ。

1. Web 2.0 Name Generator

サイトを作るときは、サイト名、ドメイン名って最初に悩みますよねぇ~。このサイトは、クリックするだけで、web2.0的？な、名前を生成（ジェネレート）してくれます。ついでに、そのドメインが取得可能かどうかまで、チェックしてくれますねん。

2. web2.0stylr

サイトのタイトルを入力したら、グラデーション、鏡に映ったような効果を使った、web2.0的なロゴを作ってくれます。色も指定できます。

3. Official Seal Generator

丸～いワッペンみたいな画像を作れます。枠のデザインとか、中のイラスト、色、フォントなど・・・いろいろ細かな設定ができます。

4. The Newspaper Clipping Generator

新聞のタイトル、日付、見出し、記事を入力したら･･･新聞の切り抜き画像を作ってくれます。なかなか、面白いアイデアですね。。。

5. WARNING LABEL GENERATOR

台座になるデザイン、アイコン、テキストを入力すると、警告用の画像を作成できます。

6. Chicklet Creator Classic

サイト名、サイトurl、フィードurlを入力するだけで、いろんなサイトがサービスしてるRSSリーダーへの登録ボタンを生成してくれます。
ブログのサイドバーにあると便利？。。

7. buttonator

テキスト、デザインを選択するだけで、簡単にボタンが作れます～。

8. FavIcon Generator

ロゴとかの画像ファイルを送信するだけで、簡単にfaviconファイルを生成してくれます～。

9. Color Schemer Online

ひとつの色を選択すると、その色にあった、色を提案してくれる。バランスの取れたデザインが作れますねぇ～。

10. Color Scheme Henerator2

こちらも、バランスの取れた色味を生成してくれるサイト。

11. Color Palette Generator

画像から、ウェブカラーを抽出してくれる。お気に入りの写真とか、画像から、色味を抽出。

12. RoundedCornr

角丸の枠を生成して、html、css、画像がダウンロードできます。グラデーション、ボーダーにも対応。

13. Ajaxload

タイプと色を選択したら、Ajaxを使ったサイトでよく見かける、クルクル～ってgifアニメーションをダウンロードできます。

14. E-Mail Icon Generator

hotmailとかyahoo、gmailなんかの、メールアドレスを入力するだけで、簡単に自分のメールアドレスの入った、ロゴ入りの画像を作ってくれます～。

15. Web 2.0 Generator

色を指定するだけで、web2.0っぽいサイトを生成してくれます～。

16. CSS Source Ordered Variable Border 1-3 Columned Page Maker

サイトのレイアウトを生成してくれます。ここまで、指定できたら普通にhtml,CSS書いた方がいいのでは？っちゅうくらい細かい設定ができます。

他にもまだまだ、使えるジェネレーターはいっぱいあると思います。
おもしろジェネレーター、使えるジェネレーターなどなど、見つけた方はコメントいただけると幸いでございます。。

デザインblogランキング

web2.0的なデザインの代表のひとつとして、鏡に反射したような写真をよく見つけます。

代表的なサンプルは↓こんなん

appleのiPodの画像

こんな感じのデザインをよく見かけますよねぇ。
っちゅうことで、わたくしのブログのロゴも反射しております。。。

これって、PhotoShopなどで画像を加工すれば簡単にできるのでございますが。。。
毎回、毎回、画像を加工するのも面倒なので。。。CSSとJavaScriptで画像を加工することなく鏡に反射したようにさせることができますねん。しかも、結構簡単に。

っちゅうわけで、本日はCSSとJavaScriptで画像を加工することなく鏡に反射したようにさせる方法をご紹介じゃ。

Reflection.js
ここのスクリプトを使わせていただきました～。

↑ここのサイトでもサンプルいっぱいあって、見てるだけでも楽しめますよん。
まぁ、せっかくなので、わたくしもこのスクリプト使ってテストしてみました～。

とりあえず、サンプルはこちらからじゃ↓

ではでは、肝心のやり方。。(英語分かる人はReflection.jsのサイトから直接どうぞ。。。）

1. Reflection.jsのサイトの下のほうにDownload reflection.jsっちゅうのがあるので、そこからファイルをダウンロードしてファイルを解凍。

2. 解凍したファイルの中から、「reflection.js」をサーバにアップロードしてくださいな。

3. 画像を表示したいhtmlの<head>から</head>の間に

を書いて、reflection.jsを読み込みます。

4. 反射させたい画像(jpg,gif,png)に”reflect”ってクラスを追加する。

こうすると、わざわざPhotoShopなど使わずに簡単に画像を鏡に反射したようにさせることができますねぇ～。結構便利っすね。

デザインblogランキング

関連ブログ

• GIGAZINE – 水面に反射するような効果を画像に加えるJavaScript「Reflection.js」

最近では、web2.0っちゅう言葉は一般的になってきておりますが、web2.0的なデザインの代表としては、やっぱり、角丸の枠デザインでしょうねぇ。。

わたくしが、デザインする時はたいていphotoshopでさくっと、角丸の画像を描いてしまいますが。。。

CSSだけで簡単に角丸の枠が作れたら、それはそれで、楽ですよねぇ。。。

っちゅうわけで、サンプルのCSSは。。。↓こちら。

↑このCSSをコピーしてCSSファイルに保存してから。。。↓のhtmlを書いてくださいな。

え～いい！こんなんじゃ分からんわ～い！っちゅうかたに。。。

Spiffy Corners
今回参考にさせていただいたサイトですわ。こちらでは、色を指定するだけでCSSをhtmlを自動で生成してくれますねん。

デザインblogランキング

Web2.0 Logo Creator by Alex P

サイトの顔とも言えるロゴは、やっぱりかっこいいのがいいですよねぇ。
っと言っても、自分でデザインするのは大変･･･

個人のブログでわざわざデザイナーにロゴ作ってもらうのもねぇ･･･

でもやっぱりこだわりたい･･･

そんなみなさん多いんではございません？

そんな方々には、このサイトおすすめですわ。
今はやりのWeb2.0っぽいロゴをサイト名を入力するだけで、自動的に作成してくれますねん。

アメリカのサイトなもんで、さすがに日本語には、対応しておりません･･･アルファベット入力してくださいな。。

っちゅうことで、みなさん既にお気づきの方も多いかもしれませんが･･このブログのロゴも変えてみました。
まぁ、わたくし腐ってもデザインやってるもので、そのままは使うのはちょっと・・・と思ったもので、微妙に色を変えたり、してみました。

みなさんも、ロゴ変えてみる？

Lightbox JS v2.0

このサイトで配布されてる、スクリプトを使いますと、写真がサイトが、暗～くなって、その上でポップアップしますねん。
写真中心のブログとか書いてる人には、お勧めでございます。

動きもあってなかなかかっこいいです。とりあえず、↓サンプル写真クリックで確認できますねん。。

サンプルですねん。