社内座談会

2014年 下半期

HYGE Interface Inc.

毎年、年末恒例で行っている社内座談会。
1年間のプロジェクトや出来事を、上半期・下半期に分けざっくばらんに振り返ります。
  
参加メンバー:
美馬直輝(CEO), 蒲澤宏(COO), 蓮研児(CTO), 千田泰士(Director), 長尾貴洋(Director), 宗田明紘(Spokesman), 勝又伯史(Developer), 利根川友衣(Designer), 伊東(Assistant),本多美優(Assistant)※2014年当時

URL

DATE

2014

CLIENT

HYGE Interface Inc.

2014年 7月

TOYOTA DOGサークル

宗:先日リリースされた「TOYOTA DOGサークル」です。
美:このサイトはもともと3年くらい前からあったんだけど、コンテンツを追加していくうちになかなか情報の統制が利かない状態になってしまったらしく、これからに向けて今のうちにちゃんと整理しておきたいって話でした。
それにあたり、情報設計ができる人として僕を紹介してくれたという始まり方でしたね。
宗:この案件には僕も関わっていました。以前は100〜150ページくらいあったのですが、まず全体の構造を把握できるように全部のキャプチャーを撮って、それから美馬さんが情報を整理したワイヤーをデザイナーさんに渡すという流れで進めていましたよね。
美:そのワイヤーがね、全部で82ページ分あった。
千:82ページですか…。
宗:以前のサイトは、WEBというより紙媒体に近いものになっていたんです。文章の構成をしたり、イラストを描いたりしていた会社が紙面のデザインをメインでやっているところだったというのもあると思うんですけど。一枚のページの中の情報量も結構多かったりして。なので、いったんそのイラストをほとんどやめて、うちで情報設計をし直すということになって。元々メインで実装をしていた会社と一緒にリニューアルをするという形になりました。

01_dog

02_dog

美:その会社さんには、デザイナーのかおるさんと迫田くんがデザイン提案したモノを最終的に形にしてもらう、っていう流れでやってたけど、次第にその会社だけで回せる形に収まったので僕は途中から一歩引きました。
宗:サイト全体のデザインをする上でディレクションを進めて、そこだけで回せるようになったっていう事ですね。
美:そうだね。こうして方向性を示せたのは大きな意味があったと思います。迫田くんと一緒に運営マニュアルやデザインのガイドラインも作って渡せたし。
千:デザインのガイドラインってどんな事が載ってるんですか?
美:デザインの考え方の基礎的な部分とか、チェックするべき部分とか、デザインに関してUX的な視点で言語化してある。迫田くんはUX的な要素と表現の仕方の区別がしっかりしているから、うまく言語化されていて、僕らでも勉強になるガイドラインになってると思いますよ。

美:ガイドラインは2つあって、1つの中身は迫田くんに任せたんだけど、すごく細かいところまで書いてあるよね。ノウハウを言語化しておくって事を仕事としてできるのは有難いことです。
宗:ガイドライン作りは大変ですけど、長く続く案件となると担当が変わることもよくある事だと思いますし、すごく有意義なことですよね。
美:マニュアルの中でもSEOに関するところは宗田くんに書いてもらってたね。
宗:今年の約半分はSEOの仕事をしてたので、ここでも触れさせてもらいました。このサイトも以前は、タグが約150ページ分もあるのにあまり手が入っていなかったんですよね。こういった部分はあまり重要視されない傾向にあると感じて、改めてSEO対策ができるということは会社としても価値があると思いました。タグを少し追加するだけでも結果には違いが現れてきますしね。
美:「SEOが出来ます」って言えるようになったもんね。
宗:はい。ありがとうございます。

03_dog

01_sonet

2014年 9月

So-net モバイルLTE

美:これは、So-netの人から突然Facebookで連絡があったのが始まり。So-netもMVNOサービスを始めるっていう事が根本にあって、それにモモを使って新しいアプローチをしたいっていう話だったんだけど、最初に「かっこいいものが作りたい」って言われて。でも何をやるにしても、時間軸を持って深い流れの上でやらないと本当の意味で「かっこいい」ものにはならないと思うし、サービスそのものにちゃんと芯が通っているから意味があるんだよねっていう、そういうことを伝えるためにまず資料を作りました。「時間を想像する」ことが大事で、時間の先には未来があるってことだから「未来に繋げていく」という想像のもとで今を考えることが大事だよねって。その後は、「スマホセット2480」っていうサービス向けた話。これは「1.5GB制限の月間容量」っていう点で、ターゲットが直接リーチしづらいおじさんおばさんやこども世代になるから、そこへの仲介役が必要になってくるって所でいろんな話をしました。例えば千田が「親にスマホセットを薦めたい」って言ってたのがターゲットとして正しい、みたいな。

美:ここで作りたいガイドの案を千田に投げたら、自分の親が読むっていう想像で作ってくれたのは特徴的だったよね。
千:ここの画面、全部キャプチャを撮って作りました。
美:これってすごく重宝すると思うんだよね。いったいどれだけの人がこれを利用してくれるか分からないけど、うまくいったんじゃないかな。
宗:僕も親にスマホの使い方をよく聞かれるんですけど、これがあると便利ですね。
千:こういうのって意外と無いんだよね。自分で調べられないような人は結局よくわからなくて放置しちゃったり。
美:ガイドのページにアクセスするまでの説明が載った冊子も作ったしね。とりあえず来年からは、もともと言われてたキャラクターの話を動かしていく感じですね。

03_sonet

01_jj

2014年 9月

japan jikkan

宗:docomoのADPSプロジェクトの編集長がルーカスという人に変わって、「4D」が「japan jikkan」というものになり、第二号からは僕が一部担当することになって、いくつか実装をやりました。
美:ルーカスは日本の雑誌メディアを変えてきた人で有名だけど、もともと旅をしている人なんだよね。
宗:そうです。その旅の動画が流れたり、地図でおすすめのスポットを紹介していたり。
部分的にHTMLになっていて、WEBやGPSとも連動してます。ADPSはプログラミングを必要としないツールではありますが、組み込むこと自体は可能なのでHTMLとCSSを入れています。Androidに関しても僕が実装してアニメーションさせました。
千:評価が高い。Newsstandのカテゴリで2週トップだね。
蒲:すごいじゃん。4Dの時から考えるとすごい躍進だね。
宗:そうなんですよ。それもルーカスの宣伝力のおかげみたいで、docomo側もとても感謝してました。これからもどんどんリリースされていくと思いますので、お楽しみに。

2014年 9月

UNITED ARROWS 2014 Web Catalogs

蒲:今年のUNITED ARROWS(以下「UA」)のWEBカタログは「Styling Edition Thirteen」「THREE」「BOOKLET」「Styling Edition Fourteen」「HOLIDAY」の5つですね。
千:ひとつだけサムネイルおかしくないですか?
美:どれどれ?おじさんのこと?
蒲:違うよ。「おっさん」だよ。
宗:これが何なのか知りたいですね。
蒲:メールで「おっさん」って検索するとTGB design.の市古さんとのやりとりがいっぱい出てくる。ほら、「1ページ目のおっさんのイラストをお送りします。」って。笑
千:これはゆるいですね。
美:全くコンセプトが読めない表紙だね。
宗:ウェブカタログは今まで少しずつ改修がありましたが、今年は無いんですか?
蒲:そうだね。いろいろ見えないところでブラッシュアップはしてるけど、大きな見た目の変更はないね。今年は「おっさん」だね。

02_ua

02_uabar

2014年 12月

UA Bar

蒲:あと、今年はカタログ以外に「UA Bar」もやったね。
宗:これは、UNITED ARROWSのやってるバーのWEBサイト制作ですね。
蒲:そう。ちなみにここは、フグレンのプロデュースだからコーヒーが美味しいのに、打ち合わせで店舗に行く前すでにコーヒーをいっぱい飲んでしまっていて、一人だけお茶を飲んだ。
美:たまにそういう先読みできない感じの失敗するよね。
蒲:大失敗っすよ。
長:UA Barはどこにあるんでしたっけ。
蒲:原宿のUA本店の中だよ。もともと別の飲食店だったのがリニューアルした。
長:なるほど。タテ長にスクロールして見ていくサイトのつくりですね。
蒲:載る内容とか目的とか規模から考えていったら、自然な流れでここにたどり着いたんだよね。基本は市古さんのデザインです。
勝:あとは、はWebFontを使ったりしてます。

2014年 12月

nano・universe CX Project

蒲:今年の一番大きなプロジェクトです。
美:一年半…。ハイジで、スタートからリリースまでが一番長いプロジェクトになるね。
本:全員が関わったプロジェクトは初になるんですか?
美:そうだね。初めて。
蒲:じゃあみんながどういう役割だったのか順番に話そう。僕は最後に締めるから。
宗:僕はテストぐらいしか関わっていないので、本多ちゃんからまとめて話していいよ。
本:はい。皆さんにもあとから作業に加わっていただきましたが、私は2月頃からずっとテストをしていました。
長尾さんからもらったテスト仕様書に沿って動作確認をするという流れで、「メールアドレスを入力しないでログインボタンを押す」とか、「購入履歴が100件の状態で履歴を見る」とか、CRMシステムも確認しながらひたすらいろんな状況を検証していく作業。仕様書に書いてないような複雑な状況も想定したり、JavaScriptを切ってみたり。

01_nanocx

02_nanocx

宗:僕は全然テストに向いてなくて、本多ちゃんはどういうことを考えながらテストしてるんだろうって思ってた。
本:宗田さんのテスト報告書、「多分間違ってる」とか書いてありましたもんね。笑
全:笑
利:私は本当にテストが辛かったです。
蒲:テスターは素養が関係するね。
宗:あと、このテスト仕様書自体を作る長尾さんも、全部の仕様を分かってないといけないってことですよね。
長:そうですね。
美:他の仕事ではいかにテストを最小限でやれるかってやり方をしてきていたから、ここまで社内で回したのは本当にすごいと思う。
蒲:はくしは今回、どう関わってた?
勝:僕が関わったのは、初期のメンバーズサイト(クルーメンバーズサイト)とECサイト(オンラインショップ)のフロント実装ですね。はじめさん(小林 哉さん)がメインでやっていて、途中である程度の枠組みが出来てから僕が横展開していった流れでした。
長:ECサイトのページ数は全部で60以上で、はじめさんの段階では30ページくらいだから、ページ数が倍増したってことだよね。

蒲:利根川友衣っていうユーザーの画面サンプルいっぱい作ってたよね。この案件に関わってる全員が利根川の名前知ってるんだろうな。しかもプロフィール写真がこれ。
全:笑
千:「利根川です」って言ったら、みんなすごい勢いで振り向きそうですね。
長:じゃあ次は利根川さんが話す番ですね。
利:はい。私は、最初に迫田さんが作った初期のメンバーズサイト(クルーメンバーズサイト)のデザインからPSDに落としこんでいったんですが、思い返すと初めての本当の意味での横展開という作業だったなと思います。
美:横展開力が付いたね。
利:そうですね。今思うと、最初の頃は横展開を全然理解できていなかったと思います。でもやっていくうちにだんだんとやり方が分かってきて。締め切りの中での細かい作業が多くて大変だと思っていたんですけど、nanoに関わる事自体が自分の中で結構楽しくてやっていた部分があって、リリース日は感極まってしまいました。デザインを一からしたわけではないですけど、スタッフ向けのサイト(顧客台帳)もメンバーズ(クルーメンバーズサイト)もECサイト(オンラインショップ)もアプリも大体関わっているので、感慨深いですね。
宗:横展開をするのって、ベースのデザインを作ってくれた人だったらこうするだろうって考えるってこと?

03_nanocx

04_nanocx

利:いや、そういう事よりもデザインの共通ルールみたいなものをどう反映させるかってことで、デザイナーさんの癖を読むというのは別の話ですね。まあ、元のデザイナーさんによってAIかPSDかの違いは結構あるので、そこは少し手がかかりますが…。
美:とにかく、こういう風に社内で横展開していけたのもハイジならではのやり方なのかもしれないね。
宗:それって、デザイナーさんとしては嬉しいことなんですよね?
美:人によると思うけど、ウェブの作業全体のボリューム感とかを工程を知ってるからできると思うんだよね。グラフィックデザイナーとかって細かい部分にこだわりが強かったりするから、ウェブ制作全体の流れの中での動き方としては難しい部分もあると思う。そこを理解してもらうために、事前にいろんなコミュニケーションも必要になってくるし。
蒲:今思い出したけど、前に他の案件で横展開を依頼された時に断ったのって、利根川にそれができると思ってなかったからなんだよね。でも今だったら絶対受けてるって考えると、すごい成長したと思う。
利:ありがとうございます。
宗:蓮さんは何してたんですか?
蓮:全部。
全:笑

宗:それは「私のどこが好き?」って聞かれて「全部だよ」って言うのと同じくらい乱暴です。
美:宗田くんの切り返しすごいなあ。
蒲:あのね、宗田くん。幼稚園児に「今日何した?」って聞くと「わかんない」って返事するの。
でも「今日お弁当食べた?」って聞くと「うん、食べたよ」って言うの。質問が具体的じゃないと答えが選べないから、そういう感じで質問してあげて。「何したの?」じゃなくて「実装したの?」って聞いたら「した」って言うから。
蓮:そういう感じがいい。
全:笑
蒲:じゃあ蓮くんは、どれと、どれと、どれの実装をしたの?
蒲:メンバーズサイト?スタッフ向けのサイト?
蓮:スタッフ向けのサイト。

_cx_cm

_cx_staff

蒲:ECサイトは?
蓮:ECサイトは連携の部分だけです。
蒲:わかった。実際のものを見ると解りやすいんですが、メンバーズサイトでログインしてると、ECサイトにアクセスした時に自動でこっちもログイン状態になるんですよ。これは全然別のサーバー同士だから、サーバー間のやりとりがあって、それには「API」っていうすご~く複雑なしくみを使っているんだけど、そのすご~いやつを実装してるのが蓮くんなんです!
長:笑
蓮:すごくやりやすい。
蒲:蓮くんは他に何を実装したの?
蓮:アプリ。
蒲:アプリのAPIってこと?えっ、アプリにもAPIがあるの?それってさっきのすごいやつだ。それを蓮くんが実装しているの!?
全:笑

蒲:…っていう事は、もしかして蓮くんは4つも実装してるの?
蓮:インフラも入れていい?(嬉)
蒲:「インフラ」って何だっけ?
蓮:「インフラ」っていうのは、「サーバー」を構成するための、根本の部分だよ。
蒲:じゃあ蓮くんは、「サーバー」を作ってるんだ!超すごくない?なるほどね!
伊:メモします!!
全:爆笑
蒲:初心者にもわかりやすい説明になった。
美:蓮くんのスキルについては、社内で一番シェアできてない部分だもんね。だから、蓮くんの持ってるものをもっと見えるようにしないとやばいと思う。
蒲:この規模感に対して、蓮くんが一人で背負ってる部分がね。今後はインフラ出来る人がいないといけないかもしれない。
美:次は千田かな。

_cx_ec_

_cx_app

千:僕からはアプリについて簡単に説明すると、店舗へのチェックインや購入履歴の機能をベースに、既にメンバーズサイトにある機能を洗い出してから、アプリとして新規に開発すべきことをまとめて提案しました。
チェックインにはiBeaconっていうプラットフォームを採用しています。越智さんの方にも専用の機器を店舗に設置すれば自動的にスマホにメッセージが送れたり、情報のやりとりが出来ますってことを話しました。この辺りの機能をUIに落とし込むにあたって、いろんなサイトの調査をして似た機能のUIを集めていました。それで決まってきたイメージを元にワイヤーを作ってます。
宗:カードがにゅるっと出てくるエフェクトは珍しいですよね。
美:僕はそういった部分に、面倒が増えないように実装の負荷が少ないモノをあえて選ぶんだけど、千田がそれをやるって言ってちゃんとコミュニケーション取って、支障が無いように持っていったのはすごいと思う。

蒲:まあこれはもともと参考にしたアプリがあって、そのAPIが使えるって情報があったから採用した部分はあったしね。
美:アプリに関して、利根川はなにかやったの?
利:利用規約などの簡単なページやアプリストアのサムネイルは作りましたが、基本的には書き出しの作業です。iPhoneとAndroid用にaiデータ微調整をしたり、書き出す範囲やサイズを決めて書き出すというのを本多ちゃんと一緒にやりました。
本:そうですね。今までもいくつか書き出し作業はしてきましたが、今回は会議にも参加させてもらって、実際の動きやレイヤー構造などを聞きながら対応しました。画像の書き出しというだけでも、実装に関する知識や機能を把握することはすごく大事だと実感しました。
利:どう書き出しをしたら実装しやすいかを我々も考えながら、千田さんと相談して進めましたね。
千:アプリもまだまだこれから続けていくので、ちゃんとアップデートしていけるように考えたいと思います。

08_nanocx

12_nanocx

美:じゃあ次。僕は何を喋ればいいですかね。
蒲:美馬は今回どんなことをやってましたか?
美:今回は蒲澤くんにプロデュースを任せて、僕は初めてクリエイティブディレクターって立ち位置でクオリティ的に気になる所を調整したり、一部のデザインをやってました。最初は人員配置を考えたり、プロジェクト全体の流れの提案はやったけど、実際動き始めてからはみんなの状況を見ながらフォローアップをしてましたね。
蒲:そういえば、ECサイトのデザインコンセプトも考えてたよね。
美:そうですね。
今までのnanoのサイトのような形で建物モチーフを使うとレイアウトの自由度が落ちるので、それは世界観として一番下のレイヤーに残しつつ、情報のレイヤーとは切り分けました。世界観の載るレイヤーと、情報が載るレイヤーと、操作するレイヤーと、リアルタイムレイヤーっていう、ページ上の四層構造を基本的な考え方にしていて、今までと違って情報や操作する部分は浮いたようになってるんです。

美:「The Oak Floor」の時には毛嫌いしてるって話をしたけど、こういう演出には合うと思って若干背景をパララックスで動かしてます。UXの面で全体的に俯瞰しながらやっていたけど、越智さんも同じレベルで考えられるから、うまく相乗効果になってアウトプットの面はすごくいい形になったと思います。それに売上が上がってるっていうのが何よりも嬉しいね。ちゃんと数値になって出てきてるもんね。去年比で五倍近くかな。
伊:ECサイトの服の売上だけでですか?
蒲:そう。
伊:すごい。みんな試着しなくても買うものなんですね。
蒲:買っちゃうよ。「FitYou」があれば、自分のサイズに合った服が選べるもん。 例えば、めちゃくちゃ手足が長いこの僕のサイズで、こう、こう、こうやって、保存するでしょ?それから、この条件でジャケットを検索すると、この僕にピッタリなサイズが…

10_nanocx

11_nanocx___

蒲:出てこない!!
全:爆笑
美:そんなサイズ出てくるわけないでしょ。笑

美:そうそう、映像を作りました。じゃーん。宇宙に飛ばしました。
美:リニューアルで追加される機能をちゃんと全部言いたいっていう話になったんだけど、尺を持たせるためにもバックで映像を流しながら一つ一つ説明していく方向にして、僕がやりたかった風船宇宙を提案しました。打ち上げに関してはみんなにいろいろ手伝ってもらったんだけど、この映像の中心に使われている実物のメンバーズカード自体が無くなる話になってしまったんで、映像自体もお蔵入りしちゃうことになるかもしれなかったんだけど、一応ティザーっていう形で世に出ました。
蒲:こっちは普通にやってるリニューアルのCM。最近テレビでめっちゃ見るけど、それってすごいことだよね。なんだかんだ、うちの会社は大きい仕事の時はCMやることあるもんね。
美:テレビから流れてくると「nanoのCMだ!」ってなるよね。

13_nanocx

美:はい次、長尾!
長:はい。僕も過去にnanoの案件に関わって来ているのでコミュニケーションはしやすかったのですが、なんせ関係者が多かったので調整はすごく大変でした。
美:どこか、こだわりポイントとかはある?
長:こだわりは随所にありますが、正直もっとこだわりたい部分もたくさんあります。
どこまで細部にこだわってクオリティを上げられるかっていうのも、やっぱり連携とかスケジュールの詰めとか、そういうものの上に成り立つと思うので、悔しい所ではありますね。
蒲:こうやって操作してると、さりげなくいろんな所が配慮されてると思うけどね。
美:すごい!メンバーの性別を変えたら背景が変わった!うわあ!リンク色まで変わった!すごい!

蒲:すごいこだわりじゃん。お気に入り店舗とか登録した覚え無いのに、勝手にこの間行った店舗になってる!
美:すごい!笑 ちゃんとこだわってるよ。
長:細かく見ていくといろんな所にこだわりがありすぎて、挙げきれないです。
美:長尾くんは何に一番感謝してる?
長:関わっている皆さんがお互いに配慮してくれていたし、コントローラブルな部分が多かったから、こうして振り返ってみると、とてもやりやすかったんだということに感謝しています。
宗:じゃあそろそろ、蒲澤さんの締めに参りましょう。
蒲:この案件に関してはみんながそれぞれのパワーを発揮していたと思ってて。修正の度に何枚もワイヤーを書いて、仕様書も書いて、スケジュールとか進行管理も見て進めてた長尾はすごいと思う。そのデザインを利根川がやって、それを蓮くんが実装して、それをみんながテストして…。

45_nanocx

蒲:それに初めて物流とかCRMっていう技術的な所も絡んでいて、個人的にも会社的にも、うちの培ってきた経験があったからこそ出来た案件じゃないかって思う。あんなにさくっとAPIの仕様考えられる人とかあんまいないよ。
技術的な部分はこれから本当に必須になっていくんだろうって実感した。あとは越智さんのすごさだよね。なんだかんだ一番最初の発想は全部越智さんから出てきていて、越智さん自身そこに対しての理解も調整力もあるし、自由にやらせてくれる部分も越智さんのもとに成り立ってると思う。越智さんがいたからこそ、俺たちもnanoにとって、越智さんたちにとって一番いい形を常にブレずに考えてこれたのかなって思ってます。あとは、俺の調整力がすごかったなっていう話ですね。
美:そうだね。越智さんと蒲澤くん最高!ってことだね。

2014年 12月

まとめ

宗:一年のまとめもお願いします。
美:今年は結局、社員旅行に行けなかったね。夏休みだって、夏に取れてる人なんてほぼいなかったもんね。来年、必要な人材ははっきりしてるから、そこを増やしていかないとね。
蒲:そうですね。
美:座談会の記事をもっと早く公開しよう。仕事はちゃんとできるようになってきたけど、来年はそういう内部的な部分も会社としてしっかりしていくっていう所が大事だと思います。
蒲:ワークライフバランスが崩れないようにそれぞれの仕事の仕方を考えながら、規模に合った仕事と、仕事に合った規模とを考慮した上で、会社としてしっかりしていきたいですね。
宗:それでは、今年もお疲れ様でした!
全:(拍手)

2014before

CREDIT

HYGE Interface Inc.

TAG

TOP

>

PROJECTS

>

社内座談会 2014年下半期