カテゴリー: UIデザイン

カテゴリー
UIデザイン

#HEXWORDS – 16進カラーコードで「意味のある単語」をまとめたサイト

#HEXWORDS トップ

HTML/CSS の色指定などで使われる16進コード、0から9とA,B,C,D,E,F までの16文字を使って16進数でRGBの三原色の割合を示すものです。3桁(#3C3)や6桁(#BD2031)で使われます。

#3C3

#BD2031

16文字の中にアルファベットが6文字入っているので、数値によっては英単語のように見えるものもあります。(たとえば #DECAFE)

これに、0から9までの数字を似た形のアルファベットに見立てて英文を読みにくくし、仲間うちだけで通じるようにする リートスピーク(leetspeek) を組み合わせると、6桁の色コードの中に英単語として読めてしまうものの数がぐっと増えてきます。

この英単語として読めてしまうような16進コードを集めたのが#HEXWORDSというサイト。

#HEXWORDS トップ

サイトには検索機能もあり、使いたい色コードを入れて、その色に近いもので英単語っぽいものを列挙してくれます。

#HEXWORD の検索例

Hacker Newsのスレッドでは、「認識できる英単語と、その16進コードが表示する色の間に関係があるものがあるのでは?」という問いかけが出て、何人もの人がそれっぽいコードを発見・披露しています。

#C0A575 (COASTS, 海岸 – 砂っぽい色?)

#5A6E57 (SAGEST, セージの葉 – 葉っぱの色)

#CABB1E (CABBIE, キャブ – イエローキャブタクシーの色)

このサイトは英単語を列挙していますが、ローマ字で日本語として意味を成すものも探せば日本語版を作ることもできそうですね。

Webサイトのソースコード中に含まれる色のコード、一般的には意識することもないと思います。

なのでこのサイトの実用性はそれほどないでしょうけれど、何か平凡なwebページの中に隠れた情報を埋め込んでおき、色コードを登場順に読んでいくと文章が浮かび上がって情報を伝える、みたいなお遊びをするときに役立つかもしれません。

via Hacker News

カテゴリー
UIデザイン

88×31 コレクション – 太古のウェブで多用されたサイズの懐かしバナーを収集

The 88×31 GIF Collection は、名前の通り、横88ピクセル x 縦31ピクセルのウェブバナーを収集して公開しているサイトです。

88×31 サイズのバナーが広まったのは、1994年にスタートし当初のインターネット・ウェブ空間の一大勢力となった無料ホームページ公開サービス ジオシティ(Geocities)。1996年のジオシティのトップページには、サイドバーに7つの 88×31 バナーが掲載されています。

ジオシティは各ユーザーに対し、ジオシティへのバナーリンクを設置することを推奨したということで、ジオシティで個人サイトを作ったユーザーらがまずジオシティの88×31バナーを置き、次いでお互いの個人サイトをリンクする時にも同じ88×31 バナーを作っては配布した、というのが普及の原動力ではないかということです。

ジオシティがなぜ88×31 サイズのボタンを採用したか、については、さらに遡って1995年のwebブラウザ Netscapt Navigator のバージョン2.0 のバナーをまねたのではないかということ。このバナーも88×31 ピクセルです。

Netscape Navigator のプロモーションの一環で、Netscape Now というキャンペーンがあり、Netscape がこの 88×31 サイズのバナーを配り、サイト制作者に設置することを求めていました。(via 88×31)

このボタンが、今のところ最も古い 88×31 バナーのようです。コレクションの3ページ目には、この最古のバナーを含めた Netscape 社の多数のバナーのバリエーションが保存されています。

なぜNetscape のデザイナーがこの 88×31 サイズのバナーを作ったかについては、文献が見つかりませんでした。日本のYahoo!知恵袋で一つ推論が披露されているのですが、ちょっと無理がある(黄金比をカットした「余白の」サイズが88×31に近いと言っている)ように思います。

このバナーがあまりに広く普及したため、88×31サイズは後追いでウェブ広告の業界団体Interactive Advertising Bureau(IAB)の標準バナーの一つに”micro banner”サイズとして指定されています。

via Hacker News

カテゴリー
UIデザイン

YesAQ – 「はい」になる回答だけを集めたFAQ

Basecamp というサービスの FAQ に特徴があるという書き込みがあったので、チェックしに行きました。

よくある質問(FAQ)を置いてあるウェブサービスは多いと思います。問い合わせが多い質問に対してあらかじめ回答を見せておくことで、サポートの人員を減らせますし、利用者もメール等の返事を待つことなく疑問が解消できます。

すべての答えが「はい」なら

Basecamp の yeaAQ は、すべての回答が「はい(Yes)」になるように質問文を書いています。

ドライブインの店頭に貼ってあった「すべての答えがイエスの貼り紙」にインスパイアされたものだそうです。

FAQ の質問文を読んでからそれに対する回答を読むことは、1つ目の質問という情報を頭の中に積んでいることになりますね。最初から答えが「はい」だとわかっている質問しか並んでいなければ、覚える手間がはぶけてわかりやすいのかもしれません。

逆に、Yes ほど受けは良くないかもしれませんが、すべてが No になるFAQ というのも作れそうですね。と思ったけどこれは公園の禁止事項の看板なんかで既にありそうかな。

作る方は、自然に答えがはいになる質問文しか書けないあたりで努力が必要そうにも思いますけど。よくある質問を「よくある」にしない工夫にする変化球的サイトデザインと言えるかもしれません。