概要

ホワイトボードでワイヤーフレーム描いてたら「今XDがエモいよ」と囁かれた。

なのでチュートリアルとかろくすっぽ見ずにAdobeXDを使ってみる。

前提

こんな人がチャレンジします

• 業務でWebデザインをやってた頃はもっぱらCacooかIllustratorを使っていた


• 業務としてWeb周りをやってたのは1年半くらい前


• Google推し。iOS？何それおいしいの？


• Macbook Air/MacOS Sierra/トラックパッド


• nuboardとSTEADLERのマーカーの組み合わせは神ってる


• Photoshop：写真加工して同人誌の表紙を作れる程度


• Illustrator：SVG素材を加工してアイコンを作れる程度

こんなサイトを作ります

• 某ソシャゲの脳死周回アイテム回収ヘルパー
  
  
  • ぶっちゃけ別のゲームで同じようなのを作ってる人がいるのでそのパクリ
  
  
  
  

実行

実際にワイヤーフレームを作成する。

なお、見出しのカウンタは実測時間だが、スクショ撮ったりメモしたりの作業も含まれているので実際はもっと短いと思う。

AdobeXDの起動、および最初のアートボードの作成(0:07:10)

AdobeXD（以下XD）を起動するとiPhone/iPad/Webの中から用途に応じてアートボードサイズを選べる。

今回はPCブラウザでの使用を想定しているのでWeb(1280)を選択。



いともたやすく行われるアートボード作成。

なんだこの大雪原。初雪かよ。

UIキットの読み込み(0:22:56)

大雪原に途方にくれていたところファイル > UIキットを開くなるコマンドを発見した。

ちなみにUIキットはApple iOS/Google Android/Microsoft Windowsの3種が登録されている。



Google Androidを選択した場合はこんな感じでUIキットが表示される。



これUIキット追加できないのかな？できるとしたら形式は？

矩形ツール・テキストツール・UIキットを使ってワイヤーフレームを描く(1:24:16)

完成品がこちらになります（ドン



これを作りながら感じたことを気が利いてる・利いてないという観点で述べる。

結果だけ先に言うと、ワイヤーフレーム作るだけなら直感的に使えるね？といった感じ。

気が利いている点

• パッと見いらない機能がない
  
  
  • PhotoshopにしろIllustratorにしろ開発者が二の足踏む原因はだいたい「できることが多すぎる」せいだと思う
  
  
  • その点XDはできるやつだ、パッと見以下のツールしかないし、今回は○をつけたツール（とUIキットのコピペ）しか使っていない
    
    
    • オブジェクト選択◯
    
    
    • 矩形描画○
    
    
    • 楕円描画
    
    
    • 直線描画
    
    
    • パス作成
    
    
    • テキスト◯
    
    
    • アートボード
    
    
    • ズーム
    
    
    
    
  
  
  
  


• 当然のようにオブジェクトの間隔の表示や、オブジェクトへのスナップが行われる
  
  
  • オブジェクトの間隔がまちまちだとイライラするし、数値操作で揃えるのとか頭割れるほど面倒
  
  
  • その点XDはできるやつだ、オブジェクトをひとつでも配置すると、次のオブジェクトを配置するときには相対距離や中央/左右寄せのスナップができることを表示してくれる
    
    
    • デザイナーにとっては当たり前の機能だけど、エンジニアはアハ！体験できる
    
    
    • エンジニアがアハ！体験することによってデザイナーはキレずに済む
    
    
    
    
  
  
  
  


• 神機能「リピートグリッド」
  
  
  • ニュースサイトやECサイトみたいに、リストビューやカードUIが死ぬほどあるページのワイヤーフレームを作るときにコピペを繰り返してマニ車を回している気分になったことがある人いるでしょ
  
  
  • その点XDはできるやつだ、「リピートグリッド」という素晴らしい機能が存在している
  
  
  • その神っぷりは言葉だけでは説明できないので後述する
  
  
  
  

気が利いていない点

• ガイド機能くれ
  
  
  • 初期値のアートボードの幅は1280px〜だけど、実際PC向けサイト作るときはだいたい幅980pxじゃん、最初からガイド引かせてくれよ
  
  
  
  


• テキストツールのフォントがヒラギノの20px固定なの地味にしんどい
  
  
  • 例えばCacooだと「見出し」「通常テキスト」「テキストリンク」みたいなUIキットがデフォルトで使えたわけ
  
  
  • だから絵心のないエンジニアでもそれっぽいワイヤーフレームを爆速で作れたわけ
  
  
  • テキストの意図がわかればデザイナーはそれらしく方向修正できるわけ
  
  
  
  


• オブジェクトのグループ化が地味に面倒臭いし、オブジェクトフォルダが欲しい
  
  
  • CSSの命名規則にBEM（Block__Element--Module）ってあるわけ
  
  
  • たとえばカードUIでいうと「カードUI使ってるエリア（Block）」「カード1枚（Element）」「カードのカテゴリ（Module）」くらいまで細分化できるわけ
  
  
  • 個人的にはModuleをひとつのオブジェクトとして、Elementをオブジェクトグループにして、BlockをフォルダにしてElementを格納したいわけ
    
    
    • もちろんこんな単純な話でないことはわかっている
    
    
    
    
  
  
  
  

もうほとんどただのわがままなわけ。

神機能「リピートグリッド」について

噂には訊いていたが、リピートグリッドの存在は本当すごい。

リストとカード使う人は絶対使ったほうがいい、って断言したいくらいすごい。

まずリピートしたい要素を選択するじゃろ？

右メニューのリピートグリッドをクリックするじゃろ？

うわうわうわうわ！！

ワイヤーフレーム作る時は「スターの有る無し」とか「文字列を丸める」とか色んなパターンが必要になると思う。

リピートグリッドで増やした要素はひとつひとつグループ化されているから編集も簡単。

そしてもちろんグループ化してまとめておくこともできるのだ。

結論

なんかいろいろ疑問はありつつも、まずは難しいことを考えずにワイヤーフレームの作成にXDを使ってみてリピートグリッドに「うわうわうわうわ！」ってなろうぜ。

今後の予定

• プロトタイプモードを使ってみる


• 限りなくデザインカンプ的なものに近づけてみる