ブログ

FiNCではデザイナーじゃない人もSketchを使っている!?│FiNCのクリエイティブ

初めまして、FiNCでデザイナーをやっているおかぴです。
最近、「1年前と顔つきが全然違うね!」とよく言われるのですが、整形ではありません。

今回は、主にFiNC社内でSketchがどのように使われているのかについて話したいと思います。
※Sketchとは、AppやWebに特化したUser Interfaceを作るツールです。
(Sketch公式サイト(English)→https://www.sketchapp.com/

 

 

 

Sketch 利用者にインタビューしてみました

 

FiNCにはそこら中にSketchを使う人、通称“Sketcher”がいます。
デザイナーを始め、ディレクターとエンジニアにも“Sketcher”がいますので、どのように活用しているかを紹介します。

おかぴ:まずはデザイナーに普段どう使っているか聞いてみます。 1人目の“Sketcher”はクリエイティブ部の川永さんです。

川永:川永です、まるって呼ばれてます。よろしくお願いします。

おかぴ:Sketchを業務で使用されていると思いますが、良いところを教えてください。

川永:ファイルが軽いのと、リンク切れがないのがいい。エンジニアも使えるから、共有できるところがサービスデザインにおいていいと思います。 スマートフォンの画面やWebの画面作りのスピードは前よりも上がっていると思います。 FiNCでは、UIをデザインしたものをエンジニアに渡して実装してもらうという分担になっているので、エンジニアがいかに作りやすくなるかというところも気をつけています。

おかぴ:実際、川永さんはCSSやJavascriptも書けるので、エンジニアでも作れるようにするという観点とデザイン的にこれがいいという観点を持っているので、バランスがいいですよね。

おかぴ:Sketchで作業がしやすいと感じる機能はありますか?

川永:書き出しが簡単だから、作ったものの共有をはやくできるのがいいと思います。例えば作った画面をドラッグ&ドロップだけでチャットに送信できたり、iconはスライスで選択してショートカットキーを打つだけで書き出せてしまう。あとはSymbol機能を最近活用してます、細かく作れば作るだけ後の人が作業しやすいし、クオリティも統一感があるデザインになります。

おかぴ:SymbolはSketchの中でもかなり効果的な機能ですよね、これで作業がすごい楽になったしエンジニアとのコミュニケーションも齟齬がなくなりました。

おかぴ:これからSketchを使ってどんなことをやってみたいですか?

川永:Pluginをうまく使えるようになりたいです。コードを書いてビジュアルができる「CSSketch」は使ってみようと思っています。今の作業フローだと「Sketchでビジュアル作る→Zeplinで渡す」なのですが意図しないものが出来上がってくるときがあります。だから「Sketchでビジュアル作る→CSS書き出して修正→Sketchで確認→CSS書き出して渡す」っていうことができたらデザイン作業の手間もあまりかからず、エンジニアも時間を取らず、デザインの再現性も上がるのでいいかなと思っています。

おかぴ:いいですね!
Pluginの可能性は大きいですよね、ほとんどの人が入れてると思いますが、“Auto Layout”とかは本当に便利です。Webデザインをやる人にとってResponsiveな(画面のサイズが変わることに対応している)デザインを作ることは必須ですが、このPCサイズだとどうなるというのがすぐ作れて、見せられるようになるのでエンジニアとも認識を合わせやすい。そういうコミュニケーションを円滑にできるのはプロダクトを作る際にとても重要ですよね。

川永:スピードとクオリティを上げるために、エンジニアとのコミュニケーションがしっかりと行えることはすごく重要だと思います。

おかぴ:川永さんはデザインワークだけではなくて、エンジニアワークのことも理解しているからこそより強く感じるのでしょうね。 これからも一緒にデザイン頑張っていきましょう!

 

 

 

おかぴ:2人目の“Sketcher”は、ディレクターの矢野さんです、自己紹介お願いします!

矢野:矢野太一です、26歳です、藤沢市に住んでいて土日はサーフィンしてます。今の業務は、FiNCアプリの検索体験をよくするところの仕様を作っていて、その上でSketchを使ったりしてます。

おかぴ:ディレクターでSketchを使われているということですが、どのような使い方をされてるんですか?

矢野:基本的にはモックアップを作成する際に使用していますね。操作が簡単なので自分のイメージを具現化することがはやく行えてます。

おかぴ:Sketchってデザインツールだと思うのですが、ディレクターでも簡単に使えますか?

矢野:今までってPhotoshopを使ってた人もいると思いますが、レイヤーっていう概念は何?とか、最初はそういうところがわからず困ると思います。使わない機能も多いです。Sketchは概念とかがわからなくても機能が簡単だから実作業で使えるレベルになるまでがはやいです。初日で30分くらいネットで調べてみて作れちゃいます。一般的なアイコンとかはテンプレートにあるからいつでも引っ張ってこれるし、デザイナーが作ったパーツをそのまま使ったりできるので、効率よくイメージしているものがモックアップにおこせます。

矢野:最近、アプリのPMやディレクターがSketchを使ってエンジニアやデザイナーとコミュニケーションをとっていることが多いと聞くので、デザイナーだけのツールというより、プロダクトに関わる人たちにとって必須のツールになっているのではないでしょうか?

おかぴ:なるほど。プロダクトのイメージをおこす、それを伝える。その効率の良さを求めた時の手段だったわけですね。

おかぴ:実際にそこからデザイナーがモックアップを元にデザインをしていくわけですが、その領域までやってみたいと思ったことはありますか?

矢野:それはできたらいいなと思います。ですが、FiNCにおいてはその役割を担う必要はないと思っています。FiNCには優秀なデザイナーがいるので、僕のやるべき範囲としてはプランニングとか効果測定に時間を使った方がいいかなと思っています。プロダクトを進める際に全体最適をするならば、自分が強いところに注力する方が良いと思っています。

おかぴ:生粋のディレクターですね! デザイナーとはまた違った使い方ですが、根の想いの部分は似ている気がしました。お話聞かせていただきありがとうございました。

 

 

 

おかぴ:3人目の“Sketcher”は、エンジニアの重村さんです。

重村:法人のエンジニアやってます、新卒2年目です。サーバーサイドがメインですが、フロントエンド周りもやります。

おかぴ:Sketchはどんな時に使ってますか?

重村:素材を書き出したり、プレゼン資料の綺麗な画像を作るために使ったり、デザイナーから渡されたデザインを見て、パーツの切り分け方とか、どういう思想で作っているのかをデザインのグループ構造から読み取れるので、CSSの設計の際に利用しています。

おかぴ:いいですね! 重村さんといえば社内で“Atomic design”というフロントエンドの設計手法をよく使われていると聞きますが、Sketchとの相性は結構いいですよね。

重村:はい。“Atomic design”はWeb UIのパーツを小さく切り出して、それを組み合わせてデザインを再現していきます。となると、デザイナーにパーツごとにデザインしてもらう必要がありますが、SketchのSymbol機能を使えば簡単にできてわかりやすい。あとはそのデザインをCSSのコンポーネントにするだけです。デザイナーと話して作ったパーツは、他の人も使いやすいようにパーツブックみたいなものを作って、プロダクト内で共有します。そうすると他のエンジニアも使い回せるようになるため、プロダクトの実装効率化にも繋がります。また、デザインに統一感が生まれるため、ユーザーに対して一貫性のあるデザインを提供できるようにもなります。一石二鳥ですね。

おかぴ:開発リソースには限りがあるので実装効率化はとても重要ですね。またクオリティも同時に高めるというのが素晴らしいです。エンジニアがデザインの一貫性を重視しているという事実はプロダクトのクオリティの底上げにつながっていると感じます。

 

 

 

まとめ

デザイナー/ディレクター/エンジニアが主にSketchを使っていて、自分の仕事に役立てる使い方と他の職種の業務領域を少しずつ担っているような使い方と両方あることがわかります。どの使い方でもSketchというデザインのためのツールが、職種の垣根を超えて使われていました。

Sketchがこれだけ社内で普及しているのは「Sketchの機能が豊富/簡単・使いやすい」ということももちろんありますが、FiNCの社員の「プロダクトをよくしたい」や「業務を効率化したい」という想いからでもあります。

その想いがあれば、Sketchでなくても、いいプロダクトにするための最適なツールを使い、想いをカタチにし、お客様に届けることができると思います。

プロダクトを本気で創りたい人、デザイン能力を身に付けたい人は是非FiNCに来てください!
世の中を変える、人生の成功をサポートするプロダクトを一緒に創りましょう!
(Sketchも学べます笑)


タグ: , , ,
Recruit 採用情報
FiNC Debelopers Blog
会社概要
お問い合わせ
facebook
youtube

カテゴリー