2006-11

questionformはAjaxを多用した小気味いいフォーム作成サービスである。

いろいろと参考になるインターフェースも多いのだが、おもしろいのはデフォルトで多言語対応のインターフェースを備えている点。

フォームを作成するときに「Add Language」なるボタンがあり、それをクリックすると言語切り替えボタンが付いてくれるのだ。またフォームのラベルも言語ごとに設定してくれる。

「Add Language」ボタンをクリックすると・・・

以下のようなウィンドウが出てきて・・・

スペイン語対応！

↓ 以下はデモ（このように作ったフォームをiFrameで貼り付けられる模様、なるほど・・・）。

言語の壁があるにはあるが、世界へ向けてサービスを提供する敷居はどんどん低くなっている（システム的に）。実際海外のWeb2.0系サービスやブログで、日本語対応をしているものもどんどん出始めている。

こうした「Add Language」ボタンが増えてくると日本のサービスも変わらざるを得ないかもしれませんね。ことウェブを使ったサービスに関しては、目指すべきは世界、なのかもしれません（全部じゃないだろうけど）。

QuestionFormは参考になるインターフェースが満載なのでまた取り上げてみたい。今回はこんなところで・・・。

» questionform

DropBoksは見た目に使いやすいオンラインストレージです。

ちょっとユニークなのはドラッグ＆ドロップでファイルの削除ができる点。普通にデスクトップでいらないファイルをゴミ箱にドラッグ＆ドロップする感覚です。

動画も撮ってみましたのでご覧ください。

ウェブ上でさまざまなことができるようになりましたが、デスクトップ環境で慣れ親しんだインターフェースを模してみると使いやすさが向上するかもですね。

このdropboks、登録しなくても使うことができるので一度お試しあれ。他にも小粋な仕組みがちりばめられた素敵なツールですよ。

■ 関連記事

• シンプル＆スタイリッシュ (DropBoks.com)

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 Ipsum</h1>

ちょっと画像を作るのが面倒、というときによいかもしれませんね。

追記（2006-11-27）:

たくさんの方からコメントいただきありがとうございました。アクセシビリティ、SEO等の観点からこの手法にはいろいろ問題があることがわかりました・・・軽率な掲載でしたが勉強になりました・・・。ご利用される方はコメント欄をご覧の上、欠点がわかった上でご利用ください。

これ、自分で以前どこかで紹介したらしいのですが（多分mixi日記）、こっちでも紹介しておきましょう。

あるウェブサイトができるまでをアニメーションにしてあります（下の画像をクリックするとアニメーションにとびます）。

↑ そうそうこんな感じ・・・。

テキストからはじまって、CSSを定義して、画像をいれて、というぐあいに見ることができて素敵です。

» designline-openair.gif

以前百式で紹介したTimeSnapperを使えば簡単に自分でもできそうですね。

» レコード＆レビュー （TimeSnapper.com） | 100SHIKI.COM

先日友人からメールを受け取りました。そのフッターに以下のようなメッセージが。

ま、いわゆるフッターでの近況報告なのですが、「フッターを新聞にしました」と言い切ったところがなんかいい。

「あいつからのメールには新聞がついているから読まなくちゃ」と思わせますよね。毎日変わっていたら本当にすごいな。僕もつけようかな。

ウェブのインターフェースもそうですが、メールもこうした小技をきかせてみたいですよね。

さて、その友人には掲載許可を得ないまま書いていますが、彼がかかわっているプロジェクトを広めておけばきっと許してくれるだろう。ケーキ好きの方は是非どうぞ。

» ひんやり、新感覚チーズケーキ！

メモ書きにてエントリー。訳しただけだけど。

Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです（「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・）。

さて、ではポイントをば。

■ グレーの次はグリーンだ！

明るいグリーンが流行です。下記サイトをみてもそうですよね。

■ 角丸命！

Rounded Cornersは新しい標準す。

■ 「無料！」印がキーワード

まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。

■ は？素材集すか？

素材集から写真をとってきただけではだめです。アイコンもきちんとデザインしましょう。たしかに「素材集っぽい」写真ってありますよね・・・。

■ 大きいことはいいことだ！

文字は極端に大きく。メッセージを簡潔につたえることで全体がすっきりしますね。

■ 空白に語らせろ！

空白も重要です。そういえば友達が「空白があると高級そうに見えるよね、フランス料理もそうだけど」といってましたな。正論。

■ コピーに気を使おう！

Ruby on Railsを作ったDHHも「良いプログラマーは良いライターでなくてはいけない」と言ってましたね。ライティング能力重要。

どのサイトにもキャッチコピー的なものがついていますよね。

以上ですが、他にも下のようなReflectionsとかいろいろありそうですね。参考になりそうなサイトもあげときましょう。

参考になりそうなサイト一覧は以下をどうぞ。

• Reflections are the new drop shadows
• The Logos of Web 2.0
• Web 2.0っぽいデザイン
• 使える2.0系カラーパレット
• 簡単に2.0っぽいロゴがつくれるメーカー

次につくるブログやサービスの参考にしようかな、と。

Dr. Nicさんのブログで、「最新情報」を表示するmagic_annoucements.jsが紹介されていました。

ブログで最新情報を表示させるときは上にパーツとして表示するか、ブログパーツっぽく表示させるかなどの方法がありますが、magic_annoucements.jsには「close」ボタンがある点が素敵です。

これで一度読んだ最新情報は表示されなくなるので「最新情報を何度も見る」というある意味シュールなシチュエーションに陥ることがなくなります。また画面も広く使えてなかなか良いでしょう。メンテナンスも楽っぽいです。

ちなみにこのサイトで使われてはいますが、まだ配布はされていないようで・・・ライセンス関係が気になるので使うことはできないかもしれませんが、ソースを解析してみるのはいいかもですね。jqueryを使っているようです。

ご興味のある方はどうぞ。

» [Preview] Magic Announcements

prototype.jsが必要ですが、さまざまな特殊効果を実現するanimator.jsが便利っぽい。

0%～100%までカウントアップしてくれたり、ぐぐっとエレメントを移動させたり、もっと複雑な効果を実現したり・・・。

↑ デモと一緒にコードも見られるのでわかりやすいす。

なかなか楽しげです。派手なサイトを作りたい方にはおすすめかと。下記サイトでスクリプトのダウンロードできたり、デモが見れたりします。

» Bernie’s Better Animation Class

Javascriptでさまざまな効果を実現できるscript.aculo.usがバージョンアップ。今回の目玉は「モーフィング」。指定したエレメントをぐーっと変形させていくことができます。

といっても、見るまでわからないと思うので下記ページのデモをどうぞ。

» モーフィングデモページ （すげぇ・・・）

script.aculo.usには他にもいろいろな効果がありますね。なにかサービスをつくるときには参考にされてみてはいかがでしょうかね。

しかしscript.aculo.usには二つの問題がありますね・・。

• サイトが激重い・・・。
• なんて発音するのかいまだにわからない。

» script.aculo.us公式ページ

なんだかいまさら気付いたことですが、ECナビのロゴ、ときどきまばたきするんですね。

ロゴが気付くか気付かないかぐらいで動くといえば関心空間。

たしか、昔はもっとさりげなく動いていたはず（といった話を社長の前田さんに聴いたような微かな記憶が・・・）。

よーく見ないと気付かない、というのは気付いたときにうれしいですよね。そういうデザインも悪くないですね。

ほかにもご存知の方がいれば教えてくださいませ。

それからまったく関係ないですが、このブログのロゴ・・・。

確かに「ヨコ」にすると、ですね。こちらもちょっとした発見だったので蛇足気味にエントリーｗ。