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

2009/3/12 木曜日 Posted in 記事紹介・リンク | 1 Comment »

本日は、モバイルサイトを作成しているデザイナーにオススメのサイトをご紹介します。 モバイルサイトをキャプチャし、それをジャンル別にまとめて紹介しているサイトがありました。 →　モバイルデザイナーのためのアイディアエンジン　モバイルデザインアーカイブ [mobiledesignarchive.jp]   着うた、携帯ゲーム、占い、クーポン、など細かくジャンル分けされて、各モバイルサイトのキャプチャ画像が公開されています。 今月オープンしたばかりのサイトのようですが、アーカイブには既に100以上のサイトが収録されているようです。   デザインの参考に使えるのはもちろんのこと、クライアントと打ち合わせする際などにも、「こんなサイトではどうでしょうか」と実際にサイトを見せながら話ができるので便利かもしれません。   関連： デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」 ブックレビュー： モバイルユーザビリティ・デザイン ブックレビュー：携帯サイト コーディング&デザイン Read more..

デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」

2009/1/26 月曜日 Posted in デザイン, 記事紹介・リンク | 5 Comments »

はてぶのホットエントリーで見つけました。 デザインに優れたケータイ向けサイトを、キャプチャ画像付きで紹介しているサイトがありました。 これは素敵です。 →　case:MobileDesign!　モバイルサイトのデザイン [d.hatena.ne.jp]   どうやってキャプチャしているのか気になったのですが、コメント欄にその答えがありました。 PCからアクセスできるサイトは、PC上からUserAgentを偽装するなどしてキャプチャする Flashのサイトの場合は、ソフトバンク端末で保存し、メール添付でPCに転送する ケータイからのみのアクセス制限されているサイトは諦める とのことです。 2の方法は知りませんでした。 ドコモやauでは出来ないのですが、ソフトバンク端末であれば可能とのことです。 参考になりますね。 ケータイサイト作成を行っている方はぜひ巡回ルートに入れたいサイトですね。   関連： ブックレビュー： モバイルユーザビリティ・デザイン ブックレビュー：携帯サイト コーディング&デザイン ThinkITでモバイルサイト制作特集が組まれています Read more..

ブックレビュー： モバイルユーザビリティ・デザイン

2009/1/23 金曜日 Posted in ブックレビュー | 3 Comments »

idea*ideaさんのプレゼント [ideaxidea.com] で戴きました。ありがとうございます。 頂いたのは少し前だったのですが、本業が忙しくなかなか読む暇が取れませんでした。 少し遅くなりましたが、ようやく読み終わりましたのでレビューを書きたいと思います。   →　Amazon　モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 [amazon.co.jp]   本書「モバイルユーザビリティ・デザイン　Web制作者が身につけておくべき 新・100の法則」は、そのタイトルの通り携帯サイトのユーザビリティについて100個の例を挙げ解説した本です。 ケータイのユーザビリティに絞って書かれた本は、おそらくこれが初ではないでしょうか。 著者は個人ではなく、mod_ktaiでおなじみの株式会社ゆめみさんです。   目次は次の通りです。 第1章　ケータイサイトを作る前にやるべき法則 第2章　基本構造とレイアウトの法則 第3章　視覚的にアピールするデザインの法則 第4章　ユーザーをサイトに引き込むための法則 第5章　ユーザーに快適さを感じさせるための法則 第6章　モバイルSEO対策の基本法則 第7章　Flash／iPhone対応サイトの法則 第8章　ユーザーを放さない会員制サイトの法則 大きく8章に分けられており、合わせて100のノウハウがまとめられています。   タイトルには「ユーザビリティ」とついていますが、扱っている内容はそれだけにとどまらず、端末スペックやタグなどの技術的な内容から、ソフトキーなどのケータイ独自の機能の説明、ユーザをひきつけるためのデザインについてや、メルマガをまく時間帯といった運営レベルのことについてまで、非常に幅広く書かれています。 ケータイ向けならではの様々なテクニックが、ジャンルごとに数多く、かつコンパクトにまとめられており、PCサイトしか作ったことの無い人にとっては、ケータイサイトというものを知る上で非常に有用だと思います。 個人的にちょっと残念だったところはSEOの部分が4項目と寂しいことです。 書きづらいところだとは思いますが、みんな気になる部分ですのでもう少しがんばって欲しかったなと思います。   中には読む人が読むとあたりまえのことではないかということも書いてありますが、基本をしっかり押さえてあるともいえます。 ケータイサイト初心者の方には、手早くノウハウを身につけるための手段として、ある程度ケータイサイトに精通している方は、リリース前のチェックシート代わりに使うと良いかもしれません。 性格上これ一冊でケータイサイトが作れるようになるという本ではありませんが、他の書籍と組み合わせて使うことで、よりよいサイト構築に繋げることができる手元に置いておいて損のない一冊だと思います。   関連： ブックレビュー：携帯サイト コーディング&デザイン ブックレビュー： PHP×携帯サイト デベロッパーズバイブル ブックレビュー：携帯サイト制作 - WEBデザインの新しいルール Read more..

ThinkITでモバイルサイト制作特集が組まれています

2008/10/7 火曜日 Posted in ニュース, 記事紹介・リンク | 1 Comment »

ThinkITの10月の特集として「モバイル向けサイト制作」特集が組まれています。 →　ThinkIT　モバイル向けサイト制作 [thinkit.co.jp]   執筆陣もかなり豪華な顔ぶれとなっています。 今から始める携帯サイト制作　著者：柴崎 正也氏 第1回　携帯サイトとPCサイトはここまで違う！ 第2回　携帯サイトの制作から公開まで 第3回　3キャリア対応サイトを作るには（仮） 第4回　携帯サイトならではのユーザビリティ向上（仮）　 携帯サイトをテストする方法　著者：荒木 稔氏 第1回　携帯テストの基本をおさえる 第2回　PCブラウザで携帯サイトのテストをする（仮） 第3回　携帯シミュレーターを使いこなす（仮）　 iPhone向けWebサイトをつくろう　著者：株式会社モディファイ　松本庄司氏 第1回　結局、iPhoneってなんなの？ 第2回　全体構成はどうする？（仮） 第3回　見た目はどうできる？（仮） 第4回　どうやれば楽できる？（仮） 第5回　使えるTipsまとめ（仮）　 モバイルWeb構築の最新潮流　著者：株式会社イオス　吉田 悟美一氏 第1回　モバイルサイトに求められるデザイン力！ 第2回　モバイルサイトをリッチ化する 第3回　コンテンツもよりインタラクティブに（仮） 第4回　サイトの機能もリッチ化する（仮） 第5回　モバイルWebの可能性と未来（仮）　 出遅れるな！Flash Lite入門　著者：株式会社24-7　古本 光司氏 第1回　Flash Liteの基本を学ぼう！ 第2回　Flash Lite 1.1のスクリプト制御（仮） 第3回　時計待ち受けを作ろう！（仮） 第4回　簡単なゲームを作ろう！（仮） 第5回　Flash Lite のまとめと今後（仮）   サイト作成の基本から、テスト・動作確認について、iPhone、デザイン、FlashLiteと、モバイル開発についてが網羅されています。 Web上でここまでモバイル向けの記事がまとまったのは初ではないでしょうか。 記事ごとに曜日別となっており、それぞれ1週間単位で公開されていくようです。 10月はこれだけでかなり楽しめそうです。 気になる記事がありましたら都度ピックアップしていこうと思います。   関連： Web+DB Press Vol45に掲載されたMobaSiFの記事がWeb上で無料公開されています 次号のWeb Designing(2008年7月号)は、ケータイ特集になるようです 「Web+DB PRESS Vol45」はケータイ開発特集になるようです ... Read more..

ケータイでの画像回り込みについてまとめてみました

2008/6/11 水曜日 Posted in デザイン | 7 Comments »

本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。   まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あいうえおかきくけこさしすせそたちつてと・・・ こちらの「style」と「align」の部分を変更しながら、きちんと回り込みが行われるかどうか、実機からの確認を行いました。 「style="float:left;"」のみ 「align="left"」のみ 「style="float:left;" align="left"」の併記   結果は次のようになりました。 ドコモ　 　1:○　 　2:×　 　3:○　 au　 　1:×　 　2:○　 　3:○　 ソフトバンク　 　1:○　 　2:○　 　3:○　 結局、両方を併記するほかないようです。 ソフトバンクはオールパスです。（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サイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」 Read more..

Next Entries »