超強力なベクターの選択・編集機能「セレクション」
コンセプトで描いたあらゆるものを、選択、編集、変形、再構成する方法を説明します。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/39/28/39289000-5407-4543-9a98-1e9cd94feb48/selection_covernew4_final.jpg__1354.0x761.0_q85_subsampling-2.jpg)
スケッチやノート、図面を描いたあとに編集できる能力は、私たちがスケッチアプリ「コンセプト」を、ラスター形式ではなくベクター形式で開発することに決めた大きな理由です。
この編集能力の高さにより、創作活動の幅が最大限に広がります。描いた絵がインタラクティブなパズルのようになり、納得できる完成度になるまで、それぞれのピースを自由に操ることができます。無限に広がるキャンバスの上で、自然なハンドジェスチャーでアイデアを動かしたり、描いたものを変更したり、イテレーションを繰り返して作品を完璧に仕上げたりすることが、スピーディかつ効率的に行えるようになります。
これまでにも、他のお絵かきソフトやデザインツールで、編集プロセスの一部として選択機能を使ったことがあるかもしれません。このチュートリアルでは、コンセプトが提供する「セレクション」の機能と、あらゆるものを素早く簡単に編集する方法を説明します。
注記: 掲載画像はiPad Proを使用していますが、「セレクション」はiOS、WindowsおよびAndroidのすべてのデバイスで同じように動作します。
ストロークを選択する
ストロークを「選択」するとは、キャンバス上で特定のストロークを指定して、作業できる状態にすることを意味します。1本または複数のストロークを選択すると、変更、微調整、移動、変形、複製などを行うことができます。つまり、あらゆる編集を加えることが可能になるのです。
ブラシのストロークを選択する方法は2つあります。
1.画面を長押し 初期設定では、画面上で指先またはペン先を0.5秒間長押しすると、「セレクション」が起動します。長押ししている指をキャンバス上でドラッグすると、青い「投げ縄」が指先の動きに合わせて表示されます。投げ縄が触れたすべてのストロークは、画面から指を離すと「選択済み」になります。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/33/66/3366b339-5345-43d2-9087-dd31754071ba/selection_biglasso.png__2732.0x2048.0_subsampling-2.png)
選択ツールは、「投げ縄」の他にも、「アイテムピッカー」と「カラーピッカー」があります。これらについては後ほど詳しく説明します。
2.「セレクション」ツール このツールを使うと、最初に画面を長押しせずにストロークを選択することができます。ツールは「ブラシ」メニューにあります。使用中のツールをタップしてメニューを開くと、「ツール」の項目に矢印マークの「セレクション」があります。矢印マークをタップしてツールホイールに設定したら、メニューを閉じます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/be/30/be30c204-85d8-4c06-a143-ddbf1182bb3f/selection_tools.jpg__3264.0x1632.0_q85_subsampling-2.jpg)
左上の画像には、「ブラシ」メニューの「ツール」の下に、矢印マークの「セレクション」があります。右上の画像では、矢印マークがツールホイールに設定されています。編集したい時には、矢印をタップして「セレクション」を有効にします。
セレクションメニュー
ジェスチャー経由でもツール経由でも、「セレクション」を有効にするとキャンバスの下にメニューが表示されます。これが「セレクションメニュー」です。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/df/9e/df9ef999-e826-498e-b400-5704ce239f71/selection_menu.jpg__1291.0x128.0_q85_subsampling-2.jpg)
このメニューでは、選択対象を絞り込むためのフィルター機能を切り替えることができます。左から右へ、次のようなフィルターが並んでいます。
- 選択タイプ: 「投げ縄」、「アイテムピッカー」、「カラーピッカー」を切り替えます。
- ストロークの「一部」または「全体」: 「一部」選択では、「投げ縄」がストローク全体ではなく、一部に触れただけで選択範囲に含まれます。
- 「ロック」されたアイテム: ここをタップすると、ロックしたストロークを選択範囲に「含める」か「除外」するかを切り替えることができます。
- 「レイヤー」: 選択対象を「すべて」のレイヤーにするか、または「使用中」のレイヤーに限定するかを選ぶことができます。
これらのフィルターを切り替えるには、メニューの切り替えボタンをタップします。何かを選択している最中でも、フィルタを切り替えることができます。
「投げ縄」で選択する
先ほど説明したように、「投げ縄」は、ストロークを指先でなぞるだけで、1本または複数のストロークを一度に選択することができます。テキストやスケッチをまとめて選択して、一度に編集することができます。
- 長押し+ドラッグでストロークを指先でなぞると「投げ縄」選択になります。
- 「セレクション」ツールを使っている場合は、長押しする必要はありません。ストロークをなぞるだけで選択できます。
同じドラッグ操作中に、選択したストロークを再びドラッグして横切ると、選択が解除されます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/6c/74/6c749ead-86ef-4b90-b686-7e2e8244776b/selection_lasso.png__2732.0x2048.0_subsampling-2.png)
画面下のポップアップで「投げ縄」をタップすると「アイテムピッカー」に切り替わります。
「アイテムピッカー」で選択する
「アイテムピッカー」は、十字線を使って、ストロークを1本ずつ選択範囲に追加または削除することができます。十字線が選択可能なストロークに触れると、そのストロークがハイライト表示されます。画面をタップすると選択が確定します。
- 長押しジェスチャーで選択しているときは、1本目の指を離すと選択モードが解除されてしまうので、2本目の指で画面をタップして選択してください。
- 「セレクション」ツールを使っているときは、画面をタップするだけでストロークを選択対象に追加できます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/50/ac/50ac4919-cc13-49bf-b13e-fc9797dcd177/selection_itempicker1.png__2732.0x2048.0_subsampling-2.png)
このツールでは、一度に複数のストロークを選択範囲に加えることができます。アイテムピッカーを使いながら、選択したいストロークの上をホバーして、その都度画面をタップすると追加できます。とても素早く選択できる方法です。
選択済みのストロークの上をホバーすると、十字線の中心にある「+」マークが「-」に変わります。画面をタップすると、ストロークが選択解除されます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/0f/c6/0fc664ce-c18b-45a7-968d-e55e4bbad9b2/selection_itempicker2.png__2732.0x2048.0_subsampling-2.png)
何かを選択している最中でも、いつでもツールを切り替えることができます。「投げ縄」を再び使いたくなったら、「セレクション」メニューの左端をタップして、「投げ縄」を選びます。
また、画面から指を離したときにアイテムが選択されていれば、再び指先を境界ボックスの外側に置いて、選択アイテムの追加や削除を続けることができます。選択フィルターを再表示させるには、メニューの「フィルター」タブをタップすると、通常の切り替えメニューに戻ります。
「カラーピッカー」で選択する
「カラーピッカー」は、他の2つの選択ツールとは多少異なり、ストロークではなく色やツールを選ぶことができます。使い方は簡単ですが、ストロークの選択とは別に、このツール専用のチュートリアルを用意しています。「カラーピッカー」のチュートリアルはこちらを参照してください (英語)。
選択した後の画面表示
「投げ縄」や「アイテムピッカー」でストロークを選択すると、次のような表示が現れます。
- 選択アイテムを囲む境界ボックスが表示されます。
- 選択アイテムの上にポップアップが表示されます。
- キャンバス下部の「セレクション」メニューに、新しい切り替えオプションが表示されます。
選択操作を行なった後は、選択アイテムにこれらの表示が現れたことを確認するといいでしょう。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/03/83/0383d03e-0a0f-4821-8906-c9b25faf970e/selection_inaction1.png__3105.0x2327.0_subsampling-2.png)
上の画像では、以下の表示が確認できます。
1. 境界ボックス このボックスは、選択範囲の外枠を示します。また、四隅にサークルが表示される場合もあります。これは、選択アイテムを変形させるときに使う制御点です。これについては、後ほど説明します。
2. ポップアップ 選択アイテムの上に表示されるポップアップには、複製、グループ化、反転など、ストロークを調整するためのオプションが表示されます。こちらも後ほど説明します。
3. メニュー このメニューに表示される新しいオプションでは、選択アイテムの回転やスケールの設定を切り替えることができます。「フィルター」ボタンをタップすると、「セレクション」フィルターに戻ります。
選択アイテムを編集する
アイテムを選択したあとは、あらゆる編集が可能になります。さっそく何ができるか見ていきましょう。
移動、サイズ変更、回転: 選択したものはすべて、1本指でキャンバス上を移動、2本指で回転、または2本指でつまんだり広げたりして「スケール」や「ストレッチ」と呼ばれるサイズ変更をすることができます。先ほど説明したように、回転とサイズ変更の操作は、「セレクション」メニューでロックまたはロック解除を行うことができます。
- 回転 回転のロック / ロック解除を切り替えるには、このボタンをタップします。回転させたいときや、逆に角度を変えずに移動させたいときなど、必要に応じて切り替えてください。
- スケール / ストレッチ / オフ 「スケール」は、選択範囲のすべての部分を、ストロークが最初に描かれたときの形に正比例して拡大縮小します。「ストレッチ」は、ツールのサイズはそのままで、ストロークの長さを長くしたり短くしたりします。「オフ」は、選択アイテムのサイズ変更を一切禁止します。
これらの設定は、いつでも切り替えることができます。オブジェクトのサイズを変えずに回転させたいときや、 あるいは回転させずにスケールしたいときがあるかもしれません。これらのボタンを使えば、それぞれの目的に合った設定を簡単に行うことができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/b5/50/b550f1d5-a415-4a9c-a1a1-119674ae44af/selection_move1.png__2732.0x2048.0_subsampling-2.png)
ブラシのサイズ、不透明度、滑らかさを変更する: 線の太さ、インクの濃さ、または線の滑らかさが気に入らない場合は、ツールホイールの真ん中のリングにあるオプションで、これらのエレメントを変更することができます。なお、この変更は選択範囲のみに適用され、ツールの元々のプリセットには影響しません。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/17/ad/17adcd85-6997-4d73-91a2-eb06e9166a42/selection_opacity1.png__2732.0x2048.0_subsampling-2.png)
ツールを変更する: ストロークが選択されているときに、ホイールで他のツールをタップすると、ツールの種類を変更することができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/c7/e2/c7e25775-f938-41dd-8f7e-241758e48694/selection_tool1.png__2732.0x2048.0_subsampling-2.png)
色を変更する: ツールホイールの中心にある色が表示されたサークルをタップすると、コピックのカラーホイールが開き、選択したアイテムに新しい色を設定することができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/28/b2/28b2e012-7175-4c78-bccd-e312e8c2fa5d/selection_color1.png__2732.0x2048.0_subsampling-2.png)
セレクションのポップアップ画面
選択アイテムの上に表示されるポップアップでは、その他の変更を手軽に行うことができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/d9/d6/d9d6aad6-daf0-4ea5-9893-fb6742e7d8bb/selection_popup.jpg__1089.0x151.0_q85_subsampling-2.jpg)
左から右へ、次のオプションが並んでいます。
クリップボード: ペーパークリップのマークで表示され、選択したものをデバイスのクリップボードへコピーします。メールやSMSなどの外部アプリ、または他のデッサンやプロジェクト間で作業をやりとりするのに便利です。クリップボードは、「ギャラリー」、「インポート」メニュー、また「オブジェクトライブラリ」(iOS版のみ) からもアクセスすることができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/b4/92/b4929db5-149d-4b18-bed2-61ecfa8bdad2/selection_clipboard1.png__2732.0x2048.0_subsampling-2.png)
「インポート」」のライブラリの最上部にも、ペーパークリップが表示されています。
iOS版では、選択アイテムがクリップされている状態でキャンバスを長押しすると、クリップボードが表示され、タップするとキャンバス上に貼り付けることができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/69/2c/692cd8f4-0812-4257-8deb-2291ffd7d1ee/selection_clipboard2.png__2732.0x2048.0_subsampling-2.png)
ロック: ロックボタンをタップすると、選択したストロークがロックされ、その後は選択や変更ができないようになります。ダブルタップですぐにロック解除できますし、いつでも同じグループを選択して、あとで同じボタンでロック解除することもできます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/11/6e/116e3cbe-4ad5-42e9-aabb-5931193ae936/selection_locked.png__2732.0x2048.0_subsampling-2.png)
選択アイテムがロックされたので、セレクションのポップアップに表示されるオプションが減りました。ロック解除するにはロックをタップします。
複製: イテレーションを素早く行うときにとても便利です。描いたものを、何でも何度でも選択して複製することができます。複数のコピーを作成できるだけでなく、原本には手を加えずに、いろいろな作品を実験することもできます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/3b/e3/3be306b7-4c35-4a84-80da-baf84fbd6daf/selection_duplicate.png__2732.0x2048.0_subsampling-2.png)
削除: ストロークを消すには、選択・削除するのが一番手っ取り早い方法です。ゴミ箱をタップすると、不要なストロークを削除することができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/80/94/8094341b-3ca0-49d8-a1e5-f3d78490dd4e/selection_delete.png__2732.0x2048.0_subsampling-2.png)
グループ化: この鎖型のボタンは、複数のストロークを1つの「オブジェクト」としてグループ化することができます。絵のエレメント部分の作業で非常に役立つ機能です。グループ化したものは、選択して編集する際に、一連のストロークではなく単一の選択可能なオブジェクトとして扱われます。そのため、オブジェクトを拡大縮小または移動するたびに、すべてのストロークをいちいち選択する手間が省けます。個別のエレメントを変更したいときは、オブジェクトを選択してから鎖型のボタンを再度タップすると、グループ化を解除できます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/81/41/8141b2ca-14ba-4d47-b9ce-656e66efdd26/selection_group.png__2732.0x2048.0_subsampling-2.png)
ポップアップの鎖型ボタンが閉じ、ステータスバーに「グループ化されました」と表示されています。
左右反転: 選択したものをキャンバス上で左右に反転させることができます。例えば、人物画を描いているときに、すべてのレイヤーを選択して絵を左右反転させると、正しい構図で描けているかを確認することができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/0a/f1/0af1bf1c-6769-4023-844d-fe7347f52925/selection_flip.png__2732.0x2048.0_subsampling-2.png)
上下反転: 選択したものを上下に反転させます。選択したものを複製して上下反転させれば、あっという間に反射や陰影ができあがり、不透明度を下げたりソフト消しゴムでぼかしたりして自然な表現に仕上げることができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/e9/7d/e97dfe0f-b46e-42ee-b4fe-beb4b66d5f96/selection_mirror.png__2732.0x2048.0_subsampling-2.png)
選択したものを変形させる
境界ボックスの四隅にある制御点を使って、選択したものを変形、ワープ、傾斜させることができます。1つまたは2つの制御点をタップすると、サークルの色が黒くなります。1本指を使って角を引っ張ったり、2本指で制御点の間の境界線を操作したりすることができます。制御点を再度タップするか、境界ボックスの外側をタップすると、制御点の選択が解除されます。
変形: 角をタップしてからドラッグすると、選択したものを変形させることができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/c4/dc/c4dc7198-47d4-4f9c-96f6-d7ed0fd37d52/selection_transforms1.png__2732.0x2048.0_subsampling-2.png)
傾斜: 2つの角をタップしてから1本指でドラッグすると、一方向に傾けることができます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/87/1c/871c2d2e-92bf-4514-8ba7-ca3e9f11502e/selection_transforms2.png__2732.0x2048.0_subsampling-2.png)
ワープ: 2つの角をタップしてから2本指でドラッグすると、境界線が上下または外側、内側にワープします。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/b5/f3/b5f37592-f71a-45cc-acea-5303cda5f6df/selection_transforms3.png__2732.0x2048.0_subsampling-2.png)
対角部分の角をタップすると、これらの制御点の間でこれらの変形が起こります。1本指や2本指でドラッグして、それぞれの変形を行なってください。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/fc/b0/fcb0fb1f-4c52-41f4-a3fa-d6d5707255d4/selection_opposingcorners.jpg__3264.0x1632.0_q85_subsampling-2.jpg)
とても自然な動きで変形するので、少し試してみればすぐにコツがつかめますよ。
その他の「セレクション」機能
回転角度を指定する: 線やオブジェクトを特定の角度に回転させたいときは、回転させたいものを選択してから、画面最上部のステータスバーの中 (iOS版)、またはステータスバーの下 (WindowsおよびAndroid版) にある角度表示欄を長押しします。この欄に角度を入力して、「完了」をタップします。すると選択したものが、入力した角度どおりに正確に回転します。セレクションメニューで回転をロックしておくと、移動中でも角度が維持されます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/78/73/7873e325-a060-4617-99e1-42923bf65d90/selection_rotationangle.png__3709.0x2782.0_subsampling-2.png)
レイヤーを変更する: 描いたものを別のレイヤーに移動させたい場合は、移動させたいものを選択して、「+ 新しいレイヤー」または他のレイヤーのサムネイルにドラッグしてから指を離します。選択したものは、キャンバス上の元の位置に戻りますが、新しいレイヤー上に配置されるようになります。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/7f/6f/7f6f5cf9-81b7-412e-9bf1-b45039c323a5/selection_layers.jpg__3264.0x1632.0_q85_subsampling-2.jpg)
ジェスチャーとスタイラスペンを設定する: 「設定」メニューでは、ジェスチャーやスタイラスペンの設定を使いやすいようにカスタマイズすることができます。
「ジェスチャー」タブでは、長押しが反応する時間を調整することができます。また、長押しを「投げ縄」専用または「アイテムピッカー」専用に設定して、自分がよく使う操作にカスタマイズすることもできます。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/26/97/2697a479-7fc1-416e-a00c-3693aa1d55c8/selection_gestures1.png__2732.0x2048.0_subsampling-2.png)
iOS版「設定」→「ジェスチャー」メニュー
このメニューの下には、2本指、3本指、4本指タップのジェスチャー設定があります。例えば、最後に選択したものを選択する「最後のアイテムを選択」など、さまざまな操作を設定することができます。いろいろ試して一番便利な設定を見つけてください。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/ce/b9/ceb926b4-1a66-4e1c-bc37-3b8581ba34d6/selection_gestures2.png__2732.0x2048.0_subsampling-2.png)
Apple Pencilを使っている場合は、フィンガーアクションを「選択」に設定して、ペンは描く作業に専念させることができます。描いたものを頻繁に移動させたり調整したりする場合は、このショートカットが大変役立つでしょう。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/35/16/351687d2-b4a1-453f-a44a-85da15813d8a/selection_stylussettings.png__2732.0x2048.0_subsampling-2.png)
iOS版「設定」→「スタイラスペン」メニュー
選択アイテムをメールなどにドラッグ&ドロップする: 「セレクション」は、スケッチの一部をメールやSMSなどドラッグ&ドロップ機能に対応する外部アプリに書き出す際にも便利なショートカットです。例えば、会議でノートを取り、その一部を同僚に送りたいときには、その部分を長押し選択して、キャンバス上でドラッグしてから、外部アプリを開いてドラッグ & ドロップすればいいのです。
![](https://cdn.tophatch.com/media/filer_public_thumbnails/filer_public/91/74/9174db36-3956-4691-af98-39b87633a0d4/selection_dragdrop.jpg__3264.0x1632.0_q85_subsampling-2.jpg)
「セレクション」を一度使ってみると、作成、整理、編集作業がとてもはかどることが実感できるはずです。いろいろなアイデアを試す自由度が高まり、思考やデザインスタイル、芸術的表現を探求する新しい方法が見つかります。描いたものを編集できる能力は、作業の効率化や完成度を高める強力な味方になってくれることでしょう。
「セレクション」の使い方についてご質問があれば、アプリの「ヘルプ」→「お問い合わせはこちら」をタップ、またはメール(support@concepts.app)でお気軽にご連絡ください。
文章: Erica Christensen
翻訳: Wakana Nozaki
おすすめ記事
Setting Up Your Menus, Brushes and Presets (英語) - コンセプトでキャンバスのレイアウト、メニュー、ツールホイール、ブラシのプリセットをカスタマイズする方法を説明します。
消しゴムに代わるベクターツール「スライス」で自由に切断、消去、トリミング - スライス機能を使って、描いた絵を編集、切り抜き、消去する方法を説明します。
Winning Concepts in Retail Design: An Interview with Charles Freestone (英語) - リテールデザイナーのCharles Freestoneが、デザインコンペ受賞を勝ち取る作品づくり戦略を紹介します。