UIから「白」が消える日｜ritar
これは designing plus nine Advent Calendar 19日目の記事です。 こんにちは。ritarと申します。 今年の10月頃、YouTubeに大きいデザイン変更がありました。 アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。 アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。 これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。 これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん「無色透明」になっていくと考えます。これは「技術が生活に浸透することによってUIは存在感を減らし
High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ | warikiru
2009-11-24 High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ ラベル: performance CSS Nite in ISHIKAWAで話をしてから1ヶ月経ったので、薄れゆく記憶の復習も兼ねて思いの丈を綴ってみたｗ High Performance Web Design 1. What's High Performance?ここでいうパフォーマンスというのはWebサイトの表示高速化についてです。つまり、ページをいかに早く表示させるかという課題です。でも、そうゆうのってサーバー側の問題でしょ？システムエンジニアの管轄じゃないの？と思われがちですが「ハイパフォーマンスWebサイト」の著者であるSteve Soudersの調査によると、80:20。一般的にユーザーの待ち時間の実に80%がブラウザ側、フロントエンドで費やされて
これはもう使用しない方がいいウェブデザインのトレンド
昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。
Googleのトップページを開くと毎秒100回JavaScriptが実行されるよ - 射撃しつつ前転 改
FirefoxがCPUを常に15%ぐらい食うのが気になっていたので調べてみたら、Googleのトップページを開くとものすごい勢いでJavaScriptが実行されることがわかった。具体的には、var k=t.value;k!=h&&X(0);h=k というコードが毎秒100回実行されている。このせいで、自分の使っているPCだと、Googleのトップページを開くだけでCPU使用率が2%ぐらい上がっているようだ。Firefox特有の問題というよりは、ウェブページ側の作り方に依るものみたいだ。たぶん他のブラウザでも問題は変わらないだろう。 Googleのトップページの場合、コードを調べてみた限りでは、原因はどうも検索候補の自動補完用のコードみたいだ。現在の入力文字列が過去の記録と違ったら補完の提示をやり直す、みたいなことをやっているように見える。 HTMLではテキストボックス内のテキストが変更され
asahi.com（朝日新聞社）：レクサス時速１９０キロ「アクセルが…」 通報直後衝突 - ビジネス・経済 （1/2ページ）
時速２００キロ近い猛スピードで疾走する高級車から届いた悲痛な叫びが、運転席のフロアマットに潜む危険性を白日の下にさらけ出した。トヨタ自動車は、マットがずれてアクセルが戻らなくなる恐れから、同社にとって過去最大のリコール（回収、無償修理）を米国で実施する見通しとなった。同様の問題は日本でも、どんな車でも起こる可能性はある。 通信指令係「こちら緊急電話番号。どうしましたか」 通報者「アクセルが動かない。トラブルが発生した。ブレーキも利かない」 通信指令係「分かりました。車を止めることができないんですね」 通報者「交差点が迫っている。交差点が迫っている。つかまって。祈って……」 通信のやりとりを詳報した米ＡＢＣニュースなどによると、緊急通報があったのは８月２８日。米カリフォルニア州サンディエゴ郊外を走行中のトヨタの高級車「レクサスＥＳ３５０」からだった。 運転者は州警察の高速隊員で、
Latest topics > ブラウザのタブの改革 - Firefox.nextへの道：タブをより良くする。 - outsider reflex
Latest topics > ブラウザのタブの改革 - Firefox.nextへの道：タブをより良くする。 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 巻き戻し/早送りボタンが26日以降クラッシュする件 Main ツリー型タブでブックマークにツリー構造を保存できるようにしてみた » ブラウザのタブの改革 - Firefox.nextへの道：タブをより良くする。 - Jul 30, 2009 Mozilla Corporationの中の人であるAlexander Limi氏が次世代のFirefoxのタブインターフェースをどのように改善するかについての議論の叩き台となるエントリを6月に公開されている。その中にツリー型タブへの言及もあった。だか
「次（Next）」と「前（Previous）」というナビゲーションには何かスッキリしないものがある - モジログ
ウェブサイトで連続的な複数のページがある場合、そのナビゲーションには 「次（Next）」 と 「前（Previous）」 が使われることが多いが、これにはいつも、何かスッキリしないものを感じている。 ブログに代表されるように、たいていの場合は「日時の降順」、つまり「新しい順」に並んでいることが多い。それを考えれば、 「次（Next）」 ＝ もっと古いもの（過去） 「前（Previous）」 ＝ もっと新しいもの（未来） となるのは明らかではある。 しかし、ウェブやブログを前提としない、普通の「時間感覚」でいえば、前方に未来があり、後方に過去があるので（注）、 「次（Next）」 ＝ 未来（もっと新しいもの） 「前（Previous）」 ＝ 過去（もっと古いもの） という連想も働かないわけではない。 つまり、まったく反対の意味が、オーバーラップして重なってしまうわけだ。 ここでは、意味やラベ
長文をWEBに載せるなら、ページを分割して見出しを明確にしよう。 - てきとーに、てきとーに。
どうしてブラウザで長文が読めないのか 今回はスクロールという機能に限定して、考えてみましょう。 とあるので、ある程度限定的な話になっていくのは仕方がないんですが、 頭でっかちな考え方になっていて、正直的外れな話になっているように感じられます。 まあ上記の出発点が、僕からすると違和感があるのですが WEBデザインをやってる人間としては非常に納得いかないので、反論してみます。 なお、青空文庫のような小説に限定するのではなく、 WEBでのテキスト一般（WEB用に書かれたもの）について述べます。 そもそも普通のHPのコンテンツと、例に挙げてるような青空文庫の「小説」は、 コンテンツとして性質がまったく別モノなので、同一に語れません。 （というか青空文庫の小説は、当然のことながらWEBで読まれることを前提として書かれていません） まあ百歩譲って「とにかくWEBでは長文が読みづらい」っていうんなら、
変わりゆく「保存」の存在
アプリケーションに必ずあるコマンドのひとつに「保存」があります。このメタファーとしてフロッピーディスクが長く採用されています。採用された当時は「フロッピーディスクのアイコンがあるから何かを記録するものだろう。よってこれは保存するという意味だ」と関連づけすることが出来たと思いますが今はその逆で「保存をするには、このアイコンをクリック」という認識になっているかと思います。 フロッピーディスクが姿を消してしばらく経ち、知らない人も多いのにも関わらず、このメタファが使われ続けられているのも、ひとつの理由として、アイコンが意味を示すものではなく、意味を示すためのアイコンになり、広く認知されているからかもしれません。Office 2007やGoogle Docsのような比較的新しいアプリケーションでもフロッピーディスクでも採用されているのも、そのひとつの表れでしょう。 Apple製のアプリケーションだ
もしも、あの会社が駅の券売機を作ったら
任天堂出発地と到着地をなぞると切符が買えるソニーCPUから開発した超高性能マシンが出来上がる(ただし、切符が割高になる)マイクロソフト出発地を入力し、到着地を入力し、出発時刻を入力し、到着予定時刻を入力し、経路を選択し、電車のグレードを入力すると買えるアップル画面内で到着地しか入力出来ないがなんとかなるグーグル「○○から××」と入力すると地図と経路付きで購入する切符の候補を表示するスクエニ指定されたミッションをすべてクリアすると購入できる(途中の駅ですべて昇降するとボーナスがつく)ハドソンマイクで叫ぶカプコン迫りくる凶暴な駅員を跳ね除けた先に切符が置いてあるナムコ切符を購入した後、追加で切符にいろいろなデコレーションを施すことが出来る(有料)コナミ隠しコマンドを入力することで切符を無料にできるコーエー各駅の駅員のステータスを把握して、戦略を練ることでもっとも安い切符を購入することが出来るオ
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
matarillo.com: UIパターン
UIパターン 追記 この記事の一部を加筆・修正したものを「開発者が知っておくべき、6つのUIアーキテクチャ・パターン」として@ITに転載しています。 MVVMを追加した上で、アプリケーションモデルとMVVMをプレゼンテーションモデルのバリエーションとして位置づけました。 MVPの2つのスタイルとして、監視コントローラとパッシブ・ビューを説明しました。 まえがき Martin Fowlerの"GUI Architectures"を訳したので公開しようと思ったのだが、FAQページに「EAA developmentとかDSLなんかは商業出版するんで例外ってことで」と書いてある。面倒だったので翻訳の公開はやめて、「自分の理解を書く」というスタイルにしようと思う。 Fowler氏が説明しているのは 「フォームとコントロール」、「モデルビューコントローラー (MVC)」、「プレゼンテーションモデル」、
サイトの横幅に「最適サイズ」はない：ekken
まなめさんが書いたサイトデザインの話なんだけど。 304 Not Modified: ウェブサイトの横幅最適サイズはいくつ？ はてなブックマークのコメントで「まなめさんのブログの幅は狭すぎる！」と言ったところ、ご当人のブクマコメでこんな回答がありました。 2008年01月05日 maname ↓一行の文字数をこれ以上増やすとバランス取れないんですよ。かと言って３列は好きじゃないのでこの幅になってしまいました。 なるほど、まなめさんは自分が表示している自分のブログの文字数が、デザイン的に最適なバランスと考えているのでしょう。 だけど僕は思うのだけど、まなめさんが考える「バランスの取れている一行の文字数」というのは、いったい何文字なのか？ 僕が見ている環境で普通に表示させた、まなめさんのブログ・304 Not Modifiedはこんな感じ。 一行あたり35文字前後（プロポーショナルフォントなの
‘web屋が主張する「リキッドレイアウト」に騙されないために’に騙されないために：ekken
ウェブサイトのデザインに関する話で、固定幅派と可変幅派の意見対立は珍しくも無いのだけど、これはちょっと酷かったなー。 web屋が主張する「リキッドレイアウト」に騙されないために 私自身は今現在、最小・最大幅設定の可変幅を採用しているわけなんだけど、別に「固定幅憎しッ！ セーバイしてくれるッ！」とか思っているわけじゃなくて、まぁ読みやすければ良いんじゃないのよ、などと言いながらハナクソをホジホジしている「どっちでもよかんべ派」 そのどっちでもよかんべの私が可変幅を採用しているのは、自分が読みにくいと思う他人のウェブサイトを閲覧する際に、文字サイズや表示領域を変更することが多いから。 表示領域を変更しているくせに、その最大・最小幅を限定しているのは、そのサイズより大きい・小さいと、なまら読みにくいべや、などと思っているからなのです。あ、今ちょっとだけ北海道弁が出てきたけど気にすんな。 で、安眠
Expired
Expired：掲載期限切れです この記事は，ロイター・ジャパンとの契約の掲載期限（30日間）を過ぎましたので本サーバから削除しました。 このページは20秒後にNews トップページに自動的に切り替わります。
はてブ追加時の「コメント」ボタンが紛らわしい問題 - 聴く耳を持たない(片方しか)
昨日から続いて、今日はデザイン面でのはてなブックマーク改善案……というわけでもないのですけれども、ちょっと気になった点。 - ところてん - アットウィキ 出っ張ってる印象を与えるオブジェクトはボタンに見える。 で、ついクリックしてしまう。 http://www16.atwiki.jp/tokoroten/pages/1015.html こちらで指摘されていますが、新しいはてなブックマークのBookmarkletのデザイン*1で、誤操作が多いようですね。 例えば私のTwitterのタイムラインでも、そうした話題が結構聞かれてます、 はてブ２のブックマーク追加ページ、「追加する」ボタンじゃなくて、コメント欄左のコメント部分をつい押してしまう。なんかボタンぽいデザインなのでつい・・・・・・。 リニューアルしたはてブの、ブクマを追加するときのコメント & タグ入力画面、「タイトル」と「コメント」
「分からない」という言葉を無視してはいけない - 最終防衛ライン3
最初にまとめてみた 森公美子に見るムラ社会とガラパゴスケータイ - 狐の王国 森公美子オフィシャルブログ の10月27日に掲載された iPhone を買ったが操作が分からないという日記にツッコミを入れた記事。該当の日記における森公美子さんの「分からないことがあったら、自分で調べずに人に聞く」という教えて君体質は僕も辟易してますし、買う前に良く調べもせずに物を買ってクーリングオフといっている点は僕もおかしいと思いますが、客の「分からない」という言葉は無視したらいけないと思うんだ。 森公美子さんの日記を見るに、iPod や docomo の携帯電話はそれなりに使えている模様。恐らく、使える機能は電話とメールと簡単なインターネットくらいか。iPhone を買ったのは音楽・動画再生と携帯電話のブラウザが使いにくいからので一本化しようとし、その選択肢として革新的だといわれている iPhone にしよ
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
http://tapfancy.com/