前の話ですが、宮城県の松島に行ってきました。紅葉がきれいな季節でした。写真は朝日を浴びる福浦橋です。今回はMisocaの受発注機能がどのようにつくられているのか、という話をしたいと思います。受発注機能ではそれに加えて、取引先とのコミュニケーションもサポートしています。Misocaが掲げる「仕組みで世の中をシンプルにする」「事業者間の取引を最適化する」といったビジョン・ミッションを推進するための野心的な取り組みです。受発注機能のスクリーンショット例えば、取引先に見積書を送ったとします。その見積に対しての相談や発注操作を取引先がMisoca上でできるようになっています。最初に受注側のMisocaユーザーが見積を送るとこうなります。発注側が同じ画面を開くとこうなります。発注側のユーザーが発注手続きを完了すると、相手側に発注されたことが通知されます。他にもファイル共有もできますし、取引先とのコミュニケーションに必要な機能を順次拡張しています。ビジネス上で必要な取引先とのやり取りをMisoca上で完結できることを目指しています。受発注機能のビジュアルデザインはSketchでつくられています。本記事ではSketchを使ったアプリ開発の事例を紹介します。Codingという会社がつくっているデザインツールです。UIやロゴのデザインに特化した機能を揃えているのが特徴です。似たようなツールはいくつか出てきてますが、デザイナーであればデファクト・スタンダードと言ってもいいくらいの存在感があります(個人の感想)。Sketchの簡単な使い方についてはQiitaに個人的に記事を書いてるのでそちらを参照してください。さんによって導入されました。UIやアイコンのデザインがSketchでつくられていく様子を見てこれが未来だと思いました。アプリのデザインに最適化されたツールとしての使いやすさもあり、違和感なく使い始めることもできました。Webへの展開iOSアプリでの開発に使ってみてうまく導入できたので同じ要領で受発注機能の開発にも使っています。最近はデザイナーとエンジニア間の共通ツールとして定着してきています。冒頭のスクリーンショットは元は以下のようにデザインされました。その他、必要なUIを随時足していきました。開発中のが多くて公開できるものが少ないのですが、雰囲気はこんな感じです。Sketchを使うと何が嬉しいの?距離を測るUIデザインに最適化されているので、例えば要素間の距離を測ったり、CSSに落とし込むときの情報を取得したりというのに優れてます。要素を部品化する要素をシンボル化してデザインパーツとして共通化できたります。いうデザインパターンがあります。Designの親和性すごく高いと個人的に思ってます。Designの考え方とエンジニアの嗜好性も近いところにあると思うので興味があるエンジニアの方は覚えておくのをオススメします。postd.cc豊富なプラグイン豊富なプラグインがエコシステムとして存在するのがSketchの魅力の一つです。要素のサイズとかスペースのドキュメント化を超簡単にしてくれるMeasureプラグインという人気のプラグインがあります。他にも要素を複製したりとか、画像をFlichrやインターネットから適当に選んでハメてくれたり、画面間に線を引いたりとか色んなプラグインがあってデザイン作業をアシストしてくれます。Flintoというツールを使うとSketchのデータを取り込んでプロトタイピングできます。プロトタイピングツール戦国時代が始まってきた感じがあります。その他昨今のデザインツールについての話はこちらの記事を参考にしていただけるとよいと思います。当たり前ですが、.sketchファイルはSketchアプリを持っていないと開けません。Sketchは画像やPDFにエクスポートする機能を持っていますが、エクスポートしないと見れないのは注意が必要です。Cloudという機能があり、それを使うともっと簡単に共有できるようになる予定です。まとめSketchはデザイナーに人気のツールなのでデザイナーとエンジニアの協業では当たり前に使われているツールだと思います。今回の記事で、MisocaでもちゃんとUIデザインを考えながら開発してるんだよ、というのを知っていただけるとうれしいです。...2019-02-15続・Android版Misocaのマルチモジュール対応みなさんこんにちは、こまたつです。Ca...2017-10-30🍣キーキャップこんにちはmzpです。弥生は第23回Quesに協賛します。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。