PathっぽいUIをCSS+JSで作るための解説記事「CSS で作るスマートフォン向け片手操作メニュー」

2012/3/6 火曜日 Posted in デザイン, 記事紹介・リンク | No Comments »

スマホ向けの面白いUIの作り方を解説したエントリーがありましたのでご紹介します。 片手持ちした際に便利なPathっぽいメニューを、CSS+JSだけで実現するためのチュートリアル記事です。   → WWW WATCH CSS で作るスマートフォン向け片手操作メニュー [hyper-text.org]   左下のアイコンをタップすると、 クルクルっと回りながらメニューが出てきます。   サンプルはこちらのページから見ることができます。 (PCからもIE以外であれば、ほとんどのブラウザで見ることができるようです) 親切に解説されているので、わかりやすいですね。 すごく目を引くUIなので、みなさんも参考にしてみてはいかがでしょうか。   関連: スマホゲームの画面デザインをする際のポイントがまとめられているスライド資料「企画が考えるスマホUIデザイン」 ドラッグ&ドロップだけで作れる!!PCサイトを誰でも簡単にスマホサイトに変換できるサービス「shutto」 ケータイサイトの基本が簡潔にまとめられた良記事「永久保存版!?携帯コーディング、これだけ読めばすぐできる!」 Read more..

スマホゲームの画面デザインをする際のポイントがまとめられているスライド資料「企画が考えるスマホUIデザイン」

2012/2/29 水曜日 Posted in Android, iPhone, デザイン | 1 Comment »

お仕事でもお付き合いのあるAimingさんの社内勉強会資料で、興味深いスライドが公開されていたのでご紹介します。   企画が考えるスマホUIデザイン View more presentations from onoremiz   制限の多いスマートフォン向けゲームのUIを、企画側からの視点でまとめあげた、89ページもある大作スライドです。 具体的な例を示すというよりは、概念や方向性を示すという内容になっています。 スマホゲームを作っている方は、必見の資料になっていると思いますので、チェックしてみてはいかがでしょうか。   関連: ドリコムの負荷対策のノウハウがたくさん詰まったスライド資料「ソーシャルゲームスケールアウトの歴史」 「グロバール×スマホゲームの勝ち方!」セミナーのスライド資料が公開されています スクウェア・エニックスのプロジェクトを失敗させないためノウハウが詰め込まれたスライド資料「ゲーム開発プロジェクトマネジメント講座」 Read more..

ブックレビュー:iPhone & Android スマートフォンサイト制作の教科書

2011/11/2 水曜日 Posted in ブックレビュー | 1 Comment »

著者の一人である石本氏からご献本いただきました。ありがとうございます。 レビューを書かせて戴きたいと思います。   → Amazon iPhone & Android スマートフォンサイト制作の教科書 [amazon.co.jp]   本書「iPhone & Android スマートフォンサイト制作の教科書」は、スマートフォンサイトのデザインや制作についてのノウハウを解説した入門書です。 著者は、こもりまさあき氏、谷拓樹氏、石本光司氏、いちがみトモロヲ氏、4名の共著という形になっています。   目次は次の通りです。 序章 スマートフォン向けサイト制作をはじめる前に 第1章 スマートフォン制作のための基礎知識 第2章 制作・テスト環境のセットアップ 第3章 スマートフォンサイトの企画、構造設計 第4章 スマートフォン向けのパーツ制作 第5章 HTML5による実装 第6章 CSS3によるレイアウトと装飾 第7章 JavaScriptを使ったインタラクション 第8章 フレームワークやオーサリングツールを使ったサイト制作 第9章 パフォーマンスの最適化 付録 スマートフォン各機種 画面解像度一覧表   入門書というスタンスが取られていますので、スマートフォン向けサイト制作の基礎知識の部分から、制作に必要な環境の構築方法、どんなサイトを参考にしたらよいかのギャラリーなど、基本的な部分からしっかり解説されています。 しかしながら、基礎的なことしか書かれていないというわけではなく、タップなどスマホ特有のUIの解説や、HTML5・CSS3といった新しめの技術など、一歩進んだ部分の説明も書かれています。   画像や余白だらけだとか、文字でびっしりなどということはなく、どのページも適度なバランスで書かれています   また、jQuery Mobileや、各種スマホサイト向けフレームワークの紹介など、広く浅くではあるものの、幅広く解説がなされています。 むしろ後半部分は、入門書というにはやや高度すぎると言えるくらいかもしれませんが、このあたりは無理に理解しなくてはならない部分でもないので、これで良いのかもしれません。   全体として学習の流れを考えてうまく作られており、タイトル通り教科書として使える良書になっていると思います。 今後スマートフォン向けのサイトやサービスはどんどん増えていく傾向にあると思いますので、まだ制作の経験の無いかたは本書を参考に勉強をはじめてみてはいかがでしょうか。   なお内容の一部は、こちらのサイトから見れるようになっています。 購入前に雰囲気がつかみたい方はどうぞご覧ください。 → MdN Design Interactive iPhone & Android スマートフォンサイト制作の教科書 [mdn.co.jp]   関連: ブックレビュー:PhoneGap入門ガイド ブックレビュー:iPhoneアプリで稼ごう ブックレビュー:位置情報ビジネス ~「位置ゲー」が火をつけた新しいマーケット~ Read more..

スマートフォン向けUIの良いお手本が見れる記事「スマートフォン版Yahoo!検索の作り方 第1回:UI設計編」

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

良い記事があったのでご紹介します。 Yahoo!検索スタッフブログに、「スマートフォン版Yahoo!検索の作り方 第1回:UI設計編」という、リニューアルした検索ページのUIについて解説した記事がありましたのでご紹介させて戴きます。   私も実際に使ってみましたが、かなり使いやすく、よく考えられています。 これは、現時点でのスマートフォン向けWebユーザインターフェイスとしては、高いレベルで完成されており、我々にとっては良いお手本となると思います。   → Yahoo!検索 スタッフブログ スマートフォン版Yahoo!検索の作り方 第1回:UI設計編 [searchblog.yahoo.co.jp]   スマホをお持ちの方は、記事を読むだけよりは、実際に使われてみるのが理解しやすいかと思います。 ユーザエージェントを騙ってiPhoneにすると、HTMLやJavaScriptなども見ることができそうですので、気になる方はどんな仕組みかチェックしてみてはいかがでしょうか。   関連: 機種やキャリアによって異なる十字キーの操作性について解説された記事「入力フォームの操作性、機種による違いにご注意!」 スマホ向けデザインのコツをまとめた記事「スマートフォンサイトをデザインする上で知っておくべき10のTIPS」 ASCII.jpに「jQuery Mobileデザイン入門」という連載記事が掲載されています Read more..

ASCII.jpに掲載されているスマートフォンサイトキャプチャ集「絶対見ておきたい有名企業のスマホサイトまとめ」、「スマホサイトを作る前に見たい国内38社の実例」

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

ASCII.jpにスマートフォンサイトのキャプチャまとめ記事が掲載されていましたのでご紹介します。   → ASCII.jp 日本語サイトの事例を一挙紹介(前編) 絶対見ておきたい有名企業のスマホサイトまとめ [ascii.jp] → ASCII.jp 日本語サイトの事例を一挙紹介(後編) スマホサイトを作る前に見たい国内38社の実例 [ascii.jp]   誰もが知っている国内有名企業のスマートフォンサイトがまとめられています。 ジャンルとしては次のようにわかれています。 前編: ファッション・アパレル メーカー(自動車・家電) メーカー(食品・飲料) 交通・旅行 小売・飲食 不動産・建設   後編: 金融(銀行) 金融(保険・証券) 金融(クレジット・消費者金融) 通信 メディア(ニュース) メディア(テレビ) EC・通販 ポータル・Webサービス その他の業種   iPhoneのホーム画面のようにアイコンを並べるのが、どの業種でも比較的よく使われているレイアウトのようですね。 どのサイトも凝ったデザインとなっており、参考になりそうです。   関連: デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」とこの手のサイトのまとめ ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」 デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」 Read more..