CSS Nite in Kobe, vol.53

2020/1/27

Web制作

CSS Nite in Kobe「XDで作るワイヤーフレーム」セミナーに行きました

2020年1月25日に開催されましたCSS Nite in Kobe Vol.53「XDで作るワイヤーフレーム・プロトタイプとサイト制作時のコミュニケーション」に参加いたしました。

AD

ここ数年、XDで作られたワイヤーフレームを頂戴することが多くなりました。
私はPhotoshopでデザインしているので、XDでは一から作成したことはなかったのですが、XDでデザインされているデザイナーさんも増えているようですね。
ちゃんと勉強しないとなあと思いつつ、バージョンアップの頻度も高い上に教習本が見当たらず、億劫になっていました。

ハンズオンのセミナーは私のようなズボラなものには大変助かります。。
講師の方の説明もとても親切で、サンプルデータもたくさんご用意いただいてとてもわかりやすかったです!

このCSS Nite in KobeのXDセミナーは3回シリーズで、初回の先日はワイヤーフレームの作り方がテーマになっていました。
簡単なレイアウトを作りながら、XDの基本操作を学ぶことができました。

復習ということで、自分のサイトをXDで簡単にトレースしてみました。

xd

まだ全ての機能や使い方も把握できていないのですが、やっぱりWebデザインに特化していますね!

良いなあと思ったところ

初歩的な感想ですいません!

  • 軽い!あっという間に立ち上がる。
  • 中央揃え、上揃えなどがボタンひとつで超簡単。
  • カラーが登録できて超便利。色は後々変えることが多いので、一発で全箇所変わってくれるのが泣ける。Photoshopでもこの機能がずっと欲しかった!名前をCSSやSASSと揃えておけば、コーディング時に迷わない。
  • 文字も登録できるので、CSS感覚で切り替えられる。
  • Photoshopならスマートオブジェクトにして使いまわしたり、別途psbファイルを作って埋め込んだりしていたところ、コンポーネントで全て解決そう。
  • ファーストビューにガイドが入るのが地味に助かる。
  • レイアウトグリッドはレスポンシブデザインに便利。要素がスナップするのも時短になる。
  • インスタンスの文字だけ変更などができるので、ボタンの管理が便利。
  • リピードグリッドは一覧ページに重宝しそう。画像やテキストの流し込みも一つづつコピペするより時短。
  • SPのデザインも2倍にする必要がなさそう。

戸惑ったところ

さくっと触っただけですが、下記が私が迷ったところです。
ただ、検索しても解決策がわからなかったり、私のやり方次第な気もします、、、!

  • 文字の縦書きが未対応みたい。
  • 細かいカーニングも無理そうなので、画像に文字を埋め込んだバナーなんかはPhotoshopで作る方が良さそう。
  • アートボードが膨大になり過ぎたら探すの大変だったり、見落としたりしそう。複数のデザイナーで作業する時はデータを分割するんだろうか?
  • 複数の要素が組み合わさってるマスターコンポーネントのサイズ変更や編集が難しい。。変えたくないところの大きさも変わって困った。
  • SVGで作ったロゴを縮小したらパスがおかしなことになってしまった。
  • 画像補正の修正が想定される場合、別にpsdで画像データを保存しておくか、やり直す度に画像を配置し直すか?工夫がいりそう。
  • Photoshopのレイヤースタイルやパターンに類似した機能はあるんかしら?

XDを使うとしたら、プラグインやバージョンアップの情報に敏感になっておかないといけませんね、、、!
世のWebデザイナーさんがどれくらい移行されているのか気になります。
実務では当面まだPhotoshopで制作したいなーと思うのが正直なところ。。
だって慣れないソフトでデザインしようとすると、思考が固まって進まないんですよー(泣)感覚で作れないといいますか、、、慣れですかね。
でもXDも暇を見て触ってみようと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

こちらもあわせてどうぞ

AD