Amazon.co.jp： ユーザ中心ウェブサイト戦略 仮説検証アプローチによるユーザビリティサイエンスの実践
CSS と JavaScript でタブ切り替え
CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに
ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
こんにちは satoです。 いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。 僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。 真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを 教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま
ウェブサイトのデザインプロセスをGIFアニメーションで追ってみる
最初に真っ白なページを作り、そこにシンプルな文字列を配置して、徐々に形を整えていくことによってデザインを作り上げるというプロセスをスクリーンショットで記録してGIFアニメーションにすることでわかりやすくしています。このデザインプロセスのGIFアニメーションの作者によると、この記録のタイミングはHTMLファイルを保存したタイミングで行っていったそうです。こうすることによって過去のどの時点でデザインをどのように変えたのかが自分でわかるようになり、過去の時点に戻って別のデザインに発展させるパターンなども可能になるとのこと。また、記録することによってどういう意図で自分はこの部分のデザインをこのように変更していったのかという記録にもなり、制作の腕が上がるそうです。ちょっとした修行みたいなものですかね？ GIFアニメーションは以下から。 designline-openair.gif (GIF 画像,
会員登録を促すコツ (ユーザビリティ実践メモ)
今回は、オンラインで商品を販売するサイトなどで有用な、「会員登録へスムーズに誘導する」コツを取り上げます。 よく見られる画面は、以下のように会員向けの入り口と分けて会員登録へと誘導するものですが、ここに問題点が潜んでいます。 画面例のように、「非会員の方は会員登録へ」という形で会員登録を強く意識させると、登録を面倒に感じて購入をやめてしまうユーザが出てきます。 商品を届けてもらうためには住所等の連絡先を入力しなければいけないことはユーザも理解しています。しかし、「会員登録」と言われると怯んでしまうようです。 その原因としては、会員登録という言葉から、「購入するための手続きの前に別の（面倒な）作業が発生する」と思い込んでしまうことが大きいと考えられます。 この傾向は、オンライン販売サイトでの買い物経験が浅いユーザに多いようです。 会員登録に対するユーザの精神的な障壁を低める解決策の一つとして
いろいろな用途で使えるミニアイコンあれこれ - GIGAZINE
通常のアイコンよりも小さなサイズの使いやすいミニアイコンを集める必要性に迫られたので、いろいろとリストアップしてみました。 ブログやWiki、通常のサイト作成やFlash、PowerPointのプレゼンテーションやソフトウェアのボタンなどなど、いろいろな場面で役に立つはず。ボタンの画像を違うものにするだけでだけでも、割と雰囲気がガラリと変わるのでオススメです。 リスト一覧は以下の通り。 Mini Pixel Icons（ブログやCMS用のアイコン、ユーザーアイコンなどが多く、とてもカラフル） Mini Icons | urlgreyhot（12ピクセル四方という極めて小さなアイコンがいろいろあります。グレイスケールのアイコンは加工しやすいので、好みのアイコン素材にすることも可能） Bullet Madness - free bullets project at Stylegala（200個
世界のクリエイティブな広告まとめ（続編） - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
CSSの小技集、20個:phpspot開発日誌
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とＣＳＳ RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
ITmedia Biz.ID：もう崩れない、Webブラウザによる表示の違いを吸収するサービスが開始
Mozilla Japan、アルゴ21、三菱総合研究所は、Webブラウザの相互運用性における問題を改善するために「TouchUpWeb システム」を開発、その成果を利用したサービスとして「TouchUpWeb サービス」の提供を開始した。 Mozilla Japan、アルゴ21、三菱総合研究所は9月11日、Webコンテンツの閲覧時に、文書のレイアウトが崩れたり、コンテンツの表現が変わってしまうなど、相互運用性における問題を改善するために「TouchUpWeb システム」を開発、その成果を利用したサービスとして「TouchUpWeb サービス」の提供を開始した。 同システムは、独立行政法人情報処理推進機構（IPA）の「2005年度下期オープンソースソフトウェア活用基盤整備事業」の一環として実施された「Webコンテンツの相互運用性を改善するフィルタリングサーバの開発」プロジェクトにおいて、上述
シンプル検索インターフェース考 | チミンモラスイ？
「GOC Vol.4 「gooが目指す『行動支援検索サービス』へのアプローチ」」2006.8.25 のエントリでも触れましたが、gooが検索に特化したシンプルなインターフェスの「goo検索」の提供を始めました。 「「goo」の検索機能を集約したシンプルな検索用トップページ開設」2006.8.23 @INTERNET Watch 「goo、検索のしやすさを追求したシンプルなページを開設」2006.8.23 @IT Pro 「goo、シンプルなインタフェースの「goo検索」トップページを新設」2006.8.23 @CNET 検索専用のトップページでは「ウェブ」「画像」「辞書」「ブログ」「ニュース」「教えて！goo」「地図」「カテゴリ（登録サイト）」の検索を一元化し、それぞれの検索機能をタブで切り替えられるようになった。また、その時点でgooにより検索されているキーワードのランキングがストリーミ
Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
「メールが送信できました」伝えるのなら、控えめに ― ＠IT
ユーザビリティのヒント（2） 「メールが送信されました」 伝えるのなら、控えめに 「Yahoo!メール vs Gmail」 ソシオメディア 上野 学 2006/7/28 Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。Yahoo!メールとGmail、使いやすいのはどっち？という疑問から使いやすいユーザーインターフェイスを考えてみましょう（編集部） 前回から始まったこの「ユーザビリティのヒント」ですが、今回もいくつかのTipsをご紹介しながら、Webアプリケーションのユーザーインターフェイスやインタラクションデザインについてボトムアップに考えていきたいと思います。 Webアプリケーションによっては、JavaScriptなどを使用して、ウィンドウの開閉、サイズの変更、スクロールバーやボタン類を隠す、アドレスバーやステータスバーを隠す、といったことを行ってい
100％、CSSのみで構成されるメニューの作り方 - GIGAZINE
JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。
リンクサムネイルの作り方 - GIGAZINE
外部サイトへのリンク文字列の上にマウスが来ると、自動的にリンク先のページをサムネイルで表示するという面白いスクリプトです。 例と設置方法は以下から。 例としてはこんな感じです。 http://lab.arc90.com/tools/linkthumb/ コードのダウンロードと使い方などは以下の通り。 arc90 lab : tools : Link Thumbnail http://lab.arc90.com/2006/07/link_thumbnail.php 互換性はInternet Explorer 6.0以上、Mozilla Firefox 1.5以上、Apple Safari 2.0、Opera Version 8.51以上であるそうです。 ちゃんと外部サイトのみ判別し、自サイト内ではいちいちサムネイルを表示しないようにできます。
GIGAZINE - いろいろな効果を追加できるJavaScriptライブラリ「jQuery」
ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。 ダウンロードや実際の例、使い方などの各種取り扱い説明は以下の通り。 jQuery: New Wave Javascript http://jquery.com/ 上記ページの「Run」をクリックするとその機能の一端を垣間見ることができます。面白い効果です。 その他のデモとしてはこんな感じでいろいろなところに使えます。特に一番下の「Example G」のボタンをクリックしてから本文の上にマウスを乗せると色が変わり、フェードしながら元に戻るというのはシンプルながら面白い。 JQuery http://codylindley.com/blogstuff
「Googleニュースを超える」--ニューズウォッチ、フレッシュアイラボを開設 - CNET Japan
ニューズウォッチは6月12日、ニュースサイトやブログで話題のトピックをランキング表示するサービス「フレッシュアイラボ（freshEYE Laboratory）」を開始した。 ニューズウォッチは独自の日本語解析エンジンをもとに、約400のニュースサイトやブログに掲載された記事をトピック別に分けて表示する「フレッシュアイNewsWatch」を提供している。 「ニューズウォッチの言語処理技術を生かしたコンシューマ向けの初のサービスで、Googleニュースに対抗したものだ」（ニューズウォッチ代表取締役社長の金田直之氏）。Googleニュースよりも細かい3800トピックに分けている点が最大の特徴だ。7月末までには巡回サイト数を4000サイト程度にまで伸ばし、Googleニュースを超える存在になることを目指している。ニューズウォッチは2006年4月にヤフーの傘下となり、ヤフーと共同でGoogleに対抗
famfamfam.com: Icons
Need icons for your new website or web application, at the best price there is (free!)? Try one of the following sets:
フォント・フリーフォント情報サイト
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yahoo Developer Network
東京webデザイナー日記: 日経平均銘柄225社サイトの脱テーブル率調査