スマホ用のwebサイトってどうやって作ればいいの?

検索サイトはスマホ用を持つサイトを優先表示する?

近年、webサイトはスマートフォン(スマホ)用のサイト制作に追われています。大手検索サイトは今後の運営指針として、PCだけでなくスマホで閲覧ができるサイトの検索順位を優先的に上げようとしているからです。とはいえ、ホームページを作った経験の無い方からすれば、どのようにしてスマホ用のサイトをつくれば良いのかわからないですよね。そんな方向けに、今回はスマホ用サイトを簡単に作るために利用したいテクニックを紹介します。

CSSフレームワークでサイト幅を簡単調整

最初に紹介したいのは、CSSフレームワークです。PC用とスマホ用の2通りのサイトを別々に作るのは非効率的ですし、SEO(検索エンジン最適化)の視点からも望ましいとは言えないでしょう。そこで、スマホ、タブレット、PCのそれぞれのデバイス幅に応じて表示するコンテンツを変えられる「レスポンシブサイト」を作るのが近年の主流となっています。デバイス幅に応じたコンテンツの表示変更はCSSで調整可能ですが、フレームワークを導入すれば、さらに簡単に調整ができるようになります。

デバイス幅に応じてコンテンツ表示を変える方法

代表的なフレームワークは、それぞれのデバイス幅を12分割して、PC用ではメーンとなるコンテンツ部分に8分割、サイドバーに4分割、デバイス幅の小さいスマホ用ならコンテンツ部分を全幅にするといった調整を、 HTMLのクラス名で特定の名前を打ち込むだけで行ってくれます。ボタンや見出しについても特定のクラス名を使用することであらかじめデザインされたスタイリッシュな表示を利用することができるので、手間をかけずに利用したいという方にはうってつけのアプリケーションでしょう。

スマートフォンサイト制作は、パソコン用サイトを作るよりも少々難しい所があります。しかし慣れてしまえば、横幅を自動設定してくれて見やすくなったりと、便利に使えます。