マルチデバイス対応

もはやウェブサイトは触って使うものになった

スマートフォンやタブレットPCの普及がとても進んでいます。
「スマートフォン専用サイト」や「レスポンシブデザイン」のニーズが高くなっています。

スマートフォンサイトはパソコンで閲覧するためのサイトとは異なるUIが求められます。キーボード、マウスといったデバイスではなく、「指」がそのコントロールデバイスだからです。
また、モバイルでの通信速度を考慮した、軽快で軽量なサイト制作が必要です。

デバイス、ネットワーク環境への最適化

スマートフォン、タブレット等はデバイスの種類が多く、異なるOSやデバイスによりデリケートなチューニングが必要な場合があります。また、通信環境は日々改善されているものの、モバイルデバイスにおいては固定されたPC環境ほどにネットワークの速度は期待できない場合が多く、そういったモバイル通信環境に配慮したアプローチが必要です。

角丸・グラデーション・ドロップシャドウなど、デザインを極力CSS3で再現し、データの軽量化、表示の高速化を目指します。また、CSSスプライトによりアイコン画像などへのリクエストを最小限にとどめ、最適化されたスマートフォンサイトを制作します。

検証可能端末環境（2014年11月時点）

  • iPone6、iPhone6 Plus (iOS8)
  • iPodTouch（iOS7、iOS6、iOS5）
  • iPad/iPad mini（iOS8、iOS7、iOS5）
  • スマートフォン端末（Android4.4、4.3、4.1、2.3）
  • タブレット端末(Android4.4、KindleOS)

※テスト可能な環境には限りがあります。対象となる環境に関してはお貸出し願う場合や都度レンタルサービス等を利用して検証を行います。ご依頼時に対象となる環境についてご検討の上、ご相談ください。

スマートフォンサイト、レスポンシブデザイン対応

スマートフォンサイト

スマートフォンサイト構築時、デバイスによる表示や動きの違いが障害になってしまうことがあります。またスクリプトの動作が思うように実現できないケースもあります。PCのブラウザとは違ったスマホやタブレット固有のバグや「癖」があり、PC用のサイトで実現可能であってもスマートフォンやタブレットでは再現が困難なデザインや動きがあります。

デザインや想定される動作を事前に確認し、最適なマークアップや実現可能な動作に関しての提案も行っています。
是非ご相談ください。

レスポンシブデザイン対応

CSS3のメディアクエリー等を利用したレスポンシブデザインのサイトが最近多く見られるようになりました。レスポンシブデザインは、マルチデバイスでの閲覧されるサイトをワンソースで管理できるという運用側にとって大きなメリットがあります。

一方でレスポンシブデザインのサイト制作は、同じ1ページの制作であっても、対象となるデバイスや切り替えのトリガーとなる画面サイズの数によって、デザイン～マークアップにかかる負担は従来と大きく異なります。旧来のいわゆるリキッドレイアウトと異なり、ウィンドウサイズやデバイスのオリエンテーションごとに細かなレイアウトの変更、またはかなり異なるデザインの設定が可能ですが、レスポンシブデザインの場合、PCサイトのデザインや設計においてもスマートフォンやタブレット等のモバイルデバイスへの最適化を考慮する必要があります。

例えば、

  • ブロック要素の並び順
  • 可変部分のレイアウト
  • モバイルデバイスでの要素の表示省略方法
  • モバイルデバイスからのアクセス時のトラフィック軽減
  • 画像サイズのフィット調整と切り出し解像度の最適化
  • PCのレガシー環境での再現性
  • モバイルデバイスでのスクリプト動作の再現性

多くの環境での閲覧に耐えるレスポンシブデザインを実現するために、こういった点を十分に検討してマークアップの設計を行います。

Page Top