これ、きれいでいいですね。アイコン販売サイトですが、ドラッグ＆ドロップでショッピングカードにぽんぽん放り込んでいくことができます。 ↑ こんな感じ。 左側のショッピングカートは下のほうにスクロールしていってもちゃんとついてきてくれますね。わかりやすい。 実際に動作している様子は以下からどうぞ。 » IconDock – The Art of Stock Icons
ドラッグ＆ドロップできるショッピングカート | SIMPLE*SIMPLE
これ、きれいでいいですね。アイコン販売サイトですが、ドラッグ＆ドロップでショッピングカードにぽんぽん放り込んでいくことができます。 ↑ こんな感じ。 左側のショッピングカートは下のほうにスクロールしていってもちゃんとついてきてくれますね。わかりやすい。 実際に動作している様子は以下からどうぞ。 » IconDock – The Art of Stock Icons
「今日登録できるのはあと○人だけ」と表示して会員登録を促すインターフェース | SIMPLE*SIMPLE
会員登録を促すのに心理学でいうところの限定効果を活用している例を見つけました。 ↑ これ。 今日会員登録できるのはあとこれだけですよー、と言われると登録したくなっちゃうかもですよね（あと2人！とかだったら特に）。試してみるのも悪くない・・・かも。 実際に動作している様子は以下からどうぞ。 » patio: Sign Up
お問い合わせ画面でFAQをリアルタイム表示 | SIMPLE*SIMPLE
家系図をつくれるサービス、Geniのお問い合わせ画面がなかなか便利です。 ↑ 普通の問い合わせ画面ですが、内容を入力しはじめると・・・。 ↑ その言葉をリアルタイムに解析して関連するFAQを表示してくれます。 他のサイトでも採用されているようですが、わかりやすいですよね。サポートコストが大変・・・というサイトで採用してみてはいかがでしょうか。 実際に動作している画面は以下からどうぞ。 » Geni – Help Center なお、元ネタはAjaxianでした。 » Ajaxian – Geni Smart Contact Form
Web 2.0っぽいロゴがさくっと作れる『LogoCreatr』 | SiMPLE*SiMPLE
またかよ・・・という方もいらっしゃるかと思いますがｗ、Web 2.0風のロゴジェネレーターをご紹介。いろいろ設定できて便利ですよ。 ↑ 設定項目はこちら。フォントの色、サイズ、星の形などいろいろできます。文字ごとに色も変えられますね。 ↑ この設定で作ってみたのがこちら。 ↑ ちなみに別メニューでボタンジェネレータもありますね。こちらも便利。 似たようなジェネレータは他にもありますが、かなり柔軟に設定できるので個人的にはこれが今のところ一番かも。よろしければどうぞ。 » Web2.0 – Logo Creatr こちらもあわせてどうぞ。 » 簡単に2.0っぽいロゴがつくれるメーカー | i d e a * i d e a
もうPhotoshopは要らない？ブラウザだけでできるグラフィックジェネレータ15選 | S i M P L E * S i M P L E
そのままですが、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っぽいロゴ
画像がズームしながら浮かび上がってくる特殊効果 | S i M P L E * S i M P L E
画像がズームしながら浮かび上がってくる特殊効果 May 25, 2007 9:30 AM written by 8maki panic.comでは画像をクリックするとき、ちょっと楽しい。 画像がズームしながら浮かび上がってきます。ズームアウトもするするーっと戻っていく感じ。 Lightbox.jsでもZOOM用のライブラリーがありますが、これはZOOMするときのアニメーションが小気味いいですね。 実装したい方はこちらから。 → effects.js 細かいドキュメントは無いみたいですが、panic.comや作者のブログを参考にしてみてください。 » panic.com Info: 特殊効果 | 固定リンク | コメント (1) | トラックバック (0) | ↑ コメント一覧 少し気になりましたので、コメント経由で... effects.jsのライセンスに関する記載を拝見しましたが、
本文の下のほうをFade Outしてフッターを際立たせる方法 | SiMPLE*SiMPLE
本文の下のほうをFade Outしてフッターを際立たせる方法 May 9, 2007 8:08 AM written by 8maki fortuitousというブログには、ちょっと楽しい小細工が。 本文の下のほうに行くと文字や画像がFade Outしていきます。フッターのメニューがうかびあがってくるように見えてユニークです。 ちょっと実現方法がユニークなので皆さんも考えてみてください。 実はこれ、CSSやJavascriptを一切使わず、画像をちょこっといじっただけで実現しています。 なんと上半分を白の透過画像にしているだけなのです。わかってしまうと、「あー、なんだ。」と思ってしまいますが、意外と思いつかない発想かも。 たったこれだけでもブログやサイトにアクセントを加えることができる、他にもいろいろとお手軽な手法が転がっていそうですね。 » fortuitous ■ 追記（2007-05
あらゆるページに拡大鏡を追加できる『Loupe.js』 | SIMPLE*SIMPLE
これはすごい。あらゆるページに拡大鏡を設置できるJavascriptです。 ↑ こんな感じに拡大鏡を設置可能。 画像と簡単なスクリプトをインストールすればOKなようです。 追加するコードは以下のとおり。 まずはページのヘッド部分に以下を追加。 <script type="text/javascript" src="loupe.js"></script> そして拡大鏡を追加したい画像にonLoadで以下を追加。 <div> <img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="..."> </div> 細かい写真などを見せたい場合に便利ですね。知っておくとよさそうです。 ダウンロードや詳しい使い方は以下をご覧ください。 » Loupe.js
Web 2.0のデザインパターン | S i M P L E * S i M P L E
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです（「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・）。 さて、ではポイントをば。 ■ グレーの次はグリーンだ！ 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命！ Rounded Cornersは新しい標準す。 ■ 「無料！」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は？素材集す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールすると変化しながらついてくる画像 | SIMPLE*SIMPLE
買い物するとハッピーになるショッピングカート | SIMPLE*SIMPLE
難易度を表すアイコン - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳