ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

スマホ向けの面白いUIの作り方を解説したエントリーがありましたのでご紹介します。

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

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

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

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

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

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

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

関連：

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

お仕事でもお付き合いのあるAimingさんの社内勉強会資料で、興味深いスライドが公開されていたのでご紹介します。

制限の多いスマートフォン向けゲームの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!さんに、先日ご紹介させていただいた記事の続編が掲載されていましたのでご紹介します。
今回はtableタグのコーディングについてです。

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

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

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

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

関連：

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