ホームページをスマホ対応する４つの方法
たーさんホームページ（ウェブサイト）をスマホ対応する４つの手法についてメモ。
メディアクエリ
現在最もスタンダードな実装方法で、ブラウザの画面幅を検知してCSS側でスタイルを変更する方法です。
HTMLを1ソースでコーディングできるため管理しやすいのがメリットですが、PCとスマートフォンで極端にレイアウトを変えることは困難です。
ユーザーエージェント判定
PHPやJavascript等のプログラム言語でアクセスしてきた端末情報（ユーザーエージェント）を取得して表示を切り替える方法です。
PCとスマートフォンをまったく別のデザインにできるのがメリットですが、HTMLを別に用意するため管理が煩雑になりがちです。
ワードプレスではデフォルトでPCとスマートフォンを判定するタグが用意されています。
メディアクエリ＆HTML
PC表示用、スマートフォン表示用にクラス分けされたHTMLを用意し、CSSのメディアクエリで表示・非表示をコントロールする方法です。
HTMLは複雑になりますがユーザーエージェントを使わずに、PCとスマートフォンページを全く異なるレイアウトにすることができます。
自動変換ツール
JavaScript等を使って既存のホームページを自動的にスマートフォン表示に最適化する方法です。
制作者にとっては手軽ですが表示の度に変換処理が走るため重くなるのと、導入後にはこの変換ツールを念頭にページを編集する必要があるので管理がしづらくなります。
またこのツールに不具合があると一気にサイトのデザインが崩れることも懸念点です。
長期的に運用するサイトでは安易に使わない方が無難です。
基本的にはCSSのメディアクエリのみで表示を切り替え、HTMLを1ソースとするのが昨今ではスマートな作り方になるかと思います。
ただこの作り方で制作を依頼した場合には、可変な画面幅にコンテンツが影響を受けるため、テキストの折り返し箇所や、画像の上に乗ったテキストの配置・・・などの細かい調整は難しくなることは理解しておく必要があります。
基本的には「見せるコンテンツ」と「読ませるコンテンツ」を分けて考えて、「見せるコンテンツ」は画像などで作り、「読ませるコンテンツ」はテキストで実装して細かい見栄えにはこだわらないのがよいと思います。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
