先日、ライブドアがNeverと提携して、画像検索が変わりました。
さっそく、いろいろ試したついでに、まさか、と思いながら自分の名前を入れてみました。
すると、どこで、どう関連付けられたかわかりませんが、不思議と自分の興味がありそうなものの画像がでてくるのです。
なにはともあれ、お試しください。
（私は、ライブドアファン！ というわけではありませんが...）
木曜日, 6月 17, 2010
月曜日, 5月 17, 2010
月曜日, 3月 29, 2010
火曜日, 3月 02, 2010
テーブルを見やすく、使いやすくするためのアルティメットガイド
Ultimate guide to table UI patterns
テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。
- はじめに
- 1. 列を交互にスタイリング
- 2. 列をフルに
- 3. テーブルのセクション
- 4. ソート
- 5. フィルタリング
- 6. ページネーション
- 7. スクロール
- 8. 固定されたヘッダ
- 9. ヘッダのないテーブル
- 10. 拡張可能な列
- 11. 列のアクション
- 12. マルチプルな列のアクション
はじめに
テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単に比較ができるようにすることです。
テーブルがよくない評判をうけるのはデータが不明慮で、とても退屈なものが多いからです。
ここではテーブルを必要とする人のために、それほど悪くないテーブルを作成するために、助けることができるいくつかのパターンを紹介します。
1. 横列を交互にスタイリング
テーブルの横列を交互にスタイリングすることで、混雑したデータが区別しやくなります。背景のスタイルはカラーか画像を使用します。
背景にカラーを使用する場合はページの背景と比べて、より明るくするか暗くするかのどちらかになります。画像を使用する場合は使用しているカラースキームと一致するグラデーションがよいでしょう。
テーブルのヘッダとフッタも一目で分かるようにカラーを変更するようにします。カラーは横列で使用したものより、さらに明るいかさらに暗いかのどちらかです。
2. 横列をフルに
横列にアクションを設置する場合、その横列全部をクリック可能なようにします。これはすわなち、クリック可能エリアを拡大するということです。例えば、横列でできる唯一のアクションが詳細表示のみである場合、これは非常に有用です。
横列全体をクリック可能にするには、jQueryのプラグイン「RowSelect」などを使用すると便利です。
3. テーブルのセクション
関連した横列をまとめる必要があるとき、セクションやグルーピングを使うことを検討してみてください。セクションとは関連したデータをまとめるテーブルの一部です。すべての項目を縦列と同じようにまとめます。
例えば、国のリストを示すテーブルで、地域は横列でグルーピングを行うほうが自然です。そしてそれぞれのセクションは折りたたみ可能にしてもよいでしょう。
4. ソート
データの量が非常に多かったり、なじみのない言葉が多い場合、ソート機能は有効です。また、隣接したデータを比較するのにも利用できます。
テーブルにソート機能をつける場合は、一般的にはヘッダををクリック可能なようにすることです。そして縦列でソートがされるべきです。もしソートが不可能なコラムがあるときは、ソート可能なコラムと明確に相違がある必要があります。
テーブルにソート機能をつけるにはjQueryのプラグイン「TableSorter」が非常に簡単です。多くのデータタイプに対応しており、マルチ縦列のソートもサポートしています。
5. フィルタリング
データ量が多い場合は、フィルタリングも非常に有用です。これはドロップダウンやラジオボタン・チェックボックスを使用してフィルターします。
フィルタリングの大きな特徴は、あらかじめフィルタするキーワードを決めることです。
6. ページネーション
データ量が多い場合、ページネーションで分けることも良い習慣です。ページネーションは認知度も高いです。
しかしながら、ページの数と前へと次へのリンクだけで、あなたはどこに何があるか言うことができますか？ こういったページネーションの問題を解決できる方法があります。
ここではページを定義するために、数字とアルファベットを使用しています。
また、ページネーション自体の量が多い場合は、補足などのインフォメーションを表示するのも効果的です。
7. スクロール
ページネーションとは対照的に、ページを連続的にスクロールすることでデータを見せるテクニックがあります。スクロールさせる際は、ロード時にはプログレスインジケーターなどを設置します。
このパターンには特定のユーザビリティとアクセシビリティの問題があります。これを使用する場合は事前にユーザーテストを行ってください。
上記のような問題をもっていない変種のパターンもあります。.リストの一番下にあるボタンをクリックすることで、次のデータセットを表示します。
8. 固定されたヘッダ
これは簡単に利用できるすてきなシンプルなテクニックです。
かなり大きく複雑なデータでも、ヘッダが常に固定表示されていると、多くの縦列を識別するのに役立ちます。
FixedHeaderTableは簡単に固定されたヘッダを実現するプラグインです。
9. ヘッダのないテーブル
もし、テーブルのデータが自明であるなら、ヘッダを設置する必要はありません。Eメールのテーブルが良い例でしょう。
Eメールでは件名と送り主と日付はヘッダの必要がない自明で特有なデータです。
しかしながら、ヘッダを削除することが可能ではないケースがあります。例えば、日付が二つあるようなあいまいなデータがある場合です。この場合はヘッダが必要になるでしょう。
10. 拡張可能な列
このパターンのキーポイントはテーブルに追加のインフォメーションや機能性を加えることを可能にします。目に見える重要なインフォメーションに加え、更に詳細などを表示するために使用します。
11. 列のアクション
テーブルは通常スタティックに果てしないデータを表示するものですが、特定の行動を行うことができるインタラクションのエレメントでもありえます。アクションは一つの横列や複数の横列で実行することができます。
インラインのアクション
最も単純なアクションは、横列のデータと一致して、先頭もしくは終わりにアクションを設置することです。
上記の例では、投票ボタンを終わりに設置しています。
ホバーのアクション
これは多くのアクションをもっているとき、利用できるパターンの変化です。ホバーで表示・非表示することで、編集や削除をすることができます。
メニューのアクション
横列の上でホバーやクリックで多くのアクションをおこさせる必要がある場合は、このパターンです。
この例ではそれぞれのファイルでできる多くのアクションがあるため、コンテクストメニューのようにアクションを表示します。
12. マルチプルな列のアクション
複数のファイルを選択し、メニューからはアクションを選択してひつとだけ実行できるようになっています。
こういった良いアプローチの場合、ユーザーは多数の横列の上でアクションを行うことができるはずです。
金曜日, 2月 26, 2010
プラナフ・ミストリーさんのSixthSenseテクノロジー
ジェスチャーによるインターフェース。というだけでなくPCという存在をなくすアイデア。
これとヘッドマウントディスプレイを組み合わせれば、iPodなどの制約を抜け出して世界観が広がる。
セカイカメラも、iPodに縛らせずにこの世界に入るといい。
↑ 14分ほどですが、デモ満載で飽きません。View Subtitlesで日本語を選びましょう。
Twitterツール開発者は必見！Twitter APIの動作が簡単に確認できる『Twitter API Viewer』
Twitter API ViewerはTwitter APIの動作確認が簡単にできるツールですよ。パラメーターを入力してSubmitすればどんなリスポンスが返ってくるかがわかります。
↑ トップ画面。API種別ごとにうまいことまとまっています。
↑ たとえばUser情報。IDを指定してSubmitすると・・・。
↑ XMLが表示されます。
Googleスプレッドシートで使える便利な関数いろいろ
Google Docsのスプレッドシートで使える関数ですが、Excelっぽいやつは当然として、GoogleのAPIを利用した関数がいろいろ使えるのですね。ちと勉強になったのでまとめてみますよ。
■ ユニークな値だけ抽出
Excelだとわりと面倒な「ユニークな値の抽出」ですが、Google Docsだとunique()一発すね。
↑ これでOK。
メールアドレスの重複をはじく、なんかの処理に便利そうですね。
■ 閾値を指定してフィルタリング
指定したデータセットのうち、10より大きいものを返す、といったことも簡単ですね。Excelのオートフィルタも便利ですが、こうやってセルに直接流し込んでくれるのがGoogle Docsの良いところですね（データセットを返す、という特徴ですかね）。
↑ こんな感じ。複数条件指定も可。
■ Googleで検索した値を表示
Googleならではの機能ですよ。都市名から国を検索して表示したり、有名人の名前から年をひっぱってくることもできるようです。
↑ こういうのもOK。David Allenさんの年がわかりますよ・・・便利。
どういうオプションが使えるかは以下に詳しいです。
» GoogleLookup の使用 : 関数 – Google ドキュメント ヘルプ
■ Googleで翻訳した値を表示
さらに翻訳なんかも可能ですね。超絶便利。
↑ 日本語もこうやって指定すればOK。
言語コードは以下にありますよ。
» Translation API のクラス リファレンス – Google AJAX Language API – Google Code
他にも株価を表示したり、といった機能もありますね。ついつい慣れでExcelの方を起動しちゃいますが、Google Docsも使い込んでみますかね。そのほかの便利関数は以下からどうぞ。
» 10 Useful Google Spreadsheet Formulas You Must Know – woorkup.com
木曜日, 2月 25, 2010
オブジェクトをさまざまな方向に回転させるスクリプト
オブジェクトをパスに沿って、さまざまな方向に回転させることができるスクリプトをFredHQから紹介します。
Roundabout ShapesはjQueryのプラグインのため、実装にはjquery.jsが必要です。
CSS3対応ブラウザだとより美しいドロップダウン型のナビゲーション
上記のキャプチャはCSS3対応ブラウザ（Chrome）のもので、非対応ブラウザでも下記のように正常に動作します。
CSS3非対応ブラウザ（IE7）でのキャプチャ
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
はじめに
「数学は美です。」
数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。
数学ははるか昔から今日まで芸術や建築のデザインに利用されてきました。しかし、ウェブデザインではあまり利用されていませんでした。数学はクリエイティブなデザインを生産するツールです。これはすべてのデザインを数学に頼るものではなく、数学を友人としてみなすべきであるということです。
ここで紹介する数学的な要素は、すぐに実践できるようにすべてPSDファイルとしてダウンロードすることができます。
※PSDファイルは元記事にてダウンロード可です。
1. 黄金比（黄金四角形）
黄金比とは「1:1.618」からなる比率で、最も美しい比率と呼ばれています。そして、その比率をもった長方形を「黄金四角形」とよび、同じく「1:1.618」の比率を持っています。
その黄金四角形を使用したミニマリストのデザイン例をみてみます。
一列につき三つ、計六つの四角形が配置されており、サイズは299×185となっています。このサイズは299/185=1.616となり、黄金四角形が利用されています。それぞれの黄金四角形は充分なホワイトスペースが確保されており、これがサイトの雰囲気を演出していることに気が付いてください。レイアウト自体にはほとんどカラーが使用されておらず、そしてすべての要素が同じように配置されているだけですが、ナビゲーションの箇所は明白です。
適用例
黄金四角形は写真ギャラリーや作品集などプロダクト指向のウェブサイトによくマッチします。そして、黄金四角形を利用する場合は、グリッドや配置、近接、強調を使用することで更に有効に利用することができます。
2. フィボナッチ数列
フィボナッチ数列とは二つの数字0と1から始まる数列で、一つ前の数を次々に加算した数列です。フィボナッチ数列のシーケンスがより高くなると黄金比に近くなり、お互いに関連しています。
この数値を四角形の辺に割り当て、対角線を結んだ曲線が「黄金螺旋」と呼ばれています。生成された長方形は黄金比をもったものとなっています。
フィボナッチ数列をウェブデザインに取り入れる簡単な方法はレイアウトのベース幅に適用することです。下記にその例をみてみます。
レイアウトは3カラムあり、それぞれの縦列がフィボナッチ数列に対応しています。
ベースを90pxとし、最初のカラムは180px（90×2）、二番目のカラムは270px（90×3）、最後のカラムは720px（90×8）の幅を設定しています。また、フォントのサイズもフィボナッチ数列に対応しており、タイトルは55px、見出しは34px、本文は21pxで設定しています。
フィボナッチ数列を使用する際、ある特定の固定された幅のレイアウトでは注意が必要です。例えばページ幅を1,000pxとした場合、フィボナッチ数列を使用することが難しくなります。
ウェブのレイアウトにフィボナッチ数列を使用した理想的な数値には610px, 987px, 1,597pxがあり、これらの数値からおよその値を選択することになるでしょう。
適用例
フィボナッチ数列は雑誌風のレイアウトやブログなどによくマッチします。フィボナッチ数列を利用する場合は、クリエイティブを忘れないでください。さもなければデザインが単に厳格なだけになってしまい、ナビゲートすることが難しいものになってしまいます。
3. ファイブエレメンツ
ファイブエレメンツはインドの星占い「Kundli」からきたもので、正方形に対角線を二つ描き、各辺の中心を結んだものです。
下記の例は、Kundliの幾何学的なレイアウトに基づいたものです。
各エレメントをクリックすることで、それについてのインフォメーションを表示します。jQueryを使用してアニメーションで表示したり、ツールチップを使っても面白いでしょう。
ファイブエレメンツのレイアウトは複雑なものではありません。
単純な3カラムのレイアウトをベースに、ヘッダとフッタが配置されているだけです。
適用例
ファイブエレメンツはプロダクトインフォメーションやポートフォリオなどによくマッチします。そしてJavaScriptのアニメーションなどで更にスパイスを効かせることができます。
4. サインウェーブ
サインウェーブは別名sinusoidと呼ばれるもので、滑らかで反復的な振動のように波状にあらわれます。
このシンプルな波状のパターンを利用して、ページのレイアウトを作ってみます。もちろん、ウェブだけでなくグラフィックスやインフォグラフィックスなど他のデザインにも同じアプローチを使用できます。
レイアウトはヘッダとフッタ、そして五つのカラムから成っており、非常にシンプルです。jQueryを使用して、インタラクティブなコンテンツにすることもできます。
適用例
サインウェーブは水平方向のナビゲーションを活かしたレイアウトやイベントの予定表などによくマッチします。各カラムをユーザーのフォーカスに合わせてハイライトするなどインタラクティブなものにしてもよいでしょう。
火曜日, 2月 23, 2010
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」
Uniform - Sexy forms with jQuery
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」というのが公開されています。
これを使うと次のようなカッコいいフォームが簡単に作れるみたいです。
初期化が、uniform() メソッドを呼び出すだけで超簡単です。
$("select, input:checkbox, input:radio, input:file").uniform();
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」というのが公開されています。
これを使うと次のようなカッコいいフォームが簡単に作れるみたいです。
初期化が、uniform() メソッドを呼び出すだけで超簡単です。
$("select, input:checkbox, input:radio, input:file").uniform();
商用利用でも無料、シンプルでクリーンなデザインのテンプレートファイル一式 -Classic Luxury
ポートフォリオや写真ギャラリーサイトに最適な、シンプルでクリーンなデザインのCSSベースの無料のテンプレートファイル一式をSix Revisionsから紹介します。
土曜日, 2月 20, 2010
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。
10 Usability Crimes You Really Shouldn't Commit
下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。
- はじめに
- 1. ラベルがないフォーム
- 2. トップページにリンクしないロゴ
- 3. 訪問済みリンクの指定がない
- 4. アクティブなフィールドが明示されない
- 5. altの記述がない画像
- 6. 背景色がない背景画像
- 7. 長い長いテキスト
- 8. 下線付きだがリンクではない
- 9. ココをクリック
- 10. 均等割付「justified」の使用
はじめに
ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。
あなたのウェブサイトのユーザビリティを拡張する手助けになるよう、解決方法も提供します。
1. ラベルがないフォーム
フォームでインプットフィールドを使用する際、ラジオボタンやチェックボックスとそれに対応するテキストはそれぞれlabelで関連づけを行い、クリックのエリアをより大きくすることは重要です。
2. トップページにリンクしないロゴ
ウェブサイトのロゴにトップページへのリンクを設置することは一般的な慣習とされています。また配置は一般的には、上部の左です。
3. 訪問済みリンクの指定がない
しばしば見落とされがちですが、ユーザーにリングが既にクリック済みであるということをビジュアルで明示します。
4. アクティブなフィールドが明示されない
フォームを入力する際、ユーザーが利用しやすいようにアクティブなフィールドをビジュアルで明示します。これは境界線をハイライトにしたり、背景の色を変更するといった微妙な変化が好まれています。
5. altの記述がない画像
これは重要なポイントです。画像には記述的なテキストをaltにいれるようにします。画像をリンクとして使用する際には、リンクがどこに遷移するかについての記述をいれてください。
6. 背景色がない背景画像
透過のテキスト画像を使用することは一般的です。しかし背景の色に頼ってしまい色が変更になった際に読めなくなることは避けてください。
7. 長い長いテキスト
絶え間なく長いテキストはユーザーにとって不快でしかありません。それを走査して、読み、理解することが容易にできるようにするために明確なセクションに分け、見出しを設置してコンテンツを分断させてください。
8. 下線付きだがリンクではない
多くのユーザーはテキストに下線が引かれていたり、色が異なったいるものはリンクである可能性が高いことを知っています。そのため、一部のテキストを強調するために同じような装飾を使用するとユーザーは混乱してしまいます。その際はstrongやemを使用して強調してください。
9. ココをクリック
リンクの文言に「ココをクリック」を使用する事はインターネットの当初から存在していました。この文言はユーザーに何が起きようとしているか見つけ出すためにセンテンスの全体を把握することを要求するものです。その代わりに、リンクのテキストは次に何が起こるかを明示する記述にしてください。
10. 均等割付「justified」の使用
この問題はもう少し深くアクセシビリティを目指している人のための重要なポイントです。テキストに「justified」を指定すると見た目は両端が揃ってきれいに見えるかもしれません。しかし、難読症のユーザーがパラグラフの正当ではない間隔でワードを識別するため、若干の真のリーダビリティ問題を生じることがあります。
登録:
投稿 (Atom)