これ、きれいでいいですね。アイコン販売サイトですが、ドラッグ＆ドロップでショッピングカードにぽんぽん放り込んでいくことができます。 ↑ こんな感じ。 左側のショッピングカートは下のほうにスクロールしていってもちゃんとついてきてくれますね。わかりやすい。 実際に動作している様子は以下からどうぞ。 » IconDock – The Art of Stock Icons
ドラッグ＆ドロップできるショッピングカート | SIMPLE*SIMPLE
これ、きれいでいいですね。アイコン販売サイトですが、ドラッグ＆ドロップでショッピングカードにぽんぽん放り込んでいくことができます。 ↑ こんな感じ。 左側のショッピングカートは下のほうにスクロールしていってもちゃんとついてきてくれますね。わかりやすい。 実際に動作している様子は以下からどうぞ。 » IconDock – The Art of Stock Icons
クリックすると固定リンクをコピーしてくれるインターフェース | SIMPLE*SIMPLE
よくブログやサイトで見る「固定リンク」。コピーしてどこかに貼り付けるためにクリックすることも多いですよね（じゃない？）。 そこでgridplaneでは、クリックするだけでその固定リンクがコピーされるというインターフェースを実装したようです。 ↑ GIFアニメでわかりやすくつくってみた。 なかなか使いやすそうと思うのは僕だけですかね。「固定リンクをコピー」というリンクがあってもいいかも？！わかりずらいかなぁ。 » Data Visialization
37 Signalsの製品に実装されている『Autoscrolling』 | SIMPLE*SIMPLE
あいかわらず小粋な製品を作っている37 Signalsですが、「Autoscrolling」なるインターフェースを実装しているようです。とんでもなく細かい挙動なのですが、「神は細部に宿る」をモットーに活動している同社だけにきっちり作りこまれていますね。 ↑ ビデオで見たほうがわかりやすいかな。 さてやっている内容ですが。 Flickrなどにも実装されている「クリックすると編集画面に」というインターフェースでフォームが画面の外に行ってしまう問題がありますよね。画面の下のほうのテキストをクリックすると中途半端にフォームが表示されるあれです。 そうしたときに画面をずずっとスクロールさせてフォームをすべて表示し、編集しやすいようにしています。たしかに、こうした小さな違いこそが使い勝手を大きく向上させるのかもしれませんね。 » Designing Details: Autoscrolling the
料理の写真にレシピの説明を加えられるインターフェース - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
いわゆるレシピサイトのOpen Source Gourmetでは、料理の写真を貼り付けるとレシピも一緒に見られるようになっているようだ。 ↑ おいしそうな写真。右下に「View Recipe」なるボタンが。 ↑ クリックするとこのようにレシピが現れます。これはいいかも。 こういう説明付きの写真を貼り付けられる、という機能はいいですね。「貼り付け」機能がクチコミのエンジンになっている今、こうした便利なインターフェースも研究していきたいですね。 実際に動作している様子はこちらから。 » Strip Vote! » Yongfook | Web Producer and Usability Consultant based in Tokyo
スライダーでブログの過去記事を検索できるインターフェース | SiMPLE*SiMPLE
スライダーでブログの過去記事を検索できるインターフェース August 23, 2007 5:30 AM written by Gen Taguchi Save the assistants.comのブログのインターフェースがちょっと気になります。過去記事へのアクセスをスライダーで行うことができるのです。 ↑ こんな感じ。Ajaxな感じで、スライドさせると動的にページをロードしてくれます。 「次のページ」「1 > 2 > 3 >」といったインターフェースより直感的でよいですね。 » save the assistants Info: ナビゲーション | 固定リンク | コメント (0) | トラックバック (0) | ↑
Error 404 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
スクロールしても消えないドロップシャドウの作り方 July 30, 2007 4:40 PM written by Gen Taguchi メモ書きもかねてエントリー。ページをスクロールしていってもページの上や下にドロップシャドウを貼り付けておく方法。 ↑ このようなドロップシャドウですが・・・。 ↑ スクロールしても付いてきます。 サイトに立体的な効果をつけたいときに使えそうですね。いろいろ応用も利きそうです。 なお、PNGの透過部分を使っているのでInternet Explorerでは動きません。実際に動いているデモはこちらから。 詳しい作業ステップは以下のサイトからどうぞ。 » Scrolling Drop Shadows | Zooiblog Info: デザイン全般 | 固定リンク | コメント (0) | トラックバック (2) | ↑ この記事のトラックバックURL （
その記事が何日前に更新されたのかを教えてくれるインターフェース | S i M P L E * S i M P L E
その記事が何日前に更新されたのかを教えてくれるインターフェース May 8, 2007 1:08 PM written by 8maki PHP Developers' NetworkのPHPmacでは、記事がどのくらい前に更新されたかお知らせしてくれます。 インターネットができてはや十数年、もはや時代遅れとなったWEBページも数多く存在します。 けれども訪問者はそのページがいつの頃のものなのか知る術がありません。最後まで読んだけれども、結局何年も前のもので意味が無かった、ということも起こりえます。 ↑ wikipediaでは最終更新日が下のほうにちょこっと載っていますが、これだと最後まで読まないとたどり着けません。 PHPmacのように、古い記事に対して始めに警告を出してくれると、そういった時間の浪費も防げます。 そう考えると、その記事の更新日付を常に右上に表示してくれるGreasemo
各種地図サイトにみる「印刷するときにちょっと便利な機能」 | S i M P L E * S i M P L E
各種地図サイトにみる「印刷するときにちょっと便利な機能」 May 8, 2007 8:08 AM written by 8maki Googleマップでは地図の印刷用ページに小粋な工夫がなされています。 地図の上にちょっとしたメモ欄を置いてくれているのです。印刷して配るときなど、ここに待ち合わせ時間や金額といったメモを書いておけば皆で共有できて便利ですよね。 これはこれで便利ですが、さらに圧巻なのはMapFan Webの印刷用ページ。 ↑なんとメモに加えて、広域地図と詳細地図の2つを1ページに印刷できるデュアルマップ機能や、印刷時にタテとヨコを変更できたりとなかなか凝ってます。 飲み会シーズンになると多くの人がグルメ情報サイトでお店を調べますよね。そのときクーポン券や地図を印刷して持って行かれる人とも多いはず。 グルメ情報サイトの印刷用ページはクーポンや地図が1ページに印刷できて、うまいレ
本文の下のほうをFade Outしてフッターを際立たせる方法 | SiMPLE*SiMPLE
本文の下のほうをFade Outしてフッターを際立たせる方法 May 9, 2007 8:08 AM written by 8maki fortuitousというブログには、ちょっと楽しい小細工が。 本文の下のほうに行くと文字や画像がFade Outしていきます。フッターのメニューがうかびあがってくるように見えてユニークです。 ちょっと実現方法がユニークなので皆さんも考えてみてください。 実はこれ、CSSやJavascriptを一切使わず、画像をちょこっといじっただけで実現しています。 なんと上半分を白の透過画像にしているだけなのです。わかってしまうと、「あー、なんだ。」と思ってしまいますが、意外と思いつかない発想かも。 たったこれだけでもブログやサイトにアクセントを加えることができる、他にもいろいろとお手軽な手法が転がっていそうですね。 » fortuitous ■ 追記（2007-05
小粋なインターフェースを実現する25のコード （パート4） | S i M P L E * S i M P L E
先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 小粋なインターフェースを実現する25のコード （パート3） 今回も素敵なコードが揃っていますよ。いくつかご紹介。 ↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。 ↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。 ↑ スライド式のナビゲーションメニュー。 新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。 » 25 Code Snippets for Web Designers (Part4)
小粋なインターフェースを実現する25のコード （パート3） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
小粋なインターフェースを実現する25のコード - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
まとめ系エントリーが続きますが、ウェブ職人のためのネタ帳を目指しているのでご容赦くださいませ・・・。 さて、25 Code Snippets for Web Designersなる記事をご紹介。角丸やら噴出しやら、CSSでのグラフなどなど、すぐに使える小技がたくさんです。 ちょっとサイトにスパイスを・・・というときに眺めると便利ですね。このサイトで既に紹介したものもいくつか含まれていますね。よろしければ。 » 25 Code Snippets for Web Designers (Part1) Part 1なので続編もありそうですね。続編が出たらまたお知らせします。
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
過去のものがかすれていくというインターフェース | S i M P L E * S i M P L E
過去のものがかすれていくというインターフェース March 2, 2007 10:00 PM written by watanabe 以前読んだ三宅氏のコラムに、こんなことが書いてありました。 最近書き込まれた記事は普通に表示されるのに対して、古い記事になればなるほどフォントの色がセピア色にあせていき、最後には記事が消えてしまう機能があればいいかもしれない。 この記事での文脈とはちょっと違うかもしれませんが、指定したURLのFaviconを画像に自動変換できるFavicon APIでは、そんなアイデアの一つの実装例を見せてくれているのではないでしょうか。 » Favicon API ここの「最新の20件」のところにご注目。 ↑ 過去のものがだんだんかすれていってます。 「下にいくほど過去のもの」とは頭ではわかっていますが、かすれてくれると視覚的にわかりやすいですよね。ぱっと見たときの情報
小粋なDHTMLとAJAXのスクリプトが36種類！『mixiAjax.com』 | S i M P L E * S i M P L E
小粋なDHTMLとAJAXのスクリプトが36種類！『miniAjax.com』 February 27, 2007 3:39 PM written by Gen Taguchi これは覚えておくとちょっと便利そう。 miniAjaxではちょっと小粋なインターフェースをつくるためのDTMLやAjaxを紹介しています。 » MiniAjax.com / A showroom of nice looking simple downloadable DHTML and AJAX scripts 提供されているのは今のところ36種類。 タブでのナビゲーションを実現したり、インラインでの編集を可能にしたり、☆での評価ができたり、先進的なウェブでよく見るインターフェースばかりですね。 ただ、このサイトがすべて準備したわけではなくて、それぞれ他のサイトへのリンクになっています。 おっと、リンク集かよ・・・
フォームの入力値チェックをしてくれるJavascriptのライブラリ『Validate.js』 | S i M P L E * S i M P L E
これは便利そう。 『validate.js』ではフォームのさまざまな入力をチェックしてくれます。URLやメールアドレスなどのよくあるチェックに加え、ISBNかどうかといったマニアックなチェックもできます。 マニュアルに載っている命令をご参考までに。 hasValidChars isSimpleIP isAlphaLatin isNotEmpty isIntegerInRange isNum isEMailAddr isZipCode isDate isMD5 isURL isGuid isISBN isSSN isDecimal isplatform addRules Apply サイトでは動作チェックのデモもあります。コードも見れますよ。 ↑ こんな感じでさまざまなチェックができます。 詳細＆ダウンロードはこちらからどうぞ。 » Mutationevent :: Validate.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
さりげないレイアウト調整パネル | SIMPLE*SIMPLE
Twitterでパスワードをリセットするときのメールがちょっと優しい | SIMPLE*SIMPLE
チラ見せでマウスオーバーを誘うインターフェース | SiMPLE*SiMPLE
CSSと画像でちょっと凝ったエフェクトがかかったボタンを作る方法 | SiMPLE*SiMPLE