Webサイト制作の設計図とも言える「ワイヤーフレーム」。最近ではAdobe XDやFigmaと並び、Sketchを使って作成する現場も増えています。
この記事は、Sketchでのワイヤーフレーム作成を学びたいWebディレクターのあなたに向けた、全2回の基礎講座（第1回）です。今回は、Sketchの最も基本的な機能であるアートボード、シェイプ、シンボル、マスク、書き出しについて、分かりやすく解説します。
目次
- まずはじめに：アートボードの設定
- 基本的なメニュー構成
- シェイプ（図形）の種類とショートカット
- シンボルの設定
- リサイズについて
- 複製（オーバーライド）について
- マスクの設定
- 作成したデータの書き出し
- アートボード全体の書き出し
- 要素ごとの書き出し
- まとめと余談
まずはじめに：アートボードの設定
新規ファイルを開いたら、まずはアートボード（作業領域）を設定します。これは、デザインの「キャンバス」を決める作業だと考えてください。
メニューの「Insert」から「Artboard」を選ぶか、キーボードで「A」キーを押します。
Sketchにはデフォルトで「Apple Device」や「Responsive Web」など、一般的なデバイスサイズのプリセットが用意されています。PCサイトなら「Desktop HD」、スマートフォンサイトなら「iPhone 8」や「iPhone XS」あたりを選んでおくと、実際のサイズ感でワイヤーフレームを作成できて便利です。
基本的なメニュー構成
Sketchの基本的なメニュー構成です。左側にレイヤーリスト、中央がキャンバス（アートボード）、右側にインスペクタ（詳細設定パネル）が表示されます。直感的に操作しやすいのがSketchの特徴です。
シェイプ（図形）の種類とショートカット
ワイヤーフレームは、主に四角や円などのシェイプ（図形）で構成されます。Sketchでは、以下のショートカットキーを覚えておくと作業効率が格段に上がります。
- R：四角形 (Rectangle)
- O：円形 (Oval)
- U：角丸四角形 (Rounded Rectangle)
- L：直線 (Line)
シンボルの設定
シンボルは、Sketchの非常に強力な機能です。Webサイトでいう「ヘッダー」や「ボタン」など、繰り返し使う共通パーツを登録しておける機能だとイメージしてください。
マスターとなるシンボルを1つ変更するだけで、そのシンボルを使っているすべてのアートボードに変更が反映されます。これにより、修正が格段に楽になり、デザインの一貫性を保つことができます。
リサイズについて
シンボルやグループ化した要素は、リサイズ（拡大・縮小）の挙動を細かく設定できます。例えば、「親要素のサイズ変更に合わせて、中のテキストは幅を可変にするが、アイコンは右上に固定する」といった設定が可能です。
これを設定しておけば、レスポンシブデザインのワイヤーフレームを作成する際、アートボードのサイズを変えてもレイアウトが崩れず、非常に効率的です。
複製（オーバーライド）について
シンボルを複製した後、元のシンボル（マスター）のデザインは変更せずに、テキストや画像だけを個別に差し替えることができます。これを「オーバーライド」と呼びます。
例えば、記事一覧のカードデザインを1つのシンボルにしておき、複製したカードごとに見出しテキストとサムネイル画像だけを差し替える、といった使い方をします。ワイヤーフレームに実際の文章を流し込む際に非常に便利な機能です。
マスクの設定
指定したシェイプの形で、上のレイヤーにある画像や図形を切り抜く機能が「マスク」です。PhotoshopやIllustratorのクリッピングマスクと似ていますね。
Sketchでは、切り抜きたい形（例：円形）をレイヤーの下に、切り抜かれる画像（例：写真）をその上に配置し、2つを選択してマスクを実行します。マスクした後でも、中の画像の位置やサイズは自由に調整可能です。
マスクのレイヤー構造は以下のようになります。
作成したデータの書き出し
作成したワイヤーフレームは、画像ファイルとして書き出して、クライアントやチームに共有します。
アートボード全体の書き出し
アートボード（ページ全体）を書き出す場合は、左のレイヤーリストで該当のアートボードを選択し、右下の「Make Exportable」から設定します。
要素ごとの書き出し
ページ全体ではなく、特定のアイコンやボタンなどのパーツだけを個別に書き出すことも可能です。その場合は、書き出したい要素（レイヤー）を選択して「Make Exportable」を設定します。
まとめと余談
今回は、Sketchの基本操作として、アートボード、シェイプ、シンボル、マスク、書き出しを解説しました。まずはこれらの機能をマスターして、ワイヤーフレーム作成のスピードアップを目指しましょう。
余談：Sketchのピクセル精度とバージョン管理
Sketchはピクセルベースで設計されているため、小数点以下のピクセルが発生しにくいという特徴があります（※拡大縮小や整列時に発生することはあります）。
また、大規模なプロジェクトでは、Sketchファイルのバージョン管理が重要になります。複数のデザイナーで共同編集・管理するための便利なツール（Abstractなど）も存在しますので、興味がある方は調べてみてください。
- 複数のデザイナーで Sketch ファイルを共同編集・バージョン管理するための「Abstract.app」
- 「AbemaTV」におけるSketchとAbstractの運用フロー
- UIデザイナーにおすすめ！Sketch Librariesの基本的な使い方とAbstract上での連携方法
よくある質問（FAQ）
Q1. Sketchは有料ですか？FigmaやAdobe XDとはどう違いますか？
A1. はい、Sketchは有料のソフトウェアで、macOS専用です（Windowsでは使用できません）。買い切り型からサブスクリプション型に移行しました。Figmaはブラウザベースで無料から始められ、共同編集に強いのが特徴です。Adobe XDはAdobe Creative Cloudに含まれ、UI/UXデザイン全般に強いです。（2023年1月に更新終了）Sketchは、macOSユーザー向けのUIデザインツールとして長い実績があり、多くのプラグインで機能を拡張できる点が魅力です。
Q2. 「シンボル」と「グループ化」は何が違うのですか？
A2. 「グループ化」は、複数のレイヤーを単純に1つにまとめる機能です。一方、「シンボル」は、まとめたパーツを「共通部品」として登録する機能です。シンボルの最大の違いは、元のシンボル（マスター）を編集すると、そのシンボルを使っている全ての場所（インスタンス）に一括で変更が反映される点です。ボタンやヘッダーなど、繰り返し使うパーツはシンボル化するのがおすすめです。
Q3. ワイヤーフレーム作成後、Webサイトのように動かすプレビューはできますか？
A3. はい、可能です。Sketchには「Prototype（プロトタイプ）」機能が搭載されており、アートボード（ページ）間の簡単な画面遷移を設定できます。また、MacやiPhone上の「Sketch Mirror」アプリを使って、実機でデザインを確認することも可能です。さらに高度な動き（アニメーション）やプレビュー機能は、CRAFTプラグインや、InVision、Prottといった別のプロトタイピングツールと連携して実現します。