MENU

clear
Zihuatanejo to me

ブログカテゴリー

最新の記事

メニュー

SNS

レスポンシブサイト考察

目次

    レスポンシブサイト制作のメリデメ

    こんにちは。フロントエンドエンジニアのキヨシ太夫です。

    色々なweb制作案件に携わる中で、スマホ対応が当たり前の時代になりました。

    今日は、レスポンシブサイトについての考察を備忘録的に書こうと思います。

    web制作を検討中の方やweb制作に関わる人の参考になれば嬉しいです。

    スマホ対応を検討する際の注意点

    本当にスマホ対応が必要か

    当たり前ですが、制作するwebページが本当にスマホから閲覧されるのかどうかをよく考える必要があります。

    確かに現在のネットユーザーのほとんどは、スマホからインターネットに接続しています。

    ただし、だからと言って、制作するwebページがスマホから流入してくるとは限りません。

    例えば、私が現在携わっているプロジェクトでは、企業向けのページがあり、その企業向けページはスマホ対応はしておりません。

    理由は簡単。企業向けのページは、企業の担当社員向けなので、スマホではなくPC(おそら会社内で)で閲覧するからです。

    もちろん、スマホで閲覧する確率が0ではありませんが、スマホへの対応する時間的、人的コストを考えれば、PCでの閲覧のみに対応するだけで十分です。

    レスポンシブか、専用ページか

    制作の依頼を検討している方は、少し想像しづらいかもしれませんが、スマホ対応と言うと、主に以下の選択肢かと思います。

    • レスポンシブサイトにする
    • スマホ用、PC用で別々のページを作る
    • スマホにもPC用のページを見せる

    有名どころで言えばレスポンシブサイトと言われるものです。

    このレスポンシブとは、エンジニア的に言うと一つのテンプレートファイルで、デバイスの横幅に合わせてデザイン、レイアウトが変わるものになります。

    フロントエンドエンジニアの私的には、腕の見せ所ではあるわけですが、重要なのは、一つのテンプレートファイルと言うところです。

    実はレスポンシブサイトのメリットは、このテンプレートファイルが一つであることに依るものが多いのです。

    レスポンシブサイトのメリット

    • テンプレートファイルが一つのため、運用効率が高い
    • テンプレートファイルが一つのため、ファイルサイズが抑えられる
    • テンプレートファイルが一つのため、スマホ用ページとPC用ページを二つ用意するよりは、制作コストが抑えられる
    • デザインに統一感を持たせられる..etc

    上記のメリットに魅力を感じなければ、レスポンシブサイトの制作は検討し直してもいいかもしれません。

    レスポンシブサイトのデメリットも見てみましょう

    レスポンシブサイトのデメリット

    • スマホとPCで、全く違うデザインやUIにはできない
    • スマホ用、PC用ページを別々に用意するよりは制作コストは抑えられるが、別に安くはない

    個人的には、上記の1つめの全く違うデザインやUIにできないと言うところは大きいかと考えています。

    なぜなら、スマホでのコンバージョンまでのユーザーのフローと、PCでのフローでは大きく異なることが多いからです。

    本来ならコンバージョンに重要なページはスマホとPC別々に戦略を立てて、UI/UXを作るべきかと思います。

    つまり、レスポンシブ以外の

    最後に

    ということで、私としては、「レスポンシブよりもPCとスマホを別ページで用意した方が、コンバージョンには良い」と考えています。

    もちろん、PCとスマホの閲覧される比率や、サイト完成までの期限、制作の予算にもよって判断は変わってきます。

    何が言いたいかと言うと、レスポンシブがベスト的な考えは危険であると言うことです。

    特に制作の依頼を検討されている方は、レスポンシブサイトならコンバージョンが上がると安易に考えがちです。

    そして、その安易な考えを利用してレスポンシブサイトを作っておしまい、って制作会社もあったりします。

    まあ制作会社からしたら、クライアントが言うなら従わざるを得ないっていう側面もありますが。。

    サイトを制作するに当たっては、レスポンシブ以外の選択肢を常に念頭に置いておくことをオススメします。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    arrow_upward

    Top