ファイルを知る、使いこなす。
.sketch

Sketchデザイン文書

クリエイティブ・編集

SKETCHはSketchの編集用デザイン文書です。画面、レイヤー、スタイル、画像等を保存します。ローカルファイルとWorkspaceで共有された文書は扱いが異なり、読むだけ、編集、開発者への素材提供で必要な操作を分けます。

主な用途
UI・画面デザインと再利用部品の編集
中身の種類
バイナリデータ
目次・よくある質問・根拠資料を見る

内容の最終確認: · 編集:Kai

開き方・操作手順

使っている環境や目的の項目を開いて、手順を確認してください。

Sketch(Macアプリ)

原本を残し、対応アプリで内容を確認する方法です。

  1. 対応するMac版Sketchで文書のコピーを開きます。
  2. ページ、レイヤー、フォント警告、ライブラリの参照を確認します。
  3. 編集用SKETCHと配布する画像を別々に保存します。
受け取ったファイルの条件を調べる

必要な付属ファイルや設定を、開く前に確認します。

  1. 作成に使ったSketch版とローカル原本か共有文書かを確認します。
  2. 必要なフォントとライブラリにアクセスできるか確認します。
  3. Workspace閲覧の場合は招待先と権限を確認します。

操作名・対応状況はアプリ・OS・版によって異なります。変更する前に原本を残してください。

開けないとき:症状から確認

  • Windowsで編集できない:Macアプリの編集とWeb共有の閲覧を区別します。
  • 文字の幅が変わる:フォント不足と代替フォントを調べます。
  • ライブラリが更新されない:元ライブラリへの権限と接続を確認します。
  • 画像にしたらレイヤーが消える:画像出力は編集構造を統合します。

SKETCH → SVG / PNG / PDF

  1. 必要なフレームやレイヤーを選び、書き出し形式と倍率を指定します。
  2. 出力した素材のサイズ、見た目、透明部分とファイル命名を受け手と確認します。

画像出力ではレイヤー等が統合され、ベクター出力でも効果や部品の編集関係が変わる場合があります。

ZIPの中身と通常の編集を区別

SKETCHはJSONと画像等を含むZIP構造ですが、展開して画像を取り出すことはデザインを正しく再保存する操作と同じではありません。構造を修復する前に原本と正常な版を残します。

この手順の根拠:Sketch · Saving and managing documents / Sketch · File format / Sketch · Importing & exporting

具体例:受け渡し前にここを確認

例:ボタンを開発者へ渡す場合はSVGと必要な倍率のPNGを出力し、余白、影、色と文字の状態を確認します。編集依頼にはSKETCH原本も別途渡します。

この手順の根拠:Sketch · Saving and managing documents / Sketch · File format / Sketch · Importing & exporting

関連形式との違い

関連形式との違い
形式・方法用途と引き継ぐ情報
.sketchUI・画面デザインと再利用部品の編集
FIG / SVGFIGは別のデザイン形式として互換条件があり、SVGは図形交換向けです。
SKETCH → SVG / PNG / PDF画像出力ではレイヤー等が統合され、ベクター出力でも効果や部品の編集関係が変わる場合があります。

取り扱いと安全性

未公開画面や埋め込んだ画像が文書に含まれます。共有権限と配布範囲を確認してください。

よくある質問

WebブラウザーでローカルSKETCHをそのまま編集できる?

Workspaceの共有機能とMacアプリの編集は別です。利用できる権限・機能を確認します。

ZIPへ改名してもよい?

コピーの構造調査には使えますが、改名だけで別アプリ用デザインには変換されません。

フォントを画像化して渡せる?

見た目の配布には画像やアウトライン等が選べますが、通常の文字編集は保てません。

形式の基本情報:正式名称・MIME type・管理団体
名称
Sketch Design Document
管理・仕様
Sketch
MIME type
用途・配信元の指定を確認してください。拡張子だけでMIME typeは確定できません。

公式・一次情報

  • ソフトウェア公式Saving and managing documents

    ローカル保存とWorkspace上の文書管理。

    Sketch · リンク確認:
  • ソフトウェア公式File format

    ZIP内のJSONと画像などの構造。

    Sketch · リンク確認:
  • ソフトウェア公式Importing & exporting

    デザインデータの読み込みと画像・ベクター出力。

    Sketch · リンク確認: