デザイン&リサーチグループの篠原です。昨年から携わってきたプロジェクトが来週正式リリースということで、メイキング的な話をしたいと思います！

このプロジェクトとは？

2019年7月版搭載予定のkintoneポータルカスタマイズ機能を活用して、ポータルを手軽にカスタマイズできるようにするプロジェクトです。カスタマイズされたポータルのサンプル画像

米国でリサーチを実施

2018年9月。kintonePMの柴田が米国でサイトビジットを実施したところからプロジェクトは始まります。現地企業9社を訪問してkintoneの使い方をリサーチしました。なぜ米国でリサーチをするのか？というと、サイボウズは「チームワークあふれる社会を創る」を理念に掲げていて、kintoneを世界中に広めたいからです。現地企業の外観

ポータルへの不満が高いことが明らかに

リサーチの結果、各社とも同じような悩みや不満を抱えていました。

目的のアプリを見つけにくい（並べ替えしたい）
ファーストビューにもっと多くの情報を表示したい
色合いやアイコンをもっとデザインしたい
スペースは使っていないから欄を消したい
必要ないアプリは表示させたくない
ポータル画面をカスタマイズしたい
お知らせ欄の自由度が低い
社員が使ってくれるようにポータルをわかりやすくしたい
デザインが古い

コンセプトは「キャンバス」

細かな個々の要望に対応すると時間と工数がかかりすぎて現実的ではない…。開発コストを抑えつつユーザーの悩みを解決できる現実的なアイデアが必要でした。開発メンバーとディスカッションを繰り返す中で、HTML / CSS / JSで自由にキャンバスをカスタマイズできるようにするというアイデアが生まれました。

「誰に、何と言ってほしいか」という軸で考える

コンセプトが決まった段階でターゲットに何と言ってほしいかを明確にしました。そうすることで社内外のメンバーに説明しやすくなるだけでなく、開発を進める中で方向性があっているか確認するための道しるべにもなります。メインターゲットはポータルをカスタマイズしている既存パートナーで、公式なカスタマイズになって安心。サブターゲットはポータルに不満を持っているkintone管理者で必要な情報だけ表示できてうれしい。

多くの人に使ってもらうために

キャンバスに描くための「ツール」を用意

ポータルを手軽にカスタマイズできるツールとしてKintone Portal Designer（Chrome拡張）を製作しました。機能を一言で説明するとHTML / CSS / JSが書けるシンプルなエディタです。コードを書いて保存するとその内容をポータルに反映することができます。キントーンポータルデザイナーの画面

chrome.google.com

社内勉強会を繰り返しUIを改善

一通り機能ができた段階で社内勉強会を開催して、使いやすさの検証を行いました。サイボウズはフィードバックを元に改善をおこなうことを大切にしています。検証の結果を受けて、快適にコードが書けるようにMonaco Editor*1を導入したり、デザインテンプレートのインポートを簡単にする改善をしました。改善前と改善後のキントーンポータルデザイナーの画面

多様な使われ方を考慮

デベロッパー、デザイナー、視覚に障害を持った方も使うかもしれない。デスクに座ってコードを書く場合もあれば、営業先でデモをする可能性もある。多様な使われ方に配慮することが、最終的にアクセシビリティに繋がるという思いを込めて、キーボードのみで操作が完結できるようにしたり、画面の拡大縮小をしても画面が崩れないようにUIを設計しました。

デザインテンプレートを製作

ポータルをカスタマイズする際、一からHTML / CSS / JSを書くというのは大変です。そこで、コードが書けない人でも簡単に使えるようにデザインテンプレートを配布して敷居を下げることにしました。まずは、どんなテンプレートが良さそうか様々なデザインのポータルを作り社内のメンバーに見せてフィードバックを募りました。様々なテイストのプロトタイプ

そして改善を繰り返し最終的に5つのデザインテンプレートが完成しました！Githubで公開しているのでkintoneをお使いの方はぜひ試してみてください。 github.com

プロトタイプのフィードバックをもらう

日本、中国、米国でヒアリング

デザインテンプレートを見せて、第一印象についてヒアリングしました。その結果以下のようなヒントが得られました。

業務を整理した上で、必要な要素だけを表示すると良い
一目で何ができるかわかるようなデザインが求められている
愛着のわくデザイン、毎日見ても飽きないデザインが好まれる

「これいいね！」という声が上がる

ヒントを元に、米国のセールスメンバーが営業で使っているkintoneのポータルをカスタマイズしたところ「これいいね！」というフィードバックを沢山いただきました。米国では見た目が古く、不要な情報が多いという不満があり、そこを改善できたことがポジティブなフィードバックにつながったようです。改善前と改善後のポータル画面

目標は世界中に広めること

デザイン&リサーチグループは世界中のチームに使ってもらえるようなkintoneポータルを提供し、世界中のチームワークの向上に貢献したいと考えています。毎日ワクワクして使ってもらえるポータル、毎日使っても飽きないデザインを探求するために来週サンフランシスコに行ってリサーチしてきます。このリサーチの様子は後日こちらのブログで報告する予定です。お楽しみに！