Categorywebdesign

「続きを読む」と、Blog のユーザビリティ

Movable Type をはじめとするサーバにインストールして使うタイプのものや、はてなダイアリー等のレンタル型、そのどちらにも、エントリが新しい順に羅列されるトップページで、たとえば「続きを読む」というリンクを示してエントリを途中で区切り、リンクをたどることでエントリ全文を見られるようにするという機能があったりします。この機能、うまく使えているひとがどれだけいるのでしょうか。僕の場合、正直いって、よほどのことがない限り「続きを読む」の先を読みません。普通にエントリをのっけとけば全部読めるのに、なぜクリックする手間をかけなければならないのかと、ストレスを感じます。後述の通り「続きを読む」のメリットが挙げられますが、クリックしなければならないというデメリットに比べると、メリットの方が小さいと思います。

なぜ「続きを読む」機能が存在するのか。以下の長所が挙げられるでしょう。

  1. Blog トップページの転送量を抑える
  2. ページが縦に長くなり過ぎることによるデザイン的バランスの悪化を防ぐ(あるいは、たくさんスクロールしなきゃならなくなるのを防ぐ)
  3. トップページに要約や煽りを表示し、それで興味を持った読者だけ全文を読めばいいですよ、という流れを作り出す
  4. ネタバレを含む文章を「続きを読む」リンクの先に書くことで、ネタバレを防止
  5. 「続きを読む」リンクの先にオチを持ってくる

他にもあるかもしれませんが、思いつきません。ともあれ、まずは 4 番目、5 番目については、全文を読む必要があるようなエントリはほぼ存在しないだろうからどうでもいい。3 番目については、これはいいと思います。たとえば MODULE.JP の見せ方が参考になります(実際には、「続きを読む」リンクは存在しませんが)。しかしこの場合、単にトップページに表示する部分を、エントリ全文の最初の方をてけとーに切り張りするようなことになると、単に前半部分と後半部分を分割するだけになり、ダメだと思います。MODULE.JP は多分、MT でいう「概要(excerpt)」を表示するようにしてるんじゃないかと思いますが、3 番目の方法を採るなら、その方法に倣うのがもっとも望ましいと思います。そのような見せ方なら「続きを読む」リンクがあっても、読者が主体的に判断することができます。

1 番目と 2 番目については、「続きを読む」を採用する場合、これらの理由でエントリを分割することが多いのではないかと思いますが、おおむねダメです。転送量を抑えるといっても、Blog のトップページなんて直近数日のエントリがあれば十分なのであってみれば、全文載せようが半分載せようが、たいていの Blog ではたいした違いにはならないでしょう。また、デザイン的な都合については、そんな都合でクリックさせられたんじゃたまったもんじゃねーよ、と。ただ、スクロール量が多くなり過ぎるのを防ぐ、というのはそれなりに筋が通っているように思えます。これは個人差があると思いますが、とんでもなく長いエントリを連発する Blog でもない限り、スクロールする手間よりもむしろ、クリックしてページが遷移してしまうことの手間の方が大きいと思います(JavaScript で続き部分を「開閉する」という手法もありますが、ページが移るよりはややマシとはいえ、クリックする手間がかかるという意味では似たようなものでしょう)。

また、「続きを読む」の URL の問題も存在します。僕が見る限り、わりと一般的なやり方は “permalink + #more” といったようなものです。このリンクをたどることにより、トップページですでに読んだ場所をとばして、続きから読めるよう配慮しているようです。しかし、これは単に一般的というだけで、必ずそのようになっている、あるいはなにか Blog の仕様があってそう決められているというものでは当然ありません。よって、「続きを読む」と書いてありながら、単に permalink になっている場合もわりとよく見かけます。

これがなぜ問題か。僕が Blog を閲覧する流れを例に述べると、上述の通り、「続きを読む」リンクをたどって全文を読むことはほとんどありません。それでもなお、クリックする手間をかけて読むようなエントリは、それだけの面倒くさいことをする価値があるなぁと思うからこそ読むわけです。そういうエントリは、ブックマークしといてあとで読もうと思うことも多い。その場合、URL に #more なんて無意味な文字列が入っていると、それをわざわざ消さないとなりません。エントリの前半を読んで、「面白いから全部読もう」と思って「続きを読む」をクリックしようとする。そのとき、「あー、ブックマークして後で読むかもな。でも、URL に #more がついてると消すの面倒だな」と身構えるわけです。そして、#more がついてれば、前半部分をちゃんと読んでいようが読んでいなかろうが勝手に後半部分の最初にとばされるし、#more がないならないで、最初の予期を裏切られるわけですから、「続きを読む」がある時点でストレスを感じているのに、さらにそのストレスが増大するわけです。

先述の通り、僕はここで「続きを読む」でエントリを分割表示することそのものが悪いといっているわけではありません。上に挙げた 3 番目のやり方などは、うまいことやれば非常に有効であると思います。しかし、自分でインストールするタイプのツールでないと、効果的に見せることは難しいと思います。要するに、この機能を用いることは、閲覧者に対してエントリ全文を読むためにクリックを強いることになるのであり、つまりはうまく使わないと、単に無駄なストレスを感じさせるだけの、読者の主体性を損なう見せ方に堕するのであり、ユーザビリティ低下を招くことになるので、その辺をちゃんと考えて使用していただきたいなぁと思うわけです。まぁ、RSS リーダで個別エントリのみを読むようにすれば、これまで長々と述べてきたことが全部どうでもいい話になるわけですが。ぶちこわし。

Jesse James Garrett 著『ウェブ戦略としての「ユーザーエクスぺリエンス」?5つの段階で考えるユーザー中心デザイン』

ウェブ戦略としての「ユーザーエクスぺリエンス」?5つの段階で考えるユーザー中心デザイン

先日、Ajax という言葉を定義した彼の文書を、読んだ瞬間「これだ!」と思い、勢い余って翻訳したことでその名前を知った Jesse James Garrett さん。IA 方面でとっても有名な方であるらしく、つい最近、『ウェブログ・ハンドブック』の著者であり、奥さんでもある Rebecca Blood さんとともに来日して、DESIGN IT! というイベントで講演をしたり、アルファブロガー交流会というなんだかよくわからない会合に参加したりしたとかいう話で、ほんとものしらずで恥ずかしい限りです…。ともあれ、その Jesse James Garrett さんの著書 “The Elements of User Experience ” の邦訳書『ウェブ戦略としての「ユーザーエクスぺリエンス」』がたまたま近所の書店に入荷されていたので、購入して読んでみました。

本書は Web サイトの構築プロセスを、下位から「戦略」「要件」「構造」「骨格」「表層」に分類し、さらにそれぞれの階層を縦に貫く「ソフトウェアインターフェースとしてのウェブ」「ハイパーテキストシステムとしてのウェブ」という軸を導入します。そして、それぞれの段階別に章立てして、「サイト制作者は何を得たいのか」「ユーザは何を得たいのか」を常に念頭に置きつつ、注意するべきこと・心がけるべきことをわかりやすく述べています。本書のオリジナルとなったダイアグラム自体は Web で公開されているので、参照するとよいでしょう。Web サイト構築に際して、デスクに向かった位置からよく見える場所に貼ったりして、常に目の届くところにおきたくなるような素晴らしい図であると思います。

こういった、構築プロセスを段階的に図式化する試み自体は、こういう分野に不案内なのでよくわかりませんが、これまでもたくさんあったのではないかと思います。しかし本書が面白いのは、徹底した「ユーザエクスペリエンス」への配慮や、また、前述した「さらにそれぞれの階層を縦に貫いて「ソフトウェアインターフェースとしてのウェブ」「ハイパーテキストシステムとしてのウェブ」という軸を導入し」たところにあります。最近の興味に引きつけて読めば、Ajax というアプローチ自体も、「ハイパーテキストシステムとしてのウェブ」にばかり偏り過ぎているこれまでの Web サイトに「ソフトウェアインターフェースとしてのウェブ」としての側面を持ち込もう、その結果「ユーザエクスペリエンス」を高めていこうというお話であるということがわかります。

そんなわけで、寒くてキーをタイプするのもままならないのでちゃんとした感想も書けませんが(ここまでタイプするのもかなり苦労しました…)、とりあえず Web サイトの構築に興味を持っているひとは読んでおいて損はない本でしょう。

css Zen Garden のサムネイルリンク集 css Zen Garden Shot

世界中の CSS ハカーな皆さんが超絶技巧を駆使して、同一の HTML 文書に対して CSS デザインを施すその腕を競う(?)ってなサイト css Zen Garden のサムネイルリンク集を TYLIGHT さんが作成されています

有名な CSS デザインサイト “css Zen Garden” のサムネイルリンク集です。『なんでサムネイルが無いんだよ!超不便じゃん!』と思い立って一気に作り上げました。デザインが増えたら更新する予定です。

Reread(2005-03-05) – css Zen Garden Shot 公開開始

とゆわけでだらだらと眺めていたのですが(ちょろちょろ見たりはしてたけど、まとまった量を見るのはこれが初めてだったりする…)、みなそれぞれにかっこいいですね。グラフィックそのものや、その使い方がすげーなー、というのもあるのですが、この手のひとたちの配色のセンスがやっぱかっけーよなぁ。日本のサイトだと、配色が優れたところってあんまり見ない気がします。

© 2020 栗林健太郎

Theme by Anders NorénUp ↑