スマホ向けWebサイトのUIを実装するなら「Fries」を使おう

  • 2013-05-31 (金) 22:22
  • HTML

スマホ向けのWebサイトを作ろうと思ってもタッチパネルを意識したUIの設計に悩まされる人も多いはず。「Fries」でそんな悩みを解決!Androidライクなモックアップが簡単に作れてしまうフレームワークです。

Fries

screenshot184

まずは上記サイトにアクセスし、スマホ画面をクリック、画面を下にスクロールしてみてください。「Fries」で作ることの出来るUIのサンプルを見ることができます。このUXはとても印象的でかっこいいですね。「Fries」で作れるUIをいくつか紹介します。

 

まずはスマホ画面上部のアクションバー。検索ボタン、設定ボタンが表示されています。マークアップ例も載っていますね。簡単にマークアップできます。

screenshot185

 

 

もちろんアクションバーはスマホ画面下部に設置することもできます。この例ではマップボタンを設置しています。

screenshot186

 

 

こちらはリスト。シンプルでよいですね。リストは3種類ほどサンプルが載っています。

screenshot187

 

 

最後にフォーム画面。

screenshot188

 

 

どれも簡単にマークアップすることができます。まずはこういったフレームワークを用いてさくっとモックアップを作成し、その後自分なりに作りこんでいくと効率良しです。スマホ用のWebサイトを検討していく方は参考にどうぞ。

 

Home > HTML > スマホ向けWebサイトのUIを実装するなら「Fries」を使おう

Return to page top