新旧デザイナーたちの話

第1話
ペパボデザイナーの現場
第2話
ウェブデザイン道

新旧デザイナーたちの話

第1話  ペパボデザイナーの現場
第2話  ウェブデザイン道

今回の登場人物

星 隼人
取締役兼EC事業部部長。WEBデザイナーとして入社後、弁当男子として多分一世を風靡したこともある。最近はカラーミーショップカラメルなどのEC事業の責任者として、Excel のセルとセルを結合したり解除したりする日々を送る。

佐藤 咲(しょうちゃん)
新卒一期生。インターネットをこよなく愛するスーパークリエイティブなヘテムルメインデザイナー。先日のお産合宿では「三重殺」に新メンバーとして加わり、2日で250個以上のデザインを生み出す。似ていると言われる芸能人は神木隆之介。

福嶋 瞭 (ぷっちょむ)
新卒三期生。カラーミーショップ所属の大型新人系デザイナー。得意なレスポンシブデザインを使ったネットショップテンプレートをリリースし、人気に。入社直後に自宅付近を爆心地とし世田谷区一帯を壊滅に追い込んだ後、現在の髪型に至る。

単発でデザインを請け負うウェブデザイナーと、長期にわたってサービス運営に携わるウェブデザイナーは一体何が違うのか?そしてその魅力とは?ウェブデザイナー出身の取締役 星と、現役ウェブデザイナー2人が語る、サービス運営にまつわるデザインのお話を、全2回でお送りします。
ほっしゃん
今日はデザイナー3人が集まってペパボのデザイナーの視点とか、仕事について話すっていう場を設けてもらいました。俺はもう現役を離れて随分経つけど・・・。じゃあ、まずは2人の今の仕事について、聞かせてもらおうかな。
しょうちゃん
私はhetemlというホスティングサービスのデザイナーとして働いています。
ぷっちょむ
僕はショッピングカートシステムを提供しているカラーミーショップのデザイナーをしています。
しょうちゃんもぷっちょむも、新卒入社組のデザイナーだよね。しょうちゃんは2年目ぐらいだっけ?
しょうちゃん
いや、もう4年目になりますね。
そっか、新卒1期生なんだもんね、そういえば何だか身長も伸びたね。
しょうちゃん
そうですね、もしかして1cmぐらいは……(笑) 1年目に研修やOJTを経て、11月に配属されたのがhetemlで、それからずっとデザインを担当してます。もう2年9ヶ月になりますね。
実は俺がhetemlの初代デザイナーなんだよね。しょうちゃんは何代目なんだろう?
しょうちゃん
3代目ですね。hetemlに就いて最初の1年ぐらいはデザイナーが私1人だったんですけど、新卒2期生が入ってきてから2人体制です。 hetemlデザイナーとしての最初の仕事はheteml担当のエンジニア採用サイトの制作でした。水牛がいるやつ……。
え?水牛?初仕事が水牛だったの?
ぷっちょむ
カバ(hetemlのマスコット)じゃなくて?
しょうちゃん
確かに水牛でした。水牛は当時の担当ディレクターのこだわりで……。
それで実際に応募は?水牛効果はあったの?
しょうちゃん
たしか一人が水牛入社だったんじゃないかと。
水牛採用サイト
水牛デザインheteml担当エンジニア採用サイト

水牛入社ちゃんといるんだ(笑)。
しょうちゃんがデザイナーになって、平面だったhetemlのカバが立体化したんだよね。3代目になって3Dになった!って思ったよ。あれはどうして3Dにしたの?
しょうちゃん
それまでの平面のカバは右向くか左向くかしかなくて、この角度のカバが欲しいんだけどーっていう時に、上手く描けなかったんですよね。だからとりあえず3Dにしてみようと。
3Dカバ

なるほど、そんなバックグラウンドが(笑)。
2年9ヶ月携わってきて、一番大変だったなーっていう仕事は何だった?
しょうちゃん
トップページのリニューアルですかね。 私が携わってから2回リニューアルしてるんですけど、2012年に1度、それから2014年1月に。
二度目の今のデザインは思い切り変えたね。宇宙がテーマになってる。
しょうちゃん
そうですね、自由にやっていいよってことだったので自由にしました。 でもそろそろリニューアルしたいですね。リリースして1ヶ月経ったらもうリニューアルしたくなっちゃってました。作るのに時間をかけてると、自分のデザインに自信がなくなってきちゃって……。
ぷっちょむ
ああー、ある。あるある。作ってる途中で全く違うものにしたくなる。
デザイナーって「ここ!」っていう期限を無理矢理決めないと、際限なくずーっといじり続けるよね。満足することがなくて、終わりがない。だから、もう最初にここまで!っていうのを決めちゃわないと、ずっと手直しし続けちゃう。
ぷっちょむ
手をかければかけるほど、今よりもっと良くできると思っちゃうんですよね。
水牛などを経て、最近の仕事としては、何をしてるの?
しょうちゃん
最近は、がっつりとした開発なしに申込数と契約率のアップを図る、ってことをやってました。デザイナー主体でデザイン部分を改善することでこの2つ数値を底上げしようと。たとえば契約率だと、新規申込後の無料お試し期間中に、何もしないで辞めてしまう人がいるんですね。その人たちに何とかサービスを触ってもらおうということで、お試し期間中の人のコンパネにだけ表示される特別なメニューを置いてみました。WordPressをインストールしたかったら簡単インストールがあるよ、とか、独自ドメインとはこういうものですよ、っていう感じの、簡単な3つのメニューを表示しました。 結果的にはその施策で少しだけ契約率が上がりました。データを元に、デザイナーの視点を交えて施策を考えて、試しにやってみて、っていうのを続けていくんです。
じゃあ、しょうちゃんは、普段からサービスの数値部分をかなり見てるのかな?
しょうちゃん
そうですね、最近はサービス全体で、職種に関係なく数値を見てサービスを改善していこう、っていう動きになってます。この数値が落ち込んでいるのは何が問題になっているからなのか、とかいうことをアナリティクスを見たり顧客管理システムの月別の契約率を見たり、どの職種の人も細かく数値を追ってますよ。
コーディングとか、IllustratorやPhotoshopを使ったデザインなんかが今までのウェブデザイナーの主な仕事だったんだけど、もう違うんだね。この数値が弱いなっていうのを自分で発見して改善案をどんどん考えていく、そういう姿勢が重要になってきているんですね。
しょうちゃん&ぷっちょむ

デザイナーは自分自身を制御していかないといけない

じゃあぷっちょむの仕事ぶりも聴いてみようかな。ぷっちょむはカラーミーショップに携わってからはまだ1年経ってないのかな?
ぷっちょむ
経ってないですね。入社は1年半前なんですけど、入社直後の新人研修の後にデザイナー向けの特別な研修があったので、サービスに配属になったのは入社後半年以上経ってからです。
デザイナー研修って具体的にはどんなことやるの?
ぷっちょむ
最初はminneのサービスについて、minneを担当している先輩デザイナーの元で修行しました。まずはminneのブランディングをしっかりと理解するところからでした。あとは文字の扱い方についての勉強。minneってトップページに作品のスライドショーがあって、作品の写真に文字をふわっと良い感じに乗せてるんです。全部それで統一して、minneの雰囲気を作ってるんですよね。 でもその乗せ方がすごく難しいんです、タイポグラフィって奥が深くて。ほんのちょっとだけ斜めにするとか、文字のサイズを1文字ごとに変えるとか。そうすると躍動感とか写真とのバランスとかが出てくるんです。
フォントの選び方も大切になってきそうだね。
ぷっちょむ
minneの場合、比較的明朝系をよく使ってましたね、日本語だと。小物なんかの写真だと、明朝で文字を置くほうがふんわりするっていうか、味が出るっていうか。感覚的に明朝のほうがゴシックよりもしっくりくるんですよね。このOJTは本当に勉強になりました。
minneでの研修は、コーディングとかではなくて写真と文字の組み合わせ方を学ぶって感じだったんだ?DTPっていうほどでもないけど、そういうのに近いのかな?タイポグラフィの組み方ね。
ぷっちょむ
はい、かなり勉強になりました、日本語を組むのが苦手だったんで。バナー制作とかページのレイアウト組みにも役立ってますね。
minneサイト

minne以外のサービスでも研修したんだよね?
ぷっちょむ
はい。JUGEMでの研修がかなり面白くて、クリエイティブチームのデザイナーの仕事ぶりを傍で見させていただいて、かなり勉強になりました。クリエイティブチームデザイナーは本当に徹底して数字を見ていらして、社内のデザイナーの中でもあんなに数字を意識してる人いないだろうなと思います。常にブラウザのタブにアナリティクスが3つくらい開いてるんですよね。新卒で入社してウェブデザイナーとして会社で働くっていうこと自体よく分かってなかってなかったですし、数字なんて意識できてなかったから、そこで学びました。デザイナーとしてどういう風に数字を見て、どういうふうに施策を打っていくか、っていう流れを学びましたね。 研修ではJUGEMを初めて見た人用のサービス紹介ページを改修したんですけど、従来ページの数字を見ながら進めました。どこがよくないのか、うまく遷移してもらえていない部分はどこなのかを分析して、どうすればボタンを押して先のページを見てもらえるか試行錯誤した結果、数字が伸びて嬉しかったですね。
研修中から実践的なデザイン業務に携わるんだね。社会人になる前はデザイナーってどういう仕事をするのか、イメージできてた?
ぷっちょむ
制作会社でバイトしてたことがあったんで、漠然と同じような感じかなってイメージしてたんですけど、入社してからの仕事は想像と違いましたね。
クライアントワークと、ウェブサービス運営はかなり違うからね。
ぷっちょむ
そうですね、ウェブサービス運営に携わるデザイナーは、自分自身を制御していかないといけない部分が多いです。
しょうちゃん
自分でちゃんと咀嚼して理解してないとうまく出来なかったりするから納得するまでスタッフ同士で話をするし、言われたものをそのまま作るんじゃなくて自分なりの考えを加えて作りあげていく必要があるから、やっぱりとことん考えないといけないんですよね。
誰のためにデザインするか、それぞれ相手が違うって言うのが一番大きいよね。受注制作だとユーザーの前にまずクライアントに見せるわけだからクライアントの為に作ってるって側面もある。サービス運営をしているデザイナーは直接ユーザーや見込み客に届けるわけだから、そもそもスタンスが違うし、納品して終わりじゃないっていうのが一番大きいかな。
ぷっちょむ
そうですね、運用が一番大切。デザイナーも自分の視点から、もっとこうしたら良くなる、っていう提案をどんどんしていかないといけない。
職種に関係なくデザイナーの2人が数字を見てたり、ここを改善していこうって積極的に動いてる流れはとてもいいなあ。この調子でどんどん動いていってほしいな。 あとは、会社のみんなが部署や職種をまたいでデザインに対して色々注文つけてくれたり、こうしたらいいんじゃないのって話をしにきてくれるのも、デザイナーにとってはすごくありがたいことだよね。出したあとに「これ微妙じゃない?」とかTwitterとかで言われたくないもん。 もうデザイナー同士に限らず、自分が携わってないサービスにも、どんどん口出ししていっちゃえばいいよね。GitHubのissueに直接書き込んだりっていうのでもいいから、みんなにどんどん口を出してほしい。

ペパボデザイナーの制作環境

ちょっとツールの話を聞いてもいいかな。今のデザイナーはどういうツールで仕事してるのか個人的に興味ある。PCは2人ともMac使ってるの?
ぷっちょむ
ぼくMacです。
しょうちゃん
私はWindowsです。
入社する時にどっちを使うか自分で選べるんだよね?
しょうちゃん
そうです。Windowsを選びました。私はSSH使ってるんでTera Termで繋げてそのままVimで編集してます。Gitを使ってバージョン管理してるので、プルリク送って、レビューしてもらって、OKが出たら、マージしてデプロイって流れですね。
カタカナ多っ!いや、いいと思うよ。しょうちゃんはペパボデザイナーのなかでもかなり早い段階から、GitHubとかGit使ってバージョン管理してたよね。俺の時代のウェブデザイナーとは全然やり方が変わってきてるな。ある意味敷居が高そうなんだけど、普通にFTPでアップするのと何が違うんだろう。
しょうちゃん
やっぱりスピードが違いますね。Gitでやったほうが間違いが起こりにくいですし。何か間違えてもすぐやりなおしがきくんですよね。FTPだと上書きしちゃうと簡単には戻せないじゃないですか。そういう危険から、自分を守れるというか……。
自分を守るためにGit使ってるの?(笑)
しょうちゃん
違いますー!サービスにとってのリスクヘッジですよ!あとはエンジニアと同じツールを使うことによってエンジニアと話がしやすいっていう効果がありましたね、同じサービスを同じツールを使って作ってると話が早いというか。
でもVimを使ってるデザイナーってあんまり聞かないよね?エンジニアがVim使ってHTMLまでいじっちゃいますって人はいるけど。
しょうちゃん
Vim使ってるデザイナー確かにあんまり聞かないですね、でもhetemlデザイナーは2人ともVimです。
ぷっちょむは?Macではどういう環境でやってるの?
ぷっちょむ
僕はSublime Text使ってますね。ローカルのファイルをSublime Textで編集して、あとはプルリク出して、他のデザイナーとエンジニアにレビューしてもらってOKだったらマージっていう感じです。この流れはしょうちゃんと一緒ですね。
やっぱり今のデザイナーの制作環境って、少し前と全然違うんだね。


~第2話へつづく~
  • 1
  • 2