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%がブラウザ側、フロントエンドで費やされて
サイトの横幅に「最適サイズ」はない：ekken
まなめさんが書いたサイトデザインの話なんだけど。 304 Not Modified: ウェブサイトの横幅最適サイズはいくつ？ はてなブックマークのコメントで「まなめさんのブログの幅は狭すぎる！」と言ったところ、ご当人のブクマコメでこんな回答がありました。 2008年01月05日 maname ↓一行の文字数をこれ以上増やすとバランス取れないんですよ。かと言って３列は好きじゃないのでこの幅になってしまいました。 なるほど、まなめさんは自分が表示している自分のブログの文字数が、デザイン的に最適なバランスと考えているのでしょう。 だけど僕は思うのだけど、まなめさんが考える「バランスの取れている一行の文字数」というのは、いったい何文字なのか？ 僕が見ている環境で普通に表示させた、まなめさんのブログ・304 Not Modifiedはこんな感じ。 一行あたり35文字前後（プロポーショナルフォントなの
‘web屋が主張する「リキッドレイアウト」に騙されないために’に騙されないために：ekken
ウェブサイトのデザインに関する話で、固定幅派と可変幅派の意見対立は珍しくも無いのだけど、これはちょっと酷かったなー。 web屋が主張する「リキッドレイアウト」に騙されないために 私自身は今現在、最小・最大幅設定の可変幅を採用しているわけなんだけど、別に「固定幅憎しッ！ セーバイしてくれるッ！」とか思っているわけじゃなくて、まぁ読みやすければ良いんじゃないのよ、などと言いながらハナクソをホジホジしている「どっちでもよかんべ派」 そのどっちでもよかんべの私が可変幅を採用しているのは、自分が読みにくいと思う他人のウェブサイトを閲覧する際に、文字サイズや表示領域を変更することが多いから。 表示領域を変更しているくせに、その最大・最小幅を限定しているのは、そのサイズより大きい・小さいと、なまら読みにくいべや、などと思っているからなのです。あ、今ちょっとだけ北海道弁が出てきたけど気にすんな。 で、安眠
会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ！
本エントリは、20〜40代のPCをある程度使いこなしているユーザー向けの会員登録フォームの設計について述べたものである。ケータイサイトは含まないし、シニアも対象としていない。シニア向けUIについては(古いエントリだが)こちら "ユーザーID"と"メールアドレス" 減ってはきたものの、ユーザーIDとメールアドレスの両方を取るWebサービスがいまだに結構ある(ex. Remember the milk)。はてなやYahooAuctionのように「ユーザーIDがニックネームに相当するコミュニティサイト」は除くとして、ユーザーIDを一般客に公開しないにも関わらずIDとメルアドの両方を取る意図がわからない。 ユーザーIDとしてメールアドレスを使うメリットは 会員登録フォームの入力必須箇所が1個減る 好みのIDが取れない事件が防げる "ID忘れ"による機会損失/幽霊会員が減る 流石に自分のメアドは忘れ
ブログのサイドバーは要らない - Hatena::agenda
記事本文（いわゆるpermanent link / permalink）に関して、「サイドバー」は100%要らない。要ると思っているのは100%勘違いである。エゴで固執するなら「さいどばー」に相当するリソースへのハイパーリンクを提供すればいい。Web2.0なんだろ? だったらそのリンク先を得意のAjaxとやらで上手に扱えばいいじゃないの。もっともその程度にAjaxなんて全然必要ないけれども、かっこよさげだろう? わらい。 煩悩是道場 - ブログのサイドバーって本当に必要？ 煩悩是道場の中の人は情報の消費者の視点で記事を書かれているが、サイドバーは「ブロガー」として見ても要らないものである。せっかくのPCのマルチタスク機能の利用を妨害してまで横幅を消費する価値が、「さいどばー」にあるのかどうかを考えればわかる。ある記事を参照しながら何かを書くときウィンドウを左右に二つ並べないのは、多くの人に
小粋なデザインパターンが18種類！お役立ち度満点の『Design Patterns』 | P O P * P O P
これは素敵な資料です。 ウェブ上の小粋なインターフェースがFlickr上で集められています。「カレンダー」、「ログイン画面」、「友達を追加」などなど、かなり使える事例が満載です。 「ここのインターフェースはどうしようかな・・・」というときに参考にされてみてはいかがでしょうか。 どういったインターフェースが掲載されているか、以下にいくつか見ていきましょう。 ↑ 「友達を追加」のインターフェース。SNS的要素には必要ですね。 ↑ カレンダーのインターフェースいろいろ。参考になりますね。 ↑ フッターのインターフェース。ユーザーアクションを促すには大事です。 ↑ アップロード系のインターフェース。CGMには必須ですね。 他にも「404ページ」や「タグクラウド」などがありますね。全部で18種類あります。 ご覧になりたい方は以下よりどうそ。 » Collection: Design Patterns
ウェブページを見る目の動きは「F」パターン - GIGAZINE
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
