デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」とこの手のサイトのまとめ

2011/2/8 火曜日 Posted in Android, iPhone, 記事紹介・リンク | 2 Comments »

デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」というサイトがオープンしたようです。   → 参考にしたい優れたiPhone(スマフォ)Webデザイン集 - iPhoneデザインボックス [design.web-hon.com]   この手のデザインの参考になりそうなサイトのキャプチャを集めるという手法は以前からあり、幾つか同様のサイトがあります。 当ブログで過去にご紹介させていただいたことのあるサイトや書籍を改めてまとめてみました。   まず、恐らくこの手のサイトの元祖であると思われる、ケータイサイトのキャプチャを集めたサイト「case:MobileDesign! モバイルサイトのデザイン」 → case:MobileDesign! モバイルサイトのデザイン [d.hatena.ne.jp]   続いて、同じくケータイサイトのキャプチャをジャンル別に大量に掲載している大御所「モバイルデザインアーカイブ」 → モバイルデザイン集のモバイルデザインアーカイブ [mobiledesignarchive.jp]   そのiPhone版である「iPhoneデザインアーカイブ」 → iPhoneサイトデザイン集のiPhoneデザインアーカイブ [iphonedesignarchive.jp]   PC版もあります。「ブブンデザインアーカイブ」 → Webデザインの“ブブン”を集めたブブンデザインアーカイブ [bubundesignarchive.jp]   Androidも含めスマートフォンサイトを集めている「スマートフォンサイト集めました。」 → スマートフォンサイト集めました。 [sp-web.jp]   サイトの他に書籍も出版されています。 過去にレビューを書いたデザインアーカイブ系の本はこれだけあります。   → ke-tai.org ブックレビュー:携帯サイト年鑑2010 – ケータイサイトの最新デザインがわかる厳選500サイト超掲載 [ke-tai.org] → ke-tai.org ブックレビュー:モバイルデザインアーカイブの本。Ver.2.0 [ke-tai.org] → ke-tai.org ブックレビュー:携帯Webコレクション モバイルデザインアーカイブの本。 [ke-tai.org]   参考になれば幸いです。   関連: ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」 デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」 iPhoneサイトのデザインがまとめられた「iPhoneデザインアーカイブ」がオープンしたとのことです Read more..

iPhone/Android向けサイトのキャプチャをカテゴリ別に集めたサイト「スマートフォンサイト集めました。」

2011/1/27 木曜日 Posted in 記事紹介・リンク | 1 Comment »

iPhone/Android向けサイトのキャプチャをカテゴリ別に集めた「スマートフォンサイト集めました。」というサイトがあるようです。   → スマートフォンサイト集めました。 [sp-web.jp]   各サイトのキャプチャ画像をジャンル別にまとめて掲載して、デザインの参考にしようというコンセプトのサイトのようです。 方向性としては、「iPhoneデザインアーカイブ」などと同じですね。   最近はスマートフォン向けサイトの需要も大きいので、Webデザイナーの方は必見ではないでしょうか。   関連: iPhoneやAndroid向けのサイトデザイン作成テクニックを紹介した記事「スマートフォン対応サイトの作り方、教えます」 ブックレビュー:携帯サイト年鑑2010 – ケータイサイトの最新デザインがわかる厳選500サイト超掲載 iPhoneサイトのデザインがまとめられた「iPhoneデザインアーカイブ」がオープンしたとのことです Read more..

誰もがハマるケータイのtableタグについてまとめられた記事「ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース」

2010/9/21 火曜日 Posted in 記事紹介・リンク | No Comments »

livedoorディレクターブログに、ケータイに関する記事がありましたのでご紹介します。 誰もがハマりやすいケータイのtableタグについてまとめられた記事です。   → livedoor ディレクターブログ ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース [blog.livedoor.jp]   ケータイのtableタグは、非対応の機種があったり(最近の機種ではどれも大丈夫ですが)、キャリアや機種によって見え方が微妙に違ったりで、PCサイト制作畑からケータイにやってきた人は、誰もがハマる要素の一つです。 この記事では、そんなtableタグについて1エントリーまるまる使って解説されている貴重な記事です。   ケータイのtableタグの特徴や注意点に加え、実際のサンプルソースを何パターンも掲載しているので、大変わかりやすく実用的です。 とりあえずブックマークしておいて損のないエントリーだと思います。   関連: 機種やキャリアによって異なる十字キーの操作性について解説された記事「入力フォームの操作性、機種による違いにご注意!」 ケータイサイトのスクリーンショットの撮り方について書かれた記事「livedoorディレクターブログ モバイルサイトのキャプチャを撮ろう」 livedoorディレクターブログに掲載されたモバイルデザインに関する記事「そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7」 Read more..

ケータイサイトの基本が簡潔にまとめられた良記事「永久保存版!?携帯コーディング、これだけ読めばすぐできる!」

2010/9/7 火曜日 Posted in デザイン, 記事紹介・リンク | No Comments »

ケータイ関連で、ものすごく人気を集めているエントリーがありましたのでご紹介します。   → 面白法人カヤックのデザイナーブログ 永久保存版!?携帯コーディング、これだけ読めばすぐできる!(テンプレートのおまけつき)   これまでに何度もご紹介させていただいたことのある、Flashやモバイルの記事でおなじみカヤックさんのブログです。 「永久保存版!?携帯コーディング、これだけ読めばすぐできる!」と題して、いまどきの3キャリア共通HTMLコーディングのポイントと、テクニックが紹介されています。 またそのまま使えるデザインテンプレートもついており、至れり尽くせりですね。   このページ1つを見せれば、ケータイ向けHTMLのコーディングとはどのようなものかがわかる、良エントリーになっていると思います。 まだ見ていない方はぜひチェックしてみてください。   関連: ケータイサイトでのtableタグの使い方がまとめられた記事「一歩上行く!携帯HTML/XHTMLデザイン・コーディング術(第二弾)」 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く!携帯HTML/XHTMLデザイン・コーディング術」 XHTMLを使ったページ作成の要点がまとめられた記事「携帯サイト[xhtml]のコーディング前のチェックポイント」 Read more..

ブックレビュー:ケータイサイト解体新書 – デザインパターンから理解する実装テクニック

2010/6/24 木曜日 Posted in ブックレビュー | No Comments »

昨日に続いて本日もブックレビュー記事です。 発行・発売元のワークスコーポレーション様からご献本いただきました。 ありがとうございます。   → Amazon ケータイサイト解体新書 - デザインパターンから理解する実装テクニック [amazon.co.jp] ※発売日は2010年6月26日で、現在予約可能です。   本書「ケータイサイト解体新書 - デザインパターンから理解する実装テクニック」は、デザイン目線で書かれたケータイ解説書です。 著者は「モバデビ」のホシナカズキさん、サイト製作協力は「これからゆっくり考L」のsakaki0214さんとなっています。 目次は次の通りです。 CHAPTER 1 ケータイサイトを取り巻く環境 CHAPTER 2 ケータイサイトの構築とキャリア仕様 CHAPTER 3 デザインをはじめる前に CHAPTER 4 実例にみるケータイサイトデザイン CHAPTER 5 デザインの実践 CHAPTER 6 マークアップ&コーディング 巻末資料   詳細な目次はこちらから見ることができます。 また、内容の一部も立ち読みできます。 → ワークスコーポレーション ケータイサイト解体新書 ―デザインパターンから理解する実装テクニック /ホシナカズキ 著 [www.wgn.co.jp]   帯にWebデザイナー必読、HTMLコーダー必読、というキャッチコピーがありますし、冒頭の挨拶文でもデザイン目線でという話が書かれていますが、本当にデザインだけの内容というわけではなく、序盤にはケータイ業界の現状と動向がまとめられていたり、ところどころ技術的な内容も出てきます。   ただしその技術的な箇所の内容は残念ながら少し怪しいようです。 キャリア振り分けのmod_rewriteを使った.htaccessの記述例に「Options +FollowSymLinks」という記述があったり(別にあってはダメというわけではないですが関係ないと思います)、RewriteRuleの記述に不必要と思われる[OR]があったりします。 誤植なのかわかりませんが、スペースが必要なところに入っていませんし、少なくともこのサンプルの通り入力しても動作しないでしょう。   またGoogleマップをケータイサイトに導入するというページでは、「出力はGIF形式になるのでSoftBank端末の一部では表示することができない」という旨の記述がありますが、現在のGoogleMapStaticAPIではformatを指定できると思います。 → 参考 少なくとも1年半前からはformat指定ができたはずなので、少し情報が古いようですね。 そもそも現時点のソフトバンク端末(旧J-Phone端末は停波されたので)であればGIFは全ての機種で見れるはずですし、本書の巻末資料や3章の画像形式のページでもソフトバンク端末のGIF欄は全て「○(表示可能)」になっており矛盾があります。   ただこれらは発売前の見本誌だからかもしれません。直っていることを期待します。 (※もし直っているようでしたら、本記事はすぐ訂正しますのでご指摘をお願いします) 追記(2010/6/25) ご連絡をいただきました、直っていないようです。 随時こちらのURLの「お詫びと訂正」に公開するとのことでした。   それはさておき、デザインに関する記述はというと、こちらはなかなか使えるものになっています。 CHAPTER 4「実例にみるケータイサイトデザイン」という章では、EC系、ポータル系など各系統別の有名サイトのデザイン解説と、そのHTMLソースが掲載されています。 これらは各サイト内にちりばめられたテクニックや工夫が見て取れ、とてもためになります。 またCHAPTER 5「デザインの実践」・CHAPTER 6「マークアップ&コーディング」にも、ぜったい抑えておきたい基本的な内容から、他の書籍ではなかなか載っていないようなマニアックなTIPSまでが紹介されており、参考になるでしょう。   技術的な記述に若干の不安はあるものの、それは内容のごく一部ですし、全体としては魅力的な一冊になっていると思います。 ケータイサイトデザインに関わる方はチェックしてみてはいかがでしょうか。   関連: ブックレビュー:ユーザー視点でつくる 携帯サイト制作の基礎知識 ブックレビュー:mixiアプリをつくろう!OpenSocialで学ぶソーシャルアプリ ブックレビュー:Ruby on Rails携帯サイト開発技法 Read more..