webデザイン

【Adobe XD】Photoshopより効率的!XDで本格的なデザインができる使い方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Adobe XD

ワイヤーフレームなどの作成でディレクターさんが使用するイメージの強い 【Adobe XD】 ですが実はゴリゴリwebデザインも対応できます。
今回はXDも気になってるけど移行するのめんどくさいし、ついついPhotoshopでデザインを続けてしまっている方向けの【Adobe XD】の使い方をご紹介します。

web制作の上でワイヤーフレーム作成、webデザイン、プロトタイプ作成、デザイン共有を一括で対応できるプラットフォームです。

Photoshopと比べて主に以下の利点があります。

  • 操作性が軽く、TOP、一覧ページ、詳細ページなどのように複数ページを一括管理できます。
  • 同じ要素の変更修正の反映が効率的に行えます。
  • スライドアニメーションやホバーアクションなども作成できます。
  • URLが発行できるので共有がしやすいです。
  • コーディングの補助に役立ちます。
  • 画像処理機能がPhotoshopよりも劣っています 。例えば縦書きなどはプラグインを入れて対応します。

次に実際に【Adobe XD】を使用してイラストポートフォリオサイトを作るていでデザインを作成してみます。

UIキットが以下からダウンロードできます。
これをコピーして使用します。

https://blogs.adobe.com/japan/web-adobe-xd-ui-kit-wires-jp/

まず、PC用のアートボードを作成します。

カスタムサイズで適意サイズを入力します。
アートボードには「 TOP 」とリネームしました。

先程ダウンロードしたWiresから必要な要素をコピーしながら作業します。

このように各パーツがまとまっているのでカスタムしやすそうなものを選択します。

XDではデザインを持つ要素を管理するものをコンポーネントと呼びます。

マスターコンポーネント化しておくと修正箇所がインスタンス(マスターコンポーネントのコピー)に反映されます。

まず、ヘッダーをコピーしてマスターコンポーネント化します。

右クリックで「コンポーネントリンク解除」し、 「コンポーネントにする」します。

コンポーネントは 「他ファイルからのリンク状態」 「マスター」 「インスタンス」によって左上のアイコンが変わります。

マスターを変更するとインスタンス側にも反映されるようになりました。

コンポーネントされると左がわのパネルに追加されるので、他の要素のコンポーネントも作成し、使うときにドラックして配置します。

コンポーネント、カラー、フォントもアセットパネルで管理できます。
カラーの16進数やフォントなどはクリックすれば変更できるので、設定しておけばかなりの時間短縮になります。

リピートの背景画像も簡単に作成できます。

リピートする画像を作成し、右上にある「リピートグリッド」をクリックします。拡張できるハンドルがでてくるのでこれで配置します。

配置したい箇所に長方形ツールでトリミング領域を作成します。
長方形が選択された状態で画像ファイルをドラッグすれば自動的にトリミングされます。
画像の右クリックメニューからPhotoshopでの編集も可能です。

このような感じでTOPのデザインを作成していきます。

アートボード「TOP」をalt(option)ドラッグで下層ページ用のアートボードをコピーし、作成します。

これで全体のデザインができあがったら左上にある「プロトタイプ」でモードを変更します。プロトタイプモードでは画面遷移のリンク作成、ホバーアクション、メインビジュアルのスライドなどデザインに動きをつけてプロトタイプ化することができます。

リンク元となるコンポーネントを選択すると青い矢印が出てくるのでそれをリンク先のページや要素にドラックします。

左上にあるプレイボタンで確認することができます。

ボタンの オンマウスアクションを設定します。

デザインモードに切り替え、ホバーアクションを設定するボタンを選択し、右側にある「初期設定のステート」の「+」をクリックします。「ホバーステート」を選択した状態でボタンの色を変更します。

プロトタイプモードに切り替え、アクションの種類を「トランジション」に設定し、確認します。

左上のメニューから共有モードに切り替えます。
表示設定、書き出し先、リンクへのアクセスを設定しすると共有URLが発行されます。

共有URLページではコメントを記入したり、設定した動きを確認できます。
表示設定を開発者向けにするとコーディングようの補助ツールとしても使えます。

右側のメニューを</>にすると、カラーパレットのコピーやフォント、インタラクティブの確認がでてきます。
要素をクリックするとcss情報も取得できます。

【Adobe XD】はワイヤーフレームだけじゃなく本格的なwebデザインの作成も可能でした。個人的には、画像処理機能は劣っているもののそれを差し引いても Photoshopよりデザインしやすかったです。
XDに乗り換えるかどうかの参考にしてみてください。

uhaha

XDはほんと食わず嫌いでしたw

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*