カテゴリー: JVC新サイトに向けて

おまたせ!携帯サイト化のためのテスト記事 その1

※2011/3/27現在:このブログはすでにwordpressに移行しているため、この記事の内容は古くなっています。

現在、MovableTypeの携帯サイトプラグイン、ケータイキットを用いて、この個人ブログを携帯サイト化を試みています。これは、JVC公式サイトの携帯サイト化に先立って実施しているものです。

これにあたって、この記事では一記事内でのさまざまな記述内容が携帯電話各キャリア・各機種でどのように見えるかを確かめるために、HTML各要素を盛り込んでいます。

PCでたまたまこのページをご覧になった方も、ぜひ下のQRコードから携帯電話でこのページにアクセスしてみていただいて、コメントを残していただけると助かります! なお、JVC関係者の方は、テストチェックシート(excel)がお手元に届きますので、それをもとにテストしてください。

qrcode

“おまたせ!携帯サイト化のためのテスト記事 その1” の続きを読む

広告

携帯サイト自体以外でやるべきこと

  • PCサイトでやること
    • metaタグに以下を追加
      • <link rel=”alternate” media=”handheld” href=”携帯サイトのURL” />
      • これは要は検索クローラー向けの記述。ただしトップページだけやるのか、該当する携帯ページがあるページ全部でやるのか?
  • .htaccessファイルでやること
    • PCサイトにアクセスしに来た携帯を携帯サイトに誘導する
    • AddType application/xhtml+xml .html を追加
  • GoogleやYahoo向けのsitemaps.xmlを作成する

続いて、こうしたほうが望ましいことをメモ

こういうのは書いていくとキリがないとは思うが、とりあえず初心者なので書き出しておく。こちらも追記していく。

  • コンテンツの優先順位について
    • なんのサイトか(何が提供できるのか)をファーストビューで明確にする
    • ページの先頭が、そのページの具体的な説明となる見出しになること
    • 優先順位の高いものほど上にもっていく
    • ファーストビュー内でページ内リンク一覧を目次の意味もこめて出す
    • 最新の更新日や更新内容などもわかるように
  • 閲覧速度を落とさないために
    • 読み込みを早くするために、写真などの画像にはwidth属性をつけておく。縦横比は自動で固定化してくれるようだ。
    • 読み込む画像の点数が多いと速度が遅くなる
    • 主要導線ページでは体感速度(=軽いか重いか)を上げる
      • 導線となるリンクはなるべく上に
      • スクロール量を少なくする
    • 逆に詳細ページでは軽さよりも情報量を重視する
  • デザイン面では
    • 屋外での利用を想定して、文字色と背景色とのコントラストを高く取る
    • 明度の高い色は端末によっては見えないかも
    • 本文中の見出しはセンタリングせず、色を変える?
  • ナビゲーション面では
    • 数字キーを押すことで移動ができる(アクセスキー)のでその統一ルールを確定する

      【分割記事】
      →前のページへ

      画面を上にスクロール

      【分割記事】
      →次のページへ

      【分割記事】
      →先頭ページへ

      【分割記事】
      →先頭ページへ

      ひとつ前の記事/カテゴリにジャンプ

      画面を下にスクロール

      ひとつ次の記事/カテゴリにジャンプ

      トップページに戻る
    • コーナー間でも移動できるリンクを用意する。フッターにカテゴリ一覧を出す感じか。
  • ページ内コンテンツでは
    • 画像リンクにはキャプションでわからせるか、画像内にそれを促す文字情報を入れる
    • titleタグの内容は、ブックマーク時に表示されることを意識して最初の10文字で何のサイトかかるようにする
    • 強調したい部分には背景色を反転させる
    • フッターには以下の項目を入れる
      • よくある質問、お問い合わせ、プライバシーポリシー、運営会社情報、コピーライト

基本要素を確定

今回の携帯サイト構築における基本要素を確定させる。先日買った本や、いろいろなサイトをまわてそれらをまとめたもの。今後適宜追加していく。

  • ケータイキットのテンプレートを、XHTML版(新しいやつ版)とHTML版(対象は主にdocomo mova)とに分ける 以降は、基本新しいやつ版の話。docomo版は、とりあえずデフォルトテンプレートそのままとする。
  • マークアップは、XHTML Mobile Profile 1.0 で行う
    • XML宣言:<?xml version=”1.0” encoding=”Shift-JIS”?>
    • 文書型宣言:<!DOCTYPE html PUBLIC “-//WAPFORUM//DTDXHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
    • ただし、使うタグはiモード対応XHTMLで使えるものに限定するか?
    • これによって、movaが締め出されるので、別のページに誘導する必要がある。最初のフォルダのみ名前を違えるようにして(/m/に対して/mo/など)、すべてredirectかけるか?
  • 文字コードはShift-JISにする
  • コンテンツMIMEタイプを明記:
    • <meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=Shift-JIS” /> ただしこれが必要なのはdocomoFOMAのみ。従って、HTML版テンプレートでは必要ない
  • CSSに関しては、
  • テキスト1行の文字数:スクロールバーを考慮して、全角9文字、半角18文字とする。でも本文記述のところはPC記事をそのままもってくるので難しいだろう。
  • 画像について:
    • 写真画像はJPG(6万5千色)
    • プログレッシブJPGは表示されない
    • イラストなどはGIF(ソフトバンクはケータイキットでPNGに変換してもらう??)
  • 1ページの容量は50kBを目安とする
    • 無駄な改行やインデントをなるべくなくす(MTテンプレートの時点から)

続けて携帯関連本購入。

先日の本に追加して、以下の本も購入。

ケータイサイト解体新書 デザインパターンから理解する実装テクニック

既存の携帯サイトのソースを提示して、ここはこういう理由でこうしている、という説明をしてくれている。教科書的な説明というより、より実践的な内容。

JVCスタッフ・ボランティア周辺でテスト用の実機も各キャリアともでつつあるので、来週にテストを公開できるように、今週末は頑張ってサイトを作り込もう。

ケータイキットをv1.50にバージョンアップ

公式サイトを確認したところ、ケータイキットは頻繁にバージョンアップが行われており、機能拡張なども比較的行われているらしい。よって、この時点でケータイキットを最新バージョンであるv1.50にアップグレードした。

以前出版された公式本のころからもかなり機能が増えているので、あとで更新履歴を一通り確認しておこう。

とくに、動作環境が千差万別である日本の携帯電話でつかうためのケータイサイトとして、HTML(XHTML)をどのレベルで統一させるかは、きちんと把握しなければならない。これについても、すでに公式本のころからは常識が変わっているようだ。下記2冊の本を購入し、現状把握をアップデートしておこう。

モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

???

携帯サイト コーディング&デザイン