Adobe XDからアセットをエクスポートしてWordPressウェブサイトを構築する方法

Adobe XDはウェブサイトデザインに最適なプログラムで、旧バージョンのAdobe Photoshopをはるかに凌駕しています。Bright Vesselでは、クライアントのユーザーエクスペリエンス構築にAdobe XDを頼りにしています。

Adobe XD で WordPress ウェブサイトを構築するときにアセットをエクスポートする方法を説明します。

1. まずAdobe XDファイルを開きます

2. ファイルを開いたら、ファイルが正しくエクスポートできるようにプロビジョニングされていることを確認します。

正確さが求められ、すべての要素をグループ化して独自のセクションにする必要があります。

この画像では、デザイナーが複数の異なるレイヤーに要素を追加しているため、すべてのレイヤーをグループ化すると、要素が適切に切り抜かれなくなります。これは簡単に修正できます。要素の1つ（例：男性）をダブルクリックし、要素が他の行に流れ出ないようにドラッグします。

これは簡単に修正できます。要素の1つ（例：男性）をダブルクリックし、他の行に要素がはみ出さないようにドラッグします。

3. 命名規則は非常に重要です。画像に名前を付けることは、識別を容易にするだけでなく、SEOの観点からも重要です。ヘッダーにはHDR、背景にはBGを使用します。

これにより、画像の種類が分かりやすくなり、背景の場合はセクション名、タイポグラフィやボタンなどの要素の場合は要素名が分かりやすくなります。レイヤーエリアで、グループ画像と個々の画像に名前を付けます。小文字を使用し、単語の間にダッシュを入れます。

4. すべての要素を修正したら、必要な画像だけをエクスポートできるように、要素をグループ化するのが最も簡単な方法です。多くの場合、HTMLやビルダーでは不可能なアセットをまとめてエクスポートすることになります。

ファイル > エクスポート > 選択

レイヤーに名前を付けたので、入力する必要がなくなりました。背景、タイポグラフィ、ボタンなど、画像がどのような要素なのかが分かります。画像に名前を付けるのは、識別しやすくするだけでなく、SEO対策にも役立ちます。ヘッダーには「HDR」、背景には「BG」を使用します。

エクスポートが完了すると、必要なタイプの画像ファイルに要素のグループが作成されます。