WebサイトやUIをデザインをするとき、紙にラフスケッチしてからLibreOfficeのDrawを使っていました。
ZeroPlusの授業で、AdobeXDを教えていただきました。
自分のポートフォリオサイトを作成したとき、AdobeXDを使用してみたので、そのときの感想をメモしておきます。

コンポーネントという考え方

テキスト、長方形などのフレーム、線などの部品をグループ化することは、よくあるかと思います。
そのグループを、コンポーネントとして登録しておきます。
そして、同じグループを使い回すときに、そのコンポーネントを貼り付けます。
すると、親コンポーネントを修正すると、子コンポーネントも同じように修正されます。
この機能はとても便利でした。まさに、オブジェクト指向を視覚的に体感できるものだと思います。
親コンポーネントがクラス、子コンポーネントがインスタンスですね。

HTML/CSSへコーディングするとき

そして、HTMLやCSSにコーディングするときにも、このコンポーネントを知っていると便利だと思いました。
例えば、上図のように"カード"をコンポーネントにしてあります。
そして、左上の緑色の菱形マークがコンポーネントの印です。グループ化のみの場合、青い丸印です。
菱形の内側に小さい菱形があるのがインスタンス(子コンポーネント)になります。(詳細はAdobeのチュートリアルで確認してください。)
つまり、この菱形マークのついているコンポーネントは、基本的に共通の部品が使用されていることがわかります。

HTML

以下のように各タグでHTMLを記述しました。
そして、各パーツにclass名称を付けました。

• カード - できること(長方形12) : .ican-sheet
• "タイトル" : .ican-ttl
• 長方形13, "icon" : .ican-icon
• "説明分が入ります" : .ican-text

  <div class="ican-sheet">
    <h3 class="ican-ttl">タイトル</h3>
    <div class="ican-icon">icon</div>
    <p class="ican-text">説明分が入ります。</p>
  </div>

CSS

class名ごとに、CSSを記述します。
XDのプロパティウィンドウにwidthやカラーコードなどのパラメータが表示されるので、ほとんど悩まずにコーディングできました。
最終的には、WordPressでループ処理してしているので1回ずつしか使ってないようにみえますが、"できること"が追加された場合に同じコンポーネントが繰り返し表示されます。

むすび

作業効率があがるので、もっとAdobeXDの使用方法を知りたいと思いました。
ちょっと長い動画ですが、AdobeXD Trailのアーカイブがおすすめです。急がば回れで、思い切って時間を確保して、動画視聴する予定です。
たとえば、デザイン担当とコーディング担当に分かれてチームで作業するような場合も、作業効率アップするでしょう。
デザイン系の記事なのに、画像1枚だけで、文章多めで、ごめんなさい。
最後まで読んでいただいて、ありがとうございました。