このサイトに記事をもっと掲載することを最近目標として掲げたが、ここ１週間ほどは更新が滞ってしまった。怠慢だったせいもあるが、このサイトをモバイル端末、特にスマートフォンでも見やすいようにレイアウトを変更したことと、画像が掲載されているページのナビゲーションを変えることに手間取ってしまったのが原因。
スマートフォンやタブレットが普及して、モバイル対応が必要になってから、もうかなりの時間が経っている。これまではどうも億劫だったのだが、もうちょっとスマートフォンで閲覧しやすいサイトに変えてみようと思い立った。このような変更を始めると、次から次へと新たな問題点や改善点が顕となって、結局予想した以上の時間を要することになってしまうのは常のこと。その中で、最も重要な課題だったのは、できるだけリンクの押し間違いが発生しないようなサイトを作成すること。
スマートフォンやタブレットの特徴は、「指で操作する」ことにあると思う。そしてどの指で操作するかも重要なような気がする。アンケートを行ったわけではなく、ロンドンの地下鉄の車両内やカフェの店内でモバイル端末を使っている人を観察した印象だと、どの指を使うかは、画面の大きさによるところがありそう。タブレットの場合は、端末をテーブルなりに置いて、人差し指で操作することが多い。スマートフォンは「片手で持ってかつ操作できる」ため、利き手の親指のみで操作する人もいる。しかし、片手で持って、もう一方の手の人差し指を使ったり、両手で持って、両親指を使う人もいる。
親指のほうが人差し指よりも太いので、画面に触ったときに接する面積が大きくなる。そのため、スマートフォン用であれば、親指を使う人を前提としたレイアウトにしなければならない。つまりはリンクとリンクの間隔を大きくすること。しかし、スマートフォンの画面の大きさは限られているので、リンクをただ大きくすれば良いというわけでもない。
特に困ったのが、デスクトップやタブレット端末では『ホーム ❯ 記事 ❯ インターネット』とページ上部に表示されている階層ナビゲーションを、スマートフォンだったらどのように表示させるべきか。例えばドロップ・ダウン・メニューを作り、ページ毎に置くことも考えたが、結局、スマートフォン用の専門のナビゲーション・ページを <details> を利用して作成した。ブラウザーによってはまだ表示されない <details> に依存するのはあまり良いことではないし、ナビゲーションのために違うページに閲覧者を移動させることもあまり褒められたことではないかもしれないが、簡単であることと今後の変更が楽であることが決め手となった。
自分のサイトだから、どうしても贔屓目に見てしまうが、前よりはよくなったと思う。もちろん、まだまだ改善の余地はあるが。