フリーランス WEBデザイナー 【キングサイト】
最近のウェブ制作技術
WordPress(ワードプレス)で記事のアップと同時にFacebookやTwitterに共有させることが出来る「Jetpack」プラグインの設定方法
ソーシャルネットサービス【SNS】情報・活用方法
WordPress(ワードプレス)で記事のアップと同時にFacebookやTwitterに共有させることが出来る「Jetpack」プラグインの設定方法
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
Webデザイナーになる為の第一歩(初級)
WEB屋になる為の知識と技術
Webデザイナーになる為の第一歩(初級)
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ウェブ制作カテゴリ
Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

スマートフォン対応サイトを制作する際に気をつけたい5つのポイント

14.10.14 22:27 | コメント(0)

スマートフォンデバイス環境

スマートフォン対応サイトの制作には、パソコンサイトや携帯(ガラケイ)サイトとは異なる知識と技術が必要です。 画面の小さなスマートフォンでは、パソコンサイトと違いその大きさでの操作方法を考え、操作を考えたインターフェイスにしなくてはなりません。

中には画面の大きいタブレットや画面の大きいスマートフォンも中にはありますが、この場合パソコン用に作られたwebサイトをそのまま閲覧させた方が良い場合もあります。

最近では、「レスポンシブデザイン」が多く利用されていますが、もちろん単一のHTMLで各デバイス環境に対応させることが出来ますが、「レスポンシブデザイン」の場合ある程度の経験がないと余計に時間や制作費がかかってしまうかもしれません。

スマートフォン対応で気をつけないといけない5つのポイント

「スマートフォン対応サイト」と言っても、それほど技術的には普通のウェブサイト変わりはありませんが、幾つかの知識は抑えておいた方が良いでしょう。

 1. ブラウザ、デバイスの振り分けを考える
 2. 画面幅の設定と確認
 3. HTML5+CSS3の最新技術を使おう
 4. スマートフォンエミュレータを探そう
 5. タッチ操作を考えたインターフェイス

1.ブラウザ、デバイスの振り分けを考える

Webサイトをパソコンやスマートフォン、タブレット端末など複数のデバイスで見ることがあります。

スマートフォンサイトを制作する前にまずは、重要なターゲットが存在するデバイスを考え、それぞれのデバイスに専用サイトを作るか、レスポンシブ対応を行って「共有サイト」を作るかを決定しましょう。

通常のWebサイトを各デバイスで見る際は、画面サイズが各デバイスに縮小され、内容が同じでデザインや動作をそれぞれに最適化した複数のHTMLファイルやCSSファイルを用意し、HTTPリダイレクトなどで各デバイスへアクセスを振り分ける手法がよく用いられます。

デバイスへアクセスの振り分け

リダイレクト(転送)
スマホ・タブレット対応レスポンシブWebデザインの特徴とは

2.画面幅の設定と確認

スマートフォンは横で見る時、縦で見る時と画面の大きさや見方が変わってきます。本体の向きを変える事で画面幅が大きく変わり、縦長の画面でしっかりと表示されていた画面でも、横画面では見づらくなってしまったり、表示がおかしくなったりする事があります。

縦画面で固定で設定しているサイトを横画面にした時、文章や画像がそのままのサイズで表示され余白が空いたり左詰めになったりしてしまいます。

そのため、スマートフォンサイトを制作する時は必ずリキッド(可変幅)デザインで制作する事をお勧めいたします。

画面幅

画面幅

3.HTML5+CSS3の最新技術を使おう

iPhoneをはじめ、スマートフォンに搭載されたブラウザは、HTML5やCSS3といった最新技術を利用が可能になっています。

スマートフォンサイトでは出来る限りシンプルに出来る限りサイトを軽くしながら制作をしていきます。

ナビゲーション、見出し、ボタン、リンクをユーザーが分かりやすく強調して行くには最新技術を活用するためにHTML5+CSS3技術を取り入れて行きましょう。

また、iPhoneやAndroidといった端末の違いや、スマートフォンとタブレットの端末の違いをCSS3の「media-query」を利用して閲覧環境に応じて表示を変更することも出来ます。

iPhone、Android

iPhone、Android
http://www.kingsite.jp/blog/web-designer/html5-css3/

4.スマートフォンエミュレータを探そう

スマートフォンサイトを制作する時に一番必要なのは検証用の端末やエミュレータです。

今はブラウザがアップロードされFirefox(ファイヤーフォックス)ブラウザ等ではツールの中にweb開発用ツールがあり、スマートフォンサイトやサイズ毎に最適化されたサイトを確認する事が出来ます。

しかし、余白や表示方法を細かく確認したい時はブラウザツールだけでは確認できない場合もあります。

エミュレータは有料のツールもありますが無料のツールも沢山あります。
iPhone専用、Android専用と両方ありますので、エミュレータを活用して、様々な種類の端末で問題なく閲覧できるかどうかを確認しながら作りましょう。

iPhoneエミュレータ

iPhoneエミュレータ

5.タッチ操作を考えたインターフェイス

スマートフォンサイトを制作する際は、パソコン用のサイトと若干異なると所があります。

もちろんiPhoneやAndroidによって端末の違いもありますが、パソコンサイトと少し違うのが、グローバルメニューの考え方や行間、余白の設定を考えたインターフェイスを作っていきましょう。

パソコン用サイトでは、マウスを載せた時にデザインを変更したり、ポインタによる変化をさせたりしますが、指で「タップ」するスマートフォンサイトではそのデザインは表示出来ません。

マウスオーバー等の変化もすですが、スマートフォンサイトの場合全体の余白や行間も重要になってきます。
スマートフォンでユーザーが閲覧した時に、何も設定されていないと横幅いっぱいに文字が掲載されたりなど、見づらいサイトになってしまいます。

インターフェイス

インターフェイス
以上の5つのポイントを踏まえ、ユーザービリティを考え見易いインターフェイス作りが大切です。
カテゴリ:WEB屋になる為の心得, WEB屋になる為の知識と技術, スマートフォン制作と作成方法
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP