PathっぽいUIをCSS+JSで作るための解説記事「CSS で作るスマートフォン向け片手操作メニュー」
    このエントリをはてなブックマークに登録

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

スマホ向けの面白いUIの作り方を解説したエントリーがありましたのでご紹介します。

片手持ちした際に便利なPathっぽいメニューを、CSS+JSだけで実現するためのチュートリアル記事です。

 

→ WWW WATCH CSS で作るスマートフォン向け片手操作メニュー [hyper-text.org]

 

左下のアイコンをタップすると、

クルクルっと回りながらメニューが出てきます。

 

サンプルはこちらのページから見ることができます。
(PCからもIE以外であれば、ほとんどのブラウザで見ることができるようです)

親切に解説されているので、わかりやすいですね。

すごく目を引くUIなので、みなさんも参考にしてみてはいかがでしょうか。

 

関連:



スマホゲームの画面デザインをする際のポイントがまとめられているスライド資料「企画が考えるスマホUIデザイン」
    このエントリをはてなブックマークに登録

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

お仕事でもお付き合いのあるAimingさんの社内勉強会資料で、興味深いスライドが公開されていたのでご紹介します。

 

 

制限の多いスマートフォン向けゲームのUIを、企画側からの視点でまとめあげた、89ページもある大作スライドです。

具体的な例を示すというよりは、概念や方向性を示すという内容になっています。

スマホゲームを作っている方は、必見の資料になっていると思いますので、チェックしてみてはいかがでしょうか。

 

関連:



ドラッグ&ドロップだけで作れる!!PCサイトを誰でも簡単にスマホサイトに変換できるサービス「shutto」
    このエントリをはてなブックマークに登録

2011/11/24 木曜日 matsui Posted in Android, iPhone, デザイン 4 Comments »

興味深いサービスがありましたので、ご紹介させていただきます。

PCサイトをドラッグ&ドロップだけでかんたんにスマホサイトに変換できる「shutto」というサービスが出来たようです。

 

  

→ shutto | カンタンスマホ変換サービス [shutto.com]

 

使い方は簡単で、まず変換したい対象となるページのURLを入力します。

すると、編集画面が開きますので、あとは欲しい要素をドラッグ&ドロップして組み立てていくだけになります。

タブやテーブル組などを使っていくと、いかにもスマホっぽいデザインのサイトがガシガシ出来ていき面白いです。

テキスト要素などは、上部メニュー左端のアイコンから編集することができます。

 

少し使ってみた感じだと、向いているサイト、向いてないサイトはありそうですね。

基本的には企業や店舗などのホームページに向いているように感じます。

 

表示はJavaScriptを多用して行われています。

出来たサイトのソースを見る限り、サイト作成時に値を取得して作っているのではなく、JavaScriptで最新の値を取得してきて描画しているようです。

ただ、それなりにキャッシュされているようで、変更をすぐに追従はしてくれないようなので注意が必要です。

 

使い勝手も含めて、なかなか面白いサービスになっていると思います。
まだベータ版のようですので、今後の進化にも期待ですね。

「スマホサイト対応をしたいけれど時間がなくて」という方は、ぜひ一度試してみてはいかがでしょうか。

 

関連:



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

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

ケータイ関連で、ものすごく人気を集めているエントリーがありましたのでご紹介します。

 

kayacblog

→ 面白法人カヤックのデザイナーブログ 永久保存版!?携帯コーディング、これだけ読めばすぐできる!(テンプレートのおまけつき)

 

これまでに何度もご紹介させていただいたことのある、Flashやモバイルの記事でおなじみカヤックさんのブログです。

「永久保存版!?携帯コーディング、これだけ読めばすぐできる!」と題して、いまどきの3キャリア共通HTMLコーディングのポイントと、テクニックが紹介されています。

またそのまま使えるデザインテンプレートもついており、至れり尽くせりですね。

 

このページ1つを見せれば、ケータイ向けHTMLのコーディングとはどのようなものかがわかる、良エントリーになっていると思います。

まだ見ていない方はぜひチェックしてみてください。

 

関連:



ケータイサイトでのtableタグの使い方がまとめられた記事「一歩上行く!携帯HTML/XHTMLデザイン・コーディング術(第二弾)」
    このエントリをはてなブックマークに登録

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

case:MobileDesign!さんに、先日ご紹介させていただいた記事の続編が掲載されていましたのでご紹介します。
今回はtableタグのコーディングについてです。

 

→ case:MobileDesign! モバイルサイトのデザイン紹介ブログ 一歩上行く!携帯HTML/XHTMLデザイン・コーディング術(第二弾) [d.hatena.ne.jp]

 

最近は対応端末がほとんどとなっているためそれほどでもありませんが、tableタグはケータイサイトを作る上ではまりやすいポイントとなっていました。

 

ドコモ901以前の世代に対応しなくてよいのであれば、表現力の限られるケータイサイトのデザインでは、tableタグをうまく使うことは非常に重要になってきます。

上記のブログを参考に勉強してみてはいかがでしょうか。

 

関連: