片手持ちした際に便利なPathっぽいメニューを、CSS+JSだけで実現するためのチュートリアル記事です。

→　WWW WATCH　CSS で作るスマートフォン向け片手操作メニュー [hyper-text.org]

左下のアイコンをタップすると、

クルクルっと回りながらメニューが出てきます。

サンプルはこちらのページから見ることができます。
（PCからもIE以外であれば、ほとんどのブラウザで見ることができるようです）

親切に解説されているので、わかりやすいですね。

すごく目を引くUIなので、みなさんも参考にしてみてはいかがでしょうか。

関連：

• スマホゲームの画面デザインをする際のポイントがまとめられているスライド資料「企画が考えるスマホUIデザイン」
• ドラッグ&ドロップだけで作れる！！PCサイトを誰でも簡単にスマホサイトに変換できるサービス「shutto」
• ケータイサイトの基本が簡潔にまとめられた良記事「永久保存版！？携帯コーディング、これだけ読めばすぐできる！」

制限の多いスマートフォン向けゲームのUIを、企画側からの視点でまとめあげた、89ページもある大作スライドです。

具体的な例を示すというよりは、概念や方向性を示すという内容になっています。

スマホゲームを作っている方は、必見の資料になっていると思いますので、チェックしてみてはいかがでしょうか。

関連：

• ドリコムの負荷対策のノウハウがたくさん詰まったスライド資料「ソーシャルゲームスケールアウトの歴史」
• 「グロバール×スマホゲームの勝ち方！」セミナーのスライド資料が公開されています
• スクウェア・エニックスのプロジェクトを失敗させないためノウハウが詰め込まれたスライド資料「ゲーム開発プロジェクトマネジメント講座」

PCサイトをドラッグ&ドロップだけでかんたんにスマホサイトに変換できる「shutto」というサービスが出来たようです。

→　shutto | カンタンスマホ変換サービス [shutto.com]

使い方は簡単で、まず変換したい対象となるページのURLを入力します。

すると、編集画面が開きますので、あとは欲しい要素をドラッグ&ドロップして組み立てていくだけになります。

タブやテーブル組などを使っていくと、いかにもスマホっぽいデザインのサイトがガシガシ出来ていき面白いです。

テキスト要素などは、上部メニュー左端のアイコンから編集することができます。

少し使ってみた感じだと、向いているサイト、向いてないサイトはありそうですね。

基本的には企業や店舗などのホームページに向いているように感じます。

表示はJavaScriptを多用して行われています。

出来たサイトのソースを見る限り、サイト作成時に値を取得して作っているのではなく、JavaScriptで最新の値を取得してきて描画しているようです。

ただ、それなりにキャッシュされているようで、変更をすぐに追従はしてくれないようなので注意が必要です。

使い勝手も含めて、なかなか面白いサービスになっていると思います。
まだベータ版のようですので、今後の進化にも期待ですね。

「スマホサイト対応をしたいけれど時間がなくて」という方は、ぜひ一度試してみてはいかがでしょうか。

関連：

• iPhoneやAndroidなどのスマートフォンをはじめ、各種タブレットなどでの画面サイズ確認が簡単に確認できるサービス「Screenfly」
• ガラケー独自のstyle=”○○○”形式で書かれたインラインCSSをHTMLと分離してくれるサービス「Cascader」
• ASCII.jpに掲載されているスマートフォンサイトキャプチャ集「絶対見ておきたい有名企業のスマホサイトまとめ」、「スマホサイトを作る前に見たい国内38社の実例」

→　面白法人カヤックのデザイナーブログ　永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）

これまでに何度もご紹介させていただいたことのある、Flashやモバイルの記事でおなじみカヤックさんのブログです。

「永久保存版！？携帯コーディング、これだけ読めばすぐできる！」と題して、いまどきの3キャリア共通HTMLコーディングのポイントと、テクニックが紹介されています。

またそのまま使えるデザインテンプレートもついており、至れり尽くせりですね。

このページ１つを見せれば、ケータイ向けHTMLのコーディングとはどのようなものかがわかる、良エントリーになっていると思います。

まだ見ていない方はぜひチェックしてみてください。

関連：

• ケータイサイトでのtableタグの使い方がまとめられた記事「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第二弾)」
• 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術」
• XHTMLを使ったページ作成の要点がまとめられた記事「携帯サイト[xhtml]のコーディング前のチェックポイント」

→　case:MobileDesign! モバイルサイトのデザイン紹介ブログ　一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第二弾) [d.hatena.ne.jp]

最近は対応端末がほとんどとなっているためそれほどでもありませんが、tableタグはケータイサイトを作る上ではまりやすいポイントとなっていました。

ドコモ901以前の世代に対応しなくてよいのであれば、表現力の限られるケータイサイトのデザインでは、tableタグをうまく使うことは非常に重要になってきます。

上記のブログを参考に勉強してみてはいかがでしょうか。

関連：

• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術」

モバイルサイトのデザインを紹介しているブログ「case:MobileDesign!」で、「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾)」というエントリーがありました。

→　case:MobileDesign! モバイルサイトのデザイン紹介ブログ　一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾) [d.hatena.ne.jp]

• 横幅240pxの画像を作るときは良く考えて！
• リンク用画像を作るときはマージンも画像内に含めて！
• 左右にマージンを取ってテキストを読みやすく！
• XHTMLで背景を切り替える時は＜div＞に要注意！

今回は第一弾ということで、上記4つのテクニックが掲載されていました。

2番目のリンク用画像については、私はいつも余白を取らずギリギリで作成してしまっていたため、今度から素材を作る機会があれば活用していこうと思います。

4番目のauで背景画像に切れ目が入ってしまう件は、ハマりやすいポイントですね。

こちらのブログでも詳しく解説されているので、合わせて参考にしてみてください。

→　ゆめ技：ゆめみスタッフブログ　【3キャリア共通コーディング】au（EZweb）端末で、divの隙間を消す裏技。 [yumewaza.yumemi.co.jp]

第二弾のエントリーも期待しています。

関連：

• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• ゆめみのmod_ktaiがとうとうリリース、しかも無償利用が可能

→　これからゆっくり考L +α　携帯サイト[xhtml]のコーディング前のチェックポイント [sakaki0214.com]

前回のHTML編もよかったですが、今回も必要な情報が簡潔にまとめられており、良エントリーとなっていますね。

背景画像やフォント、画像の横幅など、ケータイサイトデザインでは必ず必要になるポイントが抑えられています。

上記ブログはご紹介した記事以外にも、デザインに関する小ネタが幾つも紹介されていてとてもためになります。

デザイナーの方もプログラマの方も、ぜひ一度目を通してみてはいかがでしょうか。

関連：

• ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」
• ブックレビュー：携帯Webコレクション モバイルデザインアーカイブの本。
• 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」

ケータイデザインで出来ること出来ないことがキレイにまとめられた「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」というエントリーです。

→　これからゆっくり考L　携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 [sakaki0214.com]

ケータイサイトでは、どうしても実現しづらいデザインというものがあります。
このエントリーでは、ケータイで表現できないようなデザイン案をもらわないように、デザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめているとのことです。

詳細は上記ブログ内でサンプルサイト付きで解説されているので、そちらを見ていただくとして、チェックポイントを簡単に引用させていただくと、次のようになっています。

• tableの使用はOKか
• 背景色を複数色使っていないか
• 枠線を使っていないか
• サムネイル画像の横にテキストが来るパターン
• リストアイコンの下に文字が回り込んでくるかどうか
• ページの左右に微妙な余白が空いていないか
• フォントサイズは2段階ないし1段階か
• 太字を使っていないか

※非常に細かい話ですが、上記エントリー内では902がテーブルが利用不可と書かれていますが、902はiモード対応HTML6.0なので全機種でtableタグが利用できるはずです。

このブログの書き手はコーダーさんとのことで、ならではの視点で良エントリーとなっていますね。

最近はケータイサイトでもかなり凝ったデザインが求められるようになってきていますので、デザインのやり取りが発生する際のチェック項目として活用してみてはいかがでしょうか。

関連：

• ケータイ3キャリアに対応するためのDOCTYPE宣言について
• 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」
• ドコモ端末でCSSを利用するには

→　Amazon　モバイルデザインアーカイブの本。―携帯Webコレクション [amazon.co.jp]

以前ご紹介させていただいたサイト「モバイルデザインアーカイブ」が書籍になったとのことです。

→　モバイルデザインアーカイブ　トップ [mobiledesignarchive.jp]

→　ke-tai.org　ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」 [ke-tai.org]

サイトの内容と同じように、本書はケータイサイトのキャプチャ集という形をとっています。

内容としては、ケータイサイトのキャプチャ画像数枚、およびデザインに関する論評・解説が大量に記載されています。

その数、なんと149サイトです。これだけの数のサイトに掲載許可をとるのは大変だったことと思います。お疲れ様でした。

本書の目的としては、サイトのデザイン作成を行う場合に、参考にしたいデザインのサイトを探す、といった使い方が想定されているのだと思われます。
掲載サイトは「プロモーション」「携帯・IT」などのカテゴリに分類されているのも親切です。
ケータイサイトの要件ヒアリングの際などに、この本を1冊持って行くと、お客さんのイメージを拾い上げやすいかもしれませんね。

また、私はプログラマのため、デザイン自体は作成しないのですが、ボタンやメニューなどの部品を作成するケースは多くあります。
本書を見れば部品レベルでも参考にできるデザインがピックアップできるので便利です。

欲を言えば、紹介したデザインを再現するためのHTML／CSSなどを解説してくれると非常に助かるのですが、さすがにそれは欲張りすぎかもしれないですね。

値段も1,680円と技術書などに比べると安価なのも嬉しいですね。
ケータイサイトに関わる人であれば持っていて損のない1冊だと思います。

関連：

• ブックレビュー： Flash Liteで作る携帯コンテンツ実践教科書
• ブックレビュー： PHP×携帯サイト 実践アプリケーション集
• ブックレビュー： モバイルSEO&SEM Web担当者が身につけておくべき新・100の法則。

→　モバミル – イケてる携帯サイトデザイン [mobamiru.kayac.com]

モバミルはケータイサイトのURLを入力すると、ドコモ・au・ソフトバンクと3キャリア分のキャプチャ画像を撮ってくれるサイトです。

各キャプチャは絵文字表示にも対応しており、きちんとそれぞれの絵文字画像となって表示されます。

ただ、キャプチャの生成には多少の時間がかかりますので（キャプチャ処理後メールで通知が来ます）、各キャリアの動作確認に使うというよりは、ウェブ魚拓のようにアーカイブ的な使い方や、面白いケータイサイトを探す用途に使えそうです。

サイトの宣伝としても効果があると思いますので、ケータイサイトをお持ちの方は登録してみてはいかがでしょうか。

関連：

• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• ブックレビュー： モバイルユーザビリティ・デザイン

→　beBit　ユーザビリティ実践メモ　離脱されない携帯サイトのフォーム作成術 [bebit.co.jp]

ケータイはPCに比べて文字入力などのが大変なため、よくユーザビリティを考えてサイトを作成しないと、利用者は途中で入力を諦めてしまいます。

この記事では、

1. フォーム入力例を適切な位置に配置する
2. フォームのページ数を減らす

という2点を重要なポイントとして紹介しています。

1つ目の「フォーム入力例を適切な位置に配置する」は、注意書きの位置についてのノウハウです。

ケータイは画面が狭く、更に上から下への目線移動のため、注意書きを下に配置しても気づかれないことが多いようです。
注意書きは、入力欄の上に配置したほうが良さそうです。

2つ目の「フォームのページ数を減らす」は、フォームと入力欄の配置についてです。

地下鉄など電波の不安定な場所での入力も想定して、度々読み込みが入るようなページの遷移は、極力控えた方がよいようです。

また、入力開始時の心理的負担を減らすため、最初のページの入力欄は少なめにするという例が紹介されています。

どちらもごく簡単に導入でき、今日からすぐ使えるテクニックですね。

フォームを作成する際には、ぜひ利用してみましょう。

関連：

• 携帯サイトでのユーザナビゲーションのコツ (beBit ユーザビリティ実践メモ)
• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」
• 画面メモを意識した携帯サイト制作 (beBit ユーザビリティ実践メモ)

デザインに優れたケータイ向けサイトを、キャプチャ画像付きで紹介しているサイトがありました。
これは素敵です。

→　case:MobileDesign!　モバイルサイトのデザイン [d.hatena.ne.jp]

どうやってキャプチャしているのか気になったのですが、コメント欄にその答えがありました。

1. PCからアクセスできるサイトは、PC上からUserAgentを偽装するなどしてキャプチャする
2. Flashのサイトの場合は、ソフトバンク端末で保存し、メール添付でPCに転送する
3. ケータイからのみのアクセス制限されているサイトは諦める

とのことです。

2の方法は知りませんでした。
ドコモやauでは出来ないのですが、ソフトバンク端末であれば可能とのことです。
参考になりますね。

ケータイサイト作成を行っている方はぜひ巡回ルートに入れたいサイトですね。

関連：

• ブックレビュー： モバイルユーザビリティ・デザイン
• ブックレビュー：携帯サイト コーディング&デザイン
• ThinkITでモバイルサイト制作特集が組まれています

もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。

まず問題となったのが、auでfloatが利かないことです。
では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。
なかなかやっかいです。

そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。

<img src="test.gif" style="float:left;" align="left" />
あいうえおかきくけこさしすせそたちつてと・・・

こちらの「style」と「align」の部分を変更しながら、きちんと回り込みが行われるかどうか、実機からの確認を行いました。

1. 「style=”float:left;”」のみ
2. 「align=”left”」のみ
3. 「style=”float:left;” align=”left”」の併記

結果は次のようになりました。

結局、両方を併記するほかないようです。
ソフトバンクはオールパスです。（PCも当然オールパスでした）

さて続いて、回り込みの解除です。

<br clear="all" style="clear:both;" />

のように書けばOKと思ったのですが、ドコモで解除が行われませんでした。

仕様を読んでみるとXHTMLでは、clearはブロック要素に書かなくてはならないとあります。
ですので、次のようにdivタグで書いてみました。

<div clear="all" style="clear:both;"></div>

※<div />という書き方は出来ないのでは、というご指摘をいただきましたので、修正しました。

ということでまとめとしては、次のように書けば3キャリアに対応した画像回り込み＆解除が行えるようです。

<img src="test.gif" style="float:left;" align="left" />
あいう
<div clear="all" style="clear:both;"></div>
えおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br />

きちんと表示されました。

関連：

• 他のケータイサイトのHTMLを参考にする際に便利な裏技
• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」

ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。
たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。

ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。

ご存じ「モバゲーTOWN」を例にご説明します。

例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか？
画面上から見ただけでは、正直よくわかりません。

そんな時に役立つのが、「画像を保存」機能です。

これを使えば、CSSで書かれているのか、画像なのかがわかります。

点線は画像でした

またスペーサー画像の位置もバッチリわかります。

中央にある緑のカーソルがあたった部分がスペーサー画像

モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。
（おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます）

他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。

関連：

• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」
• モバゲーのフレームワークがオープンソースとして公開されました
• ブックレビュー： 勝手サイト – 先駆者が明かすケータイビジネスの新機軸