テレビのテロップに学ぶ文字装飾論 第1回 基礎編(A)

前置き

かつて私はテレビ業界の末席で短期間仕事をしていました。CGやニュース映像に挟むグラフアニメーションなどを作っていたのですが、簡単なテロップを差し挟むといった業務もしていました。
テロップといえば、文字スーパーとも言われる、今やテレビには無くてはならない、アレですね。
たかがテロップではありますが、カメラ映像にそのまま文字を置くという前提に、いかに視聴者に見やすく伝えるか、という技術は中々奥深いものでした。
さて、ブロードバンド全盛の昨今、サイトを作る上で、画像を多用するのは常識になりつつあります。記事タイトルやブログのトップバナーには、テキストではなく写真とフォントを組み合わせて見栄えを良くするケースも多いですね。
ところが、写真と文字を組み合わせる場合、その読みやすさ、目立つかどうかなどの要素にも配慮しなくてはなりません。
そこで、昔取った杵柄ではありますが、テレビで培った技術を応用して、写真と文字の効果的な組み合わせを考えてみたいと思います。
ここで使用するアプリはPhotoshop CS3です。

ハダカの文字


この写真に「ぬけるような青空」という文字を組み合わせるとします。
Photoshopで普通に文字ツールを使って打ち込むとこうなります。

この状態を「ハダカの文字」と言います。どちらかというとDTPの世界で使う用語でしょうか。一切何も装飾を施していない、という状態です。
しかし、読みにくいですね。これは、背景の草原が明るく、白文字の明るさと差が際立っていないからです。これを解決するアプローチは

  1. エッジをつける
  2. ハーフ板をつける
  3. ドロップシャドウをつける

です。文字の色そのものを変えるというアプローチもありますが、下が実写画像の場合は、大抵良い結果を生まないですね
では順番を追って見て行きましょう

エッジをつける

  • 文字のアウトラインと背景との間に、黒のふちをつけることでコントラストが生まれ、認識性が高まります
  • 白文字に対しては黒ふちを、黒文字に対しては白ふちをつけます
  • Photoshopでは、レイヤー効果→境界線で簡単に作ることができますね

ハーフ板をつける

  • 板というのは、文字の下に置く単色図形のことです。テレビ業界では「座布団」「おざぶ」と言う人もいます
  • ハーフというと、透明度を持っていることになります。下の映像をある程度「生かす」ことができます
  • Photoshopでは、シェイプレイヤーを文字レイヤーの下に敷くことで簡単に実現できます
  • エッジと同じく、白文字には黒ハーフ板、黒文字には白ハーフ板を敷きます

ドロップシャドウをつける

  • フォントそのものの雰囲気を壊さず、ある程度背景と馴染みながら認識性を高めることができます
  • 下にくる画像次第では、必ずしも読みやすい効果が得られるとは限りません
  • Photoshopでは、レイヤー効果→ドロップシャドウで簡単に作れます
  • 白文字には黒い影を、黒文字には白い影(影?)が良いでしょう*1
  • 距離、スプレッドなど弄れる値がありますが、なるべくボケが小さいほうが良いでしょう
  • あまりボカしすぎると、可読性が低くなります

今回の総括

テロップというのは、カメラの撮った実写画像にそのまま文字を流し込みます。しかし、映像はなるべく見せたい。可読性も高めたい。ただ単に可読性を高めたいのなら、黒板をおいて、白文字を置けばいいだけです。でもその間を取るのが、エッジであり、ハーフ板であり、ドロップシャドウです。*2
そしてこれらの技術はどれも、背景の映像と文字との間にコントラストを作るというのが大きなポイントです。
写真に文字を入れる時は、ハダカでは置かずに、何らかの装飾を施すようにすべきでしょう。

*1:業務では黒文字に白ドロップシャドウというのはほとんどやりませんでした。不自然だから?

*2:ハーフ板はこの中でも一番映像を潰してはいるのですが、、、

はてなブックマークプラスについて ひとこと


ブコメコメントより

alexam webservice, hatena plusアイコンがカラースターよりも自己の存在を主張している・・。

そうなんだよね、はてブリニューアル時もボタンのデザインがわかりにくかったという問題があったけど、はてなの中の人って、本当の意味でのデザイナーって居ないんじゃないだろうか。これじゃあオペレーターが勝手にデザインしてるレベル。
いくら洒落っ気のあるグラデでかっこいいアイコンを作れても、見せたい情報をコントロールできなきゃ意味がデザインとはいえない。

Macでねとらじ(初級編)

前々からやろうと思っていた、Macネットラジオをする方法を説明します。
ネットラジオ界では一日の長がある、Livedoorねとらじを使って配信する方法です。
初級編ということで、この章で出来ることは他のブログなどでも紹介されていますが、最初は僕もそれらを踏まえて配信していました。
その上で、僕が気づいた点などをからめて、再構築します。
僕自身、はてなハイク上で、ハイクユーザー向けに配信をしています。記述内容もハイカー向けになりますので、はてなユーザーやハイカーでない方は、適宜読みかえて参考にしてください。
なおこの初級編で目指すのは、マイクからトークの音声を流すという、ごくごく初歩的なところまでです。

ハードウェアの準備

必要なもの

  • Mac
  • ヘッドホン

まあ、当然ですね。最近のMacは全機種マイク内蔵だそうです*1。僕自身はMacBook 1.83GHzを使っていますが、これの内蔵マイクは非常に優秀で、かなりキレイに音声を拾ってくれます。初級編については、内蔵マイクで事足りるので、このまま進めます。
ヘッドホンは安物でいいです。インナーイヤータイプでも。要は自機から出る音を内蔵マイクが拾わないようにするためです。これをしないと、トークバックという現象が発生し、自分の声がやまびこや輪唱のようになってオンエアされてしまいます。

ソフトウェアの準備

必要なもの

順を追って説明していきます

Mac OS X

当然ですね。使用するアプリケーションが要求するバージョンを用意しましょう。今後アプリがバージョンアップするにつれ、要求されるOS Xのバージョンも上がって行くと思うので、ここではOS Xのバージョンは特に指定しません。
とりあえず最新版か、その小数点1つ前なら大丈夫かと思いますが。
僕自身はOS X 10.5.6です。

LadioCast

オーディオのミキシングと、オンエアを送出するアプリです。

libmp3lame.dylib

音声をmp3に圧縮するコーデック? です。僕もよく判ってませんが、僕の場合必須でしたので、入れてます。
LadioCast自体はオンエアのコーデックをmp3とAACから選べますが、僕の場合AACはリスナーさん側でうまく聴けなかったようなので、必然的にMP3の選択を強いられました。

設定

Mac OS X - システム環境設定


サウンド→入力→内蔵マイク
実際に何か喋ってみて、メーターがふれるか確認しましょう。普通に喋ってみて、メーターが右端に届くようであれば、音が大きすぎる、ということです。入力ボリュームのスライダーを左にずらし、いい感じに調整しましょう。

LadioCast


まずは左側から。

  • 入力1→内蔵マイク MainをON AUXはOFF
  • 入力2→N/A MainもAUXもOFF*2
  • 入力3→N/A MainもAUXもOFF
  • メイン出力
    • Main→内蔵出力
    • AUX→N/A

これで、音声入力の準備はOKです。次に、オンエアサーバーとなる、ねとらじサーバーとの通信に必要な設定をします。それがスクリーンショットの右側。
設定を始める前に、Livedoorねとらじのサイトを確認しましょう。


Livedoorねとらじには、オンエア用のサーバーがいくつかあります。オンエア前にここを確認し、なるべく混雑していないサーバーを選びましょう。
なお、サーバーを変えると、リスナーに教えるURLも変わってきますので、基本的にオンエアのURLはその都度変わるものだと考えておいたほうがいいでしょう。リスナーにもそう伝えておくべきです。
では設定。

  • 接続
    • サーバーアドレス→std1.ladio.netなど(自分がオンエアで使用するサーバーのアドレスを入力)
    • ポート→8000(これも、自分の使用するサーバーのポート番号を入力)
    • マウント→好きな半角英字(分かりやすく言えば、ID名のようなもんです。自由に決めてください)
    • ユーザー→source(絶対にsourceと入力)
    • パスワード→ladio(これも絶対にladio)
    • 文字セット→Unicode(UTF-8)もしくはShift-JIS(どちらでも、、、後述)
    • 放送名→ご自身の番組名を自由に入れましょう
    • ジャンル→これも自由に
    • URL→実況掲示板などのURLを入力
    • 説明→番組の内容を説明しましょう
  • エンコーディング
    • フォーマット→MP3(詳細後述)
    • サンプルレート→22050(この前後でも可。44100がCD並の音質ですが、数字が大きすぎるとプリバッファ*3が発生しやすくなります)
    • ビットレートモード→平均(可変でも問題ないかも)
    • ビットレート→48(24〜64あたりで。数字が大きくなると音質が良くなりますが、プリバッファが発生しやすくなります)
    • クオリティレベル→可変の時に有効になるみたいですが、うちでは可変使ってないので、、、
    • チャンネル→Mono(しゃべるだけならモノラルで)
  • メタデータ
    • 文字セット→Unicode(UTF-8)かShift-JIS(これも後述で)
    • 曲情報→デフォルトでは「LadioCast 0.8.1」となってますが、まあそのままでいいでしょう。
文字セットについて

リスナーさんはWindows Media PlayeriTunesでオンエアを聴いてくれるわけですが、このアプリに曲の情報などが表示されるわけです。ここで文字コードを適切に設定してやらないと、リスナーさんのアプリ上で文字化けします。
ただ、問題なのは、WindowsMediaPlayerはShift-JIS、iTunesUTF-8なんですね。つまり、どちらかしか設定できない以上、どちらかのアプリでは必然的に文字化けしてしまうんですね。
まあ昨今はiTunesWindowsでも普及しているようなので、個人的にはUTF-8に設定しています。
ちなみに、オンエアを開始すると、Livedoorねとらじの番組表に自分の番組が掲載されますが、そこはUTF-8でもShift-JISでも、自動的に変換されるようです。

URLについて

Livedoorねとらじの番組表には、関連URLという項目があります。主な使われ方は、実況掲示板へのリンクです。これは、その放送を聴きながら、リスナーさん達、時としてオンエア者も交え、掲示板で半チャット状態のコミュニケーションをするものです。ねとらじでは、したらばの掲示板がよく使われるようです。
僕はハイクユーザーですので、自分のハイクページへのリンクを貼っています。ハイカーがLivedoorねとらじで配信する場合は、実況はハイクのキーワードページか、オンエア者のハイクidページでするのが一般的になっています。

ハイクでの実況については、いろいろややこしい問題があったりしますが、それについてはまた別の機会に。

放送を開始する

【接続する】というボタンを押します
数秒後に放送が始まります
まあ、何かしゃべっていきましょう

告知する

オンエアが始まったら、リスナーさんに告知しましょう。
オンエアURLを告知するわけですが、肝心のURLは、

です。当然、全部半角英数ですよ。
これを聴いてほしい人たちに教えるわけです。

うまくオンエアできているか確認する

こればっかりは自分では確認できないので、他の人に確認してもらいましょう。
ハイクユーザーなら、ネットラジオ部か、急募などにオンエアURLを書き込み、うまくオンエアできているか、検証してくれる人を募りましょう。

放送を終了する

再度【接続する】ボタンを押します
終わります

おわりに

どうですか? 簡単でしょう?
LadioCastは一旦設定した箇所は、アプリを終了しても記憶しているので、次回からはサーバーの設定を変更することが無ければ、【接続する】ボタンを押すだけでまたオンエアが出来ちゃいます。
ねとらじ初心者ハイカーの方は、拙エントリもご参照ください。

*1:違ったらゴメンナサイ

*2:スクリーンショットはMainがONですが、、、汗

*3:リスナーが聴いている途中に、瞬間的に放送が途切れること

はてなハイクでネットラジオをする上で抑えておきたい8つのポイント

まさか自分でも「n個のポイント」的なよくあるブログタイトルを書くとは思わなかったんですが。
ここ1か月ほど、ネットラジオにハマっております。聴くほうも、オンエアするほうもです。
はてなハイクに入り浸ってるので、ハイクユーザーの人がしているのを聴いているうちに、自分も感化されて始めた次第です。
サーバーは ねとらじを使っているのですが、Macねとらじの組み合わせで出来る機能、トークiTunesによる音楽+Skypeによる複数人数放送、さらにそれを自マシンで録音は実証しました。この辺りの詳細は また何れどこかで書きたいと思うのですが、今回は、ネットラジオをする上で抑えておきたいポイントを簡潔に まとめておきます。
備忘録というよりかは、これから はてなユーザーでラジオしたい! って人が参考にしてくれれば幸いです。基本的には、ハイクユーザーがハイクキーワードを軸にネットラジオをする、という視点で書いていきます。自分が4度ほどのオンエアと、いくつか実際に聴いたハイカーさんたちのオンエアを聴いて参考にした内容です。人それぞれ考え方やアプローチがあって然るべきなので、他のやり方を頭ごなしに否定するわけではありません。それを念頭において読んでいただければ幸いです。

1)総尺は2時間

ラジオをする上で、オンエア時間はどれくらいがいいのか、という話。ずーっと喋りっぱなしか、音楽をかけるのかにも依りますが、大体2時間が目処です。聴いてるほうもですが、喋っているほうのテンションが持たないと思います。
ねとらじでは、もっと長い時間オンエアしてる人もいますが、途中長時間喋らなかったりする人も多いです。聴き手に楽しんでもらえて、かつ負担にならない時間としても、2時間は1つの尺度と言えます。
映画や演劇、オーケストラなどでも、2時間を超えるものは途中に休憩が入りますよね。人間の集中力が続く1つの区切りなんでしょう。

2)音楽は かけないよりは かけたほうがいい

JASRAC的なナントカは横に置いておいて、音楽は かけないよりは かけたほうがいいです。2時間で終わるとしても、2時間ずーっと喋りっぱなしは結構キツいです。思考の整理や息抜きをするためにも、音楽をかける=自分が喋らない時間というのを、数分でも確保することは重要。
ネットラジオは、ハイクであればキーワードページで実況レスがつきますし、ねとらじなら したらばに実況掲示板が出来ます。そのレスをまとめて確認する時間としても使うべきです。ずーっと喋りっぱなしだと、スレの流れとオンエアの流れにズレができてしまいます。話題が変わったのに、つけてもらった前の話題のレスに反応すると、話が進まなくなったりします。

3)告知は早めに

僕も最初は そうでしたが、人のオンエアを聴いて感化され突発的に自分もオンエアを始めると、潜在的なリスナー数を減らしてしまうかもしれません。
あらかじめ数日前に、「何月何日何時から何時間ぐらいオンエアします」という内容を書いておきます。自分のハイクidページや、専用のキーワードページがあるなら、そこで告知しておきましょう。実際にオンエアが始まったら、告知と同じキーワードに、m3uやUstreamURIを書くべきです。
突発オンエアであったがために、気づいたらオンエアが終わっていて、悔しい思いをするハイカーさんは結構多いです。ハイクはラジオ好きが多いみたいですね。

4)ネタは仕込んでおく

台本というほど大げさでなくていいので、ある程度、話のネタと構成は考えておきたいところ。あえてgdgdを隠さないだとか、長時間の無音を厭わないというのであれば、それでもいいかもしれませんが、リスナーが退屈に感じてしまわない配慮が必要であれば、大変重要な要素です。
また、先ほど2項目めに挙げた「音楽」をかけると、その曲についての話題を提示できるので、ネタ不足解消にも つながります。
ただし、あくまで自分が深く掘り下げて語れる内容の話題でないと意味がありません。曲はかけたけど、曲名とアーティスト名だけしか知らない、というのでは お話になりません。当然ですが、その作品が収録されているアルバムは何で、いつ頃発表された作品で、自分が気に入ったフレーズや歌詞、これをカバーしているアーティストなど、話題にできる要素について知っている必要があります。
逆に言えば、ネタを用意してもある程度語れないのであれば、当然下調べもしておく必要があります。そう、ブログのエントリを書いている最中に知らないことにブチ当たったらWikipediaなどで調べるのと同じように、、、 ただし、ネットラジオは生放送なので、事前の下調べが重要になってくるわけです。

5)BGMはあったほうがいいが、騒がしくないインスト曲を

どれだけネタを仕込んで流麗に喋ろうとしても、どうしても言葉につまったり、無音の時間ができてしまいます。別にネットラジオに放送事故という定義はないですが、あまりに酷いと聴いている側には好ましくはないでしょう。
しかし、BGMを流していると、そのちょっとした無音の違和感を削いでくれます。ただし、歌詞つきの騒がしい曲は 避けたいところ。特に日本語詞だと、自分の喋りとかぶってしまい、非常に聞き取りづらい場合があります。これは映画や演劇で言われる一般的な演出論ですが、僕は外国語詞の曲ならまだアリかなあ、とは思ってます。

6)レスは必ずしも全部拾わない

話すネタに困っている時、リスナーさんのレスは天啓にも等しいありがたいものですが、リスナーと そのレスが増えてくると、しゃべりながらそれを追うことができなくなります。曲を流せばその間読むこともできますが、数が多くなってくるとそれもままならなかったりします。単に同調しているコメントであるとか、この先の話題に必ずしも発展的に成り得ないレスは置いておきましょう。拾うべきレスと流すべきレスを選ぶ閾値は、自分の話題ストックの多寡に応じて、柔軟に切り替えていくべきです。ただし、オンエアが終わってから★をつけるであるとか、レスするなどのフォローと感謝の気持ちは忘れずに。

7)途中参加の人にも配慮を

別にネットラジオ特有のものではありませんが、実際のFM/AM放送でも、現在の話題や募集しているトピックなどは、適宜パーソナリティが告知します。一端話題が途切れた時や、曲かけた後などで、カレントトピックを説明することはリスナーへの大事な配慮です。
加えて、ハイクはキーワードページであってもエントリが集中すると過去ログを参照しづらくなります。そのため、オンエアでの告知と同様、m3uやUstreamURIをキーワードページで再度告知することは、オンエア中での告知よりもさらに重要と言えます。
出来れば、定型文として予めURI告知文を作成しておき、必要に応じてエントリにコピペして、こまめに告知エントリを出したいところです。

8)凸待ちは高等テクニック

ねとらじジャーゴンとして、凸待ちというのがあります。要はSkypeの会話音声をネットラジオのオンエアに載せる準備をしておき、自分のSkype IDを晒します。掲示板などでこれを見た人が、自分のSkype IDを使って電話をかけてきて、対談放送をする、というものです。
僕も過去のオンエアで1度、自分も含めて5人でやりましたが、非常に醍醐味を感じる反面、難しいな、とも思いました。会話の方向性を制御しずらい、というのがあります。ネタが何も思いつかなくて、盛り上がれば何でもいいや! という時ならむしろ効果的ですが。少なくとも自分が用意しているテーマでオンエアしようとしていて、そこに凸待ちという、極端な表現ですが、どこの誰かも分からない人物から電話がかかってくるということは、相当リスキーです。ただ、その先の分からない展開を期待しているリスナーもいると思うので、要は使いどころかと思います。
あと、盛り上がりすぎて、オンエアをなかなか終われなかったりもします。無理矢理にでもその場を締める話術がなければ、凸待ちはストレス負荷の高いものになるかもしれません。

と、まあ現時点で思ったことを書き連ねてみました。
次は、こうしたらもうちょっとよくなるんじゃないかな、というTips的なことを書いてみたいと思います。
まあ、いつになるかわかんないですけど。

ハイクとUGCと奇妙なユビキタス感

ハイクにエントリしだしたのは昨年の夏頃だったと思う。時おり丸1日ハイクにかじりついていたこともあったが、この年末年始、一番濃密なハイク生活を送り、初のハイクオフにも参加した。普段はハイクのことをダイアリーに持ち込むことはしたくないのだけど、いろいろ感慨深いことが多かったので、ここにまとめておこうと思う。

UGCとしてのハイク

UGCという単語がどういう意味なのかご存知ない方はキーワードページ等を参照してもらうとして、当初僕はブログやSNSUGCに含まれないと考えていた*1。それは、このブログも含めその大半がチラシの裏的なものであり、堂々と(コンテンツという意味で)UGCを名乗ってよいのは、YouTubeFlickr、pixevといった、バイナリデータを共有するものだという先入観があった*2
ハイクの大半も言葉遊びで占められ、それはそれでチラシの裏的ではあるのだけど、画像を扱うという点においては、ちょっと意味合いが違ってくるのかな、と思う。
ハイクにはフォトライフとの連動ではあるが、画像のポストができる。しかもメールでエントリができ、キーワードで共有、時系列で参照する。これは何かというと、報道、それも生番組に近い。個人であればブログやSNSでも近いことができるが、複数人でしかもここまで手軽に、となると、ハイクぐらいなもんじゃないか。*3
ハイクには、おえかき機能でちょっとしたイラストを書く人も多いが、フォトライフ外からの画像を適宜リサイズして表示する機能がある、というのにも注目したい。自分で絵を描いたり、デジカメで撮ってこなくても、ネット上のあらゆる(大抵はネタとなる)画像をGoogle画像検索で探し当て、ものの数秒で貼付けられる。例え他人様の画像であっても、ツボをつくような画像であればもう、彼彼女は人気者になれる*4。画力や文才がなくても、ある程度の編集力*5だけですら、注目を集めることができる。ここがUGCであって、ブログ/SNSでなく、またバイナリデータ共有サービスでもないところじゃないだろうか。

(当たり前のことだけど)メディアの最先端

印刷が発明され、新聞が発明され、ラジオ、テレビ、インターネットと進化したのと比例して、コンテンツの消費スピードも速まってきたことは、周知のことだろう。
しかし、それにしても、ハイクは、速い。ウケる*6ネタを思いついたら、早速そのキーワードを作成、ユーザーたちはひとしきりそのネタ(キーワード)で言葉遊びを終えたら、また新しいキーワードへ移っていく。はてブもそうだが、イナゴ並みだ。
これの善し悪しは人によって評価が割れるだろう。だが、少なくともそういう現象を生み出すサイトデザインである以上、はてな側はあえてその部分を残していると思われる*7
ただ、僕はこのことを裏返しに見て、同時代性の極地だと考えている。僕が中高生の頃はまさにケータイ第1世代*8で、日がな一日ケータイメールをしていた。当時付き合っていた女の子と、一日の総やりとりが100往復を超えたこともある。だが、中身は「今日の映画なに?*9」とか「ちょ!w ライアン空気嫁*10」と、今のハイクと大して変わらない*11。それが今日振り返ってみれば、現代の*12Web2.0的な視点から言うと、流石21世紀と溜息をつきたくなるほどの先進ぶり。バイナリデータの扱いに対する敷居の低下や、乱立するコンテンツを快適にブラウジングするためのメタ情報という概念、果てはUstreamなどのリアルタイムストリーミングなど、ケータイ第1世代経験者としては隔世の感といっていいほどの充実である。
先述のメディア発達の順序の中で、テレビまでの部分に、少なくとも同時代性というのは、受動的に共有されるものだった。「昨日あのドラマ観た?」で始まる、始業前の会話である。しかし、ハイクを始めとするUGC達には能動的同時代性がある。これは、受動した時点で共有し、また同時に能動に移れるという意味において、現時点で究極の同時代性である。
受動的それと能動的それ。どちらがより人の興味を惹き付けるかは言わずもがなだが、少なくともテレビ離れはそんなところにあるのだろう*13

報道にはまだ勝てないが、エンターテインメントとして君臨する

YouTubeの台頭時、ついに個人は放送局を手に入れた、なんて言いはやされたが、放送局を手に入れても、番組を作るノウハウは手に入れられなかった。いや、手に入れたとしても、それは個人の手に負えるものではない。午前中に起きた事件を取材し、裏を取り、編集し、夕方のニュースに間に合わせるに必要なのは、撮影編集の機材人材とそのノウハウ。これらは個人がどう逆立ちしても、現状得ることはできないだろう。
ただ、締め切りがなく、(小回りの利かない巨大営利企業であるテレビ局を尻目に)巧みなアイデアを駆使した作品、これは十分エンターテインメントとして通用するだろうし、実際している。ねこを鍋に入れたのが巧みなアイデアか、と詰られるかもしれないが、鍋云々以前に、ねこを、ただ時間の許す限り*14眺めていたい、そんなニーズに答えたのが巧みなアイデアだし、そのニーズに答えられなかった放送業界も小回りが利いていなかったという証左だ。
ただ、映像はまだまだ技術面で敷居が高く、万人が手を出して等しくそれなりの注目を集められるわけではない。しかし、それがブログ/SNS級になると敷居がぐっと低くなり、また静止画レベルであればテジカメ、携帯電話カメラの充実により、十分情報として扱える。これを編集、そして告知、共有*15を同時にしてしまうのが、はてなハイクだと言えるだろう。
実はmixiも初期のころしばらく参加していたので知っているが*16、編集、告知、共有に関しては現在のハイクに迫れる機能を持っていた、もしかするとユニークユーザー数が桁違いな分mixiのほうが可能性が高かったかもしれない*17。しかし、ハイクのキーワードに相当する部分、告知と共有に相当する機能が*18存在しなかったので、ハイクのほうがその意味では優れていると言えるだろう。

なんでこんなことを思ったのか

はてなハイク忘年会2008@京都において、貸し切った飲食店にノートPCを持ち込み、プロジェクターでPC画面を映し出し、Ustreamを使って中継をするという試みがなされた。Ustreamを使ったことがある人ならわかるが、放映してる側はカメラに向かって喋ることもできるが、観ている側は基本チャットでコミュニケーションする。つまり、視聴者がリアルタイムで文字情報をおくり、それに対して映像と音声でレスポンスできる。ハイクだから、お絵描きもその場でアップされ、またその絵に対して反応が入る。リアルに酒飲み合っている人たちと、回線の向こうから語りかけてくる人たち。なんなんだ、この垣根が曖昧なユビキタス感。攻殻機動隊が描く電脳の、入り口にまで来ているかのような感覚。
僕はかつて、博報堂から出版されている「広告」誌の1999年7月号において、粉川哲夫による、パソコンと電話回線によるストリーミングラジオの記事を読んだことがある。概要をかいつまんで言えば、VAIO C1をPHSもしくはグレーの公衆電話に接続し、自前で用意したサーバーを介し、RealMedia形式のリアルタイムストリーミング放送を新宿や渋谷の街頭で行った。もちろん記事はその放送後のものなので僕はリアルタイムで視聴することは叶わなかったが、録画ファイルを非リアルタイムストリーミングで観た。痛く感激した。当時の技術は個人*19では技術的にも経済的にも非常にハードルの高いものだったが、それがほぼ10年経った今、自分の目の前に、手に届く技術として降臨したことは、非常に感慨深いものだった。
きっかけがハイクのしかもオフ会で、Ustreamという直接ハイクに関係のないものではあるけれど、僕が今までダラダラ述べ続けてきたことの延長にこのストリーミングで得た奇妙な感覚。これをまず第一歩で支えたのがハイクだったな、と思った2009年年頭だった。

*1:今調べてみたら、含まれるんだね

*2:YouTubeFlickrにもゴミ同然のものも多いが、キーボード打つだけよりは手間ひまかかると思うので、そのあたりの閾値はまだ高いと思う

*3:Twitterとかもできる? tumblrとか、横文字系のサービスは使ったことないんで、もしかしたら出来るヤツとかもあるけど。

*4:あくまで一過性のものだが、彼彼女はおもしろいエントリを書く、あるいはおもしろい画像の引き出しをたくさん持っているという意

*5:ここで言う編集力とは、自分の知識を最大限利用し、自分オリジナルのアウトプットは最小限で効果を発揮するということ

*6:ハイクにおいては、はてなスター、★がたくさんつく、或はたくさんの人が参加、エントリするような、という意味で

*7:もっとも、個人攻撃であるとか、目に余るネガティブな部分が出てきたら別だろうが

*8:ショルダーホン第1世代や、携帯電話第1世代ではない点に注意

*9:お互い洋画の吹き替えが好きだったので、週末の地上波放映が楽しみだった

*10:映画「プライベートライアン」の実況。おそらくエンディング付近と思われる。文体は現代語訳してある

*11:また、二人はチャット厨、メッセ、ICQ厨であったことも付け加えておく

*12:ハイクを筆頭に

*13:テレビがおもしろくなくなったのが先か、ネットがおもしろくなったのが先かは、卵が先かニワトリが先かと同じことなので、そこは空気読んでいただきたい

*14:ダラダラかつニマニマと

*15:テレビで言うところのオンエアに相当

*16:逆に今の機能を知らない

*17:反面、潜在的なトラブルを抱えるわけでもあるが

*18:僕の知っている当時のmixiには

*19:なおかつ中高生の

舞台映像演出の手法とインターフェースデザイン

http://d.hatena.ne.jp/rikuo/20081128
はてブがリニューアルして、ブックマーク追加の画面がわかりにくい、という話。

  1. 追加ボタンと「コメント」と表示されているサブタイトルを混同してしまう。
  2. 同じ画面に表示されている「タイトル」というサブタイトルは実際にボタンとして機能するため、より混同しやすい。

2に関しては、はてなのインターフェースデザインミスだと思うけど、1に関して僕はすぐに理解できなかった。

左から右への流れ

舞台演出の話で、主役は舞台の下手*1から登場し、主役に対峙するような重要なキャラクターは上手*2から登場するのがセオリー、という話を聞いたことがある。
ただ、これは絶対的な舞台演出のセオリーではないらしく、実際主役が上手から出てくる芝居を見たことがあるし、そもそも円形舞台では上下の関係がすごく曖昧だったりする。
この手法は映像にもあてはまるらしく、富野由悠季御大は著書「映像の原則」においても、カット割りやカメラアングルに関して応用できると述べている。

考えてみれば、ビデオの再生ボタンも右に向かっての三角形だし、スーパーマリオだって下手から上手へのスクロールする。富野御大はこれを人間において普遍的な物として捉えているようで、たしかに利き腕であるとか、人間の心臓はやや右側についているとか、そういうことに関係しているのかもしれない。

ところで、なんでみんなはそこを押そうとするの?

はてブの話に戻る。僕はこのインターフェースの間違いに気づいていなかった。以前から使っているユーザーとしては追加ボタンの存在を知っているし、そもそもEnterキーを押せばすぐに登録できる。
とはいえ、リニューアルしたデザインに新鮮味を感じたユーザーや新規参入のユーザーなら、インターフェースに対する不慣れからくる今回のことは十分にあり得る話だとは思う。
しかし、ボタン的な何かではあるものの、入力エリアの左にあるものを人は何故わざわざ押そうとするのか。
本来こういう実行ボタン的なものは入力エリアの右か下に配置されているものである。それは入力エリアが横書きで、左から右にテキストを入力するからであり、句点やピリオドが文章の最右端に存在するのであれば、入力を確定させるボタンも最右端にあって然るべきだ。横書きで改行をすれば下に行が送られるのであり、そういう意味に置いてはボタンが下に来ても当然なはず。一応はてブ追加画面の「追加する」ボタンは下に置いているが、入力エリアに対して左寄せになっているので、Googleのトップページのようにセンタリングしたほうが良かったのかもしれない。
右か下にあるべきなのが正しいかどうかは別としても、そういう既成事実が出来てしまった以上、ネットに明るいユーザーであれば自然にそういうことは理解できるだろうと僕は想像するのだけど、それは思い過ごしなのか?

何が一番の悪因なのか

この現象の原因として「タイトル」「コメント」のデザインがボタン的であるとか、「タイトル」「コメント」のデザインのほうがコントラストが強いといった声がある。いわゆる「艶やかなものはボタン」というユーザーの思い込みである。
たしかに艶やかなボタンというのはAppleがAquaデザインをリリースしてからというもの、世界中のデザイナーたちによって引用しつくされた感がある。引用だけでなく、あの立体感、透明感、反射感をPhotoshopIllustratorのグラデーション機能を駆使して新たな質感を作り出していくという、21世紀初頭のデザイン流行さえ生み出した。
しかし、だからといってそれらのすべてがボタンである、という思い込みはユーザーの妄信である。ボタンインターフェースには

  1. ブラウザによって用意されているもの
  2. サイト側がハイパーリンクとして画像で用意しているもの

に分かれていて、特に前者はブラウザやバージョンによってデフォルトのデザインがまちまちであることを知っている必要がある。たまたまSafariのそれやAquaデザインが、ひいてはそれを好む昨今のデザイン流行が似ていた、というだけなのだ。

僕の印象

どれがボタンでありボタンでないのか、今回に限らず、インターフェースの混乱をまねいているのはサイト制作側だという意見がある。たしかに、ユーザーに使ってもらうためのものを作っておいて使いにくいものを提供するのはプロとして失格だろう。しかし、ブラウザによってボタンの形状が異なる、というまだまだ未熟なこの業界の現状はユーザーも知っておくべきである。なまじ、はてなを使うようなユーザーがそれを見落とすのは個人的には中々信じがたい。
はてながどれぐらいの期間あのインターフェースについて煮詰めたのかは知らない。しかし、少なくともデザインしている側は視線の誘導やバランス、使い勝手といったものを、使う側の数十倍気にかけてやっている。左から右というセオリーもそうだが、そういう様々な制作マインドのもとに、デザインが決定されている。そして僕の経験上、そのマインドのほとんどは100点は取れなくとも80~90点のレベルで正しいデザインと言って良い。*3
しかし、そこまで気を使ったとしても、一部一定数のユーザーは、今回のような誤理解をしてしまう。ある程度しかたのないことだとは思うけど、同じデザイン系の仕事をしている者にとって、自らの理解が浅いままに、その程度のことで揚げ足を取られてしまうのは悲しいな、と思うのだ。

*1:しもて、観客から見て左側

*2:かみて、観客から見て右側

*3:出来の良くないデザインほど、制作マインドが欠けていたり時間をかけていなかったりする。ソースは僕