Mobile Web Best Practices 1.0 日本語訳

つい先日ケータイで見やすいブログデザインについてちょっと考えてみたを書いたばかりですが、W3CからMobile Web Best Practices 1.0(モバイル対応 Web コンテンツ向け最適実践例)が発表になったようです。

http://www.w3.org/TR/2006/CR-mobile-bp-20060627/

全部は大変なのですが、60の実践リストに趣旨が集約されているので、これを日本語訳してみました。微妙に意味の分からないところもあったので、変なところがあったらご指摘ください。ではおで訳いってみます。
※なお()内は筆者注です。
※モバイルデバイスはケータイに限りませんが、分かりやすくケータイを挙げています。

1.[テーマの一貫性] あるURLにアクセスして得られるコンテンツは、異なるデバイス(PCでもケータイでも)でアクセスしてもテーマ上一貫性のあるものであること。

2.[ブラウザ性能] 洗練されたユーザ体験を提供するべく、デバイスの性能を十分に引き出すこと。

3.[不完全性] (デバイスの)不完全な実装に対して程よい対処策をとること。

4.[試験] エミュレータと同様に(デバイスの)実機でもテストを実行すること。

5.[URI] (ケータイで長いURIを打つのは大変なので)URIは短めに。

6.[ナビバー] ページのトップに置くナビゲーションは最低限に止めること。

7.[バランス] ページに膨大な量のリンクがあると、ユーザは見たいもの(コンテンツ)にたどり着くまでに膨大な量のリンクをスクロールしないといけなくなる。このトレードオフを十分に考慮すること。

8.[ナビゲーション] 一貫したナビゲーションを用いること。(そうすればユーザはそのサイトのナビゲーションの仕組みを用意に理解できる)

9.[アクセスキー] ナビゲーションメニューのリンクにアクセスキー(ケータイなら0~9とか)を割り当てること。

10.[リンクターゲットID] それぞれのリンクのターゲットを明確にすること。

11.[リンクターゲットのフォーマット] デバイスが(表示や再生を)サポートしていないこともあるので、リンク先のファイルフォーマットには注意すること。

12.[イメージマップ] デバイスが十分にサポートしていない可能性があるので、イメージマップは使わないこと。(ほとんどのケータイにはポインティングデバイスはない)

13.[ポップアップ] ポップアップや別窓表示は避けること。ユーザにそれと知らせることなく現在のウィンドウを変えたりしないこと。

14.[自動遷移] 自動遷移ページは作らないこと。自動遷移をユーザに知らせないなら、遷移を止める手段を用意すること。

15.[リダイレクト] 自動的にページをリダイレクトするようなマークアップはしないこと。代わりにHTTP 3xxコードを用いることでリダイレクトするようにサーバーを設定すること。

16.[外部リンクリソース] 外部リンクしたリソース(ファイル)は最小限に止めること。(ケータイではダウンロードに時間がかかるため)

17.[適切さ] コンテンツ内容はモバイルでの利用に適したものとすること。(モバイルでの利用においてユーザはまず役立つ情報を求めている)

18.[明瞭さ] はっきりとシンプルな言葉を使うこと。

19.[限度] ユーザが求めているものに内容を限定すること。

20.[使うのに便利なページサイズ] 使いやすさは残しつつも、適度なサイズまでページを分割すること。

21.[ページサイズの限度] ページ全体のサイズは、デバイスのメモリ制限にあったものにすること。(ケータイでダウンロードできるページサイズは限られている)

22.[スクロール] 二方向へのスクロールを避けられるなら、ページのスクロールは一方向とすること。

23.[中心的意味] ページの中で中心となる要素は、そうでない要素よりも先に配置すること。(ページのトップのリンクはメタに止め、コンテンツが先に読めるように)

24.[スペーサー画像] スペース調整のための画像(スペーサー)は使わないこと。

25.[大きな画像] デバイスがレンダリングできない画像は使わないこと。それを使わないといけない重要な情報があるのでなければ、巨大あるいは高解像度の画像は避けること。

26.[色の使用] 色がないと伝えられない情報は、色がなくても伝えられるようにすること。(モノクロ液晶のケータイの人も…まだまだ要るはず…)

27.[カラーコントラスト] 前景色と背景色は十分(視認できる)コントラストがある組み合わせとすること。

28.[背景画像可読性] 背景画像を使うときはデバイスでコンテンツが読めるように使うこと。

29.[ページタイトル] ページタイトルは短く、かつ内容が分かるようにすること。

30.[フレームダメ!] フレームは使用禁止。

31.[構造] 論理的な構造を示せるマークアップ言語を使うこと。(HTMLとか)

32.[テーブルタグのサポート] デバイスがテーブルタグをサポートしていると分からないのであれば、テーブルは使わないこと。

33.[テーブルのネスト] テーブルはネスト(入れ子に)しないこと。

34.[テーブルレイアウト] テーブルレイアウトはしないこと。

35.[テーブルの代わり] もし可能であるなら、テーブルの代わりとなる見せ方をすること。

36.[非テキスト要素の代わり] あらゆる非テキスト要素には代わりとなるテキストを用意すること。

37.[オブジェクトかスクリプト] 埋め込みオブジェクトやスクリプトには頼らないこと。

38.[画像サイズの特定] 画像に固有のサイズがあるなら、マークアップで画像サイズを特定すること。

39.[イメージリサイズ] 画像に固有のサイズがあるなら、サーバーで画像サイズをリサイズすること。

40.[VALIDなマークアップ] 公式の文法に従ってドキュメントを作成すること。

41.[単位] マークアップの属性値やスタイルシートの属性値の単位にピクセルや絶対値を使わないこと。

42.[スタイルシートの使用] デバイスがスタイルシートをサポートしているなら、レイアウトや見せ方にスタイルシートを使うこと。(日本のケータイはまだあんまり対応してないですけどね…)

43.[スタイルシートサポート] 必要ならスタイルシートがなくても読めるようにドキュメントを構成すること。

44.[スタイルシートのサイズ] スタイルシートは小さく。

45.[最小化] 簡潔かつ効率的にマックアップすること。

46.[コンテンツフォーマットサポート] デバイスでサポートされているフォーマットでコンテンツを提供すること。

47.[より好まれるコンテンツフォーマット] もし可能なら、より好まれているコンテンツフォーマットで提供すること。

48.[文字エンコードサポート] デバイスがサポートしている文字エンコードでもってコンテンツをエンコードすること。(UTF-8に対応しているケータイのほうが少ないですけどね…)

49.[使用した文字エンコード] 使用した文字エンコードを示すこと。

50.[エラーメッセージ] 手助けとなるエラーメッセージと、エラーメッセージから有用な情報へとナビゲートする手段を提供すること。

51.[クッキー] クッキーの利用に頼らない。(日本のケータイは対応してませんね…)

52.[キャッシュ] HTTPレスポンスにおけるキャッシュ情報を提供すること。(日本のケータイでは無理なような…)

53.[フォント] フォント関係のスタイルに頼らない。(…めっさメーカー依存ですしね…)

54.[キーストロークを最小限に] キーストロークは最小限に止める。

55.[フリーテキストを避ける] 可能であれば、textareaやinput type=”text”は避けること。

56.[デフォルト値を使う] 可能であれば、あらかじめ決められたデフォルトの値を使うこと。

57.[デフォルト入力モード] デバイスがサポートしているのなら、デフォルトの入力モードを決めること。(住所はかな漢字、郵便番号は半角数字って感じに)

58.[タブ順序] (tabindexを使って)リンク、フォームのコントロールとオブジェクトに論理的な順序を儲けること。

59.[ラベルコントロール] labelとformとを関連付けてすべてのformを適切にコントロールすること。

60.[位置の調節] labelの位置はそれらが参照するformコントロールに関して適切にレイアウトされていること。

60個もあるので全部チェックするのはなかなか大変そうですが、チェックシートとして使えそうですね。

社内SNSを導入したい理由

ちょっと前に社内SNSが増えているというニュースを読みました(調べてみると、結構前のような…これじゃないけど→参考:CIO»【ニュース解説】大企業に浸透するSNS、各社のねらいとは?。かなり古いな…。もうちょっと最近のがあったようなきがするけど)。

mixiをやっている人には、mixiが社内イントラに入ってる図を思い浮かべてもらうと分かりやすいかな(mixi自体は混沌としてきちゃったけど)。

この記事を読むと結構多くの企業が導入し始めているみたいで、最近特にうちの会社にも導入したいなぁ(もしくは導入してくれ!←他力本願)と思っています。

わたくしは現在サービスの企画を担当してまして、自分が今考えているようなことは前に誰かが考えているんだろうなぁと思うことがたびたびあります。そうは思っても社内には検討結果を全体で共有できるようなナレッジベースがない有り様(有っても共有されてないっちゅう話もある)。

人伝に聞くのは時間もかかるし、限界もあり…部署の壁を越えるのはなかなか難しく、大企業病ですよ。

SNSを使って、案件の検討状況や結果が分かれば仕事のスピードもアップするかも?似たようなことを考えている部署を見つけて共闘したり、アプローチしなきゃいけない部署とかも分かるかも?なんて思っています。

仕事しないでコメントを書くのに夢中になるおいらのような社員をどうするかは課題ですが、今度部長に話してみようかなぁ。でもなぁ、部長ってばSNSのこと出会い系だと思ってるんだもんなぁ。社内出会い系なら別の意味で需要がありそうだけど。

ブログサイドバーに見る時代の変化

遅ればせながらブログユーザビリティ:間違いトップ10を読んでエントリを書いてみようかな、と思ったらのっけから驚きました。

それを受けた+LOVE IS DESIGN+さんのブログに表示してほしいメニューと10の理由+1でもそう。

なんと自己紹介/プロフィールがブログ必須項目になってたからです。

ホームページをはじめた頃(1998年位)は、自己紹介のページは要らないものの筆頭だったように思います。男の自己紹介なんて見たいと思う人はいない。かわいい写真が載ってるならともかく、そうでないなら女の子の写真も逆効果、なんて言われて。

それが時代とともに変わったのでしょうか。ホリエモンのおかげかブログは女子高生にまで浸透しているし、mixiほどではないにしてもブログにプライベートなことを書く人も多くなってきましたよね。

思い返してみると、魅力的なエントリーを書いている人がいれば、この人何してるんだろうって気になること、結構あります。CSSネタとかを書いている人がWEBデザイナーだったりすると、なるほどねって思ったり。

私のエントリーを読んだ人がそう思ってくれることを願って、ちょこっと書いておこうかな。また文章で悩みそうですが(^^ゞ

蛇足になりそうですが、残りの項目も見てみると、
2. 運営者の写真が無い
うーん、親近感が沸くかは選んだ写真にも寄るんじゃないでしょうか。写真詐欺、とか言われたくないですしね。かっこいいセルフポートレートとかは賛成です。

3. 漠然とした記事タイトル
全部ではないですが、これはちょっと気を使っています。私のサイトだとまだまだトップページを入り口として訪問してくださっている方が多いようなんですが、サーチエンジンから来る方を意識して検索にひっかかりやすそうなタイトルにしています。
そればっかりではつまらないので、自由に書いている記事もありますけど。

4. どこへのリンクか分からない
これ、とかこちら、とかってリンク、これはやってしまっているかも…。気をつけなくては。

5. 過去の記事を埋もれさせる
気をつけてはいますが、過去の記事が一番の人気記事だったりするので人気記事一覧とかをつけてみようかな。

6. ナビゲーションにはカレンダーしかない
時系列よりも記事単体を重視しているので、そもそもカレンダーつけてません(*゜ー゜)

7. 更新頻度が一定していない
ごめんなさい。ごめんなさい。申し開きもございません。ブログの場合、思い立ったが書き時ですね。

8. 複数の話題を扱っている
まぁ、これはそうしたくてやってるんで…。

9. 上司に当てて書いているという事を忘れている
うーん、うーん/(-_-)\。悪口は書いてないですけど。

10. ブログサービスのドメイン名を使う事
独自ドメイン+WPなのでサービスの質は自分次第ですかね。若干ロリポのMySQLが重いのが気になります…。

+LOVE IS DESIGN+さんのブログのほしい項目については
2. 最新のエントリー 3. コメント 4. トラックバック
これはもちろん表示してます。旬なものが取り上げられるといいんですけど。コメントとトラバはスパムのおかげで上がらないように常に気を配らねば…。リンクでいいと思ってるのでセルフトラバはしてません。

5. カテゴリ
カテゴリ名、ただいま編集中です。ごめんなさいorz

6. 月別アーカイブ
長い…。プルダウンにしよう…(+_+)

8. サイトポリシー
これも書かなくては…。まだまだ改善の余地がありますね。勉強になりました。

Google Calendarを試してみた

Google Calendar(Beta)
・Seeing the big picture
・Sharing events and calendars
・Staying on schedule

Googleの新サービス「Google Calendar」が始まったので、さっそく試してみました。

Google Calendar

現状英語版しかないので、google.comにてGoogle Accountでログインし、下のほうにあるTime ZoneでGMT+9:00 Osaka,Sapporo,Tokyoを選ぶだけでセットアップ完了です。

Google Calendar

こんな感じのオンラインスケジューラソフトになっています。マウスでクリック(左右ともにおっけ~)してびびーっと引っ張るとAjaxなイマドキウィンドウが開いて、予定が書き込めます。予定を書き込むフォームのしたにたとえば「ティファニーで朝食」って書いてあります。こういうとこ、センスいいですね!

いまのところ、オンラインで無料なのと、いろんな友人同士でスケジュールを共有できるっていう部分がメリットなのかな?会社では社内システムでスケジュール共有できてしまうので、ちょこっとメリットが見出せないおでなのでした。

画像の文字入れに最適な手書き風フォントまとめ

このブログの画像にもたまに文字を入れたりしていますが、画像にセリフを加えてちょっとアクセントをつけたいときなどに便利な手書き風フォントをまとめてみました。

さなフォン

さなフォン

丁寧に書かれた楷書フォントのさなフォンです。第二水準漢字までカバーしていて、いろいろ書けちゃいます。わたしは小学校の頃から、字の綺麗な人が好きでした(関係ない)。

ダウンロード: Heart to meさん→沙奈の文字箱へ

みかちゃん

みかちゃん

しっかりと落ち着いたイメージのあるオリジナルフォントみかちゃん。こちらも第二水準漢字までカバーしていて、難しい文字も書けちゃいます。

ダウンロード: オリジナルフォント【みかちゃん】さん

Holiday-MDJP02 (KANJI)

Holiday-MDJP02 (KANJI)

いい感じに力が抜けている、でも読みやすいHoliday-MDJP02 (KANJI)。こちらは第一水準漢字までカバー。サイトのデザインも素敵です。

ダウンロード: Maniackers Design(マニアッカーズデザイン)さん

あくあフォント

あくあフォント

このブログでもよく使わせて頂いているあくあフォント。こちらも第二水準漢字までカバーしています。

ダウンロード: Teardrops in Aquablueさん

なおフォント

なおフォント

ちょっと毛色の違うものでなおフォント。こちらはひらがなのみですね。こういう字を書く人はちょっと…苦手かも…(また関係ない)。

ダウンロード: 天和堂ウェブページさん

おでフォント

おでフォント

まとまりもなければ締まりもないおでフォント。こちらは、この世界にある全漢字と記号をすべてカバー。みみずのようなアラビア語でもなんでもこい。

ダウンロード: こちらから

ウソです。落とせません。