2016年6月22日

テクノロジー

【Case by Wantedly】若手エンジニアが考える最速プロジェクトの進め方

広報/Designer

実は、デザイナーと広報を兼任するアイスリーの横山いづみがここ最近、気になっていたサービス「Case」。Wantedlyさんがリリースしたクリエイター向けのポートフォリオサービスです。

今回は、若干25歳(入社2年目)にしてWantedlyの新サービス「Case」のプロジェクト責任者に抜擢された南 直(みなみ なお)さんに、どうやってWantedlyさんがこのプロジェクトをわずか2ヶ月半という短期間でリリースしたのか、自社サービス開発と受託開発を行う弊社の目線でその全貌に迫りたいと思います!
 
 

Caseプロジェクト開発の前提

・チームが組まれた時点で、大コンセプト「クリエイターが集まり、お互いの作品を見せられるサービス」までは決まっていた

・上記チームでのディスカッションで「単体のサービスとして可能性があり、なおかつ『Wantedly』とシナジーがある」ことが決め手となり現在の「Case」になった
 
 

チーム構成

以下の社内メンバー4名で構成
1. ウォンテッドリーの各サービスを監修するベテラン
2. UI/UXデザイナー
3. 新卒1年目のエンジニア兼プロジェクトリーダー(南さん)
4. インターンのエンジニア
 
 
DSC04643_g
 
 

ニーズの把握

横山:今日はよろしくお願いします!早速ですが、「クリエイター向けのサービス」というコンセプトですが、それは「Wantedly」を運営していく中で見えてきたニーズによるものですか?
 
南さん:実は「Wantedly」のユーザーにはエンジニアが多く、クリエイターの登録はそこまで多くないんです。そこで今回クリエイターのユーザーを増やしたいという思いがあったんです。もう少し詳しくお話すると、現在、日本ではクリエイターは『使われる、搾取される弱い立場』になりがちです。クリエイターが自分の作ったものや制作に関わったものを掲載し、自分をアピール出来るCaseの様なプラットフォームが生まれる事で、クリエイターが力を持つようになり、彼らがより仕事で心踊れるようになるのではないかと考えました。
 
横山:素敵です!まさに『ユーザーファースト』ですね!確かに、クリエイター側がまだ『使われる』という状況が多いなと思います。「Wantedly」のユーザーはデザイナーが多いと思っていたのでエンジニアよりも少ないというのは意外でした!
 
南さん:そうなんです、デザイナーがまだまだ少ないんです。あともうひとつ、今後「Wantedly」を海外に広げるに辺り、ユーザーが集まる活発なコミュニティーを最初に作っておきたいという狙いと、日本と海外の間にある「言語」という壁を乗り越える為に、「画像」や「映像」の様な非言語のコンテンツが中心となるサービスを作ったという狙いがあります。

 
 

UI/UXの設計

横山:基本的な流れは、アイスリーデザインでのプロジェクトの進め方と同じく、要件定義→デザイン→コーディング→組み込み→テストだそうですね!今回のプロジェクトの中でUI/UXの方向性は、デザイナーが一人決めたんですか?それともみんなで?
 
南さん:最初のディスカッションの時点でどういう体験を作るかを話し合い、そのUXの方向性にのっとり、ワイヤーを作らずいきなりデザインを作ってくれました。それから、これを叩き台としてみんなで話し合い、ノーティフィケーション(通知機能)や検索といった機能が必要じゃないかと更にディスカッションを重ねました。
 

design
左) 現在、リリースされている「Case」。
右) 当初、ディスカションで決めた内容をデザインしたもの。

 
横山:最初の時点で、明確なUXのゴールを実現するためにイメージ共有がしっかりとされていたんですね。デザイナーが全部のUI/UXをきめたわけではなく、メンバーで話し合ってから、デザイナーがデザインに起こしてくれたんですね。デザインを共有した時はどんなツールを使いましたか?
 
南さん:「Sketch」でデザインを作り、「Zeplin」でデザインの共有を行いました。※
 
横山:ツールといえば・・・Caseの他にも「Tools」というサービスもリリースされましたね :) ちなみにうちではデザインプロセスで「inVision」を使ってます!早速、私もサイトを覗いてみました!
 
 
Toolsとは?
まさに今、私がきいた「ツールって何使ってます?」という質問。みんなが知りたい他社のツールを共有できるのが「Tools」なんです!
 
 
※解説
Sketch:Mac用のベクターグラフィックソフト。イメージはPhotoshopに近いです。最近ではPhotoshopよりもWeb制作に最適化されていると人気のツール。

Zeplin:Sketchで作成したデザインデータから指示書やスタイルガイドなどを自動で生成してくれるソフトウェア。チーム間で簡単にデザインの情報を共有することができます。

inVision:プロトタイピング作成&チーム間での共有もできるツール。
 
 
DSC04499g-2
 
 
 

採用したUIの特徴

 
・「Case」単独でユーザーを集めるサイトにするため、「Wantedly」とのUI統一は考えなかった

UI1
左) Case
右) Wantedly

 
・「Wantedly」関連サービスで共通して使用している、「ページ遷移しない詳細閲覧UI」は採用

UI2
左) プロジェクト一覧ページ(トップページ)
右) プロジェクト詳細ページ

 
・タグ乱立を防ぐためにサービス側で登録したタグを優先的にサジェスト表示

UI3
左) 検索のサジェスト
右) プロダクト登録時のサジェスト

 
 
横山:「Wantedly」との共通UIは考えなかったそうですが、それはクリエイターが気に入るようなUIにしたかったということですか?
 
南さん:そうです。ユーザーが作ったプロジェクト(作品)の画像がきれいに見えるようなシンプルなUIにしたいという思いもありました。
 
横山:今回、ここはUI工夫した!というUIを教えてください!
 
南さん:そうですね、各プロジェクトの画像をクリックすると、同じ画面のまま、詳細が見えるので、ユーザーがクリックする心理的なハードルを下げることができるんです。唯一、Wantedlyと共通化したUIはここですね。
 
横山:なるほど〜!ちょっとしたことがユーザーの手間になるし、詳細ページは何度も何度もユーザーがクリックする箇所ですもんね!
 
 
 

機能・エンジニアリング面で工夫した点は?

・実際のプロジェクトデータ入力を自分たちで行い、その上で必要と分かった機能を実装
 
・ページ遷移しない詳細閲覧UIでもURLを変更し、直リンクができるよう実装
https://case.wantedly.com/portfolio/projects/437
 

function1
左) 直リンクで遷移するページ
右) プロジェクト一覧ページから遷移するページ

 
・プロジェクトの「CREDITS」には、Wantedly登録ユーザー、Wantedly登録企業ほか、非登録のユーザーや企業を登録できるよう、サジェスト機能と通常文字列入力機能の両方を実装
 

functin2
左) サジェスト機能
右) 通常文字列入力機能

 
 
横山:エンジニアとしての仕事で、いちばん時間がかかった箇所はどこですか?
 
南さん:プロジェクトを追加する編集画面ですね。部品がとても多く大変でした。とくにクレジット部分は、テストデータでテストを行っている時は気づきませんでしたが、長い文字列が入らないということに後から気付いて、テストデータだけではダメだなと思いましたね。
 
 
credit
 
 
横山:わかります、それ!私もテストをする時に同じようなバグを発見したことあります!開発する中で、南さんがエンジニアとして意識されたことはありますか?
 
南さん:経験のあるエンジニアの人がよく言うことなのですが、細かい部品に分けて開発するということは意識しました。部品自体はシンプルで修正がしやすいものにしておいて、それを組み合わせて全体を作っていく。また、共通化すべきものはしっかりと共通化する。そうすると大きくバグらないし変更もしやすいんですよ。それを意識したことにより、バグがとても少なかったんです。
 
横山:なるほど。そういった作りであれば、確かに変更がしやすいですよね。実際に作りながら、苦労したポイントなどありましたか?
 
南さん:判断を迷った部分はたくさんありました!プロジェクトのクレジット欄に「Wantedly」登録ユーザーを追加すると、そのユーザーに通知が行くんですけど「勝手に追加できて良いの?」というプライバシーの問題の議論があったり。今は一番シンプルな方向ということで、そのまま追加できるようにしています。
 
横山:ということは、「シンプルであること」が一番の決め手だったんですか?
 
南さん:そうですね、それ以前にまず決めないと前に進めないので、そのために決めたというのが一番ですね。
 
横山:たしかに社内で宿題にしてしまうと、どうしてもスピード感がおちますよね。次に持ち越さないというのはすごく大事。
 
DSC04824-5
 
 

プロジェクトをスケジュール通りに進めるための工夫点

横山:全体的にスムーズなプロジェクト進行するために工夫したことはありますか?
 
南さん:先ほども少しお話ししましたが、とにかく「ちゃんと決める」ことと、作って触ってみてからそれが良いか判断するという「トライ&エラー」がポイントですね。
 
横山:なるほど。その、「ちゃんと決める」ために具体的に行ったことはありますか?
 
南さん:例えば、サイトの簡単な動きでわからないことがあれば、チャットなどではなく直接話します。そして、そこで「直しておいて」で終わるとタスクの優先度が下がってしまうので、その場で一緒に動きをいじってどう直すのかを具体的に決めるようにしました。
 
横山:このオフィスを見てもそうですが、ウォンテッドリーさんの風通しの良い社風を感じますね。羨ましい〜!ほかにも、ウォンテッドリーカルチャーはありますか?
 
南さん:ウォンテッドリーには「文章で残す」という文化があります。コミュニケーションに「Github Issue」というツールを使っているのですが、そこに制作したサービスの機能について気付いたことなど、色んなことを書くんですよ。とにかく気付いたことは全部残し、かつオープンにして、各スタッフが1日に1回はチェックするようにしています。
 
横山:そうしたオープンマインドな風土の根底にはどんな思いがあるんでしょうか?
 
南さん:「どこかでタスクが止まるのは良くない」という共通認識があるんですよね。ですので、プロジェクトを前に進めるために良い方法があったら、それは全部やっていくようにしています。
 
 
 
スムーズな進行管理のためのポイントまとめ!
・2ヶ月半というタイトなスケジュールで、最初に手を付けたのは、タスクの洗い出しと優先度の設定
・タスク数に応じて管理ツールを選択。今回の場合は、数が多くなかったため、スプレッドシートを使用
・「検討します」で後回しではなく、その場で「決める」ことを意識
・そのアイデアが良いか悪いかは、やってみてから判断
 
 

リリース後の社内外の評判

横山:リリースしてみて、反応はいかがでしたか?
 
南さん:ユーザーさんから好意的な声が多くて嬉しかったですね。「Product Hunt という世界的に注目のプロダクトが一覧できるサイトで、Case がトップ3に掲載された事がありました。海外ユーザーからもかなり好意的な反応を貰えて嬉しかったですね。ですが、自分のプロフィールページについて、URLをID表示ではなく自分の名前にしたいなどの要望もいただいています。ユーザーさんからすると、「自分のポートフォリオ」でもありますよね。要望をいただいて、たしかにその通りだと思いましたので、改修を予定しています。
 
横山:社内での評価はいかがでしたか?
 
南さん:通常、プロジェクトというものは遅れがちですが、与えられたスケジュール通りにリリースできたということも含め、だいぶ評価してもらえたと感じています。今後は掲載されている作品やユーザーを増やして、もっと活発なサイトにしていきたいと思っています!
 
横山:本日は、本当にありがとうございました!
 
 
今回の取材でとても印象的だったのが「まず方向性を決めて、作ってみてから判断する」ということでした。密でスピーディーなコミュニケーションが、スケジュール通りのプロジェクト進行を可能にする。これはあらゆる業界で活きる教えではないかと思いました。私も実際に話をきいていて、アイスリーでも活かせる開発ノウハウをたくさんきくことができました。

そして、対応いただいた南さん!そしてWantedlyの社員の皆様、とても温かい雰囲気で迎えていただいて、あまりの居心地のよさにWantedlyさんのファンになって帰ってきました。
最近、採用も担当するようになった横山は、気になる!会いたい!といって、弊社に来てくれる方たちにこういう気持ちで帰ってもらえるようにしよう!と広報としても学ぶことがあった取材でした!
 
 

Izumi Yokoyama

広報/Designer

元銀座M百貨店の美容部員。 その後、小学生から憧れだったFBIと金田一を目指し、探偵会社へ。わかっていたけど名探偵にはなれないと気づき、突然Geek girlを目指し、テクノロジー+グローバル感ぷんぷんのi3DESIGNに入社。i3DESIGNではテスター・デザイナーを経験。まさかの広報任命により、右も左もわからぬまま、2015年11月から広報を兼任。

おすすめの記事

Recruit

アイスリーデザインでは

一緒に働くメンバーを募集しています

採用情報はこちら矢印