このようにすると上手く携帯サイトらしい携帯サイトを作れると思います。

ものぐさ主婦のネットでパート
HOME携帯サイト作り>携帯サイトらしい携帯サイト


携帯サイトらしい携帯サイト



携帯サイトには、PC向けのサイトとは違う特徴があったりします。共通する部分もあると思いますが、 「このようにすると上手く携帯サイトらしい携帯サイトを作れる(と思う)」という項目を列挙してみます。 共感する内容があるようでしたら、参考にしてみてください。

/// 内容を絞り込もう ///
携帯サイトは、1ページに掲載できる面積または文字数が限られます。携帯の1画面に表示できる文字数も 限られます。ちなみに、のらりが今使っている携帯の画面は、全角11文字×10行です。
ここに複数の違う内容を混ぜて掲載するのは無理があります。1ページ1コンテンツ。 大きな意味では、1携帯サイト1コンテンツというくらいのスッキリ感でいきたいものです。

これ、のらりの教訓です。”どっちらけ”の携帯サイトにならないようにしたいです。

/// ページを軽ーく ///
携帯サイトのページデータとしてアップロードできるのは、1ページあたり5KBまでです。 5KBには画像やバナーなどを読み込む部分の容量は含まれません。
PC向けのサイトを運営する者の感覚だと5KBは小さい気がしますが、携帯電話で表示させると5KBの ページはかなり縦に長いものになります。スクロールが大変です。
携帯サイトの容量が大きいと、見る人のパケット料金が高額になります。パケット定額でない人もことも考えましょう。 のらりの感覚で言うと、1ページ2KB位に抑えるのがお薦めです。そのくらいの方が見やすいと思います。
日記の関連記事 ⇒ 「デザインの大きさ

/// トップページはインデックス ///
のらりが見た携帯サイトの多くは、トップページがインデックス(もくじまたはサイトマップ)のように なっていました。有名な携帯サイトほど、サブページの項目がトップページに並んでいるだけの感じでした。
検索エンジンでいうところの、サイトタイトルと検索窓とカテゴリリストだけが並んだトップページというイメージです。 たぶん、これが良いんだと思います。

/// らしいデザイン ///
携帯サイトによく見られるデザインをリストにしてみます。

・タイトル部分は中央寄せになっている
・コンテンツの区切りに横線<hr>を使う
・文字が流れている
・半角数字と半角カナを使う
・絵文字を多用している

言われてみると、なるほどと思っていただけると思います。

(各項目の詳細)
タイトル中央寄せ ⇒ コンテンツ部分は別として、タイトルだけは中央寄せになっている場合がほとんどです。

コンテンツの区切り ⇒ 横線が多く使われています。「・」や「*」などを並べて区切り線の代わりにしているサイトさんも見かけます。

流れる文字 ⇒ 注目して欲しい文章を流しています。スペースを省略できる上、注目されるので便利です。
流し方は簡単、<marquee> 〜 </marquee>ではさむだけです。

半角文字 ⇒ 携帯サイトでは半角数字と半角カナが多く使われています。小さいスペースに多くの文字を書くための工夫です。半角カナの方がデータ容量も小さくて済みます。

絵文字 ⇒ よく見かけます。携帯電話の機種に依存するので、携帯サイトを作る上での使い方は難しいです。とは言え小さいデータ容量でページが華やぐので、上手く使いたいものです。

こういうデザインにすると、携帯サイトらしくなると思います。

/// アクセスキーの設定 ///
少し上の方で「トップページはインデックス」ということを書きました。携帯サイトでは、サブページへのリンクをリストにしている場合が多いと思います。
例:(↓こんな感じ)
  1. サブページへのリンク1
  2. サブページへのリンク2
  3. サブページへのリンク3
こういったリストでは、アクセスキーを設定しましょう。携帯電話の「1」を押すとリスト1番のリンクページへリンクします。「2」を押せばリスト2番のリンクページへリンクです。 PC向けサイトでは必要ありませんが、携帯サイトではサイトを見やすくするのに役立ちます。

設定は簡単です。
<a href="・・・">サブページへのリンク1</a>
と書くところを
<a href="・・・" accesskey="1">サブページへのリンク1</a>
と書けば、「1」を押してリンクするようになります。同様に、「accesskey="2"」と書けば、 「2」を押してリンクするようになります。
(ちなみに、PC向けサイトで同じ設定をしても動作しません。携帯で見た時だけリンクします。)

携帯電話で多くのサイトを見ることが少ないのらりは、携帯サイトを公開して半年以上の間、アクセスキー設定の存在を知りませんでした。
知らなかったためものぐさ主婦の外食カロリーチェックではアクセスキーを設定していませんが(近日に設定予定)、もう1つの新・携帯サイトでは慌ててアクセスキー設定をした次第です。f^^;

/// 画像と絵文字 ///
画像と絵文字を使うと、サイトの雰囲気が華やいでいいものです。でも、携帯電話のキャリア(提供会社)や 機種に依存することに注意しましょう。

画像について、まず、表示できる大きさに限界があります。横120を超えるものは無理があります。 データ容量が大きいとパケット料金に跳ね返るので、データ容量と表示させる数にも気を配りましょう。
画像形式について表示できるものの大枠は、NTTDoCoMoがgifとjpg(jpg表示不可の機種が多くあります)、Vodaphoneがpngとjpg(jpg表示不可の機種も残っています)、 EZWebはgifとpngとjpgが可能です。一応のところキャリア共通で表示できる画像はjpgですが、全機種対応の画像はないと思った方がいいです(表示できない機種もありますので)。
日記の方で関連記事を書いていますので(携帯サイト作りの苦労話「イラスト素材はGIF形式なのかも」)、 参考にしてみて下さい。

次に絵文字ですが、絵文字も携帯電話のキャリアと機種に依存します。画像より依存度が高いです。
絵文字を多用しているページでは、CGIのプログラムで携帯機種を認識して 機種ごとのページを表示させている場合が多いようです。HTMLやXHTMLでページデータを書く方には、 絵文字の使用はお薦めできません。

(注意しよう)
サイトやページのタイトルに絵文字を含めるのは避けましょう。絵文字を含むタイトルはロボット型検索エンジンが無視すると言われています。
絵文字をタイトルに使おうとする方は少ないと思いますが、念のため書いてみました。考慮してみて下さいね。

/// 全機種対応で無理しない ///
携帯サイトを作ったら、多くの人に見てもらいたいと願うのが普通です。全キャリア、全携帯機種で同じように 表示される携帯サイトを作りたいものです。
一方で、携帯キャリアや機種ごとに制限が非常に多いです。 全キャリア、全機種対応サイトを目指す場合、HTMLで極々シンプルなデザインのサイトを作ることになります。 もちろん、それも可能です。ただ、コンテンツ勝負のシンプルデザインのサイトも、最初からコンテンツ勝負で 成功するのは難しい気がします。

のらりとしては、ある一定期間のサイトの存在が周知されるまではデザインに 一工夫して、コンテンツだけで人が集まるようになってから全機種対応のシンプルデザインで勝負するのがお薦めです。 デザインは注目を集めるのに有効ですから、上手く活用して多くの人に自分の作った携帯サイトを見てもらえるようにしたいですね。

/// CGIで作るのもいい ///
PC向けでは嫌われやすいCGIページのサイト、携帯サイトではお勧めです。もともと携帯サイトにはトップページ相互リンクの 習慣がないですから、嫌われにくいです。ページが安定しないという理由で、検索エンジン登録で好かれないことはあります。 でも、そのくらいです。

お勧めする理由は、携帯キャリアごとに違うページを表示させることができるからです。CGIで携帯キャリアを認識して ページを振り分ければ、画像も絵文字も確実に表示させることが可能です。凝ったデザインにできます。
PC向けサイトを運営していてCGIを勉強したいと思ったことはありませんが、のらりは次に作る携帯サイトを CGIで書こうかと思っています。皆さんもご検討ください。

MENU
お得サイトでネット収入
収入が得られる仕組と準備 / メール受信でネット収入 / サイト訪問でネット収入 / ゲームでネット収入 / アンケートでネット収入 / 懸賞応募でネット収入 / ポイント合算でネット収入 / 振込み用銀行 / 携帯電話でネット収入 / ミステリーショッパー(覆面調査)でネット収入
携帯サイトでネット収入
携帯サイト作り / 携帯サイト公開 / 携帯アフィリエイトでネット収入 / 携帯サイトもクリック保証/リンクスタッフでネット収入 /
携帯アクセスアップ1 / 携帯アクセスアップ2 / 検索エンジン登録 / ランキング集
TOPへ  HOMEへ 
【免責】ご利用は自己責任でお願いします。 【禁止】掲載している内容の転載を禁止します。
Copyright (C) ものぐさ主婦のネットでパート All Right Reserved.
SEO [PR]  カード比較 冷え対策 株価 動画無料 ライブチャット 小説 SEO