WEBCRE8.jpウェブクリ8.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

使う。

WEBCRE8.jpが試してみたwebサービス、アプリ等を
レビューするカテゴリです。

モバイルアプリUIデザイン支援ツール「Onsen UI Components」

この記事は約5分ぐらいで読めます

Onsen UI Components
アシアル株式会社から、モバイルアプリでよく使われるインターフェイスのHTML/CSSのコードを提供してくれるサービス「Onsen UI Components」がリリースされていたので紹介します!

アシアル株式会社はPHPやHTML5が得意なWeb制作会社。以前も[プレゼントあり]HTML5やPHPを得意とするアシアル株式会社に行ってきましたという記事で紹介してますねー。ちなみにHTML5KARUTAのスポンサーとしても名を連ねてくれています!ありがとうございます★

アシアルはMonacaというiPhone、Android、Windows 8でハイブリッドアプリを作るためのWebサービスを提供してるんですけど、そのサービス上でも使えて普通に使用することもできるOnsen UIというフレームワークを提供してました。今回はそのOnsen UIチームがそのインターフェイスをコンポーネントとして自由にバラバラに利用できるサービスとして開発したみたいです。

Onsen UI Componentsの使い方

Onsen UI Components

Onsen UI Components

Onsen CSS Componentsは基本的には欲しいUIを選んで上部バーのDownloadsから丸ごとダウンロードするかパーツごとにソースコードをコピペするか、というだけで利用できます。その際に各パーツの色を変えたりすることができるくらいですね。

各コードはパターンとコンポーネントに分かれていて、実際の見た目を確認しながら選べます。

パターンの選択画面

パターンの選択画面

パターンはアプリケーションの一つのページ丸ごとを指し、

  • Login
  • Grid Menu
  • Time Line
  • Profile
  • Card
  • Image View
  • Resister
  • Search
  • Signup
  • List with Header
  • List Icons
  • List with Mini Pictures
  • List with Pictures
  • Buttons Different Sizes
  • Icon Buttons
  • Ranges
  • Checkboxes
  • Radio Buttons

といったページをさっくりと作れます。

コンポーネントの選択画面

コンポーネントの選択画面

コンポーネントはそのページに置かれたUIパーツで、パターンというのはこれの集合体というわけです。

  • Switch
  • Range
  • Navigaion Bar
  • Navigaion Bar Item
  • Bottom Bar
  • Navigaion Bar with Segment
  • Button
  • Quiet Button
  • Large Button
  • Large Quiet Button
  • Call To Action Button
  • Large Call To Action Button
  • Button Bar
  • Segment
  • Icon Tab Bar
  • Tab Bar
  • Icon Only Tab Bar
  • Notification
  • Icon Button
  • Checkbox
  • No Border Checkbox
  • List
  • No Border List
  • Category List Header
  • Tappable List
  • Radio Button
  • Search Input
  • Text Input
  • Transparent Text Input
  • Underbar Text Input
  • Textarea
  • Textarea Transparent

といったものが設置できます。

ソースコードを展開してコピーすることもできます

ソースコードを展開してコピーすることもできます

ここからそれぞれのコードを参照することもできますが、丸ごとダウンロードしてしまっても大丈夫です。BEMっぽい感じになってますね。そのまま使っちゃえばUI作るのにはかなり手っ取り早いと思いますし、普通にコードの参考にしてもいいかもしれないですね★

ざっくり紹介しましたけど、自分でも触ってみてくださいー!

Onsen CSS Components