imgのwidthとheightはいるのか | Takazudo Clipping*
共通部分のimgにはwidthとheightは(X)HTMLで指定しないようにしたほうがいいんではないか。 img要素にwidthとheightを指定するのはかなり当たり前かのようにされてるけど、widthとheightをつけるのはめんどいし、(X)HTMLの仕様書でも#IMPLIED（必須じゃない）になってる。 ではなぜwidthとheightを指定するのかというと、ブラウザが(X)HTMLを読んでいる途中でも、imgにwidthとheightが指定されていれば、そのimgの高さや幅ぶんのスペースをとってくれるため、描画がスムーズになる。 例えばくそ長いページで途中に画像がぼんぼんあって、そいつらにwidthとheightが指定されてなかったら、よーしスクロールして読むぞーとしたの方に行こうと思いきや、まだロードされてなかった画像が順々にロードされていき、あららららと今読んでいたテキ
顧客を逃してしまう、Eコマースサイトの15のポイント
Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい（提供されていない）。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる（分かりにくい）。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立
実用的なユーザビリティの10のポイント：ケーススタディ編
先日紹介した「実用的なユーザビリティの10のポイント」の中から、コンテンツやフォームやタイポグラフィなどの制作に役立つ実用的なケーススタディを紹介します。 10 Useful Usability Findings and Guidelines 以下の意訳は英語圏内のため、特にタイポグラフィなど日本語ではなく英語を想定したデータのためご注意ください。 タイポグラフィ 行間 ÷ フォントのサイズ = 1.48 ウェブサイトの英語フォントでは、一般的に「1.48」が読みやすいです。 クラシックなタイポグラフィの本では一般的に「1.5」が推奨されています。 行幅 ÷ 行間 = 27.8 一つのパラグラフの幅は平均538.64ピクセルです。 多くのウェブサイトのフォントサイズが12, 13ピクセルであることを考えるとかなり長いものとなっています。 パラグラフ間のスペース ÷ 行間 = 0.754 一
実用的なユーザビリティの10のポイント：ガイドライン編 | コリス
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？ 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
Snow Leopardを通して考える「これからのOS」（前編）
Macの最新OS「Mac OS X v10.6“Snow Leopard”」がいよいよ明日、8月28日から発売される。今回、幸運にも先行して同OSを試すことができた。Snow Leopardの新機能については、すでにアップルの公式ページに詳しく紹介されているうえに、おそらく今夜、日付が変わるあたりから各所で詳細なレビュー記事が掲載され始めるだろう。実際、筆者もすでにもう少し技術的に詳しく踏み込んだ記事を書いている。 だがここでは、数年に1度のビックイベントを前に、今回Snow Leopardを通して感じた「OSアップグレード」が持つ意味合いというものを、改めて考え直す機会を提供させてほしい。 Leopardを読み解く2つのキーワード、「洗練」と「発展」 いまさらパソコンのOSが新しくなったからといって、本当にそんなことがニュースなのだろうか？ OSなんてアップグレードしなくても、日常業務に
パスワードは隠すべきか？ | Accessible & Usable
公開日 : 2009年7月26日 (2024年3月23日 更新) カテゴリー : ユーザビリティ ウェブユーザビリティの第一人者である Jacob Nielsen (ヤコブ・ニールセン) 氏が、自身のブログ記事「Alertbox」の中で、「Stop Password Masking」という興味深い問題提起をしています。通常、ウェブサイトなどでパスワードを入力すると、画面には入力された文字列が表示されず、代わりに文字の数だけ「黒い点」が表示されます。こうした状況は、「フィードバックをユーザーに提供し、システムの状態を視覚化する」という基本的なユーザビリティ原則に反している、というのです。 さらにニールセン氏は、パスワードを隠すユーザーインターフェース (UI) について、以下のように否定的な見解を述べています。 画面上でパスワード表示を隠したところで、本当にスキルのある輩は、入力しているユー
CSS Nite in Ginza, Vol.37：フォローアップ｜CSS Nite公式サイト
CSS Nite in Ginza, Vol.37：フォローアップ 記事公開日：2009年7月25日（土） 2009年7月16日（木）、アップルストア銀座にて開催したCSS Nite in Ginza, Vol.37のフォローアップとして、安西 敬介さん（オムニチュア）のセッション『評価型解析からアクション指向型解析へ』のスライドと音声をシェアします。 スライド（PDF、59ページ、4.5MB） 音声（MP3、43:20、19.8MB） ベストセッション20192019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。 2010年から2019年のベスト・セッションCSS Niteベスト・セッション2019CSS Niteベスト・セッション2018CSS Niteベスト・セッション2017CSS Niteベスト・
入力フォームの美学と現実
よくECでは、「かご落ち」という言葉がある。 一般的に言われるのは、買い物かごに入れてから実際に、商品が購入されるまでの間に、ユーザーが買い物を諦める数のことらしい。 その理由の筆頭にあげられるのは、大体、入力フォームの善し悪しと言われている。 入力フォームがわかりにくい、とか、余計な情報が載っている、などの理由だ。 それは本当だろうか？ 僕等ネットマニアは、いささかWWWに対して潔癖すぎるところがあって、やれメールが毎日送られてくるのはウザイだとか、アフィリエイトURLはウザイだとか、フォームでいろいろ聞かれるのはウザイ、という自分なりの美学を持っている。 この美学が、入力フォームのわかりにくさ、と言う事例がマッチするので、そのような答えが心地よいというのはあるのは否めないと正直思っている。 ■インセンティブゲーム 入力フォームに情報を入力するのは間違いなく手間だ。 それは間違いない。
サイトのアクセシビリティをチェックする12のツール | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Sean P Aune氏がSitePointにおいて12 Tools To Check Your Site’s Accessibilityのタイトルのもと、Webページのアクセシビリティをチェックするための12のツールを紹介している。紹介されているツールは次のとおり。 ACTF aDesigner (視力障害者向けのアクセシビリティテストツール。Eclipse向けのプラグインで、Windows XPはまたはそれ以降のバージョンのOSで動作) Adobe Dreamweaver CS4 accessibility (Adobe Dreamweaver CS4向けに用意されているアクセシビリティ検証ツール) Contrast Analyser (2色
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
ユーザが大切？ | 経験デザイン研究所
今年の春に「Webゼミを見てくれ。」と言われて、腰掛程度のつもりで引き受けたのですが。そこでビックリしたのが・・・。学生達が皆「ユーザの為に」「ユーザのことを考えて」しか言わないことと、作ったWebが全てステロタイプのつまらないものであったことです。許せ学生達、今の君たちはもう違うからね。 誰にそう習ったのかは知らないが、ユーザの事を言う割には「ユーザのニーズ探索」の手法をまるで知らないのです。ただ自分でユーザを大切に思っているだけ。それってユーザじゃなくて自分だって。（笑） HCD（人間中心設計）プロセスの中には、上図のように各プロセス毎に様々なユーザ調査やユーザ評価の手法があります。なぜこうまでしつこくユーザを調べるのでしょうか？ その答えは簡単、とことん自分の作りたいものを作る時に人間はユーザのことは考えないし、ユーザに聞いたところで新しいアイディアを教えてくれる訳でもありません。
メガメニューはサイトナビゲーションに効果あり
大きな二次元のドロップダウンパネルは、ナビゲーションの選択肢をグループ化することでスクロールの必要性を無くし、タイポグラフィやアイコン、ツールチップを使うことで、ユーザの選択できる内容をわかりやすく提示してくれる。 Mega Menus Work Well for Site Navigation by Jakob Nielsen on March 23, 2009 もうすぐ開催予定のナビゲーションデザインセミナーに向け、我々は様々なナビゲーション機能についてのユーザスタディを実施している。いつものことだが、中にはひどい結果が出てしまった機能もあるし、これまた、いつものことだが、今、流行のようになっている機能（今回の場合はタグクラウド）にはユーザビリティ上の大きな課題が見つかった。 幸いにも、他のウェブトレンドは本質的にユーザビリティに優れており、ユーザの行動やゴールによく合っているというこ
The 5 Layers of Web Accessibility
In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility. Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone. Get more information about the event here: http://skillsm
早起きしてIAについてみんなで勉強してみた その1
おはようございます！新人デザイナーのくにーです。 今回は、毎週木曜の朝に開催される 意匠部 ユーザビリティ勉強会のフィードバックをお届けします。 おやつ（通称マピ）を囲みながら、もっと使いやすい、何度も使いたくなる、 みんなに便利なサービスをデザインすべく、取り組んでます！ 読んでいく本はこちらです。 Webユーザビリティの第一人者「ヤコブ・ニールセン」が書いた、 ユーザビリティ エンジニアリングについての解説書です。 開発しているシステムのユーザーが、どのような仕事にどのように取り組んでいるのか、 実際にどのような状況に直面しているのか、といった単純な調査がユーザビリティエンジニアリングの基本となります。 90年代前半に書かれたとは思えない、現代にも適用できる考え方がまとめられていますよ！ では、意匠部で注目されたポイントと共に まずは第一章～第三章を読んでいきましょう。 【第一章 概論
「本屋で本を買う」行為ひとつとっても、いろんな手順がある
ということで「本屋で本を買う行為」のパーツ化にチャレンジ！ 手ごろなサイズの「行為」だと見越してスタートしてみました。 文脈としては関係するはずの、本を買う前後の部分はひとまずおいておきます。 思っているよりも意外と色んなステップがあった さて、やってみると意外と色々なことをやっているようです。 人それぞれですが、自分はこう見るとなかなか中身を読まないようです。 表紙を見る帯を見るパラパラ眺める著者プロフィールを見る目次をざっと読むあとがきを読むまえがきを読む目次の気になる箇所をパラパラ読むおもしろければもうちょっと読む気になるフレーズがあり、良さそうであれば買う こういった読み方は自分では普通ですが、皆さん、どのように読んでいらっしゃるのでしょうか？ 各ステップをもう少しパーツ化することにした さて、もともと「本屋さんで本を買う行為」というひとまとまりのパッケージですが、各ステップをもう
「プロペパ君」を実際に使ってみて、パーツ化の粒度について考えた
以前につくったプロペパ君という、レイアウトパターン用のパーツを使ってみて考えたことです。 18種類のうちの創造的なはずの細かいパーツ12種類は初心者は使えない 抽象的なほうが、創造的に作れると思っていましたが、パーツの山から全体をイメージできる人は、そもそも、手で描けるでしょう。 ただ、こんな使い方ならＯＫ 答えとなるレイアウトを見ながら作ることによって構造を学ぶ出来上がったものの一部分のパーツを動かし、どう変わるか考える やり過ぎかと思っていた動画再生や地図を表すパーツのほうが意外と使えた 情報としてはある程度パッケージ化されているともいえる「動画再生」「地図」「フローチャート」などのほうが、単体でもそれが何なのかがわかるので使いやすい。 ほかのものは、パーツだけではわからない。文章などは書き込んだりしないとダメかもしれない。 ある意味、パーツの文脈がわかるくらいの粒度じゃないと、初心者
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
An Analysis of the Amazon Shopping Experience
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
