ここ２週間ほどかけて、このサイトのデザインを変更した。以前、横幅はガチガチに固定されていたのだが、今度、ＣＳＳを使ってスクリーンの大きさに合わせ、変動するようにした。そして、スクリーンの横幅によっては、文字の大きさを変えたり、行間を詰めたりした。これは、ログや Google アナリティクスのデータを見ると、スマートフォンやタブレットで閲覧する人が増えてきたため。サイトの最近の統計によると、閲覧者の約４分の１がスマートフォンあるいはタブレットを利用していて、今後とも増加傾向が続くだろうから、今回のデザイン変更を先送りできるような状況にはなかった。
これまで、デスクトップ型あるいはノート型パソコンの画面の大きさに合わせるように、サイトを構築して、画像等を掲載してきたが、今後は大まかに分けて、３つの画面を念頭にする必要がありそうだ。まず最初に、デスクトップ型とノート型パソコンそして横に置いたタブレット。横幅は大抵１０００ピクセル以上の横長の画面で、縦幅も数百ピクセルある。次は縦に使うタブレット。横幅は１０００ピクセルを下回るが、その分、縦長になり、縦幅は１０００ピクセルを超える。さて、同じサイズの画面なのに、パソコンなら横長で使い、タブレットだとどうしても縦で使いたくなるのは、私だけだろうか。友人知人もタブレットの場合、原則縦派と原則横派両方いる。何れにしても、縦長スクリーンも考慮する必要がある。そして第３にスマートフォン。画面はパソコンやタブレットに比べると小さい。多くの利用者は縦で使うだろうか。そうなると、一般的なのは、横幅３２０ピクセル。小さいスクリーンにどのように無駄なくページの内容を表示できるのかが重要課題。
今後様々な画面サイズのスマートフォンとタブレットが市場に出るだろうから、ある大きさを基本と考えるのは無理があるだろうし、ウェブサイトを管理する側としてもできるだけ多くの画面の大きさに対応する必要がある。さて、英語に above the fold という表現がウェブサイト関連で使われる。直訳すれば「折り目の上」で、二つ折りになった新聞の一面の上の部分のことで、店頭やスタンドで並び置かれているときに真っ先に見える。延いて、ウェブのページにて最初に見える、つまりはスクロールせずに見える部分を意味する。できるだけ各ページの題名と最初の部分が、どのような大きさの画面でも見えるようにしてみた。
スマートフォンやタブレットで閲覧しても、横にスクロール必要はなくなったはずだが、まだ課題は残っている。例えば、スマートフォンやタブレットにはキーボードやマウスがなく、主に指を使って操作するので、例えばリンクの押し間違いをできるだけ減らす工夫が必要。しかし、間を開けると、表示される情報量が減ってしまう。どのようにすれば、場所を有効に使い、かつ指で操作しやすいデザインにできるか、悩むところ。
さて、いかにサイトが表示されるか、いろいろと変更したが、肝心のサイトの内容の更新を怠ってきたので、ここ数週間は記事作成や写真掲載に力を入れることにしよう。