ダミー作成に超便利!Sketch 3に機能を追加するInVision Craftを試してみた。

コリスさんでも紹介されていましたが、InVisionから「Craft」というリアルなダミーを挿入するSketch 3とPhotoshopで使える拡張機能がリリースされました。これまでダミー生成といえばContent Generatorプラグインでしたが、それに匹敵する必須ツールになりそうです。

今回は、Sketch版Craftを紹介していきます。Craftをインストールすると、インスペクタの横にパネルと[Panels]メニューが追加されます。

それでは、使える3つの機能をそれぞれを見ていきましょう。

ダミーの文字列を挿入するType

ダミータイプを挿入できる機能です。英語のダミーで使われる「Lorem ipsum」ではなく、それっぽい文字列を挿入することができます。

Samplesタブには、デフォルトでは9種のダミーが用意されており、テキストレイヤーを選択した状態(複数レイヤー可)でブロックをクリックすれば、そのデータを挿入できます。

空きのブロックをクリックすれば他の種類を追加することも可能です。さらに独自データも追加することもできるため、日本語のデータを準備しておけばダミーの作成も捗るんじゃないでしょうか。

@ryo_panさんがさっそく日本人の男女氏名データを公開されてました。

ちなみに不要なブロックはパネル右上の編集マークをクリックすれば削除できます。

Webタブは、任意のウェブページから文字を挿入できます(この機能はSketch版のみ)。ページ上でクリックした箇所の要素単位で文字を挿入しているようです。

写真を挿入するPhoto

写真をレイヤーのPattern Fillとして挿入できる機能で、ソース元にフォルダを指定することで、そこに含まれる写真を挿入できます。複数のレイヤーを選択していても問題なく動作します。

ソース元としてはローカルフォルダ・Dropboxの共有されているフォルダ・Unsplash・任意のウェブページの4つから選択できます。

挿入前に素材を入れたフォルダを指定しておく

ソースが「Web」の場合は任意のページを表示し画像をクリックすれば挿入できます(こちらもSketch版のみ)。

ですので、こんなことをしてニヤニヤすることも可能です。

ぱくたそ便利

複製作業がとても簡単にできるDuplicate

上2つの機能は、正直なところ定番のContent Generatorプラグインでも代替できる機能です。この拡張パネルの真髄は、このDuplicateにあると言えるでしょう。

Duplicateは文字どおり複製を行う機能で、「Inside Selection」と「Specific Count」の2つがあります。

まず「Inside Selection」は、レイヤーをマスクしている範囲で繰り返し複製する機能です。チェックボックスは繰り返しコピーしたい方向の指定、テキストボックスは複製時の余白を設定します。

複製したいレイヤーを選択し、一度Duplicateボタンをクリックすることで、Duplicate用のマスクが作成されます。任意で作成したマスクではうまく動作しないので、注意してください。

作成されたマスクを適当な大きさに広げ、マスクを選択したままDupulicateボタンをクリックすると、そのマスクの範囲に収まるように複製することができます。

続いての「Specific Count」も使い方はほぼ一緒で、こちらは「Item Count」に入力した数になるよう複製してくれます。

そして何より重要なのは、Duplicateを使って複製すると、内包するレイヤー内でTypeやPhotoを使ってダミーを挿入している場合、複製された文字や写真がランダムに置き換わるということです。今までだと複製後にContent Generatorなどで都度テキストを入れ替えていましたが、それが不要になります(この機能もSketch版のみ)。

ただし、注意点が1つ。TypeやPhotoを使ったレイヤーを複製して異なる文字や画像に変更している場合も、ランダムに置き換わる対象になりますので、変更されたくない箇所には必ず新しくレイヤーを作成しましょう。

日付を複製して文字「update:」と変更しDuplicateを実行すると、「update:」まで日付に変更された


Project Comet」を見たときは、「あぁ、AdobeがSketchを殺しにきたな」と思いましたが、完璧とは言えないもののその「Project Comet」でみた機能をSketchでも擬似的に使えるようになったのは結構大きいと思ってます。

他にも、プライベートテストが行われているという「Silver Flows」もありますし、先日大幅アップデートで日本でもやっと話題になったAffinity Designerなど、いろいろなツールが出てきて面白くなりそうですね(使うほうは大変ですけど)。

tags