Ver.3.0.0で行なった主なプロダクトのUI改善
こんにちは。デザイナーの森田です。
この記事では、Ver.3.0.0にて行った主なプロダクトのUI改善の取り組みをご紹介します。
大きな変更ではありませんが、一部見た目や文言に若干の変更を加えています。
Ver.3.0.0 で改善した主なこと
- 各一覧ページで空のステータスを用意
- モジュールIDのURLコンテキストに複数選択のアイコンを追加
- 承認機能の文言を見直し
ほかにも微修正した部分がありますが、この記事では以上の改善点について詳しくお知らせします。
各一覧ページで空のステータスを用意
データの件数が空だった時も以前までは検索フィルターと表の一部が表示されている状態でしたが、場合によってはローディング画面のようにみえてしまうことを懸念し、現在が空の状態がわかるように改善しました。
一部の機能では、空の状態を伝えるとともに次のアクションを示唆しています。たとえばエントリー管理のデータが0だったとき、新規作成ボタンのみ表示されます。
同じ変更が加わった機能
- エントリー管理
- 承認通知
- 承認履歴一覧
- カテゴリー管理
- コメント管理
- ゴミ箱
- フォーム管理
- 投稿データ
- モジュールID管理
- ロール一覧
- ルール管理
- スケジュール管理
- ショートカット管理
- タグ管理
- ユーザー管理
- ユーザーグループ一覧
- Webhook管理
モジュールIDのURLコンテキストに複数選択のアイコンを追加
視覚情報で複数選択できることが伝わるよう、複数選択が可能な項目ではアイコンを表示しています。
モジュールIDの引数では、モジュールの種類によってはIDが複数選択できる箇所とできない箇所がありますが、以前までは見た目では区別ができない状態だったため改善を行いました。
承認機能の文言を見直し
承認機能使用中のコミュニケーションを円滑にするために、文言に変更を加えました。
- メッセージが改行可能に
- 「承認依頼」から「承認する」または「承認依頼する」へ変更
- 「却下」から「差し戻す」へ変更
メッセージが改行可能に
どのような変更を加えたのか記述する際に長文を書いても相手に読みやすく配慮したメッセージが送れるよう改善しました。
「承認依頼」から「承認依頼する」または「承認する」へ変更
以前まではエントリーを書いたユーザーも、そのエントリーを承認するユーザーも「承認依頼」というラベルのボタンでしたが、ユーザーの文脈を考慮して改善を行いました。
エントリーを作成したユーザーが承認依頼をするときは「承認依頼する」、承認を行うユーザーの場合は「承認する」ラベルが適用されます。
「却下」から「差し戻す」へ変更
以前までは「却下」という文言を使用していた部分について「差し戻す」という文言へ変更しました。「提案をしりぞける」以外にも「一部分の修正をお願いしたい」という意味合いで従来の却下機能を使うこともあり、実際のアクションの意味合いよりも強い意味合いを印象付けることへ配慮しました。
たとえば、エントリーを書いたユーザーに送っているメール通知の文言は以下のように変更しています。
変更前
申請が却下されました。 [323:テスト / draft:バージョン2]
変更後
承認依頼が差し戻されました [323:テスト / draft:バージョン2]
メール本文のレイアウト変更
メール本文は見出しと内容を視認しやすくなるよう、レイアウトを再検討しました。
改善前と改善後のレイアウトの比較
最後に
ほかにも微調整を行なった箇所はありますが、今回はそのなかでも大きなものやユーザーの皆様のお役に立ちそうな点をご紹介しました。
Ver.3.0.0の機能面のリリース内容に関しては別途リリースノートをご覧ください。
引き続きみなさまのWeb制作のお役に立てるよう、システム・サービスの向上に取り組んでまいります。 今後とも、a-blog cms のことをよろしくお願いいたします。
Ver. 3.0.3 リリースのお知らせ
この記事では、2022年1月12日にリリースした Ver. 3.0.3 の修正内容について紹介いたします。
現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。
Ver. 3.0.3 リリースノート
- CMS-5825 新規インストール時のメディア機能でのクライアント画像リサイズ機能をデフォルトONに変更
- CMS-5826 ユーザーIDで利用できる文字を説明するツールチップを修正（英数字 + ハイフン + アンダーバー）
- CMS-5827 環境によって、メディア機能やカテゴリ選択など一部機能が動作しない問題を修正
主なリリースノートの詳細な内容
CMS-5825 新規インストール時のメディア機能でのクライアント画像リサイズ機能をデフォルトONに変更
private/config.system.yaml を修正しました。
修正前
media_client_resize: off
修正後
media_client_resize: on
修正前の状態ですと新規インストール時にメディア機能でのブラウザリサイズが動作しない状態になっており、 大きい画像がアップロードできない可能性がある状態になっておりました。 これを修正し、ブラウザのリサイズが正常に動作するようにいたしました。
この度は、ご不便をおかけしてしまい申し訳ございません。 現在お困りの問題に該当する項目がありましたらご対応のほどよろしくお願いいたします。
今後とも a-blog cms をよろしくお願いいたします。
JSONを使って専用モジュールを作ってみよう
a-blog cms ではビルドインモジュール（Entry_BodyやCategory_List...）と呼ばれる最初から入っているモジュールを使って動的にコンテンツを出力していきます。一般的なサイトを作るうえでは、ビルドインモジュールがあればそこまで困らないのですが、a-blog cmsで管理していないデータを出力したり、特殊な絞り込みをしたい場合は、PHPを書いて専用モジュールを開発する必要がありました。
そこで、Ver. 2.7.0 から導入される新しいビルドインモジュール Json_2Tpl を使う事でJSONさえ用意できれば、PHPを1行も書かずに思い通りのモジュールを作る事ができるようになります。
また、JSONがインターフェイスとなるので外部サービスとの連携もしやすくなります。
基礎編
まずは、モジュールIDの作成を行います。 管理ページ > モジュールID の モジュールID作成ボタン を押してモジュールIDを新規作成します。ここでは以下のような設定にしましょう。
- モジュール: Json_2Tpl
- id: sampleJson2Tpl
- 名前: Json_2Tplの練習