「コンテンツの始点は左上」画面/紙面における視線移動を考える

あらゆるデザイナーにとって、見る者の視線をどう誘導するかは一番の課題でしょう。それは紙やスクリーンという媒体の違いを超えたテーマであるはず。でも思ったよりこの問題は突き詰めて考えられていないようにも思えます。
9
木田泰夫 @kidayasuo

そう思うでしょう?しかしコンテンツは左上始点なんですよね。このブログにある漢字ドリルを例にとっても、やっぱり視線は左にあつまる。 RT @masanork: …あと50音キーボードはやっぱ右上にあだと思うんだが… http://htn.to/aJF18y

2011-05-14 03:31:10
Masanori Kusunoki / 楠 正憲 @masanork

@kidayasuo 一般にコンテンツは左上始点ということは合意できるのですが、ならばあいうえおも左横書き二段で並べるべきで、あいうえおと縦書きで並べるのであれば右上始点とする方が自然では?今のキーボードはモンゴル語のような左縦書きって印象

2011-05-14 03:50:38
Masanori Kusunoki / 楠 正憲 @masanork

@kidayasuo わたしが小学生時代に使ってたエプソンのワープロは50音配列キーボードで左横書き2段で左上に「あ」がありました。あと周囲では50音キーボードといってJIS配列を期待されていた向きもあり。私個人は親指シフターですがタッチパッド使いたいか微妙

2011-05-14 04:06:40
Until the End of the World @Hiro1968

文章の横書き時は左上始点のキーボードですね。銀行のATMも左上始点ですし。 RT @kidayasuo: そう思うでしょう?しかしコンテンツは左上始点なんですよね。このブログにある漢字ドリルを例にとっても、 RT @masanork http://htn.to/aJF18y

2011-05-14 04:11:45
Masanori Kusunoki / 楠 正憲 @masanork

RT @Hiro1968: 文章の横書き時は左上始点のキーボードですね。銀行のATMも左上始点ですし。 RT @kidayasuo: そう思うでしょう?しかしコンテンツは左上始点なんですよね。このブログにある漢字ドリルを例にとっても、 RT @masanork http://htn.to/aJF18y

2011-05-14 04:13:40
小林龍生 @tlk714

@kidayasuo 「コンテンツは左上始点なんですよね。」これって、言語や縦組み、横組みとは無関係に普遍的なのだろうか? 何か、論拠ってお持ちですか? 新人編集者時代に、視点は左上に集中するって繰り返したたき込まれたのだけれど、経験的には納得できても普遍的論拠を知らないもので。

2011-05-14 05:54:52
木田泰夫 @kidayasuo

@tlk714 いえ、画面の中で始点が左上なのは、単純に左からの横書きだからだと思っていました。これが綴じてある書籍だと、めくる際に反対側の上がまず目に入るという視点が生まれるかもしれませんね。そこにある図版などに目が行った後、反対側の文章の先頭を探してそこから読み始める。

2011-05-14 06:09:59
小林龍生 @tlk714

@kidayasuo ぼくがやっていた「小学六年生」は、縦組み右綴じが基本だったのだけれど、やっぱり左上視点って言われ続けていました。この話題って、案外電子書籍のレイアウトなどと深い関係があるのかも。

2011-05-14 06:13:33
木田泰夫 @kidayasuo

@tlk714 綴じてあるから、という可能性はありませんかね?真っ先に目に入るのが左上なので。綴じが無い電子書籍だと、全く新しいレイアウトの必要性と可能性がありそう。

2011-05-14 06:21:17
小林龍生 @tlk714

@kidayasuo そうなんですよね。同じ自炊本でも、iPad上のi文庫で読むのと、KindleDxで読むののとでは、ページめくりの感覚がずいぶん違う。テキスト主体の《流れる》書物ではあまり意識する必要はないかもしれませんが、ヴィジュアルな2次元的なレイアウトでは重要かも。

2011-05-14 06:25:10
木田泰夫 @kidayasuo

@tlk714 うん、リフローありがすべてじゃないと思う。その場合は画面サイズを念頭においた設計が必要になりますね。

2011-05-14 06:36:35
小林龍生 @tlk714

@kidayasuo そう。電子書籍の2次元的レイアウトを考えるときにこそ、@kidayasuoさんの「左上重視論」が重要なポイントとなる。おそらく、UIデザインにも係わってくるね。iPadにも期待。

2011-05-14 06:40:57
木田泰夫 @kidayasuo

@masanork うん、そういう配列もアリなんだと思いますよ。

2011-05-14 06:53:09
CyberCatfish @cybercatfish

いま新聞関連やってますが、普通紙は右上重視、スポーツ紙はスタンドに折られてる状態の真ん中命と言われ、媒体とデザインの関係に今更ながら… RT @tlk714: @kidayasuo そう。電子書籍の2次元的レイアウトを考えるときにこそ、@kidayasuoさんの「左上重視論」が…

2011-05-14 18:10:33
CyberCatfish @cybercatfish

縦書きを改めて見直してみてますが本当に必要なのかと思えてきて、横書きが右左から左右流れになった時代の話しも聞いていてみてます。 RT @tlk714: @kidayasuo そう。電子書籍の2次元的レイアウトを考えるときにこそ、@kidayasuoさんの「左上重視論」が…

2011-05-14 18:12:35
CyberCatfish @cybercatfish

デザインされた紙面を拡大して全方向スクロールに違和感を感じてます、完全リフローは不自由だし、中間点が無いのかなと常々思っているのですが… RT @kidayasuo: @tlk714 うん、リフローありがすべてじゃないと思う。

2011-05-14 18:14:41
CyberCatfish @cybercatfish

今の紙面作りは、まず媒体があってその中にどう記事を納めるか、WEBはデータが有ってどうデザインに入れ込むか、視点の違いで出来が変わるんですが年内には出したいなぁ出れば良いなぁコレw RT @kidayasuo: @tlk714 うん、リフローありがすべてじゃないと思う。

2011-05-14 18:18:19
CyberCatfish @cybercatfish

@kidayasuo そう言えば、ゲーム作り時代にテキストや情報表示の位置に対する画面の重み付けとか、動体視力に関する横方向と縦方向の視認性の違い何て話しをやってましたが、一緒にやりませんでしたっけ? ゲーム会社や出版社で色々やったんですが誰とやってたかが忘却の彼方 (^^;;;

2011-05-14 18:36:56
木田泰夫 @kidayasuo

視線がどこに落ちるか(ページをめくる動作などで)、そしてコンテントの性質(ストリームか、ランダムか)、に関係すると思う RT @ogwata: ひとまずの仮説としては… http://bit.ly/mRJs8n

2011-05-15 01:26:38
小形克宏 @ogwata

@kidayasuo ストリームかランダムかというのは面白い視点ですが、そうなると新聞はランダムの筈なのに始点が右上という理由が分かりません。それとも、あれはあれでストリームなのかな…。

2011-05-15 01:30:55
木田泰夫 @kidayasuo

@ogwata 確かに。新聞の場合は、ものすごく大きいので、めくるのは大変だし、そのときに左上に視線が落ちてそこに止まったりしない、とか(あ、四コマ漫画が左上だ)

2011-05-15 01:38:57
小形克宏 @ogwata

@kidayasuo 自分が紙の新聞を読む時のことを思い出しましたが、見開きでは左上から読み始めてますね。なんでだろ? それから4コママンガは一番上のコマの右上が始点になると思います。

2011-05-15 01:42:26
木田泰夫 @kidayasuo

@ogwata 4コママンガの話は、これが新聞の左上に置いてあった事を思い出したんですよ。常にそうという訳ではないのかな?

2011-05-15 01:43:35