現状、ベストな解決策がない。

そうなると個々のニーズに応じたソリューションになります。しかし、ソリューションは個別対応になる分、高いコストが発生します。

なるべくコストを掛けずに対応するを基本サービスとして、ツールを最大限使いながら、手作業と並行して、プログラムを駆使して、スマートフォン対応のWEBサイトを構築します。

コストを下げるために解析技術を使用します

既存のWEBサイトを解析技術を利用して、コンテンツの抜き出し、コンテンツの構造化を実施します。

スマートフォン対応のベースとなるフレームワークは、jquery mobileを使用します

jQuery mobileとは、iPhoneで代表されるようなスマートフォン用のインターフェースが簡単に実現できるライブラリーです。画像をほぼ使わず、またCSSも意識せずにスマートフォンに最適化されたUIの実装が可能になります。

スマートフォンに最適化されたデザインとは。スマートフォンサイト構築で考慮すべき10のこと

スマートフォン対応と言っても、ただ、スマートフォンで見れるというだけでは意味がなく、デザインの基本コンセプトがしっかりしていないと意味がありません。

スマートフォンに最適化されたデザインとは、スマートフォンサイトの特性により、次のような最適化ポイントが存在します。

  • 小さな画面における視覚表現(重要な情報や情報の種別をわかりやすく)
  • マウスがない
  • 直感的な操作性(指で軽く触れる簡単な操作がメインになる)
  • 縦横の変更が可能
  • 通信環境を考慮したデータサイズ(通信環境はPCに比べて貧弱)
  • コンテンツをブロック化した情報構造の設計

そもそもスマートフォンは、削ぎ落しの技術

いつでも、どこでも、見れるというのがスマートフォンのウリの1つです。また、PCサイトがそのまま見れるというのもウリの1つだと思いますが、そもそもは、どんどん削ぎ落して、よりシンプルに。PCの余計な部分をそぎ落としてきたところから始まります。

これは、WEBサイトやコンテンツにも継承しなければなりません。何かを機能を削る、できるだけシンプルに、わかりやすい短い言葉で作成する

html4等で、ただ単に画面サイズを小さくしたものは作らない。

スマートフォンで動作するブラウザーは、html5とCSS3対応しています。また、JavaScript(jqueryやajax)がが動くことにより、動的で柔軟なサイトが動きます。

html5とCSS3というWeb標準に準拠したサイト構築にすることで、すべてに一元的に対応することができるようになります。

レイアウトのためのデザインは削る

PCにように画面が大きければ、一度に多くの情報を見せることができるために、見やすくするという目的でレイアウトが重要になります。

一方でスマートフォンは、画面が小さいので、一度に見せれる情報量は少なく、レイアウトという概念が不要になります。

つまり、従来行っていたtableやdivによる段組みや、tableと画像を使ったレイアウトは不要になります。

また、CSS3により、角丸のレイアウトなどは、画像なしに作成することが出来ます。

トップページ変わる

スマートフォンでは、サイドメニューが無くなります。サイトの平面から階層化、レイヤー化が標準になって行きます。

また、基本文字コンテンツが中心になります。240×320タブ切替型アイコン型リスト型

視覚操作性とスクロールの配慮

縦に目線を動かして読むのには慣れているので、横に長過ぎる画面は避け、常に上から下に流れるように、縦スクロールを中心に設計します。

また、重要な文言はスクロールなしでも読める場所に配置するようにする。

表示が遅いサイトはリピートしない

PCの通信環境とは異なり、通信環境はまだ貧弱です。そのため、1ページあたりのサイズが大きいと、表示するまでに時間が掛かります。

そして、表示が遅いサイトはリピートしてくれません。なるべく、1ページ内のコンテンツの内容をシンプルにして、ページ数を増やしていく方法が望ましいと思われます。

画像について

  • イメージ要素のサイズを正確に指定する
  • 背景イメージは小さなものを並べて使う
  • 1枚の大きなイメージを使わない画像のファイル形式は、pngで統一するのがいい
  • 写真などはjpegでもいいけど、ファイルサイズは小さめに
  • 画像そのものを減らす見出しやリンクは画像にしない

flashも使わない、使えない

マウスがない、指で操作する

リンクが隣接していると、違うリンクを押してしまう。指の幅や大きさを考慮したリンクのデザインが必要になります。

押しにくいリンク(小さい、隣接、わかりずらい)に注意が必要です。また、ただリンクを下線にするだけではなく、アイコン付きリンクなど、リンクの解かりやすさも重要です。

ソフトウェアキーボードが出てくる。

フォームで入力する場合は、ソフトウェアキーボードが画面下部が占有されることも配慮しなければなりません。

外出先に利用を想定した色デザイン

意外と見落としがちなのが外出先、太陽の下でも見る画面は、背景が白色だと見づらいので、白を基本色にしない方が無難です。


©kokyaku.jp 2012-