http://rostrata.net Takeshi Yamada a free-lance web designer based in Japan. Fri, 28 Nov 2008 13:51:46 +0900 http://backend.userland.com/rss092 ja 海外ですごい勢いで成長しきた Glam 日本版がオープンしています。 ローマ字言語のサイトを日本語化すると大抵は間抜けな雰囲気になってしまうものだけど、Glam.jp は割とうまくまとまっているなと感じました。 Glam.com ⇔ Glam.jp なぜ日本語サイトは間抜けな印象になるのか 「意味が分からないことで文字自体をデザインとして見ることができる」という感覚的なものもあるけれど、特にWEBにおいて言えることは、「ピクセル表現上での日本語は可読性を保つ為の最小文字サイズが大きい」という点があると思います。 ローマ字はその造形自体がシンプルであること、また単語ごとに必ずスペースが発生するという法則から、10pxの文字でも十分に読めてしまう。 それが日本語となると、漢字が混じることで10ピクセルではとてもじゃないけど読みづらい、また読みづらい以前に文字が潰れてしまう。 文字が小さくできるローマ字は、カラム自体が１つのブロックオブジェクトとして扱いやすくなり、全体のデザインがまとまりやすくなる。 文字を大きくせざるを得ない漢字は、カラムがブロックではなく「文字のちらばり」のような印象になってしまうため結果的にデザインとしては扱い辛く、スカスカのブロックのような印象になる。 この文字自体の特性をうまくまとめる所に、全体のサイト印象に大きく影響するセンスが現われると思います。 『フォントサイズが大きい＝読みやすい』ではない 読みやすさを重視すれば「フォントサイズを大きくすればいい」と単純に考えがちですが、「フォントサイズが大きければ見やすい」とは限らないのがWEBデザインの特徴だと思います。 理由として、スクリーンという固定サイズの画面上では、フォントの大きさと一覧できる文字量が反比例するからだと思います。文字サイズが大きければそれだけ一覧性が犠牲になり、一覧可能な範囲が狭いということはまた別のストレスを生みます。 なのでフォントサイズも大切ではありますが、もっと気を遣うべきなのは実は CSS でのフォントの種類、行間、1行の文字数、背景色と文字色の関係だと思います。 Glam 日本版がそこまで野暮ったくならなかったというのも、その辺りがポイントではと思います。 その他、アンチエイリアスが綺麗な MacOS や Windows Safari などでの閲覧を前提として、日本語の良さが出る明朝体をうまく使っているサイトはとても読みやすく、綺麗です。 ◆ この Glam.jp を見ていてひどく残念な部分もありました。 メインコンテンツはいわゆるスイーツな女性たちのブログなのですが、人によって写真サイズがばらばらだったり、改行スタイルも統一されていなかったりと、書式については無法地帯だということ。 またワードか何か、他のエディタからそのままコピーペーストされ、様々なスタイル情報がインラインで入ってしまいサイトの文字スタイルが無視されてしまっている記事まであります。 これはある意味で仕方なかったり、今をときめく改行ばかりの文章もそれが個性と言ってしまうこともできますが、ブランディングを含めたサイトの継続的なクオリティ維持の為にはこの辺りまでしっかりと統一した方がいい気がします。 ブログは Wordpress で作られているようなので WISYWIG で自由に書いているのだと思いますが、例え更新者にHTML の知識がないとしても、最低限読みやすい段落の付け方くらいは意識してもらい、改行を1回押す事、2回押す事、Shift押しながら改行すること、それらがどんな意味を持つのかという教育は必要だと思います。 CMSにしたからといって、権限を渡すだけでは不十分というよい例ではないかと思います。あえてスイーツっぽさを醸し出す戦略だとしたら、それはそれでハイレベルです。 11月はすごく忙しかったし、自分も『頑張った自分へのご褒美』と称して何か買いたいなぁ。 http://rostrata.net/archives/277 hasegawa さんのエントリで初めて知ったのですが、IE で WordPress の管理画面にログインするとフッターに「browser happy」と書かれたロゴが現われるようです。 リンク先の browsehappy というサイト、「IEは危険です。なぜより安全なブラウザに換えないの？」といったメッセージと共に、ALAN や CHRIS（誰？）たちのブラウザスウィッチ体験談が読めます。 IE を使ってほしくないという気持ちは痛い程分かりますが、長谷川さんも書かれているようにクライアントワークではこれからも無視できないのが現実。 多分、新聞の日曜版でかわいいイラストと共に「ブラウザを選ぼう！」という記事が載るくらいにならないと、IE は使い続けられるでしょう。 日本で次世代ブラウザが普及しない理由（の想像） 最近 WEB制作系の雑誌で早速 IE8 対策として解説されてるのを見て思うのが、「結局は制作側が自分達で複雑化してしまっているんじゃないかな」ということ。 ハックだとか分岐だとか、いつまでやるのだろうかと。 複数のブラウザ仕様の隙間を探ることがWEB制作者のやるべき事なのかと。 普通に作ればほとんどの最新ブラウザで表示できるのだから、それでいいのではと思う。制作側が毅然としてこう考えていれば、 「うまく表示されないのはサイトが悪いのではなくてあなたが使用中のブラウザが問題なんですよ、よりよいブラウザは無料でダウンロードできますよ」という知識は自然と普及していくのではないかと思う。 かなり前に「欧州ブラウザシェア - ROSTRATA.net」という記事にも書いたけれど、特に日本ではその辺りの認識が低い。 『青いeマーク ＝ InternetExplorer』 ではなく、『青いeマーク ＝ ザ・インターネット』なのだ。 その原因が制作者側自身にあるという仮説を立ててみる。 どんな環境でもお利口さんな優等生サイトを作りたい。ようこそあらゆる閲覧者様、ささ、どうぞ。という超 OMOTENASHI 精神。 なかなかうまく表示されないのがむしろ快楽というM的要素。 細々としたハックを駆使して作り上げるという箱庭的な魅力。 これら日本特有の文化・国民性が、日本でのブラウザ世代交代の鈍化、もとい IE シェアの高さを助長している気がしてならない。 ◆ 更に深く読むと、もしIEが消えてしまった場合、HTMLコーディングはものすごく簡単になり、HTMLだけしか出来ない人は一気に暇になってしまうので、それはそれでWEB業界としては問題かもしれない。 でも本来その時間はもっと進んだ技術習得とか、マーケティングとかに使うべきなので、やっぱり単なる構造文書でしかないHTMLごときに時間を使わなければならないという現状はやっぱり無駄が多い。IEのせいで。 http://rostrata.net/archives/274 先日発売されたアルミニウムMacBook、発売日にBTOして1週間待たずに届き、しばらく使用しています。 今回のリニューアルはなんとなくスルーする人の方が多そうな印象、せっかく買い替えタイミング的に2年に1度の「俺のターン」なので真剣にレビューします。 まず比較基準として、これまで使用していたのは『MacBookPro late2006 2.16GHz GHz Core 2 Duo』、今回購入したのは『MacBook late2008 2.4GHz Core 2 Duo』です。 ■処理速度の高速化 CPUが少し速いことや新しいグラフィックカードであることから当然ですが、動作は比較しているMBPと比べて確実に速いです。大量の写真のCover Flowブラウズとか分かりやすい動作はもちろん、各アプリの動作も速い。ちなみに2年前購入のMBPは24万円くらいだった物、今回のMBは18万円です。 安くなったというよりも、値段は据え置きでMBがMBPクラスに、MBPは更に高性能にという感じですね。 ■アルミ削り出しアルミニウムユニボディ 全体的な剛性感やカタマリ感は格段にアップしています。一言で表現するなら『トヨタ車からドイツ車』のような…。車に興味のない人には全くわからない例えですが、とにかくそういう印象。 モニタ開閉のラッチもなくなり、開くときは片手でふわっと、閉じる時はパフっという感じ。モニタはかなりの角度まで開きます。 ■シネマディスプレイ対応 今までこれがなかったせいでMBPを選んでいた人は多いはず。Mini DisplayPort - DVIアダプタを利用していままでのシネマディスプレイとの併用が可能です。 ただデュアルディスプレイでのスリープ復帰時に表示にノイズが入ることがありました。すぐにおさまりましたが、旧MBPではなかったので、若干気になります。 ■LEDバックライトディスプレイ 今まで全てノングレアを選んできましたが、このモデルはテカテカのグレア液晶のみ。 オフィスなど調光された場所ではそれほど問題ないのですが、外出時などは全然だめです。例えばカフェに行き背後に窓があったり照明があったりすると反射しまくって画面がまともに見えない。 ライトユーザがメインターゲットのMBだけならまだ分かるけれど、MBプロまでグレア液晶のみというのはどうかと思います。 ■マルチタッチトラックパッド タッチだけでクリックやドラッグができるのは便利ですが、とても繊細な指先が必要です。 iPhoneでWEBブラウズしていて、画面をスクロールさせようとフリックした箇所にリンクがあり、不意にリンク先に遷移してしまう事があると思います。それが頻繁に起こるし、不意に大量のテキストを選択してカーソルを動かしていたり、Finder上で知らぬ間にファイルをドラッグして移動させてしまったり。Photoshopなんて論外、相当単純なアプリケーション以外は使えない。 慣れればそれなりにうまくなるとは思いますが、OSのUIよりも以前に一番フレンドリーであるべき入力装置に慣れが必要というのは問題だと思います。 そのマルチタッチ機能は環境設定でドラッグだけ無効にしたり、完全に無効にすることはできます。しかしそうすると今度は一体型の機械的ボタンの押し心地がとても悪い。固くて音も大きく、旧型のトラックパッドが「コクコク」ならば新型は「パコパコ」という感じ。だいぶ慣れた後に旧MBPを操作してみると、そっちが改良型のように思えてしまいます。 ◆ 最後の方は不満ばかりになってしまいました。しかし仕事ではモニタや入力装置は必ず外付けのものを使うので実際の所はどうでもよく、買う買わないの判断材料にはなりません。 デザイン、性能、質感、携帯性の向上、環境への配慮などあらゆる点で進んでおり、プロダクトとして素晴らしいの一言です。 以上、レビューでした。 また、今回 MacBookPro にしなかったのはCore 2 Duo 2GHz超えててメモリも2GBあれば性能的にもう十分かなと思ったため。少なくとも私の用途にはたぶんこれ以上求めても生産性はそう変わらない。ディスプレイサイズは狭くなるけど、デザインなどする時はどちらにしろシネマディスプレイに繋ぐから、より小さくて軽いMacBookをという事で選択しました。 http://rostrata.net/archives/272 最近のmacにはiSightというwebカメラが画面上部に内蔵されていて、簡単にライブチャットしたり自分の写真を撮る事が出来ます。 しかしカメラの撮影範囲は本体の方向やモニタの角度でしか調整できない、つまり自分方向にのみ固定されています。これは照れざるを得ない仕様です。 先日 USTREAM で本体を操作しながらモニタの向こう側を撮影したいイベントがあったので、方法を探ってみました。 ■ まずmac対応を謳っているWEBカメラを用意 昔販売されていたApple純正の筒のようなデザインの iSight はかっこいいのですが解像度も低いので却下、解像度が130万画素で出来るだけすっきりしたデザイン、USB Video Classに対応しているということで『シグマ UVCA130AUWH』を選びました。 ■ iSightが優先して認識されてしまう 早速USB接続し USTREAM にログインしてみると、ビデオソースの選択肢には今まで通りDV、FireWire、USB Video Classの３つのみ。USB Video Classを選択してみると、やはり内蔵iSightが認識されてしまいます。 いくつかのアプリケーションで試してみましたが、同じ規格の複数のUSBカメラを識別できるものとできないものがありました。例えばSkypeは最初から２つが認識され、選択することができました。 内蔵iSightをシステム内で無効にする方法を調べてみましたが見つからず。 AppleDiscussionログでも同様の質問がありましたが回答者なしという状況でした。 ■ エフェクト系のアプリを仲介させてみる そこで『CamTwist』というアプリケーションを見つけました。 これは本来はWEBカメラの映像にエフェクトをかけるという楽しいアプリで、PhotoBoothにあるようないろいろなエフェクトをビデオチャット時にも利用したいときに使うそうです。 一旦こういったアプリに信号を通すことで、別物として認識されるのでは…という予測です。 USBカメラを接続した状態でシステムを再起動し、CamTwistを起動すると２つのUSBカメラ（内蔵iSightと外部接続しているカメラ）が認識され、切り替えることができました。 そしてそのままUSTREAMにログインすると、なんとビデオソースの選択肢に『CamTwist』という選択肢が出来ています！！ 選択すると、CamTwistが出力している映像、つまり外部カメラの映像が USTREAM に映し出されました。 ◆ こんな方法で、当日はMBP本体はこっち向き、カメラはあっち向き、更にUSTREAM映像のミラーリングディスプレイもあっち向き、という感じでうまく行きました。 http://rostrata.net/archives/270 映画を探すため「Google映画検索」と「映画生活」へのリンクページを作ってみました。 地名か郵便番号を入れて検索すると、Google映画検索で近くの劇場の上映スケジュールが一覧表示されます。何となく最近の映画情報をブラウズしたい時の為に『映画生活』へのリンク。ただそれだけです。 URLは『 http://lab.rostrata.net/ct/ 』iPhoneでアクセスしてホーム画面に追加しておくと便利です。 ■これがこうである理由、作った動機 iPhone で映画情報を調べるなら『映画生活』『Y!映画』などが 既に iPhone 対応済みで予告編も観れちゃったりしてとても便利です。 でも自分で使ってみて、何かかゆい所に手が届かない。 それは何故かと考えると、映画を観たいと思う動機って「新作情報一覧の中から選ぶ」というよりも「クチコミやウワサを聞いて観たくなる」ということの方が多いからだと思います。 つまりモバイルで映画について調べる時は 既に観たい映画は決まっている→どこでいつやっているか知りたい 何となく映画観たい→とりあえず近所で今日観られる作品スケジュール一覧が見たい ということが多い気がします。 だから『映画生活』『Y!映画』などのような全国共通の最新情報というのは実はあまり実用的でなかったりします。例え映画の概要を読んで「観たい！」と思ったとしても、そこからすぐに近所の劇場でのスケジュールへ飛べないと意味がない。それに悲しいことに東京以外の地方都市ではそもそも上映されていないことがよくあるからです。 そんな中で一番使えるなと感じたのが Google の映画検索。 まず郵便番号を入力するだけで、そのエリアの『映画館+上映作品+上映時間』がざっと一覧表示されます。iPhone 対応はしていないけれど、一覧表示されてしまうことがかえって探しやすいのです。反対に iPhone 対応していないということは、そこから作品名などでリンクを辿っていくのは少し疲れます。 こんな理由から最終的に 観たい作品が決まっている！→ Google映画検索 観る映画をこれから探す！→ 映画生活 for iPhone という結論に達したので、それをまとめたものとして冒頭のページを作ってみました。 ◆ 作ったといってもPhotoshop 5分、HTML 3分、うぷとテストして合計10分ほど。これだけの作業でも「ホームに追加」すればなんだかアプリっぽくなっちゃうのがまた iPhone 楽し。 Google検索は一覧表示だけで戻り、それぞれの映画詳細は映画生活という使い方が便利そうだったので、あえてフルスクリーンにはしないようにしています。一応アイコンも用意しています。 天気予報みたいにAPIがあればもっと便利なWEBアプリのようなものを作れるかなと思ったのですが、作品名+上映する劇場+上映時間などがひもづいている映画情報APIってないんですね。 早かれ遅かれ便利な映画検索アプリはどこからか出てくると思いますので、それまではこれを使って映画ライフを楽しみたいと思います。 http://rostrata.net/archives/267