2017年6月15日

デザイン

【Sketch】Craft prototypeでSketchを使ってできるようになったこと

目次

  1. はじめに
  2. CRAFTとは
  3. CRAFTの新機能, CRAFT prototype
  4. CRAFT prototypeのメリット
  5. CRAFT prototypeの問題点
  6. 実際に触って見た
  7. まとめ

はじめに

本記事では2017年の5月にSketchのプラグイン、Craftの新機能として追加されたプロトタイプ機能、Craft Prototypeをご紹介します。
Craft Prototypeによるメリットと現時点で見つかっている問題点などもみなさんにお伝えできればとおもいます。
最後には簡単なデモをします。Craft Prototypeを使用しようか迷ってらっしゃる方の一参考となればと思います!

CRAFTとは

CraftとはSketchとPhotoshop用の無料プライグイン集です。
CRAFT

普段、ダミーで画像や文字などを入れることが多いデザイナーの方もいらっしゃるんではないでしょうか?
Craftの一機能として、写真や画像をリアルデータの形で出力してくれる、というものがあります。
例えば、画像は「Getty Images」「iStock」などから取ってきてくれます。

画像を入れる際には、カテゴリを選ぶことができるので、人物が良いのか、風景が良いのか、動物や自然が良いかなどを選択することができます。

文字を入れる際にも同じように人物名、タイトル、テキストなど文字の種類を選んだ後で、テクノロジー、飲食関係などの業界を選ぶと、様々なところからリアルなコンテンツを入れてくれます。

CRAFT

そのほかにも色々な人とリアルタイムでデザインやコメントができる機能や、Sketchで作成したものをプロトタイプツール、Invisionにアップロードできる機能、作成したコンテンツを複製する機能などがあります。

POINT!!

Craftのバージョン管理はCraft Managerという専用のツールで管理されていますので、アップデートされる方はそちらからすると安心かと思います。CraftもCraft Managerもcraftの公式サイトよりダウンロードができるので、興味がある方はダウンロードして見てください無料です。

CRAFT prototype

CRAFTの新機能, Craft prototype

今回ご紹介するのは、2017年5月に新しく追加されたCRAFTの追加機能、Craft prototypeです。
CRAFT prototype

今まで、プロトタイプを作成するためにはSketchではなく、別のツールを使わなければいけなかったのですが、
Craft Prototypeにより、Sketch内でもプロトタイプが作成できるようになりました。

1年ほど前からCraftのベータ版としてサインアップしていたユーザーはもともとテストとしてこちらの機能を使うことができましたが、
今回のアップデートによって、全てのユーザーが使用できるようになりました。

Craft prototypeのメリット

Sketchの中でプロトタイプを作成

Craft prototypeの最大のメリットは他のツールにSketchのデザインを出力(エクスポート)しなくてもプロトタイプを作成することができるということです。アプリケーションを複数立ち上げる必要がないので、サクサクデザインとプロトタイプをすることができます。

早くて安定している

また、Craft prototypeはSketchのプラグインではありますが、Sketchにもともとこういう機能が備わっていなんじゃないか?というくらいSketchとの相性が良いです。
相性が良いため、非常に早く、安定した環境でプロトタイプを作成することができます。

プロトタイプのリンクがデザイン全体で見渡せる

作成したリンクはそのアートボード/レイヤーにいる時だけでなく、デザイン全体として見渡しても見ることができます。
一目でリンクの全体像が知りたい方には便利です。
プロトタイピングモード

インターネットがなくてもプロトタイピングができる

figmainvisionでデザインされている方はインターネットがないとプロトタイピングができませんが、Sketch上でのプロトタイピングにはインターネットアクセスが必要ないので、非常に便利です。

Craft prototypeの問題点

問題点といえるものかはわかりませんが、個人的に少し不便だな、と思ったことをご紹介します。

InVisionアカウントがないとプロトタイプを確認することができない

私が初めてcraft prototypeを使用した時にはinvisionのアカウントがなかったので、せっかく作ったプロトタイプを確認することができず、少し不便に感じました。
アカウント自体は無料で作れるので、大きな問題ではないのですが、Sketchをいつも使っていてSketch Mirrorで簡単に作成したデザインを確認する、というフローに慣れているものとしては、確認するときだけinvisionに飛ばされることに少し違和感を覚えました。

ベータ版では使えた機能がない

公式で発表された今回のcraft prototypeではベータ版で使えた機能が大幅にカットされています。
例えば、テキストボックスを作り、実際にタイピングをする様子などをプロトタイプに入れ込むことができる機能、固定ヘッダーフッターを作成する機能、Google Map, YouTube, Vimeoなどの外部コンテンツを埋め込む機能など。

簡単に実機でプロトタイプを確認できない

ベータ版ではiPhoneやiPadなどにプロトタイプを表示させ、実際に実機で確認することもできましたが、公式のcraft prototypeではこちらは無くなってしまったようです。

実際に触って見た

すごく簡単にではありますが、プロトタイプを作り、確認する様子をご紹介いたします。
まずは、sketchを開きます。
sketch

今回サンプルとして使用するデザインを開きます。
今回は3ページ分用意しました。
sketch

キーボード上で”c”(おそらく”craft”の”c)を押すと、プロトタイピングモードに入ります。
プロトタイピングモード

遷移前の画面から遷移先の画面にクリックアンドドラッグします。
プロトタイピングモード

スクリーンとして遷移するかモーダルとして遷移するかを選び、その次に遷移するイベント(クリック、ホバーなど)を選びます。
そうするとリンクができました。
プロトタイピングモード

続いて、「始める」というボタンを押すと、次の「こんにちは!!!」という画面に遷移するようにします。
プロトタイピングモード

次に作成したプロトタイプを確認します。
craft上の”sync”ボタンを押すと、サインインしてくださいと言われます。
プロトタイピングモード
私みたいに、invisionアカウントをお持ちでない方はこちらからアカウントを作成されると良いと思います。
無料です。
プロトタイピングモード

アカウントを作成し、サイインインするとこのような画面が出てくるので、
“create prototype”というボタンと”sync to invision”というボタンも押します。
プロトタイピングモード
プロトタイピングモード

次に、invisionでログインをし、作成したプロジェクトの中に移動すると
先ほど作ったデザインが入っています。
プロトタイピングモード

まとめ

本記事をとしてCraftとその新機能、Craft Prototypeをご紹介しました。
先行で出ていたベータ版に比べると使える機能は減ってしまいましたが、「簡単なプロトタイプを作りたい!」という方であれば、
使えるものだと思うので、お時間ある際に試してみてはいかがでしょうか?

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP