はじめに

こんにちは！Technology Innovation Group（TIG）の千葉駿です！

今回はFuture Tech Blog『これさえあればサービス構成図がだいたい描けるアイコンセットを公開します！』の裏側を、企画発案者の木村優里さんへインタビューをお届けします。

私もアイコン作成に携わったのですが、華やかなアイコンの裏側の地道な苦労や、外部公開による知らない人にでも使ってもらえる喜びを感じました。

インタビューした人木村優里さん

経営とITをデザインするフューチャー歴6年目。アーキテクトチームで業務を行う傍ら、Future発OSSのロゴデザインを担当し、2016年「これさえあればシステム構成図が大体描けるアイコンセット」をFuture Tech Blogにて公開する。あまり知られていないが、上記記事は弊社Tech Blogのはてブ数第1位。（2020年2月現在）社内外の後押しを受けてバージョンアップした「これさえあればサービス構成図がだいたい描けるアイコンセット」を2020年に公開。社内ではデザインの勉強会を幾度か開催している。

興味を伝えていたら、チャンスが巡ってきた

ーーそもそも2016年に公開されたアイコンセットはどのようなきっかけで作ろうと思われたのですか？

もともと私はデザインに興味があり、BPY（※）などの社内イベント向けの資料のデザインを担当させてもらっていました。ある時に社内ツールのアイコンを作成しようという話が持ち上がり、デザインを担当しないかと、私の元へ話が来たんですね。チーム内やグループのリーダーに 私がデザインに興味があるという話が伝わっていたので、推薦してくれたんだと思います。

※BPY（Best Project of the Year)
年末に1年で最もフューチャーらしいプロジェクトを全社員の投票で決め、栄誉を称えるイベント

社内ツールのアイコン作成が進むうちに、折角だからシステム構成図を書くために必要な 他のアイコンも一通り作成しようよ、ということになりまして。それがアイコンセットを作成するに至った、最初のきっかけです。

それまではシステム構成図作成に必要なアイコンを探す手間があり、見つけてもテイストがバラバラで使いづらいということがあったので、このアイコンセットをダウンロードすれば必要なアイコンがだいたい一式そろえばいいなと思って作成しました。

何はともあれアイコン制作してみる

ーー実際にアイコンを作成してみていかがでしたか？

当社はITコンサルの会社なので正直デザインに知見のある人は少なく、一人で手探りで進めるような状態でした。でも、興味のあったデザイン作成を会社としてやらせてもらえたので、そこは面白かったですね。

完成したアイコンセットは最初は社内ポータルで内部向けに公開し、提案書などで使ってもらっていたんですが、FutureがTech Blogを始めたタイミングで、折角なら外部へ公開しないかと提案があり、公開するに至りました。

https://future-architect.github.io/articles/20160721/

お客様の資料に見覚えのある「あのアイコン」

ーーなるほど。私は2016年入社なので新人研修中にアイコンセットの公開記事をみて、なかなか異色だったので印象に残っています。今回はどのような経緯でバージョンアップに至ったのですか？
お客様がアイコンを使っていた、という話をプロジェクトメンバーから聞いたことがきっかけですね。

フューチャーの誰かが宣伝したというわけではなく、たまたま使っていたようで。プロジェクトメンバーがミーティングの場でお客様が作成したシステム構成図に見覚えがあり、「これ、木村さんのアイコンでは？」となって、教えてくれました。
単純に使ってもらえているのが嬉しかったですし、前回作成から期間も経ちアイコン追加のリクエストもあったので、バージョンアップする話になりました。

2016年に公開した作ったアイコン

前半はここまで。社外で使ってもらえているのは嬉しいですね。私もぜひ「これ自分の作ったあれでは？」の現場に遭遇したいです。

後半はいよいよバージョンアップの裏側へ迫ります。新バージョンのアイコンに込められた思いについて聞きます。

ーー今回のアイコンのバージョンアップにあたり、他との差別化など意識した点はありますか？例えばクラウドベンダーなどは公式のアイコンセットを公開していますが。

サービス構成図を書くためという大元の目的は前回と同様ですが、 より汎用性を持たせる点 を意識しましたね。前回は社内ツールを基点としてアイコンを選定したんですが、今回は所属するTIG内でどのようなアイコンが欲しいかアンケートをとり、技術的に流行りのものや業務で使えるものを選定しています。

また社外でも汎用的に使いやすいように、46種類のアイコンを追加し、色違いを含めてトータルで107種類の様々なバリエーション のアイコンを、PNG形式とSVG形式で用意しました。

今回新たに公開したアイコン
使い勝手を考え、人のデザインはカラーバリエーションを豊富に用意しています。例えば、企業カラーに合わせて使ってもらって、所属会社を区別するような感じで使えるかなと。業界や職種に合わせたデザインを用意する案もあったんですが、種類は無数に存在していて作成しきれないですし、汎用性にも欠けるのであえて色だけにしました。

また、様々なデバイスがインターネットに接続される時代ですので、自動車やスマートスピーカーなどといったバリエーションを増やしました。
それから、前回はシステムなどの静的なオブジェクトが多かったんですが、 今回はステータスなど動的な表現できるアイコンを用意 しました。
より使いやすくなるよう心がけたので、ぜひ実務のスライドなどで使ってもらいたいと思います。

チームでアイコン作成。ノウハウを横展開する

ーー前回からの違いといえば、今回はチームでアイコン作成をしましたよね。私もお手伝いしましたが、何かきっかけがあったんでしょうか？

もともとは前回と同様にひとりで作成する想定だったんですが、プロジェクトメンバーにアイコンバージョンアップの話をしたところ、人を募ってチームでやってみてはどうかと提案されました。デザインに興味あるけど、Illustratorなどのツール使ったことなく、 何から手をつければいいか分からない人たちに、きっかけを与えられるかもしれないから、と。

実際に周りに聞いてみると興味ある人がいたので、今回は人を募ってチームでやる形になりました。チームの全体ミーティングの場でメンバー募集してみたところ、 有志の活動にも関わらず何人も集まってくれて、嬉しかったですね。

ーーなるほど、そういう経緯だったのですね。私もやってみたかったことなので、人を募ってもらってよかったです。実際にチームで進めるにあたり、注意した点などありますか？

メンバーにはまずツールを使えるようになってもらいたかったので、デザインは私が考えて、作成をメンバーに手伝ってもらうという形にしました。
とりあえずツールが使えれば、あとは各々デザインが必要な時に進められると思ったので。
今回はIllustratorを使いました。ハンズオンの資料を作って、Illustrator講座を開催するところから始めました。こちらで用意したサンプルを作ってもらいながら、Illustratorの操作方法を学んでもらう感じですね。

一通りアイコン作成に必要な操作を覚えたら、一人に数種類アイコンを割り当て、作成してもらいました。作業時間も黙々会のように時間の枠を設けて、みんなで会議室にあつまってやりました。各々空いた時間に作ってね、とすると、なかなか作らないと思ったので（笑）

作成作業自体も、各々に手を動かしてもらい、私は口頭でアドバイスするのみで、できるだけ効率よくメンバーのスキルが上がるように意識しました。
最後にメンバーが作ったアイコンのレビュー作業や、全体のバランスを整えたりしたんですが、これだけはチームでは出来ないので孤独な作業でしたね。対象となるファイル数がかなりの数だったので、地味だけどかなり大変でした。無事公開まで漕ぎ着けることができてよかったです。
また、今回の活動を通してIllustratorの使い方を学んだことで、個人的にIllustratorを購入してデザインを始めた人も出てきました。その話を聞いて、チームでやってよかったなと思いました。

とりあえず始めたことが今後のキャリアへ

ーー私もハンズオンではお世話になりました。そしてレビューお疲れさまでした。おかげさまで私も一人でデザイン作成を進められるようになりました。最後に、木村さんが今後やってみたいことや、チャレンジなどあればお聞かせください。

実は、これから大学で心理学を学ぼうかと思っています。デザインを学んでいくにつれて、人間の認知や思考のプロセスを意識すること が重要であると感じるようになりました。

面白いと思ったのが、作る側のプロセスも人それぞれということです。今回のアイコン作成のハンズオンでも、サンプルと同じ図を各メンバーに作ってもらったんですが、その際、詳細な作成手順は提示しませんでした。すると、形を完璧に作ってから色を乗せる人がいたり、全体像を作ってから微調整を繰り返す人がいたり、自然と完成までに個人ごとの手順がありました。こういった思考法の違いを深掘りしていければ、デザインによるアプローチもより効果的なものになるのでは、と考えています。

普段はITコンサルとしてシステムを作っていく仕事をしていますが、今後はより人間にも着目して視野を広げていきたいです。

インタビューを終えて、前例のないことに果敢にチャレンジした木村さんの姿は、フューチャーの「ないものはつくる」をまさに体現していた事例だと思いました。
やりたいことを最後までやりきる熱意と未来のビジョンに私も刺激を受けました！