いま,見ておきたいウェブサイト

第68回 Kern Type, the kerning game,Designspiration,O'Neill Illusion

この記事を読むのに必要な時間:およそ 2 分

秋本番の肌寒さを感じながら,⁠いよいよ温かい食べ物,飲み物の美味しい季節の到来だな」とにんまりとしている今日このごろ,皆様いかがお過ごしでしょうか。今回も個人的に感じた,素晴らしいサイトの特徴をいくつかお話したいと思います。

あなたのカーニングセンス,教えます

Kern Type, the kerning game

タイポグラフィの基本である欧文書体のカーニング(文字詰め)を,ゲーム形式で楽しめるウェブサイト『Kern Type, the kerning game』です。

図1 ゲーム形式でカーニングを『Kern Type, the kerning game』

図1 ゲーム形式でカーニングを『Kern Type, the kerning game』

credit:Mark MacKay

ゲームを始めると,画面中央に不規則に文字が並べられます。ユーザーは,マウス,またはキーボードを使って,表示されている文字と文字との間隔を調整していきます。調整終了後に「Compare」をクリックすると,ユーザーの行ったカーニングと正解とが比較され,結果に応じた得点が表示されます。

図2 ユーザーのカーニング結果が採点される

図2 ユーザーのカーニング結果が採点される

得点表示時には,画面左側の項目「Both(解答とユーザーのカーニングの両方)⁠Solution(解答)⁠Your kerning(ユーザーのカーニング)⁠を選択することで,より詳しいカーニングの結果が確認できます。こうした問題が全部で10問出題され,最後に総合成績(100点満点)が発表されます。

知られていない"特別な作業"

『Kern Type, the kerning game』では,タイポグラフィの一要素である"カーニング"という作業をゲームにしています。結果が点数で表示されるため,"カーニング"を知らないユーザーも楽しめます。また,デザイナーにとっても,自らの技量を確かめる良いコンテンツでしょう。

図3 最後にユーザーの総合成績が発表される

図3 最後にユーザーの総合成績が発表される

文字を扱うデザインを仕事としている人にとって,こうした"カーニング"は見慣れた普通の作業です。しかし,それ以外の人たちにとっては,とても新鮮で特別な作業に感じるでしょう。

どの職業にも,その中にいる人にとっては当たり前で,外部の人が知ることのない,専門化された作業が存在しています。そうした作業を上手に利用して,この『Kern Type, the kerning game』は制作されています。

専門的な作業を題材にしたウェブサイトは,ユーザーの職業に対する見方を大きく変えていくかもしれません。こうしたコンテンツから,その職業に興味を持ち,新たにその業界へと足を踏み入れる人たちが生まれてくることを願って,今後もこうしたウェブサイトの登場を期待したいと思います。

予測から生まれた,大胆なアイデア

Designspiration - Design Inspiration

多様なジャンルの画像を収集・分類し,インスピレーションを共有するデザインポータルサイト『Designspiration』です。

図4 ⁠Designspiration』

図4 『Designspiration』

credit:Shelby White

『Designspiration』では,写真やイラスト,ポスターやパッケージ,ロゴやタイポグラフィなど,高品質な多くの画像が共有されています。収集する画像の質を保つため,作品を登録するメンバーを"招待制"としていることも大きな特徴の一つです。

先読みから生まれた検索方法

『Designspiration』は多くのイメージを収集しているため,ユーザーが自分好みのイメージを素早く検索ができるよう,さまざまな工夫がなされています。

図5 キーボードを打つと,全面が自動的に検索画面へと切り替わる

図5 キーボードを打つと,全面が自動的に検索画面へと切り替わる

最も特徴的なのは,キーボードから入力したとたん,全面が検索フォームへと素早く変化することでしょう。⁠ウェブサイトを閲覧中にキーボードを打つ=検索のため」とユーザーの行動を予測し,その考えをシンプルに実装した点は,実に素晴らしいと思います。

図6 色から作品を検索できる仕組みも備えている

図6 色から作品を検索できる仕組みも備えている

それ以外にも,色による検索やキーボードを使用した作品間のスムーズな移動など,面白い仕組みが実装されています。こうした個性的な仕組みを実装するに至った経緯などは,⁠Designspiration』の作者である,Shelby WhiteのBlogで確認できます。

「検索する」という刺激のない行動も,飛び抜けたアイデア一つで,新鮮な感覚をユーザーに与えられることを証明したこの事例。いつもの印象が大きく変わるアイデアが実装され,私たちの目の前に次々と登場するのを,これからも楽しみにしたいと思います。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入