スマートフォンサイト作成のポイント「教えてマリオ」

マリオデザイン

マリオデザインスタッフブログ「教えてマリオ」

ホーム>>教えてマリオトップ>>スマートフォンサイト作成のポイント

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。 難しい言葉を使わず(使えない)噛み砕いた言葉で書いていくので、参考になればと思います。
*勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

スマートフォンサイト作成のポイント

今回はスマートフォンサイト作成のポイントを簡単に説明したいと思います。今回はざっくりと「これさえ覚えとけばとりあえず、スマホサイトの形になる」的な感じで簡単にポイントを紹介します。ワードプレスでオリジナルサイト作成が少し長すぎたので・・・今回は簡単に

目次
  1. スマホ用のメタタグを入れる
  2. pxなどは使わず%で指定
  3. 画像のサイズはきれいに映したければ倍で作る
  4. aタグはblock
  5. 画像はできるだけ使わない
  6. CSS3を駆使してグラデに角丸
  7. 完成したらスマホとPCサイトを振り分ける


1.スマホ用のメタタグを入れる

head内に下記メタタグを2つ追加


<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">




簡単に説明すると1行目のメタタグを入れておくとスマホの画面のサイズにぴったり合わせてくれて,拡大縮小できなくして、きれい表示してくれます。(アイフォンのみ)

アンドロイドは初期設定が画面のサイズにぴったり合わせてくれる設定になっているようです。

基本上記のプロパティを入れておけば問題ないと思います。細かい設定、内容を理解されたい方は

meta name=”viewport”

などで検索すると、詳しく説明してくれているかたがいらっしゃるのでそちらを参考にしてください。

次に2行目です。アイフォンでは数字が並んでいるとこれは「電話番語だ」と自動で認識して自動で電話番号のリンクを張ってしまいます。

かなり優秀ですか、電話番号以外の数字が並んでいる場合も電話番号と勘違いして電話番号のリンクを自動で張ってしまいます。

2行目のメタタグは自動で電話番号のリンクは張らなくていいですよ・こちらが指定した時だけ電話番号のリンクを張ってね。と書いてあります

上記を入れておくと電話番号でない数字の並びに自動でリンクが張られるのを防ぐことができます。

そして電話番号へのリンクは下記のように記入します。

<a href="tel:0927251199">マリオデザインに電話する</a>
です。「tel:電話番号をハイフンなしで入れる」

上記2つがスマホ作成時に必要かなと思うメタタグです。


2.pxなどは使わず%で指定

widthなどを指定するときは並べく%で指定しましょう。スマホは機種によってさまざまなサイズがありますので、pxで指定してしまうと機種によってははみ出てします可能性があります。

%で指定しておくと、機種それぞれの幅にあった%で表示されるので、レイアウトが大きく崩れる心配はありません。

pxで指定したい場合は基本的に小さい機種は320px×480pxですので、pxで指定する場合は、320px以下にしたほうがレイアウトが崩れなくて済むと思います。


3.画像のサイズはきれいに映したければ倍で作る

次は画像です、スマホでは先ほど小さいサイズの幅は320px×480pxと書きました。仮に320pxの幅の機種に幅320pxの画像を入れると少しぼやけてうつります。

きれいに映す方法は320pxの幅の機種にきれいに画像を入れる場合は画像を倍の640pxで作ってIMGタグで320pxを指定します。

画像の解像度は640pxで作ってHTMLの記述を

<img src="img/gazou.jpg" alt="*" width="320" />
のように指定してあげるときれいに表示されます。

解像度を倍で作ればきれいに映ります。しかしスマホサイトはスピーディーに表示されないので、なるべくは画像を軽く使用したり、使わなかったりして作成しますので、倍で作ると重くなるのですべての画像で使用するのはお勧めしません。

メイン画像や会社のロゴなどでこれだけはきれいに映したいと思う画像のみ倍で作ればいいかなと思います。


4.aタグはblock

aタグはディスプレイブロックでブロックにしましょう。

aタグはインライン要素でインライン要素は基本的にはwidthやheightが指定できないので指定できるブロック要素にします。CSSで

a{
    display:block;

}
これでaタグはブロック要素になります。

ではなぜブロック要素にするかというと、スマホサイトはリンクボタンをリンクボタンと分かりやすく作り、なおかつタッチしやすくつくるのが原則です。

ですのでaタグをブロック要素にして、タッチする部分を広げたほうが使いやすスマホサイトになると思います。

ほかにはリンクするボタンは大きく基本的に縦40から50pxぐらいを目安にし(大きく作って損はないかな)

文字も大きく13px~15pxぐらいを使用し%表示でもいいです(大きく作って損はないかな)

です。


5.画像はできるだけ使わない

画像はできるだけ使わないように作成しましょう。スマホサイトを作成する意味の一つはPCサイトより素早く表示させることだと思います。

ですので画像は使いたいところをぐっと押さえてできるだけ使用せずにスマホサイトを作ったほうが良いと思います。

しかし画像がなければ少し味気なくなるので、CSS3でいろいろ装飾します。今までのCSSが単純にサイズを調整したりべた塗で色を付けたりしかできませんでした。

しかしCSS3グラデーションも作れるし角も丸くできるし影もつけれるなど、結構何でもできちゃいます。

PCサイトとだとCSS3に対応していないブラウザで表示されないなどがありますが、スマホはそんな心配必要ありませんので思いっきりCSS3が使えます。(使えなモノや、機種によって表示できなものも少しあります。)

詳しい説明は次で


6.CSS3を駆使してグラデに角丸

先ほども書きましたがCSS3はかなりすごいです。グラデーションも自由自在に使用できるし角丸もできる。(今までは画像を数個に分けなけれなばならなかった)

ですのでスマホサイトは画像をあまり使用しない代わりにCSS3を使って華やかに装飾していきましょう。

しかしCSS3唯一の欠点があります。

それは記述が難しい。

グラデーションをCSS3で書くのはかなり手間です。

しかし世の中便利になりました。探せばたくさんあります。CSS3グラデーション作成ツール(当然無料)。

海外製が多いですが、どれも使いやすくコピーするだけで簡単に誰でも、CSS3の勉強をしなくてもグラデーションや角丸を作ることができます。

CSS3グラデーション作成ツールや

CSS3ボタン作成ツール

などで検索してください。無料で使いやすいものが出てきますので、皆さんにあったツールで作成されてください。


7.完成したらスマホとPCサイトを振り分ける

最後にスマホでサイトにアクセスされたら、スマホに飛ぶかそのままPCサイトを見るか選んでもらうスクリプトを紹介します。

<script type="text/javascript">
// iPhone または、Android の場合は振り分けを判断
if (document.referrer.indexOf('example.com') == -1 &&
    ((navigator.userAgent.indexOf('iPhone') > 0 &&
    navigator.userAgent.indexOf('iPad') == -1) ||
    navigator.userAgent.indexOf('iPod') > 0 ||
    navigator.userAgent.indexOf('Android') > 0)) {
        if(confirm('このサイトにはスマートフォン用のサイトがあります。\n表示しますか?')) {
            location.href = 'ここにスマホサイトまでのパスを記述';
        }
}
</script>


です。これで自動的にスマホでアクセスした場合はメッセージを表示してくれます。



参考にさせていただいたサイトはこちら

紹介させていただきました。ありがとうございます。 以上です。


このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

TRACKBACK_URL