UIを使えばハイブリッドアプリやスマートフォン向けWebサイトにおいてリッチで高速な描画ができるUIを手に入れることができます。多機能かつ多彩な表現を可能にすればするほど、ちょっとしたカスタマイズもしづらくなってしまいます。それを防ぐのに使えるのがテーマ機能です。色をがらっと変えることで印象が大きく変わります。Rollerを用意しており、それを使うことで各UIコンポーネントのカスタマイズを簡単に行えるようになっています。Rollerの使い方を紹介します。Rollerを開きます。Rollerのトップページ見て分かる通り、各UIコンポーネントが並んでいます。スイッチやレンジ、ナビゲーションバーといったUIコンポーネントに加えて、リストに入ったスイッチ、各種リスト、ポップオーバー、アラートなど60種類以上のコンポーネントが登録されています。これらで例えばスイッチのデザインを変えようと思った場合、横にあるチェックボックスをつけます。Color)だけが明るくなり、他はグレーアウトします。チェックボックスをオンにした状態これでどの設定が、どのUIコンポーネントに関わってくるのかが分かりやすくなります。思いもしないところが変更されてしまったり、逆にどこを変更すれば反映されるのか分からないといった事態にならなくなるでしょう。カラースキーマを選ぶ自分で一からカラー設定を変更していく他、予め作成されているカラースキーマからまとめてカラーリングを変更することもできます。カラースキーマ例えばこの中から好きなものを選び、クリックします。すると一気に全体のカラーリングが変更されたのが分かるはずです。全体の色合いをここから選択し、その後細かな調整を行っていくことも可能です。パターンでチェックそして個々の細かなUIコンポーネントだけでなく、実際にアプリ風に使ってみた時の見え方を確認できるのがパターンです。UI(かつ設定しているテーマ)で表現したらどう見えるのかをチェックできます。UIの表現力の高さもお分かりいただけるかと思います。Componentをクリックすると、表示部分におけるUIコンポーネント名を知ることができます。Componentをクリックコンポーネント名を知るさらにそのコンポーネントをクリックすると、該当コンポーネントがHTML/CSSにどのように記述すれば良いのかも確認ができるようになっています。ボタンをクリックしてZipファイルをダウンロードします。解凍すると次のようなファイル構成になっています。UIのスタイルシート(ミニファイ版含む)とStylus用のファイル一式になっています。ここからさらに細かくカスタマイズしても良いですし、そのままプロジェクトに取り込んでも良いでしょう。Licenseとなっています。背景色をグレーベースにしたり、薄いピンクなどにするだけで印象は大きく変わってきます。フラットUIは情報構造設計を優先するのでデザイン上の差がなかなか出しづらいかも知れません。カラーリングを変えるだけで随分違って見えるものでしょう。Rollerはビジュアル的に確認しながら作業が進められます。様々なアプリUIのパターンを見ながら最適なテーマカラーを作成してください。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。