メンテナンス画面にスクリーンキャストでサイトの説明を | SIMPLE*SIMPLE
お手軽チャットサービス、Stintoのメンテナンス画面がちょっと親切です。「サイトが落ちててごめん、その間はこちらのスクリーンキャストをどうぞ」といった具合に、どんなサービスなのかを映像で見せてくれます。 ↑ こんな感じ。 せっかく見に行ったのに、サイトが落ちていたら逆にどんなサイトなのか気になりますよね。そう考えるとこうしたメンテナンス画面にこそ、サービスやサイトの説明があるべきなのでは、とちょっと思いました。 なお、stintoはシンプルでいいサービスですが、前に試したら日本語が通りませんでした・・・今回のメンテナンスで直ると良いのですが。 » Sorry
FAQには最終更新日を | SIMPLE*SIMPLE
すでに多くのサイトで採用されているインターフェースではありますが、気をつけていないと忘れてしまうかもしれないので念のためにエントリー。 WUFOOではFAQページの下に最終更新日が記載されていますね。ここのページには問題を抱えている人が来るだけに、あまりに古い更新だとうっかり信用を落としかねないです。 ↑ これ、重要かと。 地味な項目ですが、「FAQには最終更新日を！」は大事ですよね。 » Wufoo Docs » Unplugged
プロフィールを更新したらメールでお知らせできるインターフェース | SIMPLE*SIMPLE
LinkedInではプロフィールの更新画面に「Forward this profile」というのがありますね。 ↑ これ。 これを使うと「プロフィール更新したから見てねー」というメールを送ることができます。 ↑ こんな感じで。 よくこういう機能はTwitterと連動したり、友達のトップページに出るようになっていたりしますが、明示的にメールで送れる機能がついていても悪くないですね。更新を知らせたい人に限ってそのサービスにあまりログインしていなかったり、Twitterを使っていなかったりしますものね。 細かいですが、メールできっちりお知らせする機能は要所要所に必要かな、と思いました。 » LinkedIn: Send Your Updated Profile
会員登録からログインまでが瞬速のTimelopeのインターフェース | SIMPLE*SIMPLE
ブラウザ履歴を共有できるTimelopeですが、会員登録からログインまでがちょっぱやです。なんと登録時のユーザー名をいれるとそれがすぐに右上のログインボックスに反映されます。しかもパスワードまで！ ↑ 登録しながらログインフォームを埋めている感じ。 やりすぎなような気がしないでもないですがｗ、会員登録したらすぐに試したいもの。ありといえばありのインターフェースですね。
画像一つ使う際にもユーザーが何を感じ取るかを考えよう（powered by beBit） | SiMPLE*SiMPLE
※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 beBit社から「画像一つでもコンバージョン率がこんなに違う」という事例を紹介してもらいました。今回事例としてご紹介いただいたのはある住宅ローンサイトの画像について。 ↑ 説明してもらった同社コンサルタントの土井さん。 あなたは住宅ローンサイトで「お問合せはこちらから」というページをつくるとしたら、そこにどんな画像を使いますか？ やわらかい印象のイラスト、ヘッドセットをした女性が電話に出ている写真、などが候補にあがると思いますが、ユーザビリティテストの結果、一番効果的だったのは・・・（考えてみてください）・・・「男性社員の写真」でした。 よく「お問合せ」というと「女性のオペレータ」を連想してしまいますが、大事なのはこれは住宅ローンのページだということです。 実際にテストをしてみると「支店にいるようなロ
「メールが届きません・・・」を防止するインターフェース | SiMPLE*SiMPLE
「メールが届きません・・・」を防止するインターフェース August 28, 2007 10:55 AM written by Gen Taguchi メールによる認証プロセスがあるサービスでありがちなのが「メールが届きません」というユーザーからの問い合わせメール。 だいたいにおいて迷惑メールフォルダに振り分けられていることが問題ですが、その注意を喚起する方法としてPing Meはなかなか良いかな、と思いました。 このサイトではユーザーがメールアドレスを入力した直後（フォーカスを他に移ったとき）に「迷惑メールフォルダに注意してね」というメッセージが現れます。 入力した直後に自分が見ていたところに突然あらわれる点がいいですね。びっくりすると同時に「なんだろ？」と思わせることができるかもしれません。こういう工夫もいいですね。 ↑ メールアドレスを入力した直後に上のようなメッセージが現れます。
お問い合わせ画面でFAQをリアルタイム表示 | SIMPLE*SIMPLE
家系図をつくれるサービス、Geniのお問い合わせ画面がなかなか便利です。 ↑ 普通の問い合わせ画面ですが、内容を入力しはじめると・・・。 ↑ その言葉をリアルタイムに解析して関連するFAQを表示してくれます。 他のサイトでも採用されているようですが、わかりやすいですよね。サポートコストが大変・・・というサイトで採用してみてはいかがでしょうか。 実際に動作している画面は以下からどうぞ。 » Geni – Help Center なお、元ネタはAjaxianでした。 » Ajaxian – Geni Smart Contact Form
もう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っぽいロゴ
本文の下のほうをFade Outしてフッターを際立たせる方法 | SiMPLE*SiMPLE
本文の下のほうをFade Outしてフッターを際立たせる方法 May 9, 2007 8:08 AM written by 8maki fortuitousというブログには、ちょっと楽しい小細工が。 本文の下のほうに行くと文字や画像がFade Outしていきます。フッターのメニューがうかびあがってくるように見えてユニークです。 ちょっと実現方法がユニークなので皆さんも考えてみてください。 実はこれ、CSSやJavascriptを一切使わず、画像をちょこっといじっただけで実現しています。 なんと上半分を白の透過画像にしているだけなのです。わかってしまうと、「あー、なんだ。」と思ってしまいますが、意外と思いつかない発想かも。 たったこれだけでもブログやサイトにアクセントを加えることができる、他にもいろいろとお手軽な手法が転がっていそうですね。 » fortuitous ■ 追記（2007-05
ヘッダーにも記事一覧を設置するブログデザインの小技 | SiMPLE*SiMPLE
ヘッダーにも記事一覧を設置するブログデザインの小技 May 24, 2007 2:20 PM written by 8maki ブログのインターフェースも多種多様になってきています。ヘッダー部分も主種様々な工夫がなされていたりしますよね。今日はその中の一つをご紹介。 Gizmodo Japanのヘッダーには人気の記事一覧がおり込まれています。 また、lifehack.orgでは最新記事一覧が表示されます。 ブログの記事一覧はサイドバーに設置するのが一般的ですが、訪れたらまずはじめに目がいくヘッダーにも設置することで、どういった記事を書くブログなのか、初めての人にもアピールしやすくなります。 それにヘッダーって常に目に付く場所ですから、いきなり個別記事ページを訪れた人に対しても他の記事をアピールすることができます。 他にもヘッダーやフッターなどをうまく使ったブログレイアウトがあったらご紹介し
過去のものがかすれていくというインターフェース | 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件」のところにご注目。 ↑ 過去のものがだんだんかすれていってます。 「下にいくほど過去のもの」とは頭ではわかっていますが、かすれてくれると視覚的にわかりやすいですよね。ぱっと見たときの情報
ユーザーに注意を促すうまいやり方一つ | SiMPLE*SiMPLE
ユーザーに注意を促すうまいやり方一つ February 22, 2007 9:00 AM written by 8maki 最近ニュースサイトでも記事にトラックバックできるサイトが増えてきました。 信頼性が要求されるニュースサイトゆえ、様々な注意事項をユーザーに促さなければなりません。 ITmediaのトラックバックページではうまくユーザーに注意を促しています。 一般的なトラックバックのページですが・・・ リンクにカーソルをもっていくことでリンク先に飛ぶことへの注意が表示されます。 リンク先の保証はできないという旨の注意なのですが、ページの下や別ページに注意書きを書いても読んでもらえないし、だからといって注意書きがないのも不安。 クリックしてリンク先に飛ぶ瞬間、ポッと出して注視させるやり方、うまいですね。 » ITmedia Info: ナビゲーション | 固定リンク | コメント (0
タイトル下に名前を表示させることでコメントさせる仕組み | SiMPLE*SiMPLE
タイトル下に名前を表示させることでコメントさせる仕組み February 19, 2007 8:17 AM written by 8maki ご存知、37sginalsのブログのタイトルの下には、最後にコメントを書いた人の名前が載ります。 ためしにコメントしてみたところ、画面遷移もせずサクっと自分の名前が入りました！（興奮） » Signal vs. Noise 何か、一瞬の快感です（笑） 思わず毎回コメントを書いてしまいたくなりますね。 実際37signalsブログには、短いですがたくさんのコメントが集まっています。 以前紹介した『たつをのChangeLog一言メッセージ』のように、ブログのフィードバックをもっともらう工夫っていろいろありそうな予感。 Info: 特殊効果 | 固定リンク | コメント (0) | トラックバック (0) | ↑
右クリックでさらにデスクトップ環境に近づける | SiMPLE*SiMPLE
右クリックでさらにデスクトップ環境に近づける January 22, 2007 5:13 PM written by 8maki 以前、紹介したオンラインストレージDropBoksが今度は右クリックに対応しました。 ファイル名にカーソルを置いて右クリックするとちゃんとメニューが出てくれます。 これでダウンロードや名前の変更がスムーズに行えますね。 » DropBoks たしかロリポップのウェブＦＴＰにも似たようなメニューが・・・ っと、こちらは左クリックでした。 » ロリポップ オンラインストレージのようなサービスだと、デスクトップ環境に近づけることが操作性UPの近道かもしれませんね。 他にも右クリックをうまく使っているサービスがありましたら教えてください。 ■ 関連記事 ドラッグ＆ドロップでデスクトップ環境に近づける Info: 特殊効果 | 固定リンク | コメント (1) |
flickrの写真をスマートリストっぽく自動分類する『SmartSetr』 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
写真家のThomas Hawkさんが自身のブログで絶賛している、smartsetrがなかなか素敵です。 これは↓みたいにタグやアップした日時などから条件を決めて、その条件に合うflickr上の写真を自動で分類してくれるというもの。 Eric Appelさんという方がflickrAPIを用いて作られたみたいです。 今まではflickrに上げた画像をグループ化する場合、せっせと一枚一枚設定しなければなりませんでしたが、smartsetrを使えば簡単に、自動で分類することができます。 要はiTunesのスマートリストみたいな感じです。 肝はsmartsetrでセットを作るだけでflickr側で何もいじらなくていい点。 今までのfllickrに上げた写真を整理するのに良い機会ですね。 » smartsetr
イメージマップをAjaxで生成『HTML-Image map Creator』 | SiMPLE*SiMPLE
イメージマップをAjaxで生成『HTML-Image map Creator』 December 23, 2006 12:40 AM written by Gen Taguchi これ、ちょっと便利。画像の特定部分がクリッカブルになっている「イメージマップ」を簡単に作れます。ツールがちょっと手元にないなぁ、なんてときに便利。 ↑ 作業はこんな感じで。画像のURLを指定し、画像上でダブルクリックして線引きを開始。そのあとクリックして領域指定、ダブルクリックで終了。 ↑ 作業結果はリアルタイムでコードに反映されていきます。<img>タグの中身や、リンク先は手作業で変更。 最近「イメージマップ」がはやっているかどうかが微妙ですが（なんかユーザビリティ/アクセシビリティ的に問題ありそう）、知っておいて損はないですな。よろしければどうぞ。 » HTML-Image map Creator WYSIW
『ウェブ2.0 HOW-TO デザインガイド』がよくまとまっています | S i M P L E * S i M P L E
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity（とにかくシンプルに！） Central layout（真ん中に寄せるレイアウトで） Fewer columns（段組は少なめに） Separate top section（トップ部分は分けて目立たせよう！） Solid areas of screen real-estate（レイアウトにはメリハリをつけて） Simple nav（ナビゲーションはシンプルに！） Bold logos（ロゴは大きめに！） Bigger text（フォントも大きめに） Bold
【無料ミニアイコン集】 サンタからのちょっと早い贈り物『Mini Icon 2』 | S i M P L E * S i M P L E
かわいらしいミニサイズのアイコンを配布しているBrand Spanking Newのサイトで一足早いクリスマスプレゼントが配布されていました。 113の超ミニアイコンです。サイズは10×10。かわいらしいすね。 これらを使ってなんかのアプリ作っちゃおうかな。携帯アプリとかいいかも。 ダウンロードは下記のサイトからどうぞ。 » HoHoHo! （mini Icon 2） また、Mini Icon 2とうたうからには他にもあります。よろしければどうぞ。どれもいい感じっす。 » Doc Type Icon » Mini Icon Pack 1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
面倒なコマンド学習を「linuxの入門に最適です」と言い切るインターフェース | SIMPLE*SIMPLE
moveme.comのエラーメッセージ（というか表現） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
