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..

スマートフォン向け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..

iPhone向けサイト作成のベースに便利なテンプレート集「iPhone Universal」

2008/8/11 月曜日 Posted in iPhone | 1 Comment »

本日は、iPhone向けサイトを作成する際に、ベースとして利用できそうなテンプレート「iPhone Universal」をご紹介します。 → Google Code iphone-universal [code.google.com]   「iPhone Universal」は、iPhone向けのページを作成するためのサンプルとなるHTML, CSSのテンプレートです。 ライセンスはGPL v3で公開されており、リストやボタン、フォームやパネルなど、一通りのサンプルが収録されています。 シンプルなリスト 入力フォーム パネル   上記画像はネイティブアプリではなく、すべてHTMLとCSSを使って作られたiPhone風インターフェイスです。 なお、こちらにサンプルもアップしてみましたので、iPhoneをお持ちの方はどうぞご確認ください。 → iPhone Universal デモ   関連: 90秒で理解するiPhone JavaScript(ジェスチャー編) iPhone用JavaScriptデータベースプログラミング入門(JavaScript++かも日記) 90秒で理解するiPhone JavaScript(マルチタッチ編) Read more..