難易度を表すアイコン - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～これはちょっとぐっときた。 難易度を示すアイコンといえば☆印などが有名ですが、これはいいですね。 ↑ バナナもちょっといいな。 チュートリアルがいろいろあるWebmonkeyより。まぁ、Web「Monkey」だからこういうアイコンなのかな。実例は以下から。 » Get Started With Django – Webmonkey
「メールが届きません・・・」を防止するインターフェース | SiMPLE*SiMPLE
「メールが届きません・・・」を防止するインターフェース August 28, 2007 10:55 AM written by Gen Taguchi メールによる認証プロセスがあるサービスでありがちなのが「メールが届きません」というユーザーからの問い合わせメール。 だいたいにおいて迷惑メールフォルダに振り分けられていることが問題ですが、その注意を喚起する方法としてPing Meはなかなか良いかな、と思いました。 このサイトではユーザーがメールアドレスを入力した直後（フォーカスを他に移ったとき）に「迷惑メールフォルダに注意してね」というメッセージが現れます。 入力した直後に自分が見ていたところに突然あらわれる点がいいですね。びっくりすると同時に「なんだろ？」と思わせることができるかもしれません。こういう工夫もいいですね。 ↑ メールアドレスを入力した直後に上のようなメッセージが現れます。
CSSだけで文字にドロップシャドウをつける方法（あまり良くない方法） | SIMPLE*SIMPLE
Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。 » Good-Looking, Sharp Offset, CSS Text Styling 実例はこちら。 ↑ 適用前。 ↑ 適用後。かっくいい。 やり方はいわれてみれば簡単で、1pxずらして影をつけただけ（というか影を先に書くのか）。 実際のコードは以下のような感じですね。スタイルシートには次のように記述します。 h1 { color: #000; position: relative; } h1 span { color: #fff; display: block; position: absolute; top: -1px; left: -1px; } 実際のHTMLの方はこんな感じ。 <h1><span>Lorem Ipsum</span>Lorem Ips
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の特徴。無料の文字もいれときましょう。 ■ は？素材集す
よーく見ないとわからないデザイン | SIMPLE*SIMPLE
なんだかいまさら気付いたことですが、ECナビのロゴ、ときどきまばたきするんですね。 ロゴが気付くか気付かないかぐらいで動くといえば関心空間。 たしか、昔はもっとさりげなく動いていたはず（といった話を社長の前田さんに聴いたような微かな記憶が・・・）。 よーく見ないと気付かない、というのは気付いたときにうれしいですよね。そういうデザインも悪くないですね。 ほかにもご存知の方がいれば教えてくださいませ。 それからまったく関係ないですが、このブログのロゴ・・・。 確かに「ヨコ」にすると、ですね。こちらもちょっとした発見だったので蛇足気味にエントリーｗ。
関連エントリーの自動表示でブログ記事をリッチに | SiMPLE*SiMPLE
関連エントリーの自動表示でブログ記事をリッチに November 15, 2006 1:00 PM written by 8maki ブログの記事に関連エントリーを載せるのは重要だ。 コンテンツをリッチにしてくれて、読み手の滞在時間を長くすることができるからだ。 でも、いちいち手作業でアップするのはめんどうである。 そこでNiall Kennedy's Weblogのやり方をまねてみるのはどうだろう。 » Niall Kennedy's Weblog これはSphereというサービスを使っているようだ。 このサービスを使うと自分のブログやニュースサイトから関連記事を自動で検索して表示してくれる。 日本でもこういうサービスができたらいいなー。 Info: ナビゲーション | 固定リンク | コメント (0) | トラックバック (0) | ↑
動画共有サイトに見る口コミのメカニズムまとめ | SIMPLE*SIMPLE
動画共有サイトが人気だ。YouTubeなどは口コミで爆発的なPVとユーザー、コンテンツを手に入れている。 その仕組みを見る上で今回着目したのは「再生が終わったあとの画面」である。 映像を見終わった後にユーザーに何をさせたいのか、そのインターフェースを探ることで動画時代の口コミのメカニズムを探ってみたい。 代表的な国内外の動画共有サイトを見ていこう。 ■ YouTube まず、言わずもがなのyoutube。この画面に現れるのは次の三つ。 share（友人にメールで動画URLを送る。） replay 似た動画を見る 動画共有サイトの先駆者としてベーシックな構成であるが、以前は「似た動画」がなかったので、日々工夫が凝らされているのだろう。今後も要チェックのインターフェースである。 ■ Google Video 次はgooglevideo。Post to Blog/MySpaceが新しい。 Pla
Script.aculo.usにモーフィング機能が登場 | SIMPLE*SIMPLE
Javascriptでさまざまな効果を実現できるscript.aculo.usがバージョンアップ。今回の目玉は「モーフィング」。指定したエレメントをぐーっと変形させていくことができます。 といっても、見るまでわからないと思うので下記ページのデモをどうぞ。 » モーフィングデモページ （すげぇ・・・） script.aculo.usには他にもいろいろな効果がありますね。なにかサービスをつくるときには参考にされてみてはいかがでしょうかね。 しかしscript.aculo.usには二つの問題がありますね・・。 サイトが激重い・・・。 なんて発音するのかいまだにわからない。 » script.aculo.us公式ページ
Adsense x Analytics - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
※ 百式管理人注：この記事、Simple*Simpleのテーマである「Smart Designs」のテーマからは逸れますが、うちの学生インターンくんが自主的に書いてくれました。こういう前向きな姿勢は高く評価したいので掲載してしまいます。いやぁ、最近の学生さんはみんな優秀だなぁ・・・。 あなたのブログでも導入しているかもしれないGoogle AdsenseとAnalytics。 » Track Google AdSense Clicks via Google Analytics – Free AdSense Tracker : SEO Book.com ではAnalyticsを利用してAdsenseのクリックを詳細に追跡する方法を紹介している。 「どのエントリーでクリック数が多いのか？」「どこから来たユーザーのクリック率が高いのか？」などAdsenseのレポート機能ではわからないことも完全で
提案型検索エンジン | S i M P L E * S i M P L E
提案型検索エンジン November 14, 2006 8:30 AM written by 8maki retrevoは普通の家電検索エンジンとはちょっと違う。 なんと検索ワードの候補を次々と提案してくれるのだ。 » retrevo この仕組みで今まで気づかなかったワードを発見できるかもしれない。 韓国の検索エンジンでは検索フォームに出る語句が広告枠になっていると聞いた。 サイトに掲載される情報はどんどん増えてきているので、検索窓がついているのが当たり前になってきている。 検索窓というメディアをどう有効活用できるか、いろいろな工夫が考えられそうですね。 Info: ウェブサービス | 固定リンク | コメント (1) | トラックバック (0) | ↑
プロフィールも動画の時代 | SiMPLE*SiMPLE
プロフィールも動画の時代 November 14, 2006 3:23 PM written by watanabe これはインパクトがある。 AccuWeather.comのブログでは、プロフィール画像が動画になっているのだ。 ↑ About Meのところに動画が表示されている。 ブログの信頼性のためには、プロフィールが重要になってくる。 最近は動画共有サイトが流行っていますが、プロフィールにも動画が使えそうですね。 Info: ブログデザイン | 固定リンク | コメント (0) | トラックバック (1) | ↑ この記事のトラックバックURL （トラックバックは承認後に公開されます） Living Inside Your Love ウィンドバード::Recreation - 書評サイトはブックマークされないのか？ いまさらながら。 これは本に限らず、CDだったり映画だった..
ブルブルするJavascript | SIMPLE*SIMPLE
「ページをマトリックス風に表示するJavascript」にトラックバックをいただいた方がおもしろいJavascriptを作っていたのでご紹介。 » oitake blog マウスオーバーするとなんと文字がブルブルします。 実際の動きや実装方法はそちらのブログを参照のこと。 ちょっとしたTipsがサイトに遊び心を与えてくれますね。 おもしろい技術ってブログなどを通してつながっていくものなのですね。他にも「こんなの作ったよ！」という方がいらっしゃれば是非コメントなりトラックバックなりをいただければと思います。
クールなプロフィールページを作れるJavascript | SIMPLE*SIMPLE
「ページをマトリックス風に表示するJavascript」で人気だったbodytag.orgからもうひとつ便利なJavascriptをご紹介。 ちょっと変わったプロフィールページを作りたいときに便利っぽい。自分の実績を示すインタラクティブな年表を作ってくれるのだ。 ヘッダー部分の年数をクリックすると、ページがスルスル切り替わって気持ちいい。（実際の動作はこちら） 実装するにはトップページからダウンロードしたnav.htmlの以下の部分を修正するだけ。（それぞれのhtmlファイルは自分で用意） var events = [ ['intro','intro.html', 0, 0, 2000], //['タイトル','ファイル名','日','月','年'] ['sausage','sausage.html', 15, 3, 2000], ['abstraction-now','absnow.ht
お得感を演出する | S i M P L E * S i M P L E
ウィンドウサイズは常に一定。 その常識をひっくり返してくれるのが、このmotion-wave.comの作品です。 見ているだけで楽しいので是非実際に見てみてください。ポップアップウィンドウなのでブロックをしている人は外してからどうぞ。 音楽に合わせて、 こんな感じに次々と、 サイズが変化していきます。 いわゆるデザイナーさんのサイトなのですが、自己紹介（結構笑える）を軽快な音楽にのせて魅せてくれます。しかも、音楽にあわせてウィンドウサイズがどんどん変化していきます。気持ちいいですね。 いつもはいやな感じのするポップアップウィンドウですが、これは一気に魅せてくれますね。音楽と合わせて強烈なインパクトを狙いたいときに使える技かと。映画の公式サイトやコンサートやイベントページにもいいかもしれません。 ウィンドウサイズもデザインの一部、という考え方はアリですね。 » Motion-wave.com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーがアクションを起こした後にTwitterで流すように促すインターフェース（mento.info） | SIMPLE*SIMPLE
複雑なアニメーションを実現するanimator.js | SIMPLE*SIMPLE
あるウェブサイトができるまでのアニメーション - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
拡大鏡インターフェース | S i M P L E * S i M P L E
関連エントリーの自動表示でブログ記事をリッチに | SIMPLE*SIMPLE
動画共有サイトに見る口コミのメカニズムまとめ | S i M P L E * S i M P L E
