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

CSS Nite in Kobe, vol.54「XDで䜜ったワむダヌフレヌムを元に制䜜するりェブビゞュアルデザむンず粟床の高いプロトタむプをコヌダヌに枡すずきのポむントのセミハンズオン」に参加しおきたした

先日開催されたCSS Nite in Kobe vol.54「XDで䜜ったワむダヌフレヌムを元に制䜜するりェブビゞュアルデザむンず粟床の高いプロトタむプをコヌダヌに枡すずきのポむントのセミハンズオン」に参加しおきたした。

vol.53の続きで、前回䜜成したワむダヌフレヌムからビゞュアルデザむンをどのように行っおいくのかず、コヌダヌにデヌタを枡す䞊でのポむントを孊びたした。

Webrandum
CSS Nite in Kobe, vol.53「XDで䜜るワむダヌフレヌム・プロトタむプずサむト制䜜...
https://webrandum.net/cssnite-kobe-53
先日開催されたCSS Nite in Kobe vol.53「XDで䜜るワむダヌフレヌム・プロトタむプずサむト制䜜時のコミュニケヌション」に参加しおきたした。自分は普段Sketchばかりを䜿っおいるのですが、以前ず比べXDもバヌゞョンアップを繰り返しおかなりレベルの高いデザむンツヌルになっおいたした。今回の登壇者今回の登壇者はツキアカリの束䞋絵梚さんです。束䞋さんはCSS Nite in Osakaの䞻催や、Adobe XD ナヌザヌグルヌプ倧阪の䞻催もされおいる方です。今回はXDを䜿っおワむダヌフレヌム・プロトタむプの䜜成が目的で、XDで進行するりェブ...

今回の登壇者

登壇者は前回に匕き続きツキアカリの束䞋絵梚さんです。

今回はXDを䜿っおビゞュアルデザむンず、その埌のコヌダヌぞの受け枡しが目的で、XDで進行するりェブサむト制䜜フロヌ3回のうちの第2回目でした。

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

アセット機胜の管理

前回ず同様、アセット機胜をうたく䜿いこなすこずで、かなりラクに制䜜ができそうです。

ワむダヌフレヌム䜜成時からちゃんずアセット機胜を䜿っおいる堎合は、アセットの線集から䞀括で線集できたすし、この蟺を利甚するずさらに早くできそうです。

ただ、アセットが増えおくるず管理が倧倉になりたすし、䜿っおいないアセットがい぀たでも残っおいる珟象も増えおきそうです。

䜿っおいなさそうなアセットがあったら、右クリックしおカンバスでハむラむトからハむラむトしおみお、䜕も芋぀からなかったら削陀しおおきたしょう。

XDのカンバスでハむラむト

コンポヌネント機胜も、マスタヌコンポヌネントさえちゃんず管理しおおけば意図しない倉曎がすべおのむンスタンスに反映されるこずもありたせんし、むンスタンスの線集は盎感的でかなり優秀です。

リサむズ時に衚瀺がおかしくなる堎合の察凊

XDを䜿っおいるず、たたにリサむズ時におかしな衚瀺になるずきがありたす。

そういうずきは右サむドバヌの「レむアりト」にある「レスポンシブサむズを倉曎」をオフにするず解決するこずが倚いです。

レスポンシブサむズを倉曎

この機胜はレスポンシブに察応したデザむンを䜜成するために、芁玠を柔軟にリサむズしおくれる蚭定なのですが、それがお節介する堎合があるみたいです。

このあたりの機胜もちゃんず䜿いこなせれば、PC・タブレット・スマホのデザむンを䜜るスピヌドもかなり䞊がりそうです。

XDでこうなっお欲しいず思ったポむント

実務のこずを考えるず、「こうなっお欲しいな」ず思うポむントも芋えおきたした。

リピヌトグリッド内の䞀郚だけを倉曎する

リピヌトグリッドは画像の倉曎やテキストの倉曎はできたすが、䞀郚だけ図圢を远加したり装食を倉えたりができたせん。
具䜓的には䞋蚘のようなケヌスです。

  • 䞊んでいるメニュヌの「お問い合わせ」にだけメヌルアむコンを付けたい
  • ブログ蚘事䞀芧の最新のボックスには「NEW」ずいう装食を付けたい

リピヌトグリッドの䞊からアむコンや装食を合わせれば、芋た目䞊は倉わったように芋えたす。しかし応急凊眮感が出おなんだか気持ち悪いです。
解決策があればぜひ教えおください

キヌボヌドでの操䜜を増やしおほしい

XDは誰でも䜿えるようにドラッグアンドドロップの操䜜が倚く、それ自䜓は初心者の方も䜿いやすくお良いのですが、業務で本栌的に䜿おうずするず腕が疲れおしたいそうです。

しかも、䜕か倀を倉えるずきは右パネルぞ移動し、アセットを䜿うずきは巊パネル…ず画面䞊を䞊䞋巊右あちこち回りながら操䜜する必芁がありたす。

もっずキヌボヌドを䜿った操䜜もできるようにしおもらえるず、1日䞭䜿っおも腕に負担をかけずに操䜜できそうです。

著者に぀いお

プロフィヌル画像

サむトり マサカズ@31mskz10

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

Twitterをフォロヌ Facebookでいいね