Are you a human? テスト

[2016-01-21] サービス終了がアナウンスされました。

コメントを書こうとすると、Are you a human?のゲームCAPTCHAが体験できます

解説: あなたは人間ですか?(Are you a human?) – ミニゲームによるCAPTCHA | 秋元@サイボウズラボ・プログラマー・ブログ

日本向けのウェブデザインというのはあるのか?

日本進出に興味のある海外企業や外国人から質問されることがあるので、まとめてみたいと思います。

僕はウェブデザイナーじゃないので、プロの方から補足や突っ込みがいただければとても嬉しいです。

[更新 2011-02-01] コメント・ツイッター・はてブからの意見を反映させました。

ある程度まとまったら英語にしてAsiajinにも書こうかと思います。


日本向けにウェブサイトを作るときに特別しないといけないことはあるのか?

「メニューの文字をGoogle Translateで全部日本語に置き換えたけど、これでいいかな? 他にすることある?」

– 機械翻訳は使い物にならない

英語-フランス語、とか英語-スペイン語、のノリで機械翻訳を使っても、あなたが想像するレベルの日本語には決してならない

# 英語に再機械翻訳してのチェックは必須だが、それでも日本語訳のおかしさが見えてこないケースもある

– フォントが大きい

英語ページと同じサイズのフォントを使うと、日本語としては読みづらくなる。これは英語が26文字の並びで読ませるのに対して、日本語では一文字中により多くの情報が入っていて、似ている他の文字も多いため

– デザインフォントは少ない

数百文字程度作れば新しいフォントができる英語と違い、7000~23000文字の必要な日本語では統一したデザインで新しいフォントを作るのはたいへん。その結果フォントの選択肢は少ないため、英語版で使っていた変わったフォントと同じようなフォントがあるとは限らない

その代わりに、絵文字やアイコンサイズのイラストなどを良く使う。携帯ウェブの場合、企業サイトですら絵文字を使ったりする

– 検索の需要が欧米より低い

理由は、検索よりナビゲーションを好む人の割合が多い(例: Yahoo! JapanはGoogleより人気)から。日本語で実用になる検索機能を作るのは技術的にもよりたいへんなため、検索にあまり期待していないユーザーが多い。たとえば、日本ではフェイスブックより流行したTwitterは、いまだに満足な日本語の検索ができないが、それほど普及の障害とはなっていない。

温かみやかわいい系のデザインが受け入れられやすい

企業サイトでも原色やパステルカラーをアクセントに使ったりするところがある。暖色系を多く使った「温かい」デザインや「かわいい」アクセントが受容されやすい

(例: サイボウズOfficeの色使いはアメリカだと「プロフェッショナルな感じがしない」となったが、日本でパステルカラーであることへの文句はあまり聞かない)

– 適切な制限文字数はより少なくなる

Yahoo.comのニュースヘッドラインが40文字程度なのに対して、Yahoo! Japanのヘッドラインは13文字。これは一文字あたりの情報量が多いことから、同じ内容を表す文字数が少ないことによる。前記の標準的なフォントサイズとも関連する

入力フォームにおいても、英語の時のフォームのテキストボックスの幅をそのまま使ったりすると、期待される文字数よりもずっと横長のボックスになってしまい、ユーザーを惑わせることになる

– イラストやマンガを多用する

たとえば、「楽しそうな家族のイメージ」を表すのに、モデルを使った写真とイラストから後者を選択するサイトの割合は日本の方が多い(モデルに有名人を起用する場合は例外)

人物や擬人化した動物のイラストなどをガイド役にサイト上に置いたりする。大人向けのサイトで動物のイラストがあっても、ユーザーを馬鹿にしているわけではない。

– アルファベットはデザイン上のアクセント

英単語を使っている日本のサイトもあるが、リンクテキストなど重要な動線で英単語しかないというケースはあまりない。英単語はあまり重要でないところにデザイン上のアクセントとして置いてあるのであって、英語が読めることを期待して英単語を未翻訳で残してはいけない。どの英単語ならそのまま使っても嫌がられないかの判断はネイティブでないとほぼ不可能(日本人が誰でもわかる簡単さは、彼らの考える簡単な単語とは違うので)

– 詰め込み過ぎに見えるeコマースサイトは、意図的にやっている

楽天等のデザインが古臭くて詰め込み過ぎでわかりにくい、という批判が外国人から出ることが多いが、あれは必ずしも日本のウェブデザイナーがシンプルさやわかりやすさを理解していないからではない。マーケットで買い物をするような楽しさを演出するためにわざとやっている部分がある。これは日本の実際の店舗(代表的なのはドンキホーテ)を見ても通じるところがある。

– 長いセレクトボックスでアルファベット順に表示、に相当する並べ方が存在しない

英語なら国名や州名は辞書順で、キーボードを押してジャンプできるが、日本語ではこれはできない。セレクトボックスでの選択肢の順序は、選択させる内容によってマニュアルで設計しないといけない(たとえば、都道府県の場合北から南、が多い)

– 入力フォームの後、確認画面を表示するサイトが多い。そのため、入力する側でもそれを期待する人は多い

投稿を押してすぐ投稿されてしまったことに慌てるユーザーもいる。企業や銀行等では確認画面が特に多用される。カジュアルなサービスではすぐ投稿できるサイトもみられるので、どちらがよいかはサイトのカテゴリーや利用者のリテラシーレベルにもよって判断しないといけない

– 閲覧時の郵便番号からの地域絞込みは米国ほど多用されていない。都道府県を列挙したリンクや地図をクリックしてのドリルダウンが多い
– 入力フォームでの郵便番号からの住所絞込みと入力ボックスへの設定は多用されている(米国ではあまりみない)
– 年月日の順序、時刻の表記、小数点(欧州と)などの形式が異なる
– 単数複数にはこだわりがない。物の個数の後ろにつく字が物の種類によって変わる

[2011-02-01] 追加

斜体は使わない

日本語のフォントは斜体では読みにくい。もともと斜体で表現される文章が少ない。英語で斜体だからといってそのまま斜体にするのではなく、その部分の表現に対応した日本語での強調表示を選ぶ。

– 日本語には英語のキーボードにあるほとんどの文字(ローマ文字、数字、記号等)に、日本語固有の別バージョンが存在する。表記時はサイト全体で統一感を出す必要がある。また、状況に合わせての使い分けをした方が良い場合もある。入力フォームでは、どちらの文字が使われても、あるいはミックスして入力されても、正規化して受け取るのが望ましい(日本人の作ったサイトでもできてないものはあるが、その場合でもどちらの文字セットを受け取れるかのガイド表記などはしている)

– 携帯ウェブの絵文字

絵文字は一文字でアイコンのように使えるものも多いため、携帯サイトでは多用される。絵文字を使わなくてもサイトは作れるが、一般的に使われるような絵文字は同様に使った方が携帯サイトとして自然なできあがりになる。サイトの分野にもよるが、まじめなサイトでも使われる絵文字もある

– 携帯ウェブの空メール

携帯電話でのインターネットメールが普及していること、サービス名からURLを推測するのが英語圏より困難なこと、等の理由から、URLを案内するのに指定したアドレスにメールを送らせ、自動返信でURLをメールで教える、という手順が一般化している。ブラウザ上で登録情報を入れてから本人確認でメールを送るのではなく、メールを送って本人確認してから本人に結びついた状態で登録ページに案内するという動線も多い

– QRコード

ようやく米国でも事例が増えてきたが、日本ではモバイルサイトを開くなら必ず使う、ぐらいに考えてよい

カレンダー形式のタイムラインRSSリーダー

タイムラインRSSリーダーは、Google Newsのカレンダー表示機能を使った、時系列で俯瞰するフィードリーダーです。



複数のRSSフィードを指定すると、それら全部をカレンダー上に表示します。カレンダーの単位を日・週・月・年に切り替えたりすることもできます。ブログ記事の量が少ないときは、大きめに切り替えるのがいいでしょう。

twitterなども含めて自分の複数のフィードを登録していくと、カレンダー+FriendFeedみたいな感じにもなりますね。

しかし、この形式でブログを見ると、活動してる日と活動してない日がはっきりわかってしまいます。

via Digital Inspiration

FlickrがPHP4からPHP5に移行

Flickr上で先月出された「このグラフの変化は何?」というクイズ

Drop in CPU

答えは、「PHP5に移行したFlickr.comのサーバのCPU利用率」ということでした。サーバのスクリプトエンジンをPHP5に切り替えた際に、上記のようなCPU利用率の削減が見られたということです。

このクイズを出したのは、Yahoo/Flickrでキャパシティ・プランニングを担当するジョン・アルスポーさん。先週のWeb2.0 ExpoでFlickrのサーバマシン入れ替えとパフォーマンス改善について話されています。

Web2.0 Expoのスライドで話されているのは、以下のような内容です。

  • Flickrのストレージ構成やデータ量
  • PHP5移行でCPU利用率が15%減ったこと
  • ImageMagickからGraphicsMagickに変更して高速化
  • OpenMPでサムネイル作成を並列化
  • サーバマシンを良いスペックのものに置き換えて台数や設置面積を削減
  • 交換前の古いサーバを、リアルタイム性を要しない処理や開発用に転用
  • 自動コンフィギュレーションやデプロイの自動化
  • 自己診断や自己回復を機械にまかせる
  • トラブルシューティング連絡手段(IRC, IMなど)とそのログ化や検索手段提供

未読ですが、この人のこの本もこのあたりについての本のようですね。

[am]4873113997[/am]

via Kitchen Soap

twitterのOAuthが一般利用可能に

申し込みページ

PHP用APIラッパーライブラリTwitter OAuth そのコード

twitterのパスワードを要求するマッシュアップはいっぱいありますが、OAuthに対応してくれればパスワードを個々のサービスに渡さなくても済むようになりますね。(僕はそういうサービスは使わないことにしてますが)

via twitter.com/twitterapi