紹介

編集済み 2 数か月前によって ExtremeHow 編集チーム

翻訳が更新されました 2 数か月前

Sketchは、UI/UXデザイナーが美しく機能的なデザインを作成するために使用する人気のデザインツールです。Sketchの重要な機能の一つに、アセットやスライスをエクスポートする機能があります。これは、フロントエンド開発者がデザインを機能的なウェブまたはモバイルアプリに実装するために重要です。この詳細ガイドは、開発のためのSketchでのアセットおよびスライスのエクスポート方法についての詳細情報を提供することを目的としています。基本から始め、より高度なトピックについても議論し、成功したアセットエクスポートのために必要なすべての情報を提供します。

アセットのエクスポートの重要性

方法に飛び込む前に、アセットやスライスをエクスポートすることがデザインから開発へのワークフローでなぜ重要なのかを理解することが大切です。アセットには、アイコン、画像、ボタン、その他のデジタル製品のビジュアル部分を構成するグラフィック要素が含まれます。これらの要素を正しい形式と解像度でエクスポートすることは、開発者がプロジェクトにシームレスに実装し、一貫性と品質を維持するのに不可欠です。

Sketchファイルの設定

アセットをエクスポートする前に、デザインファイルがきちんと整理されていることを確認する必要があります。これは、レイヤーに正確な名前を付け、論理的にグループ化することを含みます。このステップは、あなたにとってだけでなく、開発チームにとっても有益です。明確さを提供し、混乱を減らすことができます。

Sketchファイルの設定に関する基本的なガイドラインはこちらです：

レイヤーに名前を付ける： Sketchファイルの各レイヤーには、説明的な名前を付けるべきです。これは、開発者がどのプロパティがコードのどの部分に対応しているかを識別しやすくします。
グループ化を使用する： 関連するレイヤーを一緒にグループ化します。たとえば、ボタンにテキストがある場合、それらを一緒にグループ化して、必要に応じて単一ユニットとしてエクスポートできるようにします。
ページを整理する： Sketchファイルに複数の画面がある場合、それを複数のページに分割します。これにより、ファイルがクリーンになり、スクロールが減少します。

スライスの作成

スライスとは何か？

Sketchのスライスは、エクスポートしたいデザインの特定の領域を定義することができます。彼らはあなたのニーズに合わせて調整することができ、デザインの必要な部分だけがエクスポートされ、ファイルサイズが最小限に抑えられ、デザインの引き渡しの複雑さが軽減されます。

スライスを作成する方法：

Sketchでのスライスの作成は非常に簡単です。簡単なステップバイステップガイドはこちらです：

Sketchインターフェースの左上にある挿入メニューを選択します。
ドロップダウンメニューからスライスオプションを選択します。
キャンバス上でクリックしてドラッグし、長方形を作成します。この長方形がスライスの境界を定義します。そのサイズを、エッジをドラッグするか、右側のInspectorパネルで特定の寸法を入力することで調整できます。
Layersパネルでその名前をダブルクリックしてスライスに名前を付けます。意味のある名前は、エクスポート時にスライスを識別するのに役立ちます。

アセットのエクスポート

スライスを設定した後、または個々のレイヤーをエクスポートしたい場合、アセットのエクスポート作業を進めることができます。エクスポートは、ニーズに応じて正しい形式と解像度を選択することを含みます。

正しい形式の選択：

選択する形式は、アセットをどのように使用したいかによって異なります。以下に、一般的な形式の簡単な概要を示します：

PNG： 透明性が必要な画像に最適です。ロスレス形式であり、画質を損なうことはありません。
JPG： 透明性のない画像でファイルサイズを考慮する場合に適しています。ただし、ロッシーであるため、圧縮時に画質が失われる可能性があります。
SVG： ロゴやアイコンのようなベクター画像に最適です。SVGファイルは解像度に依存せず、どのサイズでも鮮明に見えます。
PDF： ドキュメントやベクターグラフィックに便利です。SVGのように、PDFも解像度に依存しないことができます。

アセットのエクスポートのステージ：

エクスポートしたいレイヤーまたはレイヤーのグループを選択します。
右側のInspectorパネルの下部にあるエクスポートオプションを見つけます。
+ボタンをクリックして、異なるスケールと形式を追加します。たとえば、Retinaディスプレイ用に@2xや@3x。
ニーズに基づいて形式（例：PNG、JPG、SVG）を指定します。
必要なエクスポートオプションをすべて追加したら、エクスポートボタンをクリックします。
希望の宛先フォルダを選択し、Sketchはアセットを適切にエクスポートします。

高度なエクスポートオプション

Sketchは、エクスポートプロセスをカスタマイズおよび自動化するためのいくつかの高度なオプションを提供します。

エクスポートプリセットの使用：

Sketchは、エクスポートプリセットを作成することができます。頻繁に同じ設定でアセットをエクスポートする場合、これらのプリセットは時間を節約できます。プリセットを作成するには：

任意のレイヤー用に必要なエクスポートスケールと形式を設定します。
エクスポート設定の横にあるギアアイコンをクリックし、プリセットの作成を選択します。
プリセットに名前を付け、将来使用するために保存されます。

バッチエクスポート：

複数のスライスまたはレイヤーを一度にエクスポートする必要がある場合、Sketchはバッチエクスポート機能を提供します：

Shiftキーを押しながら、エクスポートしたいすべてのレイヤーまたはスライスを選択します。
選択されると、エクスポートパネルにすべての選択した項目のオプションが表示されます。
エクスポートオプションを設定し、選択のエクスポートをクリックします。

開発者向けにアセットを最適化する

開発のためにアセットをエクスポートする際には、アプリケーションの最高のパフォーマンスを確保するためにアセットを最適化することが重要です：

ファイルサイズの最小化：

透明性が必要なアセットにはPNGを使用し、それ以外の場合はファイルサイズを減少させるためにJPGを選択します。
可変グラフィックにはSVGの使用を検討し、複数の解像度エクスポートの必要性を減らします。

開発者ハンドオフの使用：

ZeplinやAbstractのようなツールは、デザイナーと開発者の間のギャップをさらに橋渡しできます。これらのプラットフォームは、Sketchと直接統合され、デザインファイルから必要な属性と測定値を提供し、よりシームレスな引き渡しを可能にします。

エクスポート可能なレイヤーの使用

Sketchは、頻繁に使用されるアセットのエクスポートプロセスを自動化するエクスポート可能なレイヤーと呼ばれる機能を提供します。エクスポート可能なレイヤーを作成する方法はこちらです：

レイヤーまたはグループを選択します。
レイヤープロパティの下にあるエクスポート可能にするボタンをクリックします。
必要な形式とスケールを追加します。
デザインを更新するたびに、エクスポート可能なレイヤーが自動的に更新され、いつでもエクスポートの準備が整います。

結論

Sketchからアセットとスライスをエクスポートすることは、デザインと開発のプロセスの重要な部分です。Sketchのエクスポート機能を効果的に理解し、使用することで、デザイン要素が明確でクリーンであり、開発のために完全に準備されることを保証できます。デザインプロセスの初めに慎重な計画と組織化を行うことで、時間を節約し、開発チームとのコラボレーションを向上させます。Sketchの高度なエクスポートオプションを利用することで、開発者は必要なフォーマットと解像度でアセットを受け取り、推測の余地をなくし、デザインから実装への一貫した移行を確保します。

これらのガイドラインとヒントを使用することで、Sketchでのアセットとスライスのエクスポートをスムーズに行うことができ、デザイン引き渡しの効率と品質を向上させることができます。

記事の内容に誤りがある場合, あなたは

紹介