スマートフォンサイトが普及してきましたが対応はおすみですか？

今回は技術的な要素が強いお話です。弁護士や司法書士などの士業の方が自分で制作したホームページをモバイル対応させたい、という方もいらっしゃるでしょうから振り分けを行うためのPHPもあわせて紹介したいと思います。

このページの目次

1 モバイル対応の必要性
2 モバイルサイトの導入のパターン

モバイル対応の必要性

スマートフォン対応は、扱う業務やターゲット層などによって必要性が変わってきます。

あえて、スマートフォン対応はしない、という選択をしたほうが良い場合もありますので、ご自身でホームページを制作した方はこの点を考慮した上でご判断下さい。

もっとも、ターゲット層がスマートフォンサイトに抵抗がない層であれば、昨今の動向を踏まえて導入してしまってもよいかも知れませんね。

モバイルサイトの導入のパターン

モバイルサイトには複数のパターンがありますが、代表的な3つのパターンについて書いてみます。

①既存のPCホームページにモバイルホームページを追加する方法。
②レスポンシブで制作する方法。
③変換する方法

私どもが作成したホームページは、GoogleがMFIを発表した後は、スマートフォンを導入しても差し支えないような業務の際はレスポンシブデザインを採用しています。

①　既存のPCホームページにモバイルホームページを追加する方法

既にホームページをお持ちの方で、PHPなどを用いず通常のHTMLで作られた静的ホームページをお持ちの場合に現実的なのはこの方法だと思います。

新たに端末ごとにホームページを作成し、プログラムを使用して振り分けていくという方法です。

この方法は、｢.htaccess｣にdirectoryIndexを記述してindex.htmlより優先してindex.phpファイルを読み込むようにして、index.phpには下記のように記述することでブラウザや携帯キャリアなどによってジャンプ先のページを振り分けることができます。

下記のhttp://の部分にPC用、docomo用などのURLを補完することでページを飛ばすことができるようになります。
※下記のサンプルソースコードは自由に改変・使用して頂いて構いませんが自己責任でご利用ください。なお、最新機種に対応するには少し変更する必要がある場合もあります。

$docomo = "http://";
$au = "http://";
$softbank = "http://";
$msie = "http://";
$Netscape = "http://"; //
$opera = "http://"; //
$firefox = "http://"; //
$pc = "http://"; //

if(isset($_SERVER['HTTP_USER_AGENT'])){
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if(eregi("DoCoMo",$user_agent)){header("Location: $docomo");}
elseif(eregi("UP¥.Browser",$user_agent)){header("Location: $au");}
elseif(eregi("J-PHONE",$user_agent)){header("Location: $softbank");}
elseif(eregi("Vodafone",$user_agent)){header("Location: $softbank");}
elseif(eregi("SoftBank",$user_agent)){header("Location: $softbank");}
elseif(eregi("J-EMULATOR",$user_agent)){header("Location: $softbank");}
elseif(eregi("MSIE",$user_agent)){header("Location: $msie");}
elseif(eregi("Netscape",$user_agent)){header("Location: $netscape");}
elseif(eregi("Opera",$user_agent)){header("Location: $opera");}
elseif(eregi("Firefox",$user_agent)){header("Location: $firefox");}
else{header("Location: $pc");}
}else{
print &amp;amp;amp;amp;amp;lt;&amp;amp;amp;amp;amp;lt;&amp;amp;amp;amp;amp;lt;END

HTTP_USER_AGENT Error

ユーザーエージェントが読み込めませんでした。

END;
}

?&amp;amp;amp;amp;amp;gt;

他方で、CMSのWordpressを利用しているような動的ホームページの場合は、新たにモバイル用テーマを一式制作して振り分けるという方法があります。

この方法は少し複雑なので別の機会に書いてみたいと思いますが、一般の方にはなかなか難しいと思います。(私たちはこの方法と下記の②の方法を使い分けています)

動的なホームページでも静的なホームページでもこの方法のメリットは、閲覧したユーザーがPC版とモバイル版を好みに合わせて容易に切り替えを行うことができるという点と自由度が高くなるという点です。

他方、デメリットは、制作コストが高くなりがちという点です。

②　レスポンシブで制作する方法

レスポンシブと呼ばれる方法でホームページを制作する方法です。
レスポンシブは閲覧する端末によって自動的にボタンの配置などが調整される比較的新しい制作手法です。

レスポンシブではないホームページと比べると自由度が低くなりがちですが、最近は急激に普及し始めています。

レスポンシブデザインでホームページを制作するデメリットは、｢自由度がやや低くなりがち｣、｢スマホでPCサイトを閲覧したいユーザーに敬遠される｣という点です。

自由度が低くなりがちという点については、最近はブラウザの対応状況がどんどんすすんでいるのでとくに問題はないと思います。

スマホでPCサイトを表示したいユーザー層は一定数存在しますので、これらの層が主なユーザー層のときは、レスポンシブではなく、①か③の方法でホームページを制作した方がよいでしょう。

既にホームページを運用しているということであれば、アクセス情報を集めるのも比較的容易にできると思いますので一度確認して検討することをおすすめします。

なお、私たちが法律事務所、弁護士、司法書士のホームページを制作するときは、統計的な数字や日々集めている情報を参考にしながらユーザー層を見極めたうえでレスポンシブにするかどうかを検討します。レスポンシブと端末によって振り分けるタイプを使い分けていますので一概にどちらが良いかを書くことは難しいのが現状です。