今回も最近のＷｅｂでの動向を踏まえた技術的なお話しをしていきます。
今回はインターフェイス（みなさんと接する画面周り）の話です。
まずはレスポンシブウェブデザインです。既に何回か紹介しているのでご存知の方も多いと思いますが、閲覧する画面のサイズによってレイアウトや画像サイズが変化するデザイン手法です。今回は技術編なので、裏方となる技術的なことを３つお話しします。
１つ目はフレキシブルイメージです。従来の固定的なデザインであればページにある画像はピクセルやポイントといった固定サイズで指定していました。レスポンシブウェブデザインでは基本的には％による相対サイズで指定します。これにより画面から画像がはみ出すといったようなことがなくなります。
２つ目はフルードグリッドです。まずグリッドデザインと呼ばれる手法でページ全体を格子のように区分けして各要素を配置します。その後、閲覧する画面サイズに応じて各要素のサイズを可変もしくは固定に設定するリキッドレイアウトを組み合わせる手法です。リキッドは液体という意味ですので、まさに液体のように柔軟にサイズが変えることができます。
３つ目はメディアクエリです。これはCSS3の機能で、画面サイズを判別して、先ほどのフルードグリッドで設定した配置を変更する設定を行います。一般的にはサイズが小さくなれば横並びから縦並びに変更し、縦スクロールが長くなる代わりに画像・文字が小さくならないように表示します。ブレークポイントと呼ばれる変化点は通常、パソコン、タブレット、スマホといった３段階で区切ることが多いです。
これらの３つの手法を組み合わせて、レスポンシブウェブデザインは作られますが、実際はネット上にある既存のテンプレートを導入してそこからアレンジしていく場合が多いです。ただし、技術的なことを知っておくとできることがイメージしやすいので基本的なことは勉強することをお勧めしています。
画面周りで最近増えてきているのがチャットUIです。これは問合せ画面がポップアップウィンドウのように画面の前面に出てきて、LINEのような会話型の問い合わせができるものです。中には回答する側がAI機能を持ったチャットボットといわれるものもあります。
取っつきにくいのでまだ触っていない方も多いと思いますが、対面的にできて、会話が画面に残るので、少しぼんやりした質問をしたいときには便利だと思います。また、直接電話で話すのは恥ずかしいけど文字を打つのは得意だという方にも好評のようです。LINEに慣れているような方には向いているように思います。
最後にこれからといった感じの技術としてＷｅｂＶＲがあります。これは、Webサイトを作る際に欠かせない言語であるJavaScriptで、実現する機能で、VR(Virtual reality)つまり仮想現実をWebブラウザを通して実現できます。
当然見る側もVRゴーグルと呼ばれる閲覧環境がないとVR体験ができないのですが、スマホベースであれば比較的安価なゴーグルがあるので、こちらから体験する方が増えるのではないかと思います。リフォーム後のおうちの様子を体験できるようになるとすごく魅力的ですが、準備もそれなりに必要なので今後に期待しています。