自作ニュースアプリで一番重要視するのが、記事の読みやすさと操作性だ。
太宰治 走れメロス
著作権の問題があるので、青空文庫のテキストを例にとる。若干マージンがとってあるものの、これをフルHDのディスプレイで表示すれば1行に100文字以上表示されてしまう。文章はほどよく長方形になっていると一番読みやすいが、こんな風に異様に横長に表示されていると読みづらい。段落内の一体どこを読んでいるのかわからなくなってくるし目が疲れる。これを解消するため、横幅を狭くすることが解決方法の1となる。新聞社のサイトをチェックしていると、大体1行の文字数は40〜50文字だ。それでは1行の文字数を45文字にしてみよう。
横幅を制限
段落が把握できる大きさの塊になり、読みやすさが向上した。ただし、幅を1/2にした分縦に長くなる。また画面の半分以上が空いてしまってもったいない。そこで新聞に倣って段組みを使ってみようと考えた。column-countを使用することで段組みは簡単に設定できる。
２段組
画面としては綺麗に見えるようになったがやはり縦に長い。しかもcolumn-countの機能はDIVタグの中身全体を分割して分けるので、２段組なら左側に全体の半分、右側に全体の半分が表示されてしまう。左側を大幅にスクロールしてから右側に移らなければいけないので、段組みがない場合よりもむしろ読みにくい。1画面で収まるようにしなければ使い勝手は悪い。
現時点で考えている仕組みとしては、次の通り。まず1画面に収まる大きさの文章を1つの単位として、画面に見やすいように配置する。2-3段組がちょうどよさそうなので、どちらかになるだろう。1画面に満たない記事は結合する。1画面を超える記事は分割する。表示する際に分割・結合の処理を都度行う。1画面程度のデータ量は大したことないので処理はすぐできるだろう。すべての処理を1画面単位で行うようにすれば統治も楽だし、スクロールやらページ番号付与やらもちょいちょいとやってしまえばよい。

Tweet