Illustratorのショートカットとコピペでできるキーボード風のHTML+CSS

イラストレーターのショートカットのイラスト

ショートカットをつかいこなせるようになることで、都度都度マウスを動かしたり、パレットから対象の動作を裏部必要もなく、スムーズに色々な作業をこなすことができるようになり、仕事の生産性を高めることができます。

また、手を動かすフィードバックする場合にマイナーなショートカットを使うと、羨望の眼差しで見られたりします。

今回は、MACでのIllustratorのショートカットと、コピペでできるキーボード風のHTML+CSSについてご紹介します。

MACのIllustratorのショートカット

Illustratorで比較的ポピュラーなガイドの表示/非表示の + : から、 長体・平体を一瞬で100%に戻す + Shift + X など、使えるとかっこいいショートカットを色々と紹介します。

機能 ショートカット 説明
オブジェクトの編集 + 3 このショートカットキーで非表示を解除します。
選択ツール W マウスを動かさずに切り替えができるので、塵も積もればで後々結構な時間の短縮になります。
文字のアウトライン + Shift + O 作業の最後に行う自分を労うショートカット。
標準・背面:内側描画の切り替え Shift + D 選択しているオブジェクト内にマスクをかけて配置したいときに使うショートカット。
カーニングとトラッキングを増減 Option + ◀︎ 文字組を目視で行うときに使うショートカット。
線と塗りの入れ替え Shift + X 線と塗りを一発で切り替えるショートカット。
個別に変形 + Option + Shift + D ランダムの項目にチェックを入れて使うと、複数のオブジェクトを変形してくれるので便利です。
繰り返し + D 作業を反復して行ってくれるショートカット。
オブジェクトをロック + 2 その名の通りオブジェクトをロックしてくれるショートカット。左手も有効に使えます。
同じ場所にオブジェクトをコピー + F アートボードを跨いだ時のコピペで大活躍するショートカット。知ってるのと知らないのでは大きな違い。
同じ場所の背面にオブジェクトをコピー + B これもコピペの亜種で活躍してくれるショートカット。
オーバープリントプレビューの切り替え + Option + Shift + Y 白抜き文字がある時活躍してくれるショートカット。
選択しているオブジェクト以外のロック + Option + Shift + 2 内容が細かくて多い広告を作る場合などに欠かせないショートカット。
フォントサイズを2ptずつ大きく + Shift + . フォントサイズをいじるショートカット。増減の値は環境設定>テキスト>サイズで変更可能。
新規レイヤーの作成 + Option + L レイヤー名が決まっていると名称変更も行え、名称変更の煩わしいダブルクリックも不要になります。
ダイレクト選択ツール A パスアンカーを選択して、正方形などのオブジェクトを揃えるために使うショートカット。
タブ + Shift + T 文章の行頭を揃えるのに使ったりするショートカット。
パス同士のアンカーを結合 + Option + Shift + J アンカーの重なりでポップアップ表示が出る為、チェックにも使える便利なショートカット。
長体・平体を100%に戻す + Shift + X 見た目じゃ分からない長体・平体を戻すのに使うショートカット。
ガイドの表示・非表示 + : レイアウト作りで非表示にしたい時に使うショートカット。
ブレンド + Option + B 色の混合で使うショートカット。
ガイドを作成 + 5 きっちり作るための必須に近いショートカット。
境界線の表示/非表示 + H アンカーが多いオブジェクトの時に境界線非表示にしてレイヤーの色の影響をなくして見てみる時に便利です。

コピペでできるキーボード風のHTMLとCSS

+ Shift + Esc

ショートカットの紹介をApple Keyboard風のキーボードで実装するHTMLとCSSです。

:hover でちょっと沈み込むような動作も加えていますが、好みもあるのでその場合は「.keyboard:hover」より一連のCSSを削除してください。

HTML
<p><span class="keyboard">&#x2318;</span> + <span class="keyboard">Shift</span> + <span class="keyboard">Esc</span> と入力</p>
CSS
/*--------------------------------------
  キーボード風のスタイル
--------------------------------------*/
.keyboard {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 4px 12px;
  margin: 0 4px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
  font: 18px/24px Helvetica, Arial, serif;
  text-align: center;
  color: #666;
}

.keyboard:hover{
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}