2007-05

そのままですが、Mashableで「Forget Photoshop: 15 Online Graphics Generators」が紹介されていました。

これはメモしておかねば。

• Buttonator



ボタンがいろいろ作れます。設定がいろいろあって良いですね。

• RoundedCornr: Rounded Corner and Gradient Generator



いわゆる角丸パーツを作れます。

• Web 2.0 free buttons maker!



2.0っぽいボタンが作れます。

• glassy buttons



こちらもボタンジェネレータ。

• Ajaxload – Ajax loading gif generator



Ajaxのローディング中のパーツが作れます。

• Web2.0 Logo Creator by Alex P
• Logo Maker : Web 2.0 Stylr



2.0っぽいロゴジェネレータですね。

• Button Maker – Blog Flux Blog Tools
• Button Maker :: Adam Kalsey
• Brilliant Button Maker by LucaZappa.com
• Make your Antipixel button



ブログなどで使われる小さなボタンパーツを作れますよ。

• tile machine 1.0



こちらは背景画像のジェネレータ。繰り返しパターンにいいですね。

• Background Image Maker



こちらも背景画像。2.0っぽいですね。

• Stripe Generator – ajax diagonal stripes background designer



ストライプ画像を作れるジェネレータ。

• Web20Generator: XHTML CSS Design Generator



まるごと2.0っぽいものを作ってくれるお手軽サイトジェネレータ。

既出のものがほとんどですが、まとまっていることにも価値はありますよね。以上、よろしければご利用ください。他にもあれば教えてくださいね。

なお、Mashableの元記事はこちらからどうぞ。

» Forget Photoshop: 15 Online Graphics Generators

panic.comでは画像をクリックするとき、ちょっと楽しい。

画像がズームしながら浮かび上がってきます。ズームアウトもするするーっと戻っていく感じ。

Lightbox.jsでもZOOM用のライブラリーがありますが、これはZOOMするときのアニメーションが小気味いいですね。

実装したい方はこちらから。 → effects.js

細かいドキュメントは無いみたいですが、panic.comや作者のブログを参考にしてみてください。

» panic.com

PassPackはサイトのパスワードを管理できるサービスなのですが、サイトの性質上セキュリティにたいそう気を使っています。

フィッシング対策のためにほかのサイトにはない、ある機能を付けています（※）。

それは「ログイン時のウェルカムメッセージをユーザーがカスタマイズできる」機能です。

自分専用のウェルカムメッセージを設定することで、第三者がフィッシング用のサイトを用意できなくなります。自分のメッセージと違うメッセージが出たら「あれ、おかしいな？」と気付きますからね。

さらに「ちゃんとサイトURLは合ってますか？」というメッセージもあったりしてフィッシング対策の徹底ぶりがすごい。

銀行やショッピングサイトなど、セキュリティに特に気を使うべきサイトにいいかもです。

サイト側がセキュリティをしっかりさせることも大事ですが、ユーザーにもセキュリティの強化を促すことでより強力なセキュリティが生まれますね。

» PassPack

※ コメント欄でも指摘がありましたが、Yahoo!にも実装されている機能でした。秋元さん、ありがとうございます！（2007-05-27）

ブログのインターフェースも多種多様になってきています。ヘッダー部分も主種様々な工夫がなされていたりしますよね。今日はその中の一つをご紹介。

Gizmodo Japanのヘッダーには人気の記事一覧がおり込まれています。

また、lifehack.orgでは最新記事一覧が表示されます。

ブログの記事一覧はサイドバーに設置するのが一般的ですが、訪れたらまずはじめに目がいくヘッダーにも設置することで、どういった記事を書くブログなのか、初めての人にもアピールしやすくなります。

それにヘッダーって常に目に付く場所ですから、いきなり個別記事ページを訪れた人に対しても他の記事をアピールすることができます。

他にもヘッダーやフッターなどをうまく使ったブログレイアウトがあったらご紹介していきますね。

• Gizmodo Japan
• lifehack.org

メモ書きも兼ねてエントリー。「E Logo Design」にて「Top 50 Logo Design Tutorials」が紹介されていました。

スタイリッシュなロゴからどこかで見たようなロゴまで。ロゴつくりの際には参考にしたいですね。

↑ いわゆる一般的な企業ロゴ。

↑ S○ype風。

↑ ちょっと2.0風。

↑ シンボリックなマークまで。

知っておくとなにかと便利ですね。チュートリアルへのリンクは下記からどうぞ。画像入りでわかりやすいですよ。

» Top 50 Logo Design Tutorials | E Logo Design

Gizmodoブログではタイトルの横にその記事のView数を載せています。

View数を載せているブログは、最近海外を中心によく見かけます。

View数を表示することで人気の記事をアピールすることができますし、記事に説得力を持たせることもできますね。

Youtubeでも動画ごとのView数を表示していますし、人気コンテンツの指標としてView数は重要です。

Gizmodoもメディアブログ、見てもらってナンボの世界ですし、View数をかなり意識しているのではないでしょうか。

ただ、動的ファイルじゃないと実装が大変そうですね。

» Gizmodo

マックな方にはおなじみのドックメニューをCSSとJQueryで実現するテクニックが紹介されていました。

↑ 無駄にGIFアニメを作成してみたｗ。こんな感じです。

画像やリンク先を変えればナビゲーションに使えますね。実装も簡単です。

コードは以下のサイトからダウンロードできますよ。

» CSS Dock Menu

fortuitousというブログには、ちょっと楽しい小細工が。

本文の下のほうに行くと文字や画像がFade Outしていきます。フッターのメニューがうかびあがってくるように見えてユニークです。

ちょっと実現方法がユニークなので皆さんも考えてみてください。

実はこれ、CSSやJavascriptを一切使わず、画像をちょこっといじっただけで実現しています。

なんと上半分を白の透過画像にしているだけなのです。わかってしまうと、「あー、なんだ。」と思ってしまいますが、意外と思いつかない発想かも。

たったこれだけでもブログやサイトにアクセントを加えることができる、他にもいろいろとお手軽な手法が転がっていそうですね。

» fortuitous

■ 追記（2007-05-27）：

コメント欄でも指摘がありましたが、透過画像とCSSにて実現されているテクニックでした・・・ごめんなさい。上記の「CSSやJavascriptを一切使わず」を訂正します。

PHP Developers’ NetworkのPHPmacでは、記事がどのくらい前に更新されたかお知らせしてくれます。

インターネットができてはや十数年、もはや時代遅れとなったWEBページも数多く存在します。

けれども訪問者はそのページがいつの頃のものなのか知る術がありません。最後まで読んだけれども、結局何年も前のもので意味が無かった、ということも起こりえます。

↑ wikipediaでは最終更新日が下のほうにちょこっと載っていますが、これだと最後まで読まないとたどり着けません。

PHPmacのように、古い記事に対して始めに警告を出してくれると、そういった時間の浪費も防げます。

そう考えると、その記事の更新日付を常に右上に表示してくれるGreasemonkeyとかがあると便利かもしれませんね。

» PHPmac

クリックするとボタンがへこみ、さらにラベルのテキストが1px下がってくれる、というちょっと凝ったエフェクトがかかったボタンの作り方が紹介されていました。

簡単な画像とCSSで実現できますよ。

↑ このようなボタンをクリックすると・・・。

↑ このようなエフェクトがかかります。

詳しい設置の方法は以下からどうぞ。ちょっとした小技ですが、知っておくと便利ですね。

» How to make sexy buttons with CSS