a-blog cms のボタンについて

このエントリーは、a-blog cms Advent Calendar 2016の10日目のエントリーです。

先日参加した WCAN 2016 Winter でデザインシステムの話を聞いたので、a-blog cms でもやってみようと思い、まずは管理系のボタンからスクリーンショットを撮って分類してみました。

a-blog cms で使われているボタン

基本のボタン

ログイン後にページ上部の管理ボックス内やエントリーの作成画面、管理ページの各ページなどで使われています。


基本のボタンの例

ログインページのボタン

ログインページで使われています。「ソーシャルログインの設定」や「ユーザー登録の外部申請」などを行うと出現されるボタンもあります。


ログインページに表示されているボタンの例

コンボボタンやアイコンのあるボタン

管理ページやエントリーの投稿画面で使われています。アイコンとテキストの空きなどのルール化が必要と感じました。


コンボボタンやアイコンが含まれるボタンの例

エントリー編集ボタン/ユニット追加ボタン

エントリーの投稿画面で使われています。通常のエントリー編集とダイレク編集とでボタンの見た目が異なります。ダイレクト編集時はフラットなボタンにしたかったのですが、もう少しデザインのルールを明確化したいと思いました。


エントリー編集ボタン/ユニット追加ボタン の例

テキストリンクボタン

管理ーページやログイン後に出現するモジュールの変更ボタン、管理ボックスなどで使われています。モジュールの変換ボタンもダイレクト編集同様ふらっとにしたかったからこのような形になっています。


テキストリンクボタン の例

閉じるボタン

ユニットの編集画面、レイアウト機能、モジュールの設定の画面などで使われています。jQuery UI や CKEditor などにも閉じるボタンがあり、CKEditor は新しい UI に変わる予定です。


閉じるボタンの例

立体感のあるボタンとフラットなボタンの使い分け

現在、a-blog cms のエントリー編集画面では、通常のエントリー編集とダイレクト編集で立体感のあるボタンとフラットなボタンを使い分けているのですが、ボタンに関して、Buttons - Components - Material design guidelines がヒントになりそうだと思いました。Material design によるとボタンのタイプとして「フローティング操作ボタン」「浮き出しボタン」「フラットボタン」の3種類が明記されています。「浮き出しボタン」と「フラットボタン」の使い分けに関しては、Raised buttonsFlat buttons に例が紹介されています。Google の Material design をすべて取り入れるわけではありませんが、参考にしたいと思いました。(ちなみに「フローティング操作ボタン」に関して、これだけでかなり奥が深そうですね。)

スマホ時のエントリーの保存ボタンの配置について

スマホ時のエントリーの保存ボタンの配置について、現在はレスポンシブ対応で実装されているためPCと同じユニットの下にいますが、iOS Human Interface Guidelines などを参考にすると、何らかの方法で右上にもっていきたいなと思いました。このあたり色々議論して改善していけたらなと思います。


メールの画面

メール


Inbox by Gmail の画面

Inbox by Gmail


Facebook の画面

Facebook

デザインシステムについて

WCAN 2016 Winter ではGoogle の Material designsales force の Lightning Design System が紹介されていましたが、他にも参考になりそうなものがありましたので、以下メモです。ちなみに Material design はどのぐらいアップデートされているのかわかりませんが、日本語版もあります。

a-blog cms でもデザインシステムを通して、デザインを明文化していけたらと思います。


yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。