アンドロイド、スマホサイトの事例

今の時代、ウェブサイトを作成するときスマートフォン専用のサイトの作成も念頭に入れなければいけません。PC専用サイトはスマートフォンユーザーにとっては、使い勝手が悪く、スムーズに操作がいかない場合がありますので、現在のスマートフォンの普及率とユーザーの増加率を考えてもスマートフォン専用サイトはかかせないツールです。


まず、サイトを制作するにあたって、アンドロイドの仕様をきちんと確認することが大事です。アンドロイドはグーグルが開発したモバイル専用のOSが搭載されています。OSもバージョンがあり、日本で発売されている端末はHTC Desireの「2.1」。これからもこのバージョンはアップグレードしていきます。ブラウザーは「Chrome」で「WebKit」を採用してます。よって、HTML5やCSS3に対応しているため、これらの知識も必要になります。

HTML5

またアンドロイドは特に、端末によってブラウザーやOSのバージョン、またハードウェア仕様などに違いがあるので、これらの特徴などを念頭に置いての制作が必要です。

縦画面や横画面などの画面表示が変化しますので、これを前提に作成しなければなりません。また、機種によって解像度が異なっていたり、CSSが適用されないということもあるという問題が起きてるのが現状です。縦向きで320px～640px、横向きで480px～960pxが目安になる解像度となります。

それから作成するPCに必要な開発ツールが必要です。まず、Android develoerのサイトからエミュレータなどが含まれているAndroid SDKをダウンロード、またJava開発で使われているEclipseが推奨されています。また、JavaのJDK6が、PCでの作成上の環境が必須となります。


まず、はじめにサイト設計や画面設計を行う際は、スマートフォン機能の特性となるポイントを押さえておくことが大切です。最初に構造設計・サイト設計を行った後、画面設計、そしてデザイン製作、その次にHTML/CSS製作、Javaスクリプトの開発などが基本的な流れです。そして検索エンジン対策（SEO）も重要です。スマートフォンの特徴はwebの検索がとてもシンプルでどのサイトにアクセスしやすいようになっています。
それから、サイトで一番重要になる情報やキャッチコピーやタイトルもシンプルに短くします。そしてウェブページ間を短時間でスムーズに行うことが前提になっていますので、ボタンを大きくしたり、ページの階層はシンプルにページの長さは長めが良いでしょう。
そして設計で重要なのが画面のサイズ。画面のサイズを確認し、使える領域もさらに限られてくるので、利用できる範囲に収まるような画面設計が大事です。
いずれにしても指でタップするという操作を前提にすべて大きなボタンを設置し、コンテンツが明確にわかるような配置の仕方や、スクロールもスムーズにやりやすくする工夫が必要です。広告バナーなどは、スクロールせずに表示される「ファーストビュー」の領域に収める必要があります。
画面設計を行う際は、サイトマップを作成してください。サイトマップをしっかりと作るとイメージもできやすく、シンプルさを意識して作成することが簡単にできます。
デザインもフォトショップやイラストレーターなどのツールを使って各パーツやコンテンツ表示などの配置をデザインすると良いでしょう。
画面設計やデザイン設計を適当に行なってしまうと、複雑でゴチャゴチャしたわかりにくいサイトになりかねません。スマートフォンは、PCと違ってネット環境が不安定です。野外で利用する人が多く、短時間の情報収集や閲覧が必要とする人が自分のサイトを見るということを常に意識してサイト制作に励んでください。

タグ: