スマホでもパソコンでも使えるウェブシステム

スマートフォンにはブラウザがついていますから、ウェブサイトを見ることができます。

もともとブラウザというのはパソコンで使われていたものですので、
ほとんどすべてのウェブサイトもパソコンで見られることを前提として作られていました。

基本的にパソコンの画面の縦横幅、画面サイズが想定されていましたので、
スマートフォンでそれをみると「文字が小さくて見えない」という状態でした。

さて、この問題をどう解決すべきでしょうか？

スマホ、パソコン両方に対応する方法

Google では、ウェブサイトがこの問題にどのように対応すべきか
３つの方法を提示しています。

モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル  |  ドキュメント  |  Google for Developers

この記事を読む

１．レスポンシブデザイン

スマホかパソコンかを問わず、同じURL、同じHTMLで
それぞれの画面サイズに応じて表示方法を自動調整する方法です。
Google ではこれをお勧めしていますし、
費用的にも抑えやすいため、この方法が採用されることが増えています。

２．動的な配信

同じURLでアクセスしますが、
アクセス元のブラウザが何なのか等の情報をもとに
プログラムが別々のHTML（スマホ用、パソコン用）を
表示するようにします。

３．別々のURL

スマホ用、パソコン用のURLを用意し、
それぞれにアクセスされるとそれぞれ用に最適化された
HTMLを表示します。

なぜレスポンシブがお勧めなのか

２「動的な配信」と３「別々のURL」でデメリットとなりやすいのは
スマホ用、パソコン用それぞれ別のHTMLを作る必要がある、
という点です。

別のHTMLを作る、ということは、
作る手間も確認の手間もお金も、すべて２倍かかる、
ということになります。

１「レスポンシブデザイン」では、ひとつのHTMLを
画面サイズに応じて自動的に調整します。

「自動的に」というのは、AIを使う、という意味ではありません。

以下のような考え方です。

パソコンでは表を表示するとき、１行ごとに複数の列を表示することができます。

一般的なTableでの表

この画像を拡大する

しかしスマホでこれを表示すると、横に長すぎてみづらいです。
なので、以下のように自動で表示を調整するように「作る」のです。

スマホでの一覧表の表示例

この画像を拡大する

これについては以前、以下の記事で取り上げました。

一覧表をスマホで表示するにはどうすべきか | 中小企業・医療業界向け業務用システム開発のイルカシステム

この記事を読む

イメージわきますでしょうか？

お察しの方も多いかと思いますが、
スマホではどのように見せるか、を、検討する必要はあります。
それように実装する必要もあります。

しかし、あまり凝ったこと（スマホとパソコンで全く表示内容を変える）
をしないようであれば、オープンソースを使って
比較的容易にスマホ・パソコン両方で使えるようにできます。

社内システムをスマホでも使う＝出先でも使う、
ということにも対応しやすい環境になっている、ということです。