当社のお客様のクリニック様ではホームページに治療の内容や費用、メリット、デメリットを含めて非常に詳しく情報公開をされています。その内容は、手術の事前説明を行う資料として利用できるレベルまで作り込みをされました。

このホームページを使って、手術前のオリエンテーションを行われています。
タブレット端末でホームページを開き、患者様に手術内容を説明され、最後にそのページにアクセスするためのQRコードをお渡ししているそうです。

ホームページを使うことで、多くの写真や動画を使い説明することができます。また、患者様も自宅でスマートフォンなどを使い、ゆっくりと再確認することができます。

そして何よりホームページを更新することで、その資料も次々とバージョンアップさせることができますので、説明資料を別途作り直したり、ビデオを作成したり、大量の紙を印刷する必要がなくなります。
ホームページをただの広告媒体としてだけでなく、業務に活かせるよう作り込むことで、効率化を図るという使い方は、これからホームページのリニューアルや開設を考えている方には大きなヒントになるのでは無いでしょうか。

当社ではホームページを中心としたシステム開発を行っております。
「こんな事できる？」ですとか「こう出来たら便利だな」というご要望などがございましたら、一度ご相談ください。

まずパソコンでもスマホでも同じデータが読み込まれますので、例えばスマホでは必要のない画像も読み込まれてしまいます。たとえば、ホームページのバックグラウンドに大きな画像を壁紙として表示した場合、パソコンできれいに見せるためには、かなり大きめのサイズを用意する必要があります。場合によっては数メガバイトもある画像を使います。ですが、スマホではそんなに大きな画像を必要としません。

また、レスポンシブデザインを用いると、デザインに少なからず制約が出てきます。レスポンシブデザインで作る場合、色々な端末を想定して作らなければならないので、初めからスマホ用に作られたホームページのようにはいかないのが実情です。

そして古いブラウザへの対応が困難だという事も言えます。レスポンシブデザインではHTML5やCSS3の機能を多く使っていますので、それらに対応したブラウザでなければ正しく表示させることができません。もっとも、この部分についてはレスポンシブデザイン自体の問題ではありませんけれど。

つまりレスポンシブデザインは導入のメリットばかりでは無いという事です。それでもレスポンシブデザインが注目されてるのは、そのようなデメリットを考慮しても導入するメリットが補って余りあるということなのです。

ちなみにヤフージャパンや楽天のようなサイトはレスポンシブデザインではありません。これは使い勝手などを考えると、パソコンはパソコン用に、スマホはスマホ用に作った方が閲覧者にとっては使いやすいということです。
使う場所を間違わないようにしなければ、せっかくの機能も生かせないというのは何においても同じことですね。

ヨネシスでは基本的にはレスポンシブデザインを推奨していますが、その運用形態などから判断してサイトの構築を提案するようにしています。ホームページやシステムでお悩みがありましたら、ぜひお問い合わせください。

一つ目はスマホ版のサイトを別に作成する方法です。
パソコン版とは別にスマートフォン版のホームページを作成して、アクセスしてきた端末がスマホならスマートフォン版を、パソコンならパソコン版の情報を返します。ホームページのデータが置いてあるサーバーで、どんな端末からアクセスしてきたかを判別して、端末に適した情報を返します。
これにはスマートフォン版用のサイトへ転送するタイプのものと、その都度毎に判別して適した情報を返すタイプのものがあります。後者は管理が複雑になるため、レンタルサーバーのホームページサービス等、パッケージ化されたサービス以外ではあまり見なくなりました。転送するタイプのものは比較的容易に対応できることもあって、よく用いられる手法です。
この方法でスマホ版のホームページを作成した場合、パソコンとは別に更新を行う必要が出てきます。コンテンツ自体もパソコン版にはあるがスマホ版には無かったり、スマホ版は更新したけれどパソコン版は古いままというようなことが起こります

もう一つのスマホ対応は、レスポンシブデザインという方法でホームページを作る方法です。
これはパソコン版とスマホ版を「同じデータで作成する」というものです。サーバー側でどの端末からのアクセスなのか判別することはありません。すべての端末に対して同じデータを返します。
そして受け取った端末がパソコンでもスマートフォンでも、その画面サイズに「最適化」させて表示することができるというものです。

分かりやすい例として、今ご覧になっているこのホームページをパソコンで見ている方はブラウザの横幅を狭めてみてください。スマートフォンくらいの幅にすると、全体のレイアウトが変わってスマホ版になります。
これがレスポンシブデザインです。

↓画面サイズに合わせて画像の配列とサイズが変わります。

次回はレスポンシブデザインについて書きます