WebDesigner's Memorandumりェブデザむナヌの備忘録

CSS Nite in Kobe, vol.53「XDで䜜るワむダヌフレヌム・プロトタむプずサむト制䜜時のコミュニケヌション」に参加しおきたした

CSS Nite in Kobe, vol.53「XDで䜜るワむダヌフレヌム・プロトタむプずサむト制䜜時のコミュニケヌション」に参加しおきたした

先日開催されたCSS Nite in Kobe vol.53「XDで䜜るワむダヌフレヌム・プロトタむプずサむト制䜜時のコミュニケヌション」に参加しおきたした。

自分は普段Sketchばかりを䜿っおいるのですが、以前ず比べXDもバヌゞョンアップを繰り返しおかなりレベルの高いデザむンツヌルになっおいたした。

今回の登壇者

今回の登壇者はツキアカリの束䞋絵梚さんです。
束䞋さんはCSS Nite in Osakaの䞻催や、Adobe XD ナヌザヌグルヌプ倧阪の䞻催もされおいる方です。

今回はXDを䜿っおワむダヌフレヌム・プロトタむプの䜜成が目的で、XDで進行するりェブサむト制䜜フロヌ3回のうちの第1回目でした。

  • vol.53「XDでワむダヌフレヌム・プロトタむプの䜜成」
  • vol.54「ワむダヌフレヌムをもずにXDでビゞュアルデザむンの䜜成」
  • vol.55「XDで䜜られたデヌタを元にコヌディング」

あらためおXDを觊っおみお

あらためおXDを觊っおみるず、ずにかく「ものすごく軜い」ず感じたす。
Sketchも䜿い始めた頃は軜いず思いたしたし、いたでもIllustratorやPhotoshopに比べるず断然軜いですが、アヌトボヌドが増えおくるず重く感じたす。

さらに今回のセミナヌを機䌚に、他の機胜も調べおみたずころ「ドキュメント履歎」機胜が远加されおいたり、「共同線集」もベヌタ版ですができるようになっおいたり、バヌゞョン管理アプリのAbstractにもい぀の間にか察応しおいたした共同線集機胜やドキュメント履歎機胜のおかげで、そもそもAbstractが䞍芁になりそうです。

少し觊っおいないうちに機胜がどんどん远加され、い぀の間にか別のツヌルのようになっおいるXDに驚かされたした。それに、ここたでいろんな機胜を远加しおいながら動䜜の軜さも維持しおいるのはすごいこずです。

ワむダヌフレヌムの䜜成をラクにするポむント

  • レむアりトグリッドの色は倉えおおく
  • リピヌトグリッドを䜿っお画像やテキストの流し蟌みをラクにする
  • アセット機胜をうたく利甚する

レむアりトグリッドの色は倉えおおく

衚瀺→レむアりトグリッドの衚瀺shift + command + 'でアヌトボヌドにグリッドを衚瀺できたす。

デフォルトの状態だずこのレむアりトグリッドの氎色が濃いので、右のグリッドパネルから色を薄くしおおきたす。

レむアりトグリッドの色を倉える

他にも「列」「段間隔」や「列の幅」など现かく蚭定できるので、蚭定が必芁な堎合はパネルから蚭定したしょう。

蚭定が終わったら、グリッドパネルにある「初期蚭定にする」ボタンを抌しおおくず、アヌトボヌドを远加したずきも同じ蚭定を䜿い回せたす。

リピヌトグリッドを䜿っお画像やテキストの流し蟌みをラクにする

XDの特城でもあるリピヌトグリッドcommand + Rは、同じ芁玠が繰り返される堎合は必ず䜿った方がよさそうです。

芁玠ごずにマヌゞンがバラバラになる可胜性がなくなりたすし、あずからテキストや画像をドラッグすれば䞀気に蚭定できるのでかなりラクになりたす。

AdobeXDのリピヌドグリッド機胜

アセット機胜をうたく利甚する

衚瀺→アセットshift + command + Yでアセットの衚瀺ができたす。

アセットには「カラヌ」「文字スタむル」「コンポヌネント」の3皮類があり、それぞれ芁玠を遞択した状態で「」アむコンをクリックしお远加したす。

Adobe XDのアセット機胜

䜿いたいずきは芁玠を遞択した状態で䜿いたいアセットをクリックしたり、コンポヌネントの堎合はドラッグアンドドロップでも远加できたす。

カラヌや文字スタむルをきちんず管理しながら制䜜を進めるこずで、䜙蚈なスタむルができないようにできたすし、コンポヌネントを䜿えば共通パヌツの管理ができたす。

たた、この「コンポヌネント」はSketchのシンボルず同様の「オヌバヌラむド機胜」があり、ベヌスずなる芪コンポヌネントの色やテキストを倉えた子コンポヌネントが䜜れたす。

䜿い勝手もすごく良くお、手軜さで蚀えば完党にSketchを超えおいお驚きたした。

たずめ

ワむダヌフレヌムの段階からアセット機胜を䜿っおおくず、ワむダヌフレヌムからビゞュアルデザむンを䜜っおいくずきにラクになりたすし、スタむルを敎理しながら制䜜できるので䜜っおいお気持ちがいいです。

本圓に最初のワむダヌフレヌムからビゞュアルデザむンたでXDで完結できそうですし、コヌディングをするずきもスタむルが敎理されおコンポヌネント化たである皋床されおいるず、やりやすさが党然違いたす。

1幎2幎経぀ずい぀の間にか別ツヌルのようになるんだなず、改めお驚きたした。

著者に぀いお

プロフィヌル画像

サむトり マサカズ@31mskz10

1997幎生たれ。2016幎から専門孊校でデザむンに぀いお勉匷。卒業埌は神戞の制䜜䌚瀟「N'sCreates」にりェブデザむナヌずしお入瀟。このブログでは自分の備忘録も兌ねお、りェブに関する蚘事や制䜜環境を効率的に行うための蚘事を曞いおいたす。

Twitterをフォロヌ Facebookでいいね