タグ

ブックマーク / www.simplexsimple.com (10)

  • 「メールが届きません・・・」を防止するインターフェース | SiMPLE*SiMPLE

    「メールが届きません・・・」を防止するインターフェース August 28, 2007 10:55 AM written by Gen Taguchi メールによる認証プロセスがあるサービスでありがちなのが「メールが届きません」というユーザーからの問い合わせメール。 だいたいにおいて迷惑メールフォルダに振り分けられていることが問題ですが、その注意を喚起する方法としてPing Meはなかなか良いかな、と思いました。 このサイトではユーザーがメールアドレスを入力した直後(フォーカスを他に移ったとき)に「迷惑メールフォルダに注意してね」というメッセージが現れます。 入力した直後に自分が見ていたところに突然あらわれる点がいいですね。びっくりすると同時に「なんだろ?」と思わせることができるかもしれません。こういう工夫もいいですね。 ↑ メールアドレスを入力した直後に上のようなメッセージが現れます。

  • moveme.comのエラーメッセージ(というか表現) - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~

    引越し支援サイトのmoveme.comのエラーメッセージがちょっと変わっています。 普通エラーがあると赤い文字で「正しく入力してください」とか、フォームの枠が赤くなったりしますが、このサイトではフォーム自体が左右にブルブルと震えてエラーだということを教えてくれます。 ↑ テキストボックス自体が横にブルブル震えますw。 ちょっとかわいいですね。実際の動作は以下からどうぞ。 » moveme.com – the site that makes moving simple

    moveme.comのエラーメッセージ(というか表現) - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~
  • もう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っぽいロゴ

    もうPhotoshopは要らない?ブラウザだけでできるグラフィックジェネレータ15選 | S i M P L E * S i M P L E
  • ヘッダーにも記事一覧を設置するブログデザインの小技 | SiMPLE*SiMPLE

    ヘッダーにも記事一覧を設置するブログデザインの小技 May 24, 2007 2:20 PM written by 8maki ブログのインターフェースも多種多様になってきています。ヘッダー部分も主種様々な工夫がなされていたりしますよね。今日はその中の一つをご紹介。 Gizmodo Japanのヘッダーには人気の記事一覧がおり込まれています。 また、lifehack.orgでは最新記事一覧が表示されます。 ブログの記事一覧はサイドバーに設置するのが一般的ですが、訪れたらまずはじめに目がいくヘッダーにも設置することで、どういった記事を書くブログなのか、初めての人にもアピールしやすくなります。 それにヘッダーって常に目に付く場所ですから、いきなり個別記事ページを訪れた人に対しても他の記事をアピールすることができます。 他にもヘッダーやフッターなどをうまく使ったブログレイアウトがあったらご紹介し

  • 小粋なインターフェースを実現する25のコード - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~

    まとめ系エントリーが続きますが、ウェブ職人のためのネタ帳を目指しているのでご容赦くださいませ・・・。 さて、25 Code Snippets for Web Designersなる記事をご紹介。角丸やら噴出しやら、CSSでのグラフなどなど、すぐに使える小技がたくさんです。 ちょっとサイトにスパイスを・・・というときに眺めると便利ですね。このサイトで既に紹介したものもいくつか含まれていますね。よろしければ。 » 25 Code Snippets for Web Designers (Part1) Part 1なので続編もありそうですね。続編が出たらまたお知らせします。

    小粋なインターフェースを実現する25のコード - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~
  • 小粋なインターフェースを実現する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)

    小粋なインターフェースを実現する25のコード (パート2) - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~
  • 過去のものがかすれていくというインターフェース | 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件」のところにご注目。 ↑ 過去のものがだんだんかすれていってます。 「下にいくほど過去のもの」とは頭ではわかっていますが、かすれてくれると視覚的にわかりやすいですよね。ぱっと見たときの情報

  • Web2.0風デザインのための秀逸チュートリアル68選 | S i M P L E * S i M P L E

    こ、これはかなり使えます・・・。 が、とっても紹介が難しいのでさらりと。今回は実験的なエントリーとして画像一切なしで。 『Web2.0風デザインのためのチュートリアル68選』です。 » Web 2.0 Webdesign-Tutorials | Dr. Web Weblog 以下の7つのカテゴリーにわかれています。 サイトをこれから作るぞー、という人には大いに参考になる素晴らしきチュートリアルかと思います。 ビジュアル効果系(1~11) ロゴ系(12~25) テキスト(26~33)系 バッジ系(34~39) ボタン系(40~46) レイアウト系(47~60) Web2.0まとめ系(61~68) 個人的には1、2、12、13、40、41あたりが好きですね。今後使えそう。 しかし、こういう海外サイトのまとめをまとめとして紹介するのは難しいですよね・・・。そのまま紹介するのも「どうなの、それ?」

    Web2.0風デザインのための秀逸チュートリアル68選 | S i M P L E * S i M P L E
  • CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE

    terrill.caにてCSSPHPできれいなグラフを描く方法が紹介されていました。 » terrill.ca | Vertical Bar Graphs using CSS and PHP 棒グラフや立体グラフなどがCSSのスタイルで描けます。PHPはデータの抽出と縮尺の設定だけなので、必要でない方は紹介されているCSSだけ使っても良いかも。 ↓なグラフや、 ↓なグラフが描けます。 なお、HTMLのほうの記述は以下のような感じです。わかりやすいですね。変更も簡単かと。 <ul class="barGraph"> <li class="p1" style="height: 57px; left: 0px;">57</li> <li class="p2" style="height: 27px; left: 0px;">27</li> <li class="p3" style="heigh

    CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE
  • あるウェブサイトができるまでのアニメーション | SiMPLE*SiMPLE

    あるウェブサイトができるまでのアニメーション November 25, 2006 2:18 PM written by Gen Taguchi これ、自分で以前どこかで紹介したらしいのですが(多分mixi日記)、こっちでも紹介しておきましょう。 あるウェブサイトができるまでをアニメーションにしてあります(下の画像をクリックするとアニメーションにとびます)。 ↑ そうそうこんな感じ・・・。 テキストからはじまって、CSSを定義して、画像をいれて、というぐあいに見ることができて素敵です。 » designline-openair.gif 以前百式で紹介したTimeSnapperを使えば簡単に自分でもできそうですね。 » レコード&レビュー (TimeSnapper.com) | 100SHIKI.COM Info: その他 | 固定リンク | コメント (1) | トラックバック (1)

  • 1