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

Adobe XDはウェブサイトのデザインに最適なプログラムであり、古い前身であるAdobe Photoshopをはるかに凌駕しています。Bright Vesselでは、クライアントのユーザーエクスペリエンスを構築するために、このプログラムを定番にしています。

Adobe XDでWordPressウェブサイトを構築する際にアセットをエクスポートする方法はこちらです。

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

2. ファイルを開いたら、正しくエクスポートできるようにファイルをプロビジョニングする必要があります。

正確さが必要であり、すべての要素はグループ化され、独自のセクションに配置する必要があります。

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

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

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

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

4. すべての要素を修正したら、必要な画像をエクスポートできるようにグループ化するのが最も簡単な方法です。ほとんどの場合、HTMLでは不可能だったアセットを収集することになり、使用しているビルダーも同様です。

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

レイヤーに名前を付けたので、タイプする必要がなくなりました。これにより、背景、タイポグラフィ、ボタンなどの要素のタイプがわかります。画像を特定しやすくするだけでなく、SEOのためにも名前を付けることは常に良いことです。ヘッダーにはHDRを、背景にはBGを使用します。

エクスポートが完了したら、目的の画像ファイル形式で要素のグループが作成されているはずです。