シリコンバレーで聞いたデザインが美しいWebサービス／アプリ15選 - パパパパ
このブログは、僕がこれまでWebサービスをいくつか作ってきて、失敗したり成功したり色々体験していることをまとめています。 シリコンバレーに来て45日が経ちました。今日はいつもと趣向を変えて、こちらで聞いた、デザインやUI/UXが美しいWebサービスやアプリの一部を紹介してみたいと思います。 Chill http://chill.com/ デザインのイケてるサービスを聞くと、かなりの確率でこのサービスの名前が挙がりました。動画の上に投稿者のプロフィール画像が円形に表示されているのが素敵です。詳細ページの「Thoughts?」ボタンの動きが秀逸。色々参考になるサイトだと思います。 ChillのようにPinterest風デザインは、今まさにトレンドのようで、教えてもらったサイトの中でも本家に負けず劣らずのデザイン性を持ったサービスも多いです。女性ウケが良いことと、画像をファーストビューでたくさん
Googleが目指す最高の検索UI
数ヶ月前にウディ・マンバーがサーチクオリティグループの存在を紹介し、この連載でも前に文書のランキングについて触れました。ウェブ文書のランキングはグーグル検索の品質の要ですが、皆さんの行っている検索はそれよりもっと多くのものから成り立っています。今回は、グーグル検索の発展を支えている理念とその実例について述べようと思います。また、グーグルがいかに徹底した実験を通して確実に機能を向上させているかについても述べるつもりです。次回は、現在行っている実験のいくつかを紹介する予定です。 まずは自己紹介から始めましょう。私の名前はベン・ゴメス。1999 年からグーグルで主に検索品質を中心に検索にたずさわってきました。ロボットによるページの収集からランキングまで検索エンジンのほとんどに貢献するという幸運に恵まれ、現在は検索インターフェースと検索機能の技術責任者として働いています。 グーグルの検索ユーザーイ
Webデザイン劇的ビフォーアフター09年春版 (1/4)
この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま
「タッチスクリーン上に物理ボタンを出現・格納」新技術(動画) | WIRED VISION
前の記事 「最古の彫刻」：7万年前の抽象芸術と3万年前のビーナス像 電気自動車のバッテリー自動交換ステーション、横浜で公開(動画) 次の記事 「タッチスクリーン上に物理ボタンを出現・格納」新技術(動画) 2009年5月14日 Priya Ganapati さまざまなボタンを提供できるATMの試作品。Photo:Chris Harrison 『BlackBerry』ユーザーと『iPhone』ユーザーは、どちらの入力システムが優れているかという、きりのない議論を続けたがるが、新しいディスプレーによって、両者の橋渡しがされるかもしれない。タッチスクリーン技術に物理ボタンを組み合わせ、アプリケーションに応じてボタンを出現させたり消したりできる試作品が登場したのだ。 カーネギー・メロン大学の博士課程の学生2人が開発したこのディスプレーには、3つの機能が備わっている。まず、ポップアップ式の物理的なボタ
[JS]指定した要素のみをマスクして目立たせるスクリプト -jquery.expose
demo: video こういったユーザーに少しでも集中してほしいコンテンツには、効果が高そうです。 使用方法も簡単で、JSファイルを外部ファイルで指定し、スクリプトで適用箇所とカラーと不透明度を指定します。 最小の記述だと、下記のようになります。
さらに分かっておきたいトランジスタの種類 − ＠IT MONOist
組み込みソフトウェア／ハードウェア開発における技術力の向上、改善・最適化などを幅広く支援する“組み込み開発エキスパート”のための情報フォーラム
【連載】セカイ系ウェブツール考 (63) 見た目が大事! Webサービスの「インタフェース」設計に使えるもの | ネット | マイコミジャーナル
今回のテーマは「インタフェース」 WebサービスやWebアプリケーションを提供する際、そのサービスが成功するか否かは"ユーザインタフェース"が握っている。もちろんシステム面も重要ではあるが、それを利用するユーザにとっては内部的なものよりも、まずは見た目の印象に強く左右される。 最近ではCSSのテンプレート、各種CMS向けのテーマ集やアイコン集など、Webサイトを彩る要素を提供するサービスが数多くある。それらを組み合わせたり、自分のWebサービス向けにカスタマイズしたりすることで見栄えは相当良くなるだろう。 そして今回はそのようなインタフェースに関わる部分をオンラインで設計できるWebアプリケーションやオープンソース・ソフトウェア(OSS)をご紹介したい。HTMLをコーディングするだけでは難しい魅力的なインタフェースを作り上げるのに便利な情報がそろっているはずだ。 今回紹介するOSS・Web
新iPod shuffleのボタン操作はまるでモールス信号のトンツーだ
ヘッドフォン業界をシャッフル～と巷で話題の新iPod shuffle。これはボタン操作コマンドの一覧です。 ［iPod shuffleの豪華操作コマンド］ 再生： 真ん中のボタンを1回クリック ／緑が1回光る 一時停止： 真ん中のボタンを1回クリック ／緑が30秒間光る 早送り： 真ん中のボタンをダブルクリックしてホールド（長押し） ／緑が1回光る 巻戻し： 真ん中のボタンをトリプルクリックしてホールド ／緑が1回光る 音量変更： ボリュームアップ｢ ｣、ボリュームダウン｢-｣をクリックして調整 クリック＋ホールドすると速くできる ／ボリュームアップは緑が光る ボリューム上下いっぱいになるとオレンジが3回光る 曲名・アーティスト名を聞く： 真ん中のボタンをクリックしてホールド ／緑が1回光る 次の曲（オーディオ書籍は次章）に行く： 真ん中のボタンをダブルクリック ／緑が1回光る 前の曲（オ
ウェブサイトにとって重要なユーザビリティの7つのクイックチェック
Quick Usability Checklist 下記は、その意訳です。 はじめに 下記の全ての項目が、すべてのサイトに当てはまるわけではありません。これらは、あなたのサイトの方向性を示唆するものです。 1. Site ID サイトはIDは非常に重要な要素で、ページ上部の左やナビゲーションの側によく配置されているサイト名やロゴのことです。 サイトIDには、トップへのリンクを設けるか、ナビゲーションにトップのリンクを設置する必要があります。 2. Page Name ページの名前は、サイトIDと同様にユーザーに明確に伝える必要があります。 ビジュアル的にページの名前であると分かるように目立たせるべきです。 また、ユーザーがそのページに到着するためにクリックしたテキストと一致している必要もあります。リンク元とリンク先が同じ内容のものであれば、ユーザーは混乱することがなくなります。 3. Na
ドラッグで並べ替え可能なグリッドを実現する「draggable_grid.js」を作りました - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 本日は、久しぶりに JavaScript のライブラリを公開します。よく、画像ギャラリー等でマウスのドラッグ＆ドロップで画像の並べ替えができるものがありますが、そんな UI を簡単に実現できるものを作ってみました。以前に公開してご好評をいただいた DragResize.js のノウハウを引き継いでおり、以下の特徴があります。 JavaScript の呼び出しひとつ
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」:phpspot開発日誌
テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 2009年03月10日- jQuery plugin: ‘autoResize’ - James Padolsey テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 改行を入れると、textareaが自動でズイズイとアニメーションで伸張します。 「textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ 」というのがありましたがアニメーションできる＆jQueryプラグイン＆オプション指定可能という点があります。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 設置サンプル 設置のサンプルです。 設置のサンプルです。 設置のサンプルです。 以下のようなオプションが指定出来ます。 ・onResize でコールバック関数を指定 ・animate
PCではTwitterはTumblrから見るのが最高のインターフェイス
トップ > tumblrtwitter,ツイッター > PCではTwitterはTumblrから見るのが最高のインターフェイス いしたにまさきの新刊：HONDA、もうひとつのテクノロジー ～インターナビ×ビッグデータ×IoT×震災～ 01 それはメッカコンパスから始まった｜Ｈｏｎｄａ、もうひとつのテクノロジー 02 ～インターナビ×GPS×ラウンドアバウト～ 運転する人をサポートすること｜Ｈｏｎｄａ、もうひとつのテクノロジー 03 ～インターナビ×災害情報×グッドデザイン大賞～ 通行実績情報マップがライフラインになった日 2009.02.26 私的にはもうすっかり安定運用に入っているtumblrのtwitter連携。日々楽しく使っています。 tumblrユーザーでtwitterカウントを設定している人は以下のページで確認できますね。 リンク: Twitter | Tumblr. 通常のda
最近のAR事情 - 強火で進め
最近、「新しい技術」タグを付けるような内容のエントリー書いてないなぁ。と言うのと以前、twitterでセカイカメラの話があったときに「こんなのもあるよ」とつぶやいたら意外と「反響があった＆結構みんな知らなかった」という状況だったのでSREngineなどを中心にAR関連のこと書いときます。 SREngineとはこちらのサイトのSeinさんという方が作られている「シーン(景色や風景)を識別するソフトウェアエンジン」です。 とりあえずムービーを見てもらったらすぐにこの凄さが分かると思います。 識別した情報を元にセカイカメラの様なことや 現実の撮影データの上にお店の評価やカーナビの様な情報も表示できるみたいです。これは実際に使ってみたい!! Sein blog: 【拡張現実AR】SREngine for iPhoneプロトタイプの動画 http://semanticlog.blogspot.com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
検索オプションがいろいろわかりやすい『guiGoog』 | 100SHIKI
[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート
スムーズなスライドショーを実現するスクリプト: Recently Ajax
[CSS]リンクの情報をサポートするスタイルシートのテクニック集
http://www.designwalker.com/2009/03/form-design-2.html
iPhoneサイト作成用プラグイン - Hello, world! - s21g