仕様やUI(画面)は現行バージョンと異なる可能性があります。
Cacooの最新版についてはこちらからご確認ください。
7月20日、ヌーラボ福岡オフィスにて「ヌーラボ × さくらインターネットの熱帯夜～さくらのアイコンセット、Cacoo公開記念イベント！～」を開催しました！イベントのファシリテータは、さくらインターネット広報宣伝室 油井 佑樹氏が務め、キーノートスピーチには、さくらインターネットUXデザイナーグループ グループマネージャー河原 覚氏とヌーラボ Cacooプロジェクトマネージャー平山が登壇しました。
さくらのアイコンセットのCacooストア公開に焦点があてられた同イベント。Cacooを用いたシステム構成図作成のデモンストレーションから、ステンシル公開までの経緯やライセンス問題といった、制作から公開までの裏側が語られました。
Cacooで書いて・共有する「システム構成図」のらくらく作成術
もともと、さくらのアイコンセットは、さくらインターネットが運営する「さくらのナレッジ」にて使われていました。ヌーラボユーザーから、それらのアイコンをCacooでも利用したい、という要望をTwitterでいただいたことがきっかけで、今回のプロジェクトは始まりました。
さくらのアイコンセットは、全4 種類・合計80個という豊富なラインナップで、無料公開されています。サーバーやファイアーウォールなどのアイコン「servers」、PHP や Python などのプログラミング言語のアイコン「programming」、CPU やメモリなどサーバーパーツのアイコン「server-parts」、人やグラフなど汎用的なアイコン「general」、矢印などの、記号アイコン「signs」がラインナップされています。
Cacooは、難しい操作をせずとも、直感的に誰でもすぐに使える「シンプルさ」というところに特徴があります。
この操作の簡易性を活かし、プロジェクトマネージャーの平山が「Cacooの使い方」というテーマで、作図・保存・共有のデモンストレーションを行いました。
操作の手順は、ステンシルをドラッグ＆ドロップで置いていき、それらを線でつなぎ構成図を作る、といったとてもシンプルなもの。参加者の方も参加し、数分の間で立派な構成図を作成しました。
続いて、さくらインターネット河原氏は「ステンシルをCacooStoreに登録する方法」というテーマで、イラレからSVG出力のデモンストレーション、アートボードの使い方、SVGの一括読み込みまでの、一連の手順を実演しました。
「さくらのアイコンセット」はCacoo Storeのトップページからアクセスすることができます。
さくらのアイコンは公開時のライセンス問題をいかに乗り越えたのか
イベントでは、河原氏による「さくらのアイコンセットを公開するにあたり生じた、ライセンス問題」の解説もありました。
河原氏は、さくらのアイコンセットを公開する際に、ライセンスの形式を二つの選択肢で悩んだそうです。一つは、ライセンスを明示せず「自由に使えるだけ」のもの。公開者側も利用者側も考える必要がないので導入が簡単というメリットがある一方で、利用者側の自由な範囲が曖昧という特徴があります。
二つ目に「何らかのライセンスを付与する」もの。利用者は何ができて何ができないのかを明確に伝えらるメリットがある一方で、公開者側が各規定を細かく提示する必要があります。前者は「フリー素材」、後者は「クリエイティブ・コモンズ」が挙げられます。
悩んだ河原氏は下記の条件で判断することにしました。
- 広く使って欲しい
- 利用時の規定をなるべくゆるくする
- 何か起きた時のために権利の完全放棄をしない
そこで採用したのが、「CreativeCommons BY4.0」。これは、クレジットの表示のみを義務付けたライセンスなので、希望条件に見合ったものでした。
次に問題になったのが著作権。アイコンの全てが内製によって作られた場合は問題にならなかったのですが、外部のデザイナーに一部依頼したため、「著作者人格権」についての考慮が必要でした。
著作者人格権とは、著作者に公表権・氏名表示権・同一性保持権と言う三つの権利が与えられており、譲渡のできない権利です。
そのため、依頼した制作物を活用する際の利便性のため「作成者は依頼者に対して著作者人格権を行使しない」と言う条件を契約書に記載することがよくあります。加えて、今回のさくらのアイコンセットのように不特定多数の利用者にアイコンを配布する場合は、「作成者は依頼者と”利用者”に対しても著作者人格権を行使しない」と言う文言が必須になります。そこで河原氏は、外部のデザイナーとの契約を再度結んだそうです。
このライセンス問題について、詳細が気になる方は、下記のスライドからぜひご覧ください！
パネルディスカッション「デザイナーとエンジニアがコラボレーションするために必要なこと」
エンジニアとデザイナーのベストな協働とは？をテーマにした、パネルディスカッションも行われました。さくらインターネットからは、UXデザイナーの田名部かおり氏とフロントエンドエンジニアの上赤晋弥氏、ヌーラボからは、バックエンドエンジニアの渡辺信行とウェブデザイン/フロントエンドエンジニアを兼務する福田誠が登壇。イベントのファシリテーションを務めた油井氏により討論が進行されました。ここからは、パネルディスカッション形式でお届けします。
左からヌーラボ福田、さくらインターネット田名部氏、上赤氏、ヌーラボ渡辺
ーーデザイナーとエンジニア、それぞれどこまで相手に仕事を求めるべきでしょうか。
福田：私はデザイナーとフロントエンドを兼業しています。基本的に、できることを制限せずに、何だったらバックエンドもやって、とにかく作業を早く進めようと心がけています。作業を分担し過ぎるのはあまり良くないと思っています。相手のことを思いやりながら、不可能を可能にしていくことが大切。これは私だけでなく、ヌーラボの特徴でもありますね。
上赤：できるところまでやってもらうのは良いと思います。一方で、デザイナーが自己流で書いたコードはチェックする必要があるのでGithubで細かくコメントをしています。デザイナーさんに求めるのは、なるべく”セマンティック”にやってほしいということですね。
田名部：普段、HTMLとCSSを書いてエンジニアさんに渡すことが多いです。その時にこうしてほしいというエンジニアからの要望があるのですが、正直そこはお互いに相談し合いながら進めていきたいです。
渡辺：私は、HTMLのコーディングに関して言うのであれば、基本的な構造は自分で書くようにしています。個人的には、できたらやれば良いし、できなかったらできるひとにアサインするのがスムースなやり方だと思います。
ーーデザイナーからエンジニアに対して、ワークフローに関して相談したいことはありますか？
田名部：ある程度コーディングが出来たタイミングで、デザインを変更したい場合があります。そのような突然の変更を相談する際に、伝わりやすい頼み方を知りたいです（笑）。
渡辺：ヌーラボの場合はTypetalkと言う社内チャットツールを使っています。そこに「各プロダクト名/フィードバック」という名前のスレッドがあります。そのスレッドはみんなが自由に投稿できます。例えば、リリース前の新機能のフィードバックなども、ヌーラボは部署関係なく、気軽に意見を言い合っていますね。
ーーデザインのワークフローについてお伺いしたいです。プロジェクトを進める上で、デザイナーがプロジェクトに入るタイミングは決まっていますか。
福田：ヌーラボは決まっていないです。誰かが企画を立案し書面をつくるというよりも、何かのきっかけで改修したい内容が生まれた際にみんなが気軽に提案します。企画書もCacooで自由に作って、こういう風にしたいと提案します。もちろん、プロダクトオーナーがこの期間はこういったデザインを作ります、と提案して始まることもあります。あまり決められた流れに則っていくことは少ないですね。例えるなら、ノーガードでお互いに殴り合うような感じで仕事を進めていますね。
ーーエンジニアがデザイナーの考えるUI・UXに介入してくることはどう思いますか。
福田：基本的に踏み込んでほしくないことはありません。提案の時点でこれは難しいかな、と思うこともありますが、結局はやってみないとわからないんですよね。エンジニアのスタッフがジャストアイデアでUIやUXを提案することは多いですが、それを理解して、まずは形にしてみること。まずはそこからかなと思います。
田名部：個人の意見として、デザインのワイヤーレベルでは指摘はたくさんほしいです。しかし、いくつか試作品を作っている時に、色々と細かい突っ込みが入るのはちょっとツライですかね。
ーー最後に、エンジニアリングとデザインが求められている各自の役割について教えて下さい。
上赤：デザイナーは見た目を変えると言われていますが、エンジニアもアプリケーションを作成する際にデザイン思考が必要です。正直両者にデザインの力は求められますし、役割は重なっているような感じだと思います。
福田：デザインの概念は非常に広いです。プログラムのコードを書く人もデザインをしています。俯瞰的に考えるのであれば、デザインがプロジェクトやアウトプットに一番影響があると思います。だからと言って”デザイナー”が一番影響があるという訳ではありません。エンジニアもデザイナーも、両者を突き詰めていくと、非常に似た役割を持っていて、ゴールは一緒です。なので、お互いに歩み寄ることこそ、良いアウトプットを生み出す秘訣だと思います。