Misocaの新しい受発注機能がSketchでデザインされてる様子

こんにちは、こくぼ @ です。株式会社ファントムタイプ @ から来ました。 ちょっと前の話ですが、宮城県の松島に行ってきました。ちょうど紅葉がきれいな季節でした。

写真は朝日を浴びる福浦橋です。 f:id:yusuke-k:20161215183524j:plain

今回はMisocaの受発注機能がどのようにつくられているのか、という話をしたいと思います。

Misocaの受発注機能とは

皆さんMisocaと言えば「請求書を簡単に作れて取引先に送るところまでやってくれるサービス」というイメージが強いではないでしょうか? 受発注機能ではそれに加えて、取引先とのコミュニケーションもサポートしています。

f:id:yusuke-k:20161215162107p:plain

Misocaが掲げる「仕組みで世の中をシンプルにする」「事業者間の取引を最適化する」といったビジョン・ミッションを推進するための野心的な取り組みです。

受発注機能のスクリーンショット

例えば、取引先に見積書を送ったとします。 その見積に対しての相談や発注操作を取引先がMisoca上でできるようになっています。

見積を送る受注側の画面

f:id:yusuke-k:20161216101220p:plain

最初に受注側のMisocaユーザーが見積を送るとこうなります。

f:id:yusuke-k:20161215120530p:plain

見積をもらった発注側の画面

f:id:yusuke-k:20161216101231p:plain

発注側が同じ画面を開くとこうなります。

f:id:yusuke-k:20161215120542p:plain

発注側のユーザーが発注手続きを完了すると、相手側に発注されたことが通知されます。 他にもファイル共有もできますし、取引先とのコミュニケーションに必要な機能を順次拡張しています。

ビジネス上で必要な取引先とのやり取りをMisoca上で完結できることを目指しています。

受発注機能のビジュアルを支える技術

受発注機能のビジュアルデザインはSketchでつくられています。 本記事ではSketchを使ったアプリ開発の事例を紹介します。

Sketchについて

https://www.sketchapp.com/images/app-icon@2x.png

SketchとはオランダのBohemian Codingという会社がつくっているデザインツールです。 UIやロゴのデザインに特化した機能を揃えているのが特徴です。 似たようなツールはいくつか出てきてますが、デザイナーであればデファクト・スタンダードと言ってもいいくらいの存在感があります(個人の感想)。

Sketchの簡単な使い方についてはQiitaに個人的に記事を書いてるのでそちらを参照してください。 qiita.com

MisocaとSketch

はじまりはiOSアプリ

元々はMisocaのiOSアプリをつくるときにTHE GUILD さんによって導入されました。

f:id:yusuke-k:20161215190654p:plain

UIやアイコンのデザインがSketchでつくられていく様子を見てこれが未来だと思いました。 アプリのデザインに最適化されたツールとしての使いやすさもあり、違和感なく使い始めることもできました。

Webへの展開

iOSアプリでの開発に使ってみてうまく導入できたので同じ要領で受発注機能の開発にも使っています。 最近はデザイナーとエンジニア間の共通ツールとして定着してきています。

冒頭のスクリーンショットは元は以下のようにデザインされました。

f:id:yusuke-k:20161214184851p:plain

その他、必要なUIを随時足していきました。

f:id:yusuke-k:20161214184857p:plain

まだ開発中のが多くて公開できるものが少ないのですが、雰囲気はこんな感じです。

Sketchを使うと何が嬉しいの?

距離を測る

UIデザインに最適化されているので、例えば要素間の距離を測ったり、CSSに落とし込むときの情報を取得したりというのに優れてます。

f:id:yusuke-k:20161214165032p:plain

ガイドを引く

他にも、スマートガイドを使って両隅に余白をつくったり、

f:id:yusuke-k:20161215114226p:plain

要素を部品化する

要素をシンボル化してデザインパーツとして共通化できたります。

f:id:yusuke-k:20161215115218p:plain

デザイン界隈には Atomic Design というデザインパターンがあります。Sketchのシンボル化機能とAtomic Designの親和性すごく高いと個人的に思ってます。 そしてこのAtomic Designの考え方とエンジニアの嗜好性も近いところにあると思うので興味があるエンジニアの方は覚えておくのをオススメします。

postd.cc

豊富なプラグイン

豊富なプラグインがエコシステムとして存在するのがSketchの魅力の一つです。 例えば要素のサイズとかスペースのドキュメント化を超簡単にしてくれるMeasureプラグインという人気のプラグインがあります。

f:id:yusuke-k:20161216111221p:plain

他にも要素を複製したりとか、画像をFlichrやインターネットから適当に選んでハメてくれたり、画面間に線を引いたりとか色んなプラグインがあってデザイン作業をアシストしてくれます。

もっと進んだ使い方

例えばFlintoというツールを使うとSketchのデータを取り込んでプロトタイピングできます。 最近だとAdobe UXFacebookOrigami Studio などプロトタイピングツール戦国時代が始まってきた感じがあります。

その他昨今のデザインツールについての話はこちらの記事を参考にしていただけるとよいと思います。

www.yasuhisa.com

Sketchの注意点

当たり前ですが、.sketchファイルはSketchアプリを持っていないと開けません。 Sketchは画像やPDFにエクスポートする機能を持っていますが、エクスポートしないと見れないのは注意が必要です。

今はまだβ版ですが、Sketch Cloudという機能があり、それを使うともっと簡単に共有できるようになる予定です。

まとめ

Sketchはデザイナーに人気のツールなのでデザイナーとエンジニアの協業では当たり前に使われているツールだと思います。 今回の記事で、MisocaでもちゃんとUIデザインを考えながら開発してるんだよ、というのを知っていただけるとうれしいです。