おはこんばんちわ😶業務過多でしばらく暗黒期だったきょうPです(´_ゝ｀)
※やっと記事を書けるくらいには余裕が生まれました…(笑)
最近は、大きなプロジェクトをデザイナー複数人をアサインして進行することが多くなってきたことで、今まで以上にデザイナー間の連携が重要になってくるなぁ～🤔と感じる機会が増えました。
それに付け加えて、XDでデザインする場合に、作業の効率化などの面で強化する必要が現時点で課題として上がってきている今だからこそ皆に伝えたい！「XDで作業する前に注意しておきたいポイント」について解説していきたいなと思います。
WFを元に各画面の共通パーツの洗い出し
作業を始める前に一番最初にやっておかないと間違いなく後悔してしまうほど重要なのが、共通パーツの洗い出しになります。
具体的にはheader,footerの様なパーツはもちろん、ボタンの種類や入力フォーム系のUI、共通メニュー系などが含まれます。
メリットとしては、どのようなUIパーツが存在するか把握しておくことで、「このデザインにしてしまうと、この画面だと流用できないかも」、「どんな画面でも応用可能なデザインに作成しておこう！」という感じで、事前に考慮しながら共通パーツのデザイン作成を進めることができます。
HTML、CSSでも同じ様な考え方で、いきなりTOPページから順にコーディングするよりかは、まずはモジュールパーツを洗い出してから、なるべくコード量を減らすために、共通パーツを再利用しながら進める方法がありますが、それをデザイン作成時にも応用しよう！というイメージです。
また、「洗い出した共通パーツ」=「コンポーネントパーツ」という事になるので、後からちまちま共通パーツが見つかった度にコンポーネントを追加したり、コンポーネント化されていない画面のパーツを後で差し替えたりする無駄な手間も減らす事ができます。
ステートを追加してバリエーション対策
洗い出しの話とセットになりますが、ボタンのような状況に応じて見た目が変化するタイプのコンポーネントパーツが存在する場合には、hover、選択時、非活性時などの予めステートの設定をしておくことをお勧めします。
ステートを追加しない状態でデザインを進めとなると、選択中の状態のボタンが必要になった場合に、マスターコンポーネントをいちいち編集したりする手間が発生してしまったり、事前にボタンの状態がどのように変化するか考慮しきれないなどの問題が発生してくるため、遅かれ早かれ必要になるバリエーションを作成してステートを設定しておきましょう。
ボタンに限らず、入力フォーム系であれば、入力前、入力後、エラー時、読み取り専用などのパターン、メニュー系であれば、ボタンを切替えた時にどのような内容に変化するかなど 、様々な場面でステートを予め用意しておくことで、1人や複数でccライブラリを共有して作業を進める場合でも効率よく画面作成することができると思います。
また、デザインの方向性が確定していない状態で、最初からコンポーネント化したり、ステートを追加していくとデザイン変更する際に編集しずらいなどの場合も出てくるので、デザインの方向性が確定してベースとなる画面の中に今後共通で使用するパーツがあれば、コンポーネント化してステートを追加する進め方が良いかと思います。
ドキュメントアセットをフル活用しよう
コンポーネントパーツだけでなく、色と文字のルールもドキュメントアセットで一括管理可能です。
メインカラーは#0F77FF、サブカラーは#58B000、文字は#000000、罫線は#CCCCCC、という感じで用途に合わせて色を指定して登録しておきましょう。
フォントサイズや行間も、タイトル見出し24px(行間32px)、本文16px(行間32px)、…というイメージで、文字サイズなどをわざわざ覚えておく必要が無くなるので手間なくデザインを進める事が出来ます。
特にフォント周りのルールは、以下の項目を考慮して慎重に進める必要があります。
✅文字サイズ、行間は後で修正しない前提でルールを決める。
ドキュメントアセットで登録したフォントサイズや行間を後で変更しようとすると、一気に全ての修正されてしまうので各画面でデザインが崩れる可能性がある。
✅ 先に見出しのパターンを用意しておく。
後から見出しをh3,h4と種類を増やそうとすると、他のフォントサイズの調整などの可能性があるため、予め見出しのパターンをh1~h4くらいまで多めに用意しておく。
また、ドキュメントアセットの凄いところは、登録した文字や色の情報を、後で一括で変更することができるため、1つ1つ後で文字だけ色を変更しなくて済む点もあります。
さらに、登録したドキュメントアセットの情報は、ライブラリを公開することで他の人にも共有することができます。これによって、デザイナー複数人体制の際に、共有されたドキュメントアセット上でフォントや色、コンポーネントといったデザインルールを簡単に確認しながら作業を進めることが出来ます。
パフォーマンスを下げないための注意点
まず前提として、PCのスペックによって状況が変わるため一概に説明は出来ませんが、Windows10のCore-i7-7700HQ、RAM16GBのPCで実際にXDを操作した際のお話となるためご注意を。
※一般的なWEBデザイナーが使用するPC性能環境ではあると思うので、多くの人に共通する話かなと思います。
1.間違った方法のコンポーネント作成
単純なボタンやシンプルな構造のheader、footerなどでコンポーネントを活用することは全く問題ありませんが、以下の様な間違ったコンポーネントの使い方をしてしまうと、PCのパフォーマンスを大きく下げてしまう可能性があります。
🙅♂️1つのコンポーネントに対して、10個や20個ステートを設定してしまっている。
🙅♂️複雑でレイヤー数が多いパーツをコンポーネント化させる。
🙅♂️リピートグリットを多用したパーツをコンポーネント化させる。
また、Adobe公式ページでも以下のような記述がされています▼
・複数のコンポーネントが内部にネスト化されたコンポーネントを作成できます。ただし、コンポーネントが多くのオブジェクトを伴う複数ステートを持つ場合、パフォーマンスが低下する可能性があります。そのような場合、最適なパフォーマンスを得るために、コンポーネントを最大 3 レベルの深度にネストして、1 レベル当たりのステート数を 1 コンポーネント当たり最大 10 ステートに制限できます。
https://helpx.adobe.com/jp/xd/help/work-with-nested-components.html
・コンポーネントをそれ自体の中にネストしないでください。コンポーネントが自己参照するため、無効なコンポーネントになる可能性があります。
・外側のメインコンポーネントの中に、複数のステートがあるネストされたコンポーネントが含まれている場合、ネストされたコンポーネントのステートを切り替えることができます。
そのステートの変更は、外側のコンポーネントのすべてのインスタンスに反映されます。
2.アートボード数には注意しよう
XDは他のAdobeソフトと比較してもかなり動作は軽い方ではありますが、ついついアートボードの数を増やし過ぎてしまい、気が付いたらPCにかなり負荷がかかっていたというケースがよくあるので要注意です。
実際にアートボードの数が100を越えてくると、徐々にXDの動作が遅くなってくることが多く、200くらいになるとテキストを入力するたびにXDがフリーズしてしまうなどのバグが頻発して、かなりストレスを感じる状態で作業を進めることになってしまいます。
主観になってしまいますが、なるべくパフォーマンスを下げずに作業する場合、どれだけ多くても XDの1ファイル内に含められるXDのアートボード数は100~150くらいが上限かなと思います。
※もちろん1画面にどれだけの情報量が詰まってくるかによって状況は変わってくるので一概に画面数では表せませんが、1つの基準にはなるかなと思います。
こうした問題に対して解決方法としては、予め画面数がどれだけあるのか数が分かった段階で、グループA:100画面、グループB:100画面、グループC：残り画面…といった感じでファイルを分割して管理しておくことをお勧めします。
最後に
今回紹介したXDに関する注意点は玄人向けの内容になっているので、ピンとこない人もいるかもしれませんが、間違いなくどこかのタイミングで今回紹介した記事の内容が役に立ってくるんじゃかなと思います。
この記事を書こうと思ったのも、こうした注意点を知らずに失敗を重ねてきたからこそ、自分への戒めや教訓として忘れない為の振り返りでもありました( ;∀;)
失敗から学べる事は多いですが、知識と知恵で未然に失敗を防げるならそれに越したことはないですよね😉💦
とりあえず言いたいことは、デザイナーはデザインを作り始める前の準備段階が一番大切！ということです（笑）
それではまたの機会に。
ごきげんよう～😎
