メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
デザイン・CSS
/
Sketch主要ショートカット
▧
Sketch主要ショートカット
design/design-sketch-shortcuts
R、O、T、V、P、L と複製・グループ化など Sketch の主要ショートカットを固定表で確認できます。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
Sketch主要ショートカットでは、R、O、T、V、P、L と複製・グループ化など Sketch の主要ショートカットを固定表で確認できます。
関連する観点として Sketch主要ショートカット、sketch shortcuts、CSS を確認し、結果をコピーして別の作業に使えます。
項目
内容
R
矩形
O
円
T
テキスト
V
ベクター
P
ペンシル
L
ライン
⌘D
複製
⌘G
グループ
⌘⇧G
グループ解除
使い方
Item 列で R、O、T、V、P、L の作図キーを探します。
content 列で、矩形、円、テキスト、ベクター、ペンシル、ラインの意味を確認します。
レイヤーを増やすときは `⌘D`、整理するときは `⌘G` と `⌘⇧G` を見ます。
Figma と似た文字キーでも、Sketch の名称に合わせてベクターやペンシルの行を読みます。
入力例・出力例
INPUT
V
OUTPUT
ベクター
Sketch ではベクター編集を開くキーとして表に載っています。
INPUT
⌘D
OUTPUT
複製
Mac向けのCommand記号で実装表に掲載されています。
よくある利用シーン
Sketch で矩形、円、ラインなどの基本シェイプを素早く作るとき。
シンボルやレイヤー整理前に、複製とグループ操作のキーを確認したいとき。
Figma から Sketch へ移る作業者が、同じ文字キーの意味を見比べるとき。
結果確認のポイント
生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
Sketch主要ショートカット、sketch shortcuts、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
Sketch主要ショートカットの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
コードやデザインデータを生成しますか?
いいえ。Sketch主要ショートカットは R、O、T、V、P、L、⌘D、⌘G、⌘⇧G を確認する固定表です。SketchファイルやCSSは生成せず、作図キーとレイヤー整理キーの早見表として使います。
商用プロジェクトのデザイン中に使えますか?
はい。ここで表示するのはSketchのショートカット表だけで、制作中の画面や素材を送信する機能はありません。商用UIの作図中でも、矩形、円、ベクター、複製、グループ解除のキー確認に利用できます。
Sketchキャンバスのプレビューはありますか?
いいえ。このページはショートカット名と操作内容の表だけです。Rは矩形、Oは円、Vはベクター、⌘Dは複製という対応を確認するためのもので、キャンバス編集やプレビュー表示は行いません。
関連ツール
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。
Material Elevation
Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。
accent-colorが効く要素
CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。
CSS角度単位
CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。
animation-direction
CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。
animation-fill-mode
CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。