本館サイトをスマホ対応に

毎日見ているネットの世界が知らないうちに進歩していて驚きました。

一見したところ普通のパソコン向けのサイトのように見えます。でも、ウィンドウの横幅を狭めていくと、あるところでレイアウトが変わってタブレット向けに、さらに狭めていくとスマホ向けに変わります。そういうウェブサイトが増えています。

まだそんな仕組みを見たことがなくて、いまパソコンを使っている方は、私の 本館サイト で試してみてください。

横幅960ピクセル固定の2段組み → ウィンドウ幅に合わせて幅が変わる2段組み → 1段組みでメニューは末尾に

このように3段階に変化して、画面の大きさに合わせたレイアウトになります。

スマホ向け（モバイルフレンドリー）サイトの作り方としては、まったく別々のページを構築する方法もありますが、同じページの見え方だけを変える方法をGoogleは推奨しているそうです。その方がウェブ制作者側の管理の手間が減り、また、Googleにとってもデータ更新の負担が減るからです。

そんな高度なことが素人にできるはずないと最初は思いましたが、ちょっと調べたら意外に簡単にできることがわかりました。
具体的には、HTMLという個別のファイルに1行ずつ書き足します。そしてCSSというファイルに10行ほど書き足します。
これだけで、ウィンドウの幅に合わせてレイアウトが変わっていくページができてしまうのです。

やり方を調べてレイアウトを試行錯誤するのに10時間くらいかかりました。それから、個別のファイルに1行ずつ書き足すのも30分くらいかかりました。（私のサイトのHTMLファイル数は80ほどです。）

Googleにモバイルフレンドリーと認められると、スマホでの検索結果に「スマホ対応」と表示されるようになります。私のサイトも認めてもらえたようです。

スマホを使えばすきま時間に情報収集や勉強ができますから、今後はレイアウトだけでなく内容もスマホで読みやすい長さや見出しを意識しようかなと思います。

画面の横幅に合わせてレイアウトが変わる仕組みになっている他のサイトの例を載せておきます。

　日本分光
　株式会社ワイエムシィ
　東京化成
　秀和システム