Ocher

紙2001

Posted at 2005/05/25 (Wed) 21:05 +09:00 in Software

あらゆるところから選択された文字をさっと取り、さっと保存する...こんなことができれば。という要望を可能にするのは「紙2001」。

Webページや配信されたメールマガジンなどを見ていて、ちょっとした情報に出会う事があると思います。お気に入りに登録したり、テキストエディタを開いて書き留めるという手間をかけるほどの重要性は無いけど、どこかに残しておきたいような情報です。

また、調べ物の最中に、目的の情報とは関係ないけど、前から少し気になっていた事の答えらしきものを見つける事もよくあります。時間があるときはゆっくり見る事が出来ますが、仕事中などではどうしても後回しになってしまいますよね。けれども、いつしかすっかり忘れてしまったり、いざ見ようとしても、ページが更新されて見れなくなってしまったというのもよくあります。

このような、「今すぐに必要ではないけど、とりあえず残しておきたい情報」の収集・管理に、紙が役に立ちます。

という触れ込みですが、使ってみると激便利な情報スクラップソフト!ネットサーフィンしながら面白い情報を見つけたら、その場で即スクラップできるなんて!一々エディター立ち上げたり、コピペする手間も省いて1秒もあれば終了!すごすぎます。ToDoリストの作成など、思いついたときにすぐメモを作成できたりなんて朝飯前。ブログに上げるネタのスクラップから、業務に必要なネタのスクラップ(物書きさんは昨晩見た夢とか忘れないうちに☆)が即座にできる。保存する操作も必要なく勝手に保存していきます。スクラップはスピードが命ですが、純粋にその使命を全うしてます。あなたの知的財産が飛躍的に増えますよ。しかもフリー。今すぐインストールせよ!(って今さらかよなんてツっこまないで...)

さらにWebページの編集や、ToDoリストのスケジュール管理など高度な有料版「紙copy」もあります。

ALTの扱い

Posted at 2005/05/25 (Wed) 16:14 +09:00 in Web Designing

SEO、アクセシビリティの観点から、ALTに代替文字を入れることは必須ですが、適当にALTを設定しておけばいいというものではありません。場合によっては、ALTはとても重要なナビゲーションとなることもあります。ちょっとしたALTネタを。

音声UA用のサイト構成アナウンス
Spacer(透明GIF)を適宜配置し、ALTによってユーザーの閲覧をサポートすることができます。
<img src="spacer.gif" width="1" height="1" alt="ここからメインメニューが始まります。" title=" ">
※この時、空のtitle属性を併せて設定すれば、ALTのポップアップを非表示にすることができます。(IE)
※Spacer(透明GIF)を配置し、ALTを空にしてリンクを設置すれば、音声UAを対象としたナビを埋め込むこともできます。
箇条書きのアイコン画像
箇条書きのリストアイコンのように画像を用いているのならば、この画像のALTは空でもいいですが、「*(アスタリスク)」、「・(中黒)」、「●(黒丸)」なら意味合いをそのまま保持できます。
<img src="arrow.gif" width="10" height="10" alt="●">商品のラインナップ
テキストと同じ意味の画像
メールアドレスの記載箇所などに、よくメールアイコン画像とセットでアドレスが表記されている場合がありますが、実際のリンクテキストとアイコンのAltが重複すると、音声UAでは連続して読み上げてしまいます。アクセシビリティ処置として、空にすることも考えられます。
<img src="mail_icon.gif" width="10" height="10" alt="e-mail"><a href="mailto:***@**.com">e-mail:***@**.com</a>

フォントサイズ指定はどうする?

Posted at 2005/05/25 (Wed) 14:18 +09:00 in CSS

フォントサイズはユーザーのディスプレイ環境に大きく影響されます。現在主に普及しているディスプレイの規格だけでも、

という具合。ディスプレイの解像度ppi (画面のきめの細かさ)とディスプレイの表示領域の組み合わせが複数パターン存在する以上、サイト制作者が意図した「絶対指定(px)のフォントサイズ」も所詮相対的な単位ということになってしまいます。あなたのディスプレイで具合のいい小さなフォント(8pxや10px)は、まったく可読性のない小ささで見えてしまうユーザーもいるのです。

CSSのfont-sizeプロパティのとりうる値は、

absolute-size
xx-small | x-small | small | medium | large | x-large | xx-large
relative-size
larger | smaller
length
in | cm | mm | pt | pc | px | em | ex
percentage
%

ですが、特にlength値を指定する場合は、em(エム)で指定してあげるのが一番良いと思います。line-height、margin、paddingの指定もemで統一してあげれば(emの幅をもったスペース/アキのことをエムスペースと呼びます)尚良し!

この場合は制作者サイドのメリットも。サイズやアキを指定する際は、1em(標準値)、0.8em、1.2emと1を基準にして調節できるため感覚的にわかりやすい。制作者にもユーザーにも優しいサイズ指定が可能となりますね。

みんなのウェブ

Posted at 2005/05/21 (Sat) 17:38 +09:00 in CSS

アクセシビリティについて勉強するには、みんなのウェブがおすすめ。もちろんWCAGやJIS X 8341-3に目を通すのもいいけど、結構面倒くさい感じもありますので、比較的読み易い(個人的にはかなりですが)みんなのウェブがベストかと。必ずしもJIS X 8341-3に準拠しているわけではないですが、非常に良くまとまっています。アクセシビリティについて一度まとまったDocumentを読みたい方にはまずこちらからいかがでしょうか?と、某知識人の受け売りで。

Spell with flickr

Posted at 2005/05/20 (Fri) 00:29 +09:00 in internet

適当なワードを入れると、flickr画像のキャラクターTag画像で返してくれるとういう、ちょっと楽しいツールを発見。その名は「Spell with flickr」。

例えばmasa4で遊んでみると、


M , the letterLetter AB&WsM\Four


MLetter Aalmost9St-shirt4


M bagAsRadio City \4

是非みなさんも遊んでみてください。

音声ブラウザ対策

Posted at 2005/05/19 (Thu) 23:21 +09:00 in Web Designing

アクセシビリティーだ、ユーザビリティーだと昨今声高に叫ばれているわけですが、その中で音声ブラウザ(スクリーンリーダー)への配慮も重要だと言う感じになってきています。ま、どれだけ公のサイトで、どれだけ企業責任だなんだということが必要になるかと言う問題になりますが、一方でCSS使いでグリグリしたい派の人などにはクリアすべき技巧である、という捕らえ方が現状ではこの傾向を指すのに一番適切なような気がしてます。

音声ブラウザ対策が必要だ!と頭でっかちになってるが、実際によく分かっていないデザイナーも多いと思います(私が代表です)。実際にはコンピュータの音声を聞きながらチェックすると言うのはかなり苦痛だと思いますね。ただ、最近では多くの「定石的な制作」情報がWebでゴロゴロありますので、実際に音声ブラウザでチェックしなくても、ある程度はどのような構成でサイトを作ったらよいのかわかると思います。

まぁさておきまして、音声ブラウザの種類や特徴について網羅したサイトがありましたので、こちらを参考にされるのも一つだと思います。

CSS Debug

Posted at 2005/05/17 (Tue) 21:58 +09:00 in CSS

ページのどこにどのCSSのclass,IDが割り当てられているかを視覚的に表示してくるbookmarklet、 CSS Debugを発見。特に他のサイトを参考にしてサイトデザインする時など、CSSレイアウトの構成が一目でわかるので大変便利です。(※IEでは動作しません。)

ここのページのMy PhotoにFlickr badgeを埋め込んでいますが、既に指定されているCSSを自分のサイトのデザインルールに合わせるときなどは、どのIDやclassをいじってあげれば良いかすぐに判りカスタマイズが楽になります。ちょっとした時間の節約になりますね。やっぱり時間は貴重だもの。

ON/OFFが切り替えられるトグル機能が付いた、CSS Debug Toggleの方がちょっといいかも。私はこちらを使ってます。

IMGをALTテキストに変換するBookmarklet

Posted at 2005/05/17 (Tue) 21:19 +09:00 in Web Designing

JavaScript::Bookmarklet BlogにてIMGをALTテキストに変換するBookmarkletが紹介されています。ALT抜けのチェックが視覚的に行えるだけではなく、テキストブラウザなど画像を表示しない設定がされている環境では、適切なナビゲーションができているかを確認できる便利なbookmarkletです。アクセシビリティ対策のチェックとしても、大変お手頃なチェックツールになりますね。IE、Netscape、Opera、Firefoxと主要ブラウザで動作します。

The BERNIE LEADON ・MICHAEL GEORGIADES BAND

Posted at 2005/05/16 (Mon) 17:06 +09:00 in Music

The BERNIE LEADON ・MICHAEL GEORGIADES BAND

The BERNIE LEADON ・MICHAEL GEORGIADES BAND / natural progressions

いよいよ夏がやってきます。海岸線をドライブするあの爽快感ってありません。つき抜けた青空に焦がれると、やはりウェストコースト・ロックが旅のお供となります。

こちらはEAGLESを脱退したバーニー・リードンがしばらくのブランクの後、マイケル・ジョージアデスと組んだ77年発表作。EAGLESでカントリー・カラーを担当していたリードン。Goodシンガー・ソングライター、ジョージアデスと組んでできた本作は、カリフォルニアの高い空のように透明感のあるアコースティック・シティサウンドを聴かせてくれます。派手さはまったくない、飾らない姿勢がぐっと伝わり好感がもてます。

これを嫌いな西海岸ロック好きなんているのでしょうか?ジェームス・テイラー、ジャクソン・ブラウンに通じる優しいサウンドは、いつまでも愛聴できる作品です。はっきり言うと、かなり好きなんです!最高ー!
(ジャケはイナたいですが...)

フォントに関するCSS

Posted at 2005/05/16 (Mon) 00:11 +09:00 in CSS

OS毎のデフォルトフォントは、WindowsはMS Pゴシック、MACはOS Xからヒラギノ角ゴ Pro W3、それ以前のVerはOsakaとなっています。よって、MAC OS Xではヒラギノを用いたい場合には、


p {font-family : "MS Pゴシック","ヒラギノ角ゴ Pro W3",Osaka;}

*「MS_Pゴシック」のアルファベットは全角、あいだは半角スペース

とするといいでしょう。基本ですが、フォント名の指定では、一番左に書かれたものが優先順位が高く、指定されたフォントがユーザーのシステムにない場合に、二番目のフォント、三番目のフォント・・・とうふうに表示されます。フォント名に半角スペースが入る場合にはシングルクォーテーション(' ')かダブルクォーテーション(" ")で囲む必要があります。

過去に作成したフォント回りのスタイルシートを暇があったらOS X用にいじってあげてもいいかもしれませんね。

下位キーワードに注目しろ!

Posted at 2005/05/15 (Sun) 20:48 +09:00 in SEO

リファラー解析の際、どうしても上位の検索キーワードに注目しがちだが、下位キーワードもしっかり検証しているだろうか?

SEOで上位表示するようにサイトをチューニングした場合、やはり効果があったかどうか解析する際に上位ワードに目がいっていまいますね。しかし、下位キーワードには競合他社の少ないワードが埋もれているかもしれません。これらによって思わぬビジネスチャンスがあるかもしれません!また、"ない"キーワードを検証することもWebサイトの問題点を発見する大きな手がかりになるかもしれません。

軽視できないQ&A

Posted at 2005/05/15 (Sun) 20:41 +09:00 in SEO

第17回Web creator conferenceのイベントレポートに参考になる掲載を発見。

「多くのサイトでは単一ページに羅列したQ&Aページを設けているのでは?Q&Aとは単にユーザーサポートとしての位置づけだけではなく、ユーザーニーズを発見するためのものである。」とある。せっかくSEOツールやサービスを導入しているのであれば、単独質問ごとにページを分割することによって、よりユーザーニーズを発見できるアクセス解析が可能となります。これによりより良いユーザーへの有益な情報提供へと発展させることも可能で、サイトの信頼性を上げることにも繋がりますね。

軽視しがちな小さなことにこそ、今一度注意してみるのも大切ですね。ほら、ハインリッヒの法則ですよ。「1件の重大災害(死亡・重傷)が発生する背景に、29件の軽傷事故と300件のヒヤリ・ハットがある。」という警告として、よく安全活動の中で出てくる言葉です。ここで重大災害を顧客損失と置き換えると、まさにQ&Aの工夫が300件のヒヤリ・ハットに当たります。ユーザビリティやアクセシビリティとは29件の軽傷事故にあたるわけですが、こちらにばかり気をとられていると問題解決に至らないかもしれません。

マッチ棒クイズ

Posted at 2005/05/12 (Thu) 23:38 +09:00 in Weblog

あなたのIQがみるみるアップする...

普通にこんな誘いに乗る暇人なの(? そこそこ忙しいと思ってます^^;)。思わず買っても~た~。マッチが手元に無いので楊枝を取り出してきたけど、40本も使うクイズとか出現してから2秒であきました。飲み会で人気者になりたいあなたはこっそりGET!??

ま、こういうのもいいんじゃないでしょうか、って無責任に締めてみる。

Love Has No Pride...

Posted at 2005/05/11 (Wed) 21:20 +09:00 in Music

最近泣いていますか?忙しすぎて涙を忘れていませんか?音楽とは素晴らしいものです。ね、木田センセー(タロー)。

もっぱら私を知っている人らなら、どうせまたドぎついUKフォークでしょと思うかもしれませんが、意表を付いて今回は、、、安く見つけたので American Flyer 買っちゃいました。

あの永遠の名曲「Love Has No Pride」のオリジネーターEric Kazのオリジナル作者バージョンが収録されているのは、この1stオンリー。Westcoastのフレーバーが最高に芳しい!アナログで聴くと格別ですね。American Flyerは、Eric Kaz、Doug Yule、Carig Fuller、Steve Katzの4人ユニット。プロデュースがGeorge Martinで、プレスがUAと、、、まだ何か?思い起こせばレコード聴かない生活なんてここ5年以上経験していないわけですが、久々に泣けた。その前に泣けたのは下北沢で見たDave Lewis(Ex-Andwella !!!!)のソロライブ以来だと思う(これはこれで奇跡!レコード○十万するのに、観客は30人て)。

Amazonで American Flyer/Spirit of a Womanの2in1CDを発見しました。アナログが聴ける環境の人はアナログで聴いて欲しいけど、CDでも見つけたら必ず買ってください。私は泣きました><(今なら最安値¥1,435のユーズド出てます!!安くて買い!)

裁判員制度に異議あり!

Posted at 2005/05/08 (Sun) 23:30 +09:00 in Weblog

なんとまぁ昨年春に可決され、2009年より裁判員制度がスタート。「12人のやさしい日本人」なんてコミカルで楽しい陪審員映画があったけど、ついに現実となるようです。「けっこう面白そうじゃない♪」なんて思ってたりする人もいるのでは?(あ、前述の映画は最高におもろいですよ☆)

ただ気になるところがある。呼び出し状1枚で裁判所に出頭・出廷する義務がある点。仕事の都合などお構い無しで「あんた来なさい」となるわけです。で、断ろうものなら10万円以下の過料を支払わなくてはいけない。さらにさらに、裁判後にも生涯つきまとう守秘義務がきついでしょ。他者に話しちゃうと有罪(懲役6ヶ月以下または罰金50万円以下)で前科がもれなく当たります。

こんなん無理やわー。エグイ写真とかも当然見せられるし、被告人関係からの仕返しとかもあり得る。とくに私みたいな地方だと、裁判官や被告人の知り合いなどと「世間は狭いよね~♪的つながり」がある可能性高し。なんともですわ。

あ、大阪の人に朗報!?大阪は一番裁判に呼び出される確率が高く、1年間で400人に一人の確率だそうです。学校の同級生に一人いるような感じ。。。

着想を得たらすぐMEMOれ!

Posted at 2005/05/08 (Sun) 22:49 +09:00 in Web Designing

「なっちゃん」「DAKARA」「BOSS」などのデザインを手がけてきた、サントリーデザイン部長の加藤芳夫氏はメモの達人。その極意は、「何にでも書く」。。 居酒屋では箸袋に、新聞からインスピを受けたら直接新聞に書き込んで千切る、本からなら表紙にメモるなどなど。

ワープロなどでキレイにまとめたメモでは、文字に込められた勢いが消えてなんの着想も膨らまないものになってしまうようです。その場ですぐに書き込めるだけではなく、メモのシズル感(みずみずしさ)を保持できるため、とにかく「そこにあるものにメモる」ことが一番効果的なのだとか。

媒体に限らず、あらゆるジャンルのデザイナーさんは、着想を逃さずメモる癖を付けなくてはいけませんね。さぁみんなで実践しましょう!!ただし、その後しっかりメモを整理整頓する術も、やっぱり必要になってくるのでしょう。。。ただ私、整理整頓と指相撲は苦手なのよ。。。

サブウィンドウの注意点

Posted at 2005/05/07 (Sat) 15:33 +09:00 in Web Designing

サブウィンドウを開くときは、必ずopenメソッドのresizableオプション値を「yes(1)」にしておこう。リサイズ不可のサブウィンドウを開いた場合、閲覧ユーザーの環境によっては(特に文字サイズのスタイルなど)、ページ内容のすべてが表示されない場合があるからだ。

window.open("hoge.html","hoge","width=○○,height=□□,resizable=yes")

また開かれたサブウィンドウ側でも注意しなけばいけないことがある。特にサイズが小さなウィンドウを開いた場合、親ウィンドウがアクティブになり、子ウィンドウが下に隠れて開かれたことに気がつかないユーザーがいるかもしれない。同じウィンドウ名を用いて別のページをサブウィンドウで開いた場合などでは、特にこのような事態が起きる可能性が高い。

そこで、子ウィンドウにfocus設定を忘れずにしておく必要がある。具体的なソースは、(※括弧「>」は全角にしてあります。)

<head>
<script language="JavaScript">
<!--
function Focus_the_Window(){
	window.focus();
}
//-->
</script>
</head>

<body onLoad="Focus_the_Window()">

これらは最低限のデザインルールと言えるでしょう。

また、ポップアップブロックを利用しているユーザーなど、サブウィンドウを利用する場合には、ユーザー環境によっては利用できない場合があるという点にも十分注意を払っておく必要がありますね。

クオリア(Qualia)

Posted at 2005/05/06 (Fri) 21:57 +09:00 in Weblog

クオリアとは私たちの感覚を構成している何ともいえない「質感」をあらわす最新の脳科学用語だそうな。

例えば海外旅行で現地の空港に降り立った瞬間、その場所の匂いや空気の色などを感じて、妙に「やっぱこれやわ~」なんて思ったりしませんか?これこれ、クオリア。感覚の質感だわね。

そう考えてみると普段のひょっとした瞬間にクオリア感じることよくある。天気のいい日に干した布団に包まれると、、、クオリア~。ふと空を見上げると星がたくさんあって、「地球ってやっぱいいわ」ってのもクオリア~。

クオリアが与えられる環境っていうのは、なんか心の豊かさがある時のような気がする。毎日が忙しいってぼやいてると、なんかあんまり感じなさそうだね。

そうするとやっぱり、HERONなんて最高のクオリア与えてくれるよ。あの田園フォークをアナログで聴いた時のクオリア、大量発生するし。是非全人類に聴いてほしい、クオリア最高峰音楽です。

Weblog archives

by Month

by Category

This page was last modified on (in secs).