SAKURUG TECHBLOG

ペン1本、指2本でここまでできる|iPad版Illustratorの直感的UI

timestampauthor-name
Aoi

こんにちは。デザイナーのAoiです。
私は業務でIllustratorを使用する中で、より業務の効率化を図るためにPC版よりも直感的に操作できるiPad版を用いてデザイン制作を行うことがあります。

操作に慣れると非常に便利で作業効率も上がるため活用をお勧めしたいのですが、
IllustratorのiPad版とPC版の比較記事だけでは、
実際の利便性や「どんな画面でどんな手の動きで作れるか」がわかりづらいかと思います。

そこで、本記事では簡易的に1つのアイコンを作りながら

  • iPad版のUI
  • 実際の操作感

を紹介でしていきます。
あくまで操作体験レビューのため、PC版との機能比較などはあまり行いません。
興味のある方はお付き合いください。

シンプルな機能と画面遷移。指2本であらゆる操作が可能

まずは導線のご紹介。アプリケーションを開くとホーム画面が表示されます。

ドキュメントの新規作成は左下から。

いくつかプリセットが用意されているほか、サイズ、単位、カラーモードのカスタムも可能です。
至ってシンプルなカスタムである分、ほとんど迷うことなくドキュメントの作成まで完了できます。

ドキュメントを立ち上げると以下のような操作画面になります。

ツールバーが左、プロパティパネルが右。
上部のバーからは設定の変更やチュートリアルの確認ができます。

iPadのタッチスクリーンならではのジェスチャー操作は御覧の通り。

2本指タップで「取り消し」、3本指タップで「やり直し」。

ビューの回転ではドキュメント全体を回転させて編集できたり、素早くピンチすれば初期のビューにぱっと戻すことができます。
指2本だけで思いのままに操作できるので、ワークスペースをカスタムする手間要らずです。

その他の主要な操作については、アイコンを作りながら見ていきましょう。
今回は女の子のアイコンを作成します。

難しい操作は一切なし。
Apple Pencilをタップorドラッグして、左手は添えるだけ

STEP0 下書きの準備

今回は下書きを用意しています。(使用ツール:procreate)
ツールバーの一番下の写真アイコンから写真を読み込み。

画面全体は遷移せず、選択画面がポップアップで表示されるので常に視界がクリアです。

画像を読み込んだら適当な位置に配置。
デフォルトでスマートガイドが適用されていて、中心にピタッと吸い寄せられます。
かなりストレスフリーです。

そして、オブジェクト選択状態時は下部にバーが表示されます。主要な操作は全てここから。
プロパティパネルを開くことなく、画面を広く使って様々な調整が可能です。

バーに内包されている機能は以下。

  • ベクター化
  • 不透明度
  • 線幅
  • オブジェクト同士の重ね順
  • 移動
  • オブジェクトロック
  • グループ化
  • 複製
  • 削除

中でも、不透明度、線幅、重ね順、複製はタッチしたまま左右にドラッグするだけでOK。

  1. プロパティパネルを開く
  2. 不透明度選択
  3. ドラッグ

このスリーステップが、タッチ&ドラッグのワンステップで完結します。

下書きの不透明度を下げたらオブジェクトロックして固定しておくのが良いでしょう。これももちろんバーから行えます。

ここまでの説明は実際の手の動きにすると3ステップくらい。デザインに取り掛かるまで非常にシームレスなのも良い点です。

STEP1 顔の作成

顔部分は丸オブジェクト3つと四角オブジェクト1つを組み合わせます。

左のツールバーから○を選択(□の部分をダブルタップで隠れているツールが表示)。
ペンをスーっとドラッグして楕円を形成。

正円にしたいなら画面の端にある○を長押ししながら、またはダブルタップした状態(→◉)でペンシルをドラッグするだけです。

色の変更は左下のカラーツールから。

線幅を調整したい時は、バーの左から二番目をタッチしたままなぞって変更できます。

オブジェクトの調整はApple Pencilでタッチ&ドラッグ、ツールに用がある時は左手でタップ。
完璧に計算されたUIポジションですね。

耳部分の楕円、首部分の長方形も形成できたら、これらを合体させます。
複数選択したい時もペンシルをドラッグ。選択できたら左側のパネルからの四角が二つ重なったアイコン開き、シェイプを形成をタップします。

形成方法は、ペンシルでなぞるだけ。

タッチ&ドラッグ、なぞれば全て解決。
ディテールのこだわりも一瞬です

STEP2 前髪の作成

前髪でおさらいしてみましょう。
正円と長方形を一つずつ作成し、両方を選択してシェイプ形成をタップ。
いらない部分をなぞるだけ。これで半円ができます。

そうしたら三角形を二つ作成して半円に重ね、シェイプ形成でまたなぞってください。

ディテールのこだわりも一瞬です。
線に丸みをつけたいなら、プロパティパネルを開いてスクロール、下の方にあるスタイルを切り替えればOKです。

STEP3 後ろ髪の作成

縦半分のサイズの長方形を形成。
そうしたら選択状態で再度オブジェクトをタッチ。これでダイレクト選択ツールに早変わりします。

横方向だけにパスを移動させたい時は、◯を長押ししながら、もしくはダブルタップした状態で左上のパスを内側にスライドです。

◯はほぼシフトキーと同じ役割を担っていますね。
好きなように動かせるので、普段シフトキーを押下している指の位置に持ってくるのも良いかもしれません。

そうしたら、左上のパスだけ選択して内側の◉を引っ張ってください。これでパスごとに丸みをつけることができます。

選択モードに戻して、
バーの右から二番目をなぞってすぐさま複製し、適当な位置に配置→両方選択してシェイプ形成でまたなぞります。

重ね順がバラバラでも、バーから重ね順ツールをなぞって一瞬で調整可能です。

STEP4 跳ねた毛の作成

跳ねた毛の表現は、iPad版の強みともいえるブラシツールでイラストを描くように作成してみます。

左のツールバーからブラシツールをタップ。
ブラシを選択して、カリグラフィから5ptの丸筆を選びました。
プレビューが付いているので試し書きの必要がありません。

ブラシを選択すると左下からブラシ設定ができるようになります。
滑らかさは手ぶれ補正のようなものです。強くするほど簡素な線が描けます。

Tips

もしこの線を髪に合体させたいならアウトライン化しましょう。

そうしたらシェイプ形成でなぞって完成です!

まとめ

いかがでしたでしょうか。
iPad版はPC版と比べてできることが少ないと言われますが、どちらかというとiPadの直感的操作に最適化したUIに生まれ変わった版、という印象です。

今回は紹介できませんでしたが、文字組みの行間や文字間もペンシルをなぞって直感的かつ細かく調整ができます。

iPadの強みは外出先などでちょっとしたアイデアをすぐ形にできる点。
Illustrator for iPadはこの利点に最大限寄り添ったUIになっていることで、業務の効率化を図れるだけでなく、より制作の幅が広げられるツールであると思います。

興味がある方は一度使ってみてはいかがでしょうか。


ーーーーーーーーーー
株式会社SAKURUGは「寄付月間2025」に参画しています。
12月中のテックブログのpv数に応じて、アフリカの支援団体に寄付をおこないます。
https://giving12.jp/
ーーーーーーーーーー

▼高校生向けインターン実施中!

弊社では高校生向けにインターンを行っております!
現役エンジニア指導の下、一緒に働いてみませんか?

高校生インターン応募フォーム

▼カジュアル面談実施中!

カジュアル面談では、会社の雰囲気や仕事内容についてざっくばらんにお話ししています。
履歴書は不要、服装自由、原則オンラインです。興味を持っていただけた方は、
ぜひ以下からお申し込みください。

皆さんにお会いできることをサクラグメンバー一同、心より楽しみにしております!

カジュアル面談応募フォーム

記事をシェアする

ABOUT ME

author-image
Aoi
準備中です