0631ac028834f989024cc811e87812f3_s

初めてスマホサイトをコーディングする時につまずいてしまうこととその対処法


初めてスマホサイトのコーディングをする時、
普通にHTMLで組むとスマホの幅に合わなかったり、表示が崩れたりと、
コーディングのルールを知らないと構築できないことがあります。
そんな初めてスマホサイトをコーディングする時に、つまづいてしまうことや対処法をご紹介します。

 スマートフォンできちんと表示されない

スマートフォンの表示が崩れる時

左が正常な画面、右がきちんと表示されていない状態です。
スマートフォン画面上で、横に広がって表示される場合、
Viewportが適切に設定されているか確認してください。

■設置例
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

 

スマートフォンを横にすると、表示幅がおかしくなる

iPhoneで本体の向きを横に変えた時、
拡大されてしまうのをどうにかしたい場合、Viewportに
拡大を制御するmaximum-scaleを設定しましょう。

■設置例
<meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1″>

 

画像が画面からはみ出してしまう

スマートフォンやタブレットで表示する際、何も設定しないと
画像は元のままのサイズで表示されてしまい、画面からはみ出すこともあります。
画面からはみ出すのを防ぐために、画面内に収まるように設定する必要があります。

スーマトフォン・タブレット用のCSSに下記のコードを記載しましょう。

■設置例
img{max-width: 100%;
height: auto;
}

google mapの表示がおかしい

google Mapの表示がスマホで崩れる時には?

会社やお店の位置をgoogleマップで表示するために、
通常はgoogleマップの右上からiframeタグを取得し、ページに埋め込みます。
ところが、一部のスマートフォンでは地図がきちんと表示できない場合があります。

そこで、iframeタグは使わずに、Google Maps APIを使って地図を読み込みましょう。

まず、Google Maps APIのスクリプトをhead要素内に読み込みます。
設置例:<script src=”http://maps.google.com/maps/api/js?sensor=false”></script>

次に、コンテンツ要素内に地図を配置するdiv要素を設置します。
設置例:<div id=”任意の名前” class=”ui-shadow”></div>

次にcssにdiv#任意の名前に対してコンテンツ幅が100%超えて
描画されないようにbox-sizingを使って設定します。
設置例:暫定的にidをmapとします。

div#map{
width:100%;
height:400px;
border:4px solid white;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}

次にGoogle Maps API で公開されているコードをもとに、
javascriptを設定します。緯度と経度は予め調べておきましょう。

設置例:
<script>
$(function(){
var myLatlng = new google.maps.LatLng(緯度,経度);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“map”), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
});
</script>

通常は、これで完成ですがjQuery Mobileを使っている場合、
座標がずれたりする場合があるので、少しコードの書き換えが必要です。

設置例:
<script>

$(‘div#access’).live(‘pageshow’,function(){
var myLatlng = new google.maps.LatLng(緯度,経度);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“map”), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
});
</script>

 

問い合わせフォームの入力枠を大きくしたい

スマートフォン用に最適化された入力欄

スマートフォンから、問い合わせをする際重要になるのが、ボタンの大きさです。
ボタン押しづらい・入力枠が小さいと、訪問者が問い合わせをせず
離脱してしまう可能性が高まります。

スマートフォンでも、入力しやすいように最適化することが重要になります。
jQuery Mobileを使うと、スマートフォンに最適化したUIを使うことができます。

まず、jQuery Mobileをhead内に読み込みます。
data-roleに「fieldcontain」を指定し、各要素を内包した形で記述します。

設置例:<form action=”フォームのプログラムURL” method=”post”>
<div data-role=”fieldcontain”>
<label for=”name”>名前</label>
<input type=”text” id=”name”>
</div>
</form>

 

画像の幅は何pxにすればいい?

スマートフォンの機種によって、画像サイズや解像度はバラバラです。

例えば、ブラウザの幅が320pxのAndroidに合わせて画像を入れた場合、
ブラウザが640pxのiPhoneでは画像がぼやけて表示されてしまいます。

iPhone4以降の機種は、液晶スクリーンの画像の解像度が
640pxとなっております。ですので、それを目安にすると良いでしょう。

ただし、写真の掲載点数が多いサイトだと、ページの容量が増えてしまうので、
写真を減らすデザインをする等、サイトパフォーマンスと見せたいデザインの考えて構築しましょう。

 

iPhoneではソリッドシャドウが適用されるのに、Androidでは表示されない

iPhoneで表示されるのに、Androidでは表示されないという事例の一つです。
恰好よく見せるために、検索ボックスの枠の中に影をぼかさないソリッドシャドウを設定したとします。
アイフォンでは、綺麗に表示されるのに、
Androidではのっぺりした表示になってしまう時に確認してほしいのが、
box-shadowのプロパティの数値です。
Androidは影のぼかしが0の場合、影自体が消えてしまうので、必ず1px以上を指定しましょう。

 

電話番号じゃないのに、勝手に電話番号と認識されてしまう

スマートフォンの魅了の一つは、気になったらその場で
お店や会社にすぐ電話できることです。

ただ、困ったことにIOSのMobile Safariは
「電話番号らしい」数字を認識すると、自動的に電話番号リンクに変換してしまいます。

誤った動作を防ぐためにも、head内に以下のmeta要素を記述しましょう。
記述例:<meta name=”format-detection”  content=”telephone=no”>

 

まとめ

スマホとホームページのコーディングは同じようで、
実はちょっとルールが違います。

はじめてスマホサイトをコーディングする時に
つまづいてしまいがちな所と対処方法をまとめました。

特に画像の幅に関しては、一度は悩むポイントだと思いますので、
設置したら、iPhoneとAndroidの実機で必ずテストをしてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article誰でも簡単にモックアップが作れるWebサービスまとめ