スマートフォンの普及にともなって、ウェブサイトは「モバイルフレンドリー」でなければならなくなりました。パソコン用のサイトをスマホでみると字がちいさくてみにくいので、スマホでもみやすいサイトにしなければなりません。

そのためのもっとも簡単な方法はすべてのサイトを１カラム形式にすることです。パソコン用サイトは２カラム（２列）でつくることがおおいですが、スマホ用サイトは１カラムです。パソコン用サイトとスマホ用サイトを別々につくってもよいですが、それでは二度手間になります。そこでパソコンにもスマホにも対応できる１カラムにします。

そしてディスプレイの大きさに応じて、ウィンドウの横幅やフォントサイズやイメージサイズが自動的に調整されるようにします。そのためには、HTML の「meta 要素」につぎのように記述します。

<meta name="viewport" content="width=device-width, initial-scale=1">

 「width=device-width」により、ウィンドウの横幅がデバイスの横幅になるように指定できます。スマートフォンなどのデバイスはモニターサイズがそれぞれことなるのでそのデバイスの横幅になるように指定します。「initial-scale=1」は、初期の表示倍率の値を１に指定しています。すなわちそのままの倍率で表示されます。

スマートフォンむけの小さな画面をフルに活用するためにウィンドウの幅は 100% と指定します。しかしパソコンなどの大きな画面の場合は横幅がひろがりすぎてみにくくなります。そこで横幅の最大値をたとえば 980 ピクセルに指定します。こうしておけば、小さな画面では画面一杯に表示され、大きな画面ではみやすい横幅で表示されるようになります。スタイルシート（CSS）でつぎのように記述します。

{width:100%; max-width:980px}

これで、もっとも簡単に、モバイルフレンドリー・サイトができあがります。






このブログ「発想法　-情報処理と問題解決-」は、無料ブログサービス「ライブドアブログ」をつかっていて、パソコン用デザイン（テンプレート）とスマホ用デザインがあり、パソコンかスマホかによって（画面の大きさによって）自動的にデザインがきりかわるようになっています。つまりモバイルフレンドリーになっています。しかしこれ以外のサイトはモバイルフレンドリーに自分でしていかなければなりません。

検索最大手 Google もモバイルフレンドリーをつよく推奨しています。
Google のモバイルフレンドリーテスト 

iPhone が米国で発売されたのは 2007 年でした。そして世界がかわりました。今日、誰もが、スマートフォンをもちあるいて情報を検索したり、コミュニケーションをとったり、情報を発信したりしています。すでに、スマートフォンの数がパソコンの数をうわまわっています。

LINE 社の調査（2017年度）によるとつぎのような結果がでています。

• ネットでスマホを利用していると回答した人：全体の 85％
• ネットでパソコンを利用している人：全体の 46％
• これらのうち、スマホのみを利用している人： 46％
• スマホとPCの併用者：39％
• パソコンのみをつかっている人：6％

このように「スマホのみ」の割合は 46％ に達したのに対し、「パソコンのみ」はわずか 6％ に激減しました。まさにスマホ社会の到来です。

今回は、ウェブサイトの事例をとりあげましたが、実際には、社会のすべての分野でモバイルフレンドリーがもとめられています。情報化の進展、社会の激変がつづきます。