• Go to Menu
  • RSS

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

記事レイアウト考察

記事レイアウト考察

新聞のようなページレイアウト

 Webのインターフェイスを雑誌のように楽しく自由なものに出来ればと考えているのだが、先日すごいjQueryを見つけた…。

内容もサイズも異なる様々な記事を結合し1ページ内に表示させる。Webで可能にする技術はあるが、果たしてそれは人間にとって快適なものなのか?



隙間無く、新聞の紙面のように

隙間無く、新聞の紙面のように

 通常、垂直方向の長さ(高さ)はテキストの大きさや、文章の長さ、使用されるフォントによる文字幅などが影響して短くも長くもなる。(図A参照)OSやブラウザによってさらにその差は顕著になる。頭は揃えられても、お尻は揃わないのだ。
 「jQuery Masonry」をWebページ(HTML)に設置すると幅や高さが異なるボックス要素を並べても隙間無く、新聞の紙面のように配置される。(図B参照)
 実用性はともかくとして、技術の面で可能なことが多くなった。HTMLでももっと自由な表現ができる。っと言っても複数のカラムで別々の記事って読みにくいような…。
 ここは小さな写真と1~2行程度の説明を表示したポータルサイトにありがちな、一覧リンクメニューみたいな感じに収まるのが無難なのだろうか…。


複数のカラムによる記事

図C

複数のカラムによる記事

 Appleの事例でドラマ「相棒」に関するニュースが掲載された。本文は2カラムに別れた雑誌的なレイアウトで表示されている。(図C赤点線内参照)
 以前からやってみようと思っていたレイアウトなので早速読んでみる。するとやはり雑誌とは違う感覚だ。1つ目のカラムを読み終えると、スクロールで上まで戻って、また読みながらスクロールで下まで行って…と、なかなかマウスアクションが忙しかったりする。
 また、1つ目のカラムを読んでいるとき、2つ目のカラムのテキストがちらちら視界に入ってきてしまい目線が散漫になるような気もした。紙と違いモニターだと他の本文が目につくと気になる度合いが高いのだろうか。とにかく集中出来ない。
 当然かもしれないがモニターで閲覧するよりかはプリントアウトして読んだ方が威力を発揮するように思える。


やっぱりこの人は…

図D

やっぱりこの人は…

 職業柄、いろんなサイトを見るが、最近発見した変態なレイアウトを紹介。
 「Voltaicbjork.com)」(図D参照)
 随分以前に公開されているものだとは思うが、レイアウトはもちろん、写真やグラフィックも相当キテます。
 読み易さとかはもうどうでもいいような…。これはWebページなんだけど、まるで1枚の絵画のようだ。なんかもぅ ウジウジ考えても仕様がないのかな?なんて思っちゃったりします。




コメントの投稿

※承認制のため、即時には反映されません。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。