あなたのサイトの「お問い合わせ」、本当にクリックされていますか？ - Trans
少し前に、僕が制作しているサイトのユーザビリティテストを行いました。その結果、サイト右上に配置している「お問い合わせ」が全くクリックされないことが分かりました。その理由と解決策を考えてみます。 ユーザビリティテストの概要 ユーザビリティテストとは何ぞや？ということは解説しませんが、ざっくりと今回のテストの概要を書き記しておきます。 対象サイト あるシニア向けの地方公共団体 被験者 5名。50代女性2名、30代男性2名、20代男性1名（全員5年以上のインターネット利用歴がある） タスクの概要 団体の活動内容、被験者が登録する手順、連絡先を調べるなど。 お問い合わせがクリックされねえ！ タスクの概要を見てもらえれば分かるように、制作している僕としては連絡先を調べてもらうにあたって、「お問い合わせ」をクリックしてほしかったのです。Webデザインではよく使われている、右上あたりに「お問い合わせ」と
IE7とOperaのzoom機能から考えるWebデザインレイアウト - Trans
IE7とOperaのzoom機能は似ているようで、ちょっとした部分が似ていません。その似ていない部分がこれからのWebデザインを考える上でのキーポイントになりそうな気がします。 IE7とOperaのzoom機能を比較してみる。 まず、IE7とOperaで、どちらもzoom機能を120%に設定し、その上で左サイドバーに「お気に入り」を表示して、それぞれのブラウザで3つのサイトのキャプチャを撮ってみました。（Operaはブックマークなどをサイドバーに表示させる方法が分からなかったので、違うもので横幅だけ代用しました）すいません、簡単にできました。詳細はTrash binさんのところを参考に。 まずは、僕が所属するNPO法人しゃらくのサイト。 IE7 Opera ほとんど一緒ですね。あえて言うなら、IE7には横スクロールバーがブラウザに出ていること。しかし、サイトそのものは画面中央に配置されてお
Re: Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか? - Trans
我的春秋: Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?にコメントしたはずなんですが、反映されたのかどうか分からなかったので、TBでもお伝えしておきます。 自分の無知をさらけ出すのもあまりよい気持ちでもありませんが、やはり気になることであるので。以下、コメントしようとしたこと。 こんにちは、いつも拝見しております。 まだ次世代規格について詳細が決まっていない段階からこういった議論を展開するのも早いような気がしますが、1点気になることがあり、コメントさせてください。 XHTML2やHTML5で、ナビゲーション要素を示すnl、もしくはnav要素が追加されると聞きました。でも、これって、HTML4.01で非推奨になったmenu要素と一体何が違うのでしょうか？ Kurumaさんの見解である「多くの人が使うのもははじめから共有化されたほうがよい」という意見
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
ドメインとハンドルネームの由来を書いてみる。 - Trans
たまには、ほかの人の話題にのってみるのも悪くはないかなと思い、のってみます。 せっかくなので、みなさんのドメイン名の由来をブログしてみませんか。ドメインを持っていない人はアカウント名でも良いですよね。 ドメイン名の由来を書いてみる - 2xup.org 僕もドメインを持っているわけではないので、アカウントと当ブログの「TRANS」という由来を少し。 アカウントの「aratako0」は「アラタケーオーゼロ」で、単に学生時代のネットワークのID名をそのまま利用しています。でも、最近取得しているWebサービスの多くはブログで本名を公開していることもあり、その多くが「aratakojima」と本名です。 「じゃあ、なんではてなはaratako0なの？」と言われますと、当初はてなを長い間使う気はなくて、「とりあえずアカウントを取得してしまい、そのまま実験的に使っていたら、住み着いてしまった」という情
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
![印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/006177c1ae7d95a2c7c0336994db88ed59a41525/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523317%2F1448268251)
YouTubeで懐かしむ！Final Fantasy Ⅶの召還獣とリミットブレイク。 - Trans
仕事に行き詰まり、ダラダラとネットを徘徊していると、「そういや、FF7の召還獣のバハムートって、どんな技を繰り出していたっけ？」と思ってしまったのが運の尽。FF7は僕がちょうど中学校を卒業するかどうかのときくらいに発売されて、めちゃくちゃゲームにはまり込んでいた時期だったので、思い出も多い。 さすが、YouTube。どんなビデオも作ってくれている人がいるものです。 そういうわけで、以下のビデオは、Final Fantasy Ⅶの召還獣とリミットブレイクのダイジェストビデオ。特に、リミットブレイクのビデオの出来はちょっとこだわりすぎていて、なかなかすごい。それに反応する海外ユーザのコメントの数も結構なもの。 仕事に行き詰った時に、どうぞ（できれば、音声つけて）。 FF7 Summons Part 1 FF7 Summons Part 2 Final Fantasy 7 Limit Break
TRANS - 英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ
YUI Fonts CSSのfont-sizeで悩み始めてから、font-sizeってどういうのがいいのだろう、と考えていました。そこで、英語圏ではどういうふうに指定しているのが多いのだろうと、いろんな記事を読み漁ってみました。いろいろなやり方はあるにせよ、5つくらいのパターンに分けられるんじゃないかなと思うので、まとめておきます。 font-size: 100%; 主に、body要素に用いられるもの。font-sizeを100%で指定しておいて、font-sizeの指定はユーザの好き好みに合わせるというもの。ユーザビリティに配慮したり、ユーザスタイルシートを生かして読んでほしい場合はこの指定が多いようです。 font-size: 100.01%; 最近ちょくちょく見掛ける、body要素に対して100.01%を指定するというもの。これは、Re: WSG Setting Up Font Si
tabindex属性から考えるformのユーザビリティ - Trans
巷で話題のiddyに登録しました。といっても、まだどう活用するかはいろいろと考え中なわけですが、iddyに登録する際に、「あれ？」と思ったことがあったので、メモ書き程度に書いておきます。 formに入力する時って、tabキー使いません？ 僕は、大体のformに何かを入力する際には、tabキーを使って、どんどん項目を進んでいきます。マウスやaccesskeyは使わないことがほとんどです。 では、なぜはじめにiddyの話を出したかと言うと、登録の際に一瞬躊躇してしまったからなのです。「あれ、俺、今どこのボックスにいたっけ？」みたいな。 iddyの登録画面はこんな感じです。 で、いつものようにtabキーを使って、次の項目に移動すると、カーソルが消えてしまうのです。そのときに「あれ？」と思うのです。 理由はいたって簡単で、大体のformというのはtabキーを一回押せば、次の項目のボックスに移動でき
【解決編】YUI Fonts CSSをモダンブラウザで最適化する。 - Trans
先日、YUI Fonts CSSでフォントサイズを指定した際に、Operaにおいてはフォントが小さく表示されるので、em指定するとか、Operaのみハックするとかして解決する、そんなことを書きました。でも、ようやく各モダンブラウザでYUI Fonts CSSを使いながら、的確なフォントサイズで表示する方法が分かりましたので、書いておきます。パーセンテージの指定を数パーセントずらすことによって、モダンブラウザでほぼ同じフォントサイズを表示できるようです。 まず、前回書いた記事で問題だと考えていたのは、 em指定の場合は、IE6などのブラウザで解釈が異なる（ブラウザの文字サイズの拡大機能を使った際に、拡大される割合がかなり違う）ということ。祖先要素にパーセント指定するという解決策はあるものの、階層が深くなってしまうと、あまり現実的ではない。 Operaのみに対応するハックのコードを埋め込んでお
ユーザビリティはユニバーサルデザインか、それともバリアフリーか。 - Trans
DESIGN IT! w/LOVEさんのところで、「ユーザビリティという言葉の適用範囲は？ Web？ インタラクティブシステム全般？」というエントリーと共に、僕がはてブで残したコメントに対して、異論を唱えているので、その返答と併せてこっちのエントリーにも書いておきます。はじめは、コメントで残そうと考えていたのですが、いかんせん文章が長くなってしまったので、エントリーとして書いておきます。 以下、元々コメントに残そうとした文章。 はてブでコメントした本人です。 あくまで個人的にはユーザビリティはUD、アクセシビリティはバリアフリーという表現に近くなるのかなと思っています。それは、どちらかというと、その考え方の対象が誰に向いているのか、そういう意味で。 ユーザビリティは初心者やシニア、無論障害者を含めた、「全員」が使いやすいように設計すること。アクセシビリティは、どちらかというと、障害者に特化
YUI Fonts CSSのline-height: 1.22em;の謎を解く！ - Trans
先日から、ずっと頭に引っ掛かっていたYUIのFonts CSSのbody * { line-height: 1.22em;}という指定。はてなの人力検索でも質問してみたのですが、結局分からずじまいで、仕方がなく、自分でマークアップしてテストしてみました。どうやら、id:b-windさんがおっしゃるように、この「*」全称セレクタがキーになるようです。 まず、おさらい。 そもそも、なぜこのline-heightに疑問を感じたのかは、このエントリー。Lucky bag::blog: line-height の値には単位なしが良いとされる理由。はてブの数からしても読んだ人多いんじゃないでしょうか。まず、このコードについて、こちらでもテスト用に作ってみました。Lucky bagさんとほとんど同じコードです。 YUI Fonts CSSのline-hight: 1.22em;は何なのか？その1。 li
Yahoo! UI Library: Fonts CSS を使うのなら、Opera には気を付けて！
Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。 ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです
ブロガーのためのアクセシビリティガイドライン - Trans
唐突ですが、ブログやWebサイトを更新する際に、よりアクセシビリティが高いコンテンツをどうすれば書くことができるのか、そういったガイドラインを公開します。 といっても、元々は他団体向けにWebサイトを制作している際に、「結構、Webには詳しい」方にコンテンツを書いてもらっていたのですが、時折「概 要」とか、「2007年1月11日（水）」といった記述が見られ、「あー、このままでいくと、更新作業を今後やってもらうのってすごく不安だな」と思いました。そこで、どうすれば音声ブラウザなどがうまく対応できるようにコンテンツを書けばよいのかをガイドラインにまとめてみたのですが、せっかくですので、ウェブ上で公開することにしました。 前提として、 アクセシビリティに詳しい方にとっては、「何を今更」という内容。 デザインやマークアップよりも、コンテンツを書く＝ウェブライティングに特化したガイドライン。 ブロ
2xupで実装されているエラスティックレイアウトを調べてみた。 - Trans
2xupさんのところで実装されているエラステックレイアウト（Elastic Layout）、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たようなレイアウトが施されている。というわけで、またもや調べてみた。 と、調べてみたはいいものの、うまい具合に実装方法について解説されているサイトが見つからなかった。要は、widthやpadding、marginなどにem指定をして、フォントサイズを変更しても、それに応じてレイアウト幅が変更されるレイアウトのことを言うらしい。A List Apart: Articles: Elastic Designで発表されたのがどうも初めてのようだ。ちなみに、作者が作ったサンプルサイトもある。 でも、456 Berea Streetでよい感じに、自分のサイト
TRANS - alt=""を越えて。
集中的にアクセシビリティやユーザビリティを最近になってやっと学び始めました。JIS X 8341やWCAG1.0を読み進める中で、もっと自分自身勉強したいと思うようになってきました。そこで、JISやWCAGを学ぶ中で、自分がシニアや障害を持つ人との現場で、またそういった現場で働いている人たちの意見を踏まえた上で、疑問に思うことを列挙しておこうと思います。いずれは、こういうことをちゃんと実装レベルで解決できるようになりたいなと思いを込めて。 alt=""は空文字なのか、半角スペースなのか、それとも全角スペースなのか？ 少し前に「ブロガーのためのアクセシビリティガイドライン」を書きました。この際に、はじめはalt=""と空文字を打つと書いていたのですが、よくよく調べてみると、空文字だと音声ブラウザによっては「画像」と読み上げてしまうことがあるようです。また、全角スペースの場合は、日本語環境以外
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE7でも、pxで指定されたフォントサイズは拡大、縮小ができない。 - Trans