社内システムスマホでもパソコンでも使えるようにするには

2017年5月18日

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


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

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

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

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

 

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


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

 

1.レスポンシブデザイン

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

2.動的な配信

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

3.別々のURL

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

 

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


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

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

 

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

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

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

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

一般的なTableでの表

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

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

 

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

 

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

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

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

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

 

この記事の著者

イルカシステム(株) イルカシステム株式会社

イルカシステム(株)は、以下のような業務用ウェブシステムのご提案、受託開発、運用を行っております。

1.中小企業さま向けの社内向け業務ウェブシステム(営業支援、顧客管理、受注管理、請求入金管理、在庫管理、経営数値管理など)

2.医療業界向けの業務改善システム

※業務ウェブシステムの開発を効率化するための自社サービス「イルカベーカリー」をご提供しております。
※医療業界向けに、臨床研究の無作為割付自動化のための自社サービス「ムジンワリ」をご提供しております。

お問合せはお気軽に、こちらからどうぞ! → イルカシステム株式会社へ問合せ

著者:イルカシステム株式会社

お問い合わせ




会社概要

<p>イルカシステム(株)</p>
<img src="http://www.iruka-system.co.jp/wp-content/uploads/2017/01/WS000000.png" alt="会社概要 住所" width="243" height="84" class="alignnone size-full wp-image-49" />
<div class="alert alert-warning">
2017/1/1より、住所変更いたしました。
</div>
<p><span class="label label-success">TEL</span> 03-5843-9168</p>

  • 中小企業 41個の記事

    中小企業様にご提案・開発してきた実績をもとに、システム構築について記載した様々な記事一覧です。

  • 社内システム 39個の記事

    様々な社内システムをご提案・開発してきた実績をもとに、システム構築について記載した様々な記事一覧です。

  • わかりやすさ 30個の記事

    情報システムをわかりやすく使いやすいものにするためのノウハウ、気をつけていることの記事一覧です。

  • UI設計 27個の記事

    UI(ユーザーインターフェース)は、システムの使い勝手を左右します。どんな点に気をつけているか、どんな考えでシステム開発しているかの記事一覧です。

  • 顧客管理 26個の記事

    これまで構築した様々なシステムのうち、顧客管理機能をどのような観点でご提案、開発しているかをまとめた記事一覧です。

  • 受注管理 18個の記事

    これまで構築した様々なシステムのうち、受注情報を管理する機能をどのような観点でご提案、開発しているかをまとめた記事一覧です。

  • ビジネス 18個の記事

  • 業務 16個の記事

  • 要件定義 14個の記事

    要件定義とはどのようなシステムを構築するのかを決める作業です。要件定義において注意し、考えていることをまとめた記事一覧です。

  • クラウド 13個の記事

  • 登録画面 13個の記事

  • 編集画面 12個の記事

  • システム会社 12個の記事

  • 情報共有 11個の記事

  • みえる化 11個の記事

    手作業をシステム化して効率化するだけでなく、それらの情報を集約して簡単に見えるようにし、社員が自律的に動ける組織を作ることが「みえる化」です。

  • 一覧画面 11個の記事

  • 業務用ウェブシステム 10個の記事

  • エクセル 9個の記事

  • コミュニケーション 9個の記事

  • セキュリティ 8個の記事