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

興味深いサービスがありましたので、ご紹介させていただきます。

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デザイン・コーディング術」

コーディング絡みで良い記事がありましたのでご紹介します。

モバイルサイトのデザインを紹介しているブログ「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キャリアのキャプチャを撮って保存してくれるサービス「モバミル」