見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く!携帯HTML/XHTMLデザイン・コーディング術」
    このエントリをはてなブックマークに登録

2010/2/19 金曜日 matsui Posted in デザイン, 記事紹介・リンク No Comments »

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

モバイルサイトのデザインを紹介しているブログ「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]

 

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

 

関連:



XHTMLを使ったページ作成の要点がまとめられた記事「携帯サイト[xhtml]のコーディング前のチェックポイント」
    このエントリをはてなブックマークに登録

2009/12/2 水曜日 matsui Posted in デザイン No Comments »

先日ご紹介させていただいたこちらのエントリーに、続編ができたようなのでご紹介させていただきます。

 

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

 

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

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

 

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

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

 

関連:



ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト(html)の制作に入る前に確認しておきたいチェック項目」
    このエントリをはてなブックマークに登録

2009/10/30 金曜日 matsui Posted in デザイン, 記事紹介・リンク 1 Comment »

良エントリーがありましたのでご紹介します。

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

 

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

 

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

 

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

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

 

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

 

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

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

 

関連:



ブックレビュー:携帯Webコレクション モバイルデザインアーカイブの本。
    このエントリをはてなブックマークに登録

2009/9/8 火曜日 matsui Posted in デザイン, ブックレビュー 1 Comment »

著者の津田様からご献本いただきました。ありがとうございます。
レビューを書かせていただきたいと思います。

 

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

 

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

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

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

 

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

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

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

 

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

 

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

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

 

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

 

関連:



3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」
    このエントリをはてなブックマークに登録

2009/7/22 水曜日 matsui Posted in デザイン, 記事紹介・リンク No Comments »

本日はケータイサイトをキャプチャしてくれる面白いサービスをご紹介します。

 

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

 

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

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

 

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

 

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

 

関連: