今日は私が運営している別館サイトのレイアウト変更についてのお話です。
当ブログは、閲覧する端末に応じてレイアウトが変化するレスポンシブデザインのテンプレートを使っていますが、別館サイトはスマホ時代が到来する少し前に作ったPC用のレイアウトなので、スマホでアクセスすると使用感に難点があります。
データによると、最近はインターネット利用者の半分以上がモバイル端末からアクセスするのだそうですが、私の所有サイトだけだと8割以上がモバイル端末を利用しています。せっかくこんな辺境サイトまで来てくれるのですから、スマホで見やすいレイアウトに対応することにしました。
PCサイトとスマホサイトのレイアウトの違い
上の画像がPCサイトのレイアウトの一例です。
PCサイトは横幅を広く使えるため、画面の左右どちらかにメニューバーや広告スペースを配置し、反対側に本文スペースを取る2分割形式のレイアウトが一般的です。スマホ対応していないサイトだと、この形がそのままスマホの画面に縮小されて表示されるので、リンクをクリックするのも一苦労です。
こちらはスマホサイトレイアウトの一例です。
スマホの画面の形状に合わせて縦長なレイアウトが基本です。リンクのボタンはタッチしやすいよう大きめに設定します。
ページ上部のメニューは本文の邪魔にならないよう、タッチすると縦に展開するなどの工夫をして設置します。
どのようにスマホサイトに移行するか
今の状態からスマホサイトを作る場合、2パターンのやり方があります。
レスポンシブデザインに移行する
前述のとおり、レスポンシブに対応しているデザインのサイトを自作orテンプレートを使って、PCサイトのデザインごと作り変えてしまうという方法です。
一度設定すればあとは閲覧環境により自動的に表示レイアウトを変えてくれるため、その後の管理は楽になります。
スマホ用サイトを別に作り、利用端末によって振り分ける
こちらはスマホ用サイトを別に作り、見る端末によってどちらを表示させるか振り分け設定を行う、という手法です。
この場合、更新のたびにPC用・スマホ用のページを両方いじる必要があり管理が面倒ですが、PC用サイトのデザインを残すことができます。
悩みましたが、試行錯誤しつつ作った今のPCサイトをなるべく活かしたい思いがあり、私の素人知識と技術では今のサイトのデザインを活かしつつレスポンシブ化をすることができないので、前者の方法は諦めました。
スマホサイトはテンプレートを使いました
さすがに1からデザインを考えるのは面倒だったので、こちらの「TempNate」さんご提供のスマホ用無料テンプレートを利用させていただくことにしました。
私はHP作成ソフトを持っていないため、地道に手打ちのテキストエディタでスマホサイト作成をがんばってます。いつ終わるかな…
