Swap Fill and Border というAdobe XDのプラグインを制作しました。

見えますかね？一番上のプラグインの制作者が、 Naruhito Kubota となっております。

これで私も Adobe XD plugins developer （言いたいだけ）になったのですが、実は内容としてはとてもかんたんなものです。そのお話をします。

線と塗りの色を一発で置き換えたい

この機能はAdobe Illustratorなどではデフォルトである機能です。
User Voiceにも挙がっており、前々よりVoteしていますがなかなか実装されていませんでした。

Swap border and fill colors | Adobe XD: Feature Requests

これと同等な機能はSketchではプラグインによって実現されているため、Adobe XDでも同様にプラグインで実現しようと思ったのがはじまりです。

実現までの道のりをトレースしてみる

さて、まず方法は以下のように考えていました。

• オブジェクトが選択されている
  • いない場合はアラートを出す
• 選択されているオブジェクトの線の色と塗りの色を変数として持つ
• オブジェクトの線と塗りの色をあらたに代入する

雛形をつくってコンソールログで中身を見てみる

まずはプラグインの基本設定をして、オブジェクトがの値の持ち方を知るために中身を見てみたところからです。
今回はmanifest.jsonについては、はじめにコードだけ載せてあとは深く書きませんので、ご興味のある方は次の記事を参考にどうぞ。

manifest.json の書き方

main.js

1
2
3
4
5
6
7
8
9
10

function swapFillAndBorder(selection) {
  let items = selection.items;
  console.log(selection.items);
}

module.exports = {
  commands: {
    myPluginCommand: swapFillAndBorder
  }
};

manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  "name" : "Swap Fill and Border",
  "host" : {
    "app" : "XD",
    "minVersion" : "13.0.0"
  },
  "description" : "Swap Fill and Border is a plugin that allows you to switch fill and border colors in a moment. You can save your time and let you focus on the UI that really matters",
  "id" : ,
  "icons" : [ {
    "path" : "images/icon.png",
    "width" : 96,
    "height" : 96
  } ],
  "uiEntryPoints" : [ {
    "label": "Swap Fill and Border",
    "type": "menu",
    "commandId": "myPluginCommand",
    "shortcut": {
      "mac": "Cmd+Shift+x",
      "win": "Ctrl+Shift+x"
    }
  } ],
  "version" : "1.0.4"
}

この状態でオブジェクトを選択して、Swap Fill and Borderを動かすと、選択されているアイテムの情報が見れます。

以下に返ってくる内容の例をあげます。

1
2
3
4
5
6
7

[ Ellipse ('Ellipse 1') {
    width: 120, height: 120
    global X,Y: 137, 21
    parent: Artboard ('iPhone 6/7/8 – 1')
    stroke: ff825ca9
    fill: ff6daad6
  } ]

selection.itemsはひとつの四角形で、レイヤー名は’Ellipse 1’で、持っている各値が中に書かれています。
今回のプラグインでは、strokeとfillを利用するわけですね。
ちなみに、中に入っている値は、rgbaの16進数表記のようですね。

JavaScriptで入れ替える処理を実装してみよう

※ ここからの処理は module.exportsの記述を省略します。

1
2
3
4
5
6
7
8
9

function swapFillAndBorder(selection) {
  let item = selection.items[0];
  let border = item.stroke; // borderという変数に線の色を保持
  let fill = item.fill; // fillという変数に線の色を保持

  // 以下、交互に代入
  item.stroke = fill; 
  item.fill = border;
}

これで、選択されたオブジェクトの線の塗とを入れ替えられます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function swapFillAndBorder(selection) {
  let itemsNum = selection.items.length;
  for (let i = 0; i < itemsNum; i++) {
    let border = selection.items[i].stroke;
    let fill = selection.items[i].fill;
    selection.items[i].fill = border;
    selection.items[i].stroke = fill;
  }
}

module.exports = {
  commands: {
    myPluginCommand: swapFillAndBorder
  }
};

動作確認＆問題点の認識

• 複数のオブジェクトに対応していない
  − リピートグリッドやグループの子要素の入れ替えに対応していない
  − アートボードを選択時にプラグインを動かすとコンソールにエラーが出る

という点を認識しました。

複数オブジェクトはクリティカルですね。
グループやRGは中のオブジェクトを選択すれば動作する点から後から対応と判断。
エラー処理は、選択されているitemsの種類で処理しないとかとも考えましたが、選択されているitemsがFillかStrokeのどちらかで値を持っていなかったら何もしなければよいと考えるとかなりラクに処理できそうです。

JavaScriptでの実装アップデート版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function swapFillAndBorder(selection) {

  let itemsNum = selection.items.length; // 選択しているオブジェクトの個数を取得
  
  // 上記個数分、入れ替える処理をfor文で実装
  for (let i = 0; i < itemsNum; i++) {
    let border = selection.items[i].stroke;
    let fill = selection.items[i].fill;

    // if文は、borderとfillの値が両方あるならの処理。（エラー対策）
    if(border && fill) {
      selection.items[i].fill = border;
      selection.items[i].stroke = fill;
    }
  }
}

かんたんだた。

リジェクトされたその1

理由 - オブジェクト選択していないときに何もおきないのなんとかして。

正直、みんな知ってそうな機能だし、むしろアラート出すのが迷惑かなと思って省いてたけど、プラグイン開発のガイドライン上やっぱり必要らしい。
ここで、dialogs.jsをrequireする決意。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const { alert, error } = require("./lib/dialogs.js");

function swapFillAndBorder(selection) {

  let itemsNum = selection.items.length;

  if(!itemsNum) {
    error("Ooops!", "You need to select at least one layer.");
    return;
  }

  for (let i = 0; i < itemsNum; i++) {
    let border = selection.items[i].stroke;
    let fill = selection.items[i].fill;
    if(border && fill) {
      selection.items[i].fill = border;
      selection.items[i].stroke = fill;
    }
  }
}

module.exports = {
  commands: {
    myPluginCommand: swapFillAndBorder
  }
};

選択されたオブジェクトがない場合の処理のreturnを早めにしたかったので、そういう処理。
これが最終版です。
何も選択していないと、”Ooops! You need to select at least one layer.” と煽ってくるのでぜひご覧あれ。

リジェクトされたその2

理由 - プラグインの説明、短すぎ

はい。

“Swap fill and border in a moment”

しか最初書いていなかったので、情報追加しました。

そして、リリースにこぎつけました。

制作までの時間的なものを振り返る

会社のメンバーともくもく会をやった1時間でリジェクト前までのJavaScript側の処理は書けて、提出用の処理などでプラス1時間ちょっととかです。後者ははじめてだったので、なれてくれば時間は減るでしょう。
その後リジェクトの連絡来て都度対応したのがトータル1時間くらいですかね。

作りたいものの定義がきちんとしてさえいれは、数時間で Adobe XD plugins developer になれます。

いっしょに学ぼう

はじめてのAdobe XDプラグイン開発 が東京市ヶ谷で12/13に開催されます。（この記事を書いている日ですね）

イベント中継「はじめてのAdobe XDプラグイン開発」 | Creative Cloud 道場でのライブ配信、アーカイブ配信も予定しています。
ぜひ皆さん、いっしょにプラグイン開発者への一歩を踏み出しましょう！

この記事は、Adobe XD Advent Calendar 2018の2日目です。

Adobe XDは2018年を通して進化を続け、1年前まではまったく想像もしなかったほど使い勝手がよくなりました。
さて、その中ですこし物議を醸していそうな気がしなくもないような機能が10月のアップデートでやってきました。自動アニメーションです。
Adobe XD 10月アップデートリリース！ 音声プロトタイプ、プラグイン対応などをAdobe MAXで発表 #AdobeMAX #AdobeXD

さて、アニメーションの実装は、デザイナーとエンジニア感でのエアポケットになりがちな部分です。そのため、この記事ではCSSアニメーションの入門としての内容を書いています。

Adobe XDにおけるアニメーションのEasing

Trigerがタップな状態で、ActionをAuto-Animate（自動アニメーション）に設定すると以下のようなオプションが選べるようになります。

• Destination（移動先）
• Easing（イージング）
• Duration

Destinationについては、遷移先のことで遷移先アートボードのレイヤー情報と遷移元のアートボードのレイヤー情報をベースに自動アニメーションします。
残る2つの、EasingとDurationによってアニメーションの動きが変わります。

Durationはアニメーション開始から終了までの時間のことで、0.2秒〜1.0秒の値を0.2秒刻みで選択できます。
Adobe XDのEasingが取りうる値は以下のようなものです。

• None
• Ease Out
• Ease In
• Ease In-Out
• Snap
• Wind Up
• Bounce

動画で見るEasing毎の違い

言葉では説明が難しいものですので、すべての動きを動画であげました。
行きは1秒、帰りは0.6秒で実行させています。

ここまでAdobe XDのEasingオプションでどのような動きになるかを見てきたので、次からはCSSのお話をします。

CSS Transitionを利用したアニメーション

CSS Transitionというもので、プロパティの変更を一定時間をかけて単純な動きのアニメーションを実装することができます。

1

transition: property duration timing-function delay;

という形で記載します。
このショートハンドの形を分解すると、下のように4つになります。もちろん、挙動上の違いはありません。

1
2
3
4

transition-property
transition-delay
transition-timing-function
transition-duration

transition-propertyは何をトランジションさせるかの選択をして、transition-durationはトリガーとなったアクションからどれだけ遅らせるかを記述します。

MDN web docs | transition

CSSでのトランジションの時間設定は transition-duration

transition-durationについては、Adobe XD上のDurationと同じで何秒かけてTransitionするかです。
ミリ秒単位ならmsを、秒単位ならsをつければよいです。

1
2
3
4
5

transition-duration: 200ms;
transition-duration: 400ms;
transition-duration: 600ms;
transition-duration: 800ms;
transition-duration: 1s;

以上の5つの選択肢がAdobe XD上で選択しうるものに対応しています。もちろん、CSS側ではこの選択肢に限ることなく、実質的に無限の選択が可能です。たとえば、 86400s と指定すれば一日をかけてのアニメーションができるわけです。（そんなことを書く人はいないでしょうが）

MDN web docs | transition-duration

Transition Timing Functionとはなにか

1
2
3
4
5
6
7

transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: ease;
transition-timing-function: step-start;
transition-timing-function: step-end;

MDN web docs | transition-timing-function

Transition Timing Functionをわかるためのサンプルデモ

See the Pen XdEasing by Naruhito Kubota (@naru0504) on CodePen.

ふわっと今回のポイントになるところを書いておきます。

transition-property に指定しているのは margin-left: 24px から margin-left: 320px にしています。

1
2
3
4
5
6
7

.circle {
  margin-left: 24px;

  &.is-animated {
    margin-left: 320px;
  }
}

※ PostCSSでネストさせる書き方をしています。

Adobe XDとCSS Transitionの対応表

これらの値を先に説明したXDの取りうる値と対応させると以下の通りです。

※ Adobe XD上での正確な動きが数値ベースで把握できていないため、あくまでも名前の対応上で細かくは違う動きである可能性もあります。

CSSでもっと細かくイージングを設定するには

1

transition-timing-function: cubic-bezier(n,n,n,n);

という値を設定することで、トランジションをカーブで設定できます。
こちらを使うことで、SnapやWind Upの動きっぽいことが書けます。
詳細には踏み込みませんが、cubic-bezier.comが便利なので、参考にどうぞ。

Adobe XDで設定されたアニメーションをコード化するのかんたん？

さて、見てきた限りではすくなくとも、transition-timing-functionで定義されているease-in-outなどは非常にかんたんに実装できそうですね。

でも、この記事で埋め込んだコードは解説用に用意したものなので実は転用しようとするとすこし問題があります。
margin-leftを絶対値であるpxで指定していることです。

今回は親要素にiPhone8サイズdivを用意し、どんなウインドウサイズでも375pxの中で動くという状態にしましたが、親要素が可変であると対応しきれません。
相対値である%で指定すればよい、といったお話でもありません。オブジェクトである丸のサイズが絶対値であることの影響を受けてしまいますので、右側の余白が必ずしも一定にはなりません。

アニメーションを付けること自体はかんたんですが、クロスプラットフォームのブラウザ間における振る舞いの把握が大変なのです。
そのため、あるアートボードサイズのみならず複数のサイズでどうアニメーションされるのかを考えておきましょう。

もっとたいへんな要因はあるのですが、今回は入門っぽい位置付けなのでこれ以上は深く書きません。

もっと複雑な表現が必要なら

より複雑な表現をするなら、 CSSで済ませずにJavaScriptを使うことになります。
有名なライブラリでは、TweenMaxがありますし、XDで制作したオブジェクトをSVGとして書き出せば、svg.jsでの操作もできます。
また、svgでも線のみを扱う場合、Vivus.jsはとてもカンタンに使えて便利です。

iOSアプリではアニメーションどうなの？

1

animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

っていういわゆるスプリングが、Bounceっぽい動きをするはず。（よく知らない）

参考記事載せておくので、気が向いたらgifだけでも見てください。
A look at UIView Animation Curves (Part 1)

アプリでの利用を高めようとすると、どちらかというとTriggerの選択肢がすくないことがキツいですかね。
私はWebの人で、アプリの世界もPWAで攻めていきたいのでそこまでクリティカルには感じていませんが、iOS専門という人にはまだ物足りないんでしょう。（Principle比較）

もっと詳細にAdobe XDのアニメーションを使い倒したい！

今回は非常にカンタンな例を見てきましたが、もっと使いこなして使い倒したい！という方もいるでしょう。
そんな人には必見な投稿は12/21に予定されています。zen19880407 さんが『プロトタイプのアニメーションを使い倒す』というタイトルで書いてくれます。
それまでもとても役に立つ記事がたくさん出るので、ぜひアドベントカレンダーのチェックをおすすめします。

Sketchがv.50になりましたね。最新バージョンのSketchで保存されたファイルは、Adobe XDやfigma、InVision Studioといった他ツールにインポートできなくなってしまい困っている人もいるのではないでしょうか？

ということで、v49に落とす方法を書きました。

手順

ターミナルを開きましょう。

以下のコマンドでbrewを入れます。brew-caskは勝手についてくるはず。

1

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

以下のコマンドで既存のsketchをアンインストールします。

1

rm -rf /Applications/Sketch.app

以下のbrew caskコマンドでv49系のSketchを指定してインストールする。

1

brew cask reinstall https://raw.githubusercontent.com/caskroom/homebrew-cask/c3ee11b90fe3546e26b01d449b5876ec1a850627/Casks/sketch.rb

ちなみに、reinstallを使っているのはすでにbrew-caskでインストールしたことある人でも、したことない人でも両方いけるからです。

Sketchを起動しましょう。
v49.3が入っているはずです。

でもふつうにサイトから落とせるよ。

直近1ヶ月以内のバージョンはすべて公開されているそうです。
https://www.sketchapp.com/updates/

1ヶ月以上経ってからまだインポートの問題が解消されてなかったらこの記事は役に立つんや……。

この記事はSmashing Magazineに掲載されたAdobeのスポンサー記事を許可を得て掲載しているものです。
原文 - Adobe XD Contest: Create An App Prototype With Your City’s Best-Kept Secrets

すべての都市にはまだ知られていないスポットがあります。
たとえば、日の入りを見るのに最高のところ、エスプレッソがとてもおいしい隠れ家的コーヒー屋さん、ガイドブックでは見つけられないようなすばらしい建築などなどです。
旅先では、 こういったすばらしいに偶然ひょっこり出会ったりします。しかし、現地の人以上にこういったことに詳しい人なんていませんよね？

そう、あなたの視点で、あなたの都市をクリエイティブな人たちに知らせる機会です。同時に、あなたのデザインスキルを試す機会でもあります。
『Prototype your Creative City App コンテスト』をAdobeのメンバーが立ち上げました。内容は、Adobe XDを使って、アプリのプロトタイプをデザインして、都市体験の手助けをしましょうというものです。
あなたのクリエイティビティが刺激される場所、長ーい仕事で疲れた後にリラックスする場所、あなたの心がきらめく場所を、みんなに紹介しましょう。

チャレンジする方法ですが、たったひとつの条件があるだけです。Adobeが最近リリースした3つのすばらしいアイコンKitからすくなくとも5つのアイコンを選んで使用するだけです。
Adobe XD: Download Free Icon Kits Made by Legendary Designers

よりよいUXにフォーカスするAndon & Ireneデザインスタジオ、伝説的なデザイナーLance Wyman、そしてスイスデザイングループBüro Destructといった面々にデザインされたアイコンです。これらはあなたのプロトタイプに入れるだけで、特別なものとなるでしょう。

締切は日本時間で3月16日、7:59です。

何がもらえるの？

締切の後、アイコンKitのデザイナー3人とAdobe社のMichael Chaize氏で勝者を選びます。（訳注 - 発表は3/27を予定だが、時差の関係で28日の方が濃厚に思える）

1位

2018年10月に開催されるAdobe Maxへすべての費用込で招待いたします。
そして、1年間のAdobe Creative CloudとAdobeストック100枚分のチケットをお渡しします。

10位以内

1年間のAdobe Creative CloudとAdobeストック50枚分のチケットをお渡しします。

参加の流れ

やりたくなりましたか？参加フローのすべてをお教えしましょう。

1. 最新のAdobe XDをインストールしましょう
2. アイコンkitを落としましょう
3. モバイルアプリのプロトタイプをすくなくとも5つのアイコンを使って作りましょう。あなたの都市のあなたのお気に入りの場所を伝えましょう。公開されている資料も参考になります。（訳注 - 下で説明しています）
4. プロトタイプをBehanceで公開、#IconContestXDを付けましょう。そして利用したAdobeツールをタグ付けします。
5. Twitterで#IconContestXDと付けて共有しましょう。締切は日本時間で3月16日、7:59です。

より詳細のページは、AdobeのSpark pageを見てください。
https://spark.adobe.com/page/XIcCuPHq04gur/

グッドラック！

訳注 - PDFにサンプルが紹介されています。
https://shared-assets.adobe.com/link/d9153691-d500-49e3-6deb-bd17101769ec/?file=CREATIVE%20SPOTS%20ICON%20KITS%20DESIGNERS.pdf

先鋭的な作品とか陽のあたるバーといったふわっとしたものから、特定のお店の名前まで30種類載っています。皆さまの周りで考えるときにどんなものを紹介すればの参考にどうぞ。

訳注2 - Iconのダウンロードについて
LP一枚挟まっているのですが、ぶっちゃけ以下のリンクからいくのが早いです。
https://shared-assets.adobe.com/link/59698c21-c010-4718-78fb-0b5346a5200d

私としてもなんとか時間を作って参加したいところです。
以上です。

PlayColorKの36色セットをなんてことのない報告。

デルデというサンスター文具から出ているペンケースにすっぽり入ってよかったと安心しています。

PlayColor2を愛用していたにも関わらず、PlayColorKを買った理由は、割ともっと細いのがほしいと思う場面が個人的にはあったからですね。

肌色あればと思わなくもなかったけど、別にいいか感はある。

36色もいるのか？12色で十分では？というのは、「ああ、買っておけばよかったなあ」という時の後悔のリスクを消すためであって特に深く考えていない。

トンボ鉛筆 水性サインペン プレイカラーK 36色 GCF-013

で、デルデにおさめたの状態がこれ。

Good

こちらのペンケースもいろんなのあるからなかなか被らないと思うけど、売り切れも多いので注意。

とりあえず他にほしいなって思った候補3つあげときます。

現場からは以上です。

あけましておめでとうございます。2日になってしまいましたが、今年もよろしくお願いいたします。
去年の12月にブログを開設して、もっといろいろ書きたかったはずがといった部分が多いので、今年こそはと思っています。

今年もあんまり気負わずに生きていきたいなあとまったりした考えなのですが、おみくじを引いたら大吉だったので、特に深く考えなくても今年は上手くいきそうだなって思ってます。

こんな雑な投稿ですが、今年もよろしくお願いいたします。せめてと思って帰省中に撮った写真でも載っけておきます。

家の近くの踏切にて、朝6時半くらいに撮りました。こどもの視点みたいなのを意識してたと思うんですけど、とりあえず寒かったのは覚えてます。

ねこ、ネコ、猫。上の写真を撮った帰りとかだと思う。

ここで初詣しようとして、なんか予想以上に並んでたので別の場所に行きましたｗ

なんかよい絵だっただけに自分の写真の下手さが苦しい一枚。

これあげようか迷ったんだけど、うん、よい絵だったので。もっと精進します……。

以上です。今年もよろしくお願いします。

Sketch Advent Calendar 10日目の記事なのでベスト10です。

ショートカットのカスタム方針は以下の通り

• 似た機能は似たショートカットにしたい
• 独自性高いものを使わなくなるので基準を他に寄せる（Fnはじまりなど）
• XDに寄せたい

特に今までIllustratorやPhotoshopに寄せていた人は多いと思います。私もそのフシがありましたが、XDを使用開始してしばらくしてからすべて見直しました。

1. シンボル化 - Create Symbol

Cmd + K

みんなだいすきシンボル化です。
別のものにしていたのですが、XD使用する機会があったのでそれに合わせてます。
おかげさまでScaleをぶっ潰していますが、正直インスペクタから操作することが多いので個人的な被害はすくないです。

ついでに、ライブラリに追加を下のようにアサインしています。

Cmd + Shift + K

ぜんぜん使う機会ない。

2. マスク - Use as Mask

変更前 - Cmd + Ctrl + M
変更後 - Cmd + Shift + M

XDに合わせました。Illustratorに合わせる、Photoshopに合わせるでまたバリエーションは違います。
MaskなのでMっていうのはわかりやすいです。
Cmd + Ctrlは整列や分布にアサインしているので、Cmd + Shiftに変更しています。

3. グループレイヤーを収納 - Collapse All Groups

Ctrl + Alt + C

これを実行するとこうなります。

CmdでなくCtrlはじまりにしたのは、レイヤーリストの操作をCtrlやTab基準にしたかったため。次のページの切り替えのとろこでまた書きます。

4. ページの切り替え - Next Page

デフォルト - Fn + ↓ / Fn + ↑
変更後 - Ctrl + Tab / Ctrl + Shift + Tab

レイヤーの操作がTabなのに、関連性高そうなPageの操作がFn + ↓なことにまったく慣れられないので変更。
ひとつだけFn始まりとかいう斜に構えた感じになってるせいで使わなくなってるよなって思ってから変えた。
Fn始まりのショートカットを駆逐できたというのが功績。

レイヤー操作は特にescとenterでごにょごにょできるの覚えておくとよい。
これで、レイヤーリストの操作をほとんどごにょごにょできる。左手で完結させて、右手はマウスに置いておきたかった願望あるけど、enterは割り切った。
Karabinerでcaps lockにenter割り当てという方法もあるにはあるけど実践はしていない。

ちなみに、ページの新規作成はCmd + Shift + Nだけど、これもCtrlはじまりにしようかと思ったけども、別にあんまり使わないからいいやってなってます。

5. 整列 - Arrange->Align->Top

Cmd + Ctrl + ↑ / Cmd + Ctrl + → / Cmd + Ctrl + ↓ / Cmd + Ctrl + ←
Cmd + Ctrl + M / Cmd + Ctrl + C

これもXDに合わせてます。
VerticallyがAlign Middleなので、M
HorizontallyがAlign Centerなので、C

Artboardに整列するオプションには、Altを追加する形にしてます。

6. 分布 - Arrange->Distribute->Horizontally

Cmd + Ctrl + V
Cmd + Ctrl + H

これもXDに（ｒｙ

7. オブジェクトを前後に移動 - Bring Forward / Bring to Front / Send Backward / Send to Back

Cmd + [ / Cmd +Shift + [ / Cmd + ] / Cmd + Shift + ]

これもX（ｒｙ

Sketch仕様に慣れたと思ってたけど、XD使うようになってから見事に「は？」ってなったので変更した。
余談だが、ページの切り替えとこれを両方設定することで、矢印での操作はサイズの変更、位置調整のみになる。（と思う）
言い方を変えると、アートボード上でのX軸、Y軸の操作のみに使われるようになり、メタファー的にぴったりだと思う。
2次元の上下左右でZ軸まで操作できていたのに抵抗感がある人にはオススメ。

これは記事書いてるときに気付いたんですけどね……。

8. 複合シェイプ

Cmd + Alt + U / Cmd + Alt + S / Cmd + Alt + I / Cmd + Alt + X

何もカスタマイズしていませんｎ！！！！！
なぜならデフォルトがXDと同じだからです！！！！

おさらい気分で載せました。決して、10選に無理くりするためにっていうわけではなく、変更しないというのを暗黙的にしておかな（ｒｙ

9. すべてのWindowをタブで結合 - Merge All Windows

Ctrl + Shift + M

これはSketch以外も共通させている。Finderとかこれでまとめられるようにしている。Pixelmaterでも使ってる気がする。最近あんまりPixelmater自体を使っていないけど。iTerm使っているからできないけど、Terminalはできるので開きすぎて混乱したら便利そう。
もともと、Cmd + Shift + Mにしていたけど、そっちはMaskに譲った。

10. ヘルプメニューを表示 - Show Help menu

Cmd + Shift + ?

たぶんデフォルトですべてのアプリで共通として入ってるものなんだけど、これをチェックしていないとヘルプページをブラウザで開かれて甚だ迷惑なのでチェックが入っているか確認しておくとよい。

だいたい困ったらここから検索してます。

特に、Pluginの機能を呼び出すショートカットまでなんやかんややろうとすると記憶の限界を感じるので、ほとんどここからなんとかしてます。

こちらからは以上です。

帰りの電車で唐突に、「あ、あれ書こう」ってなったので書いた。

さて、タイトルで『サイト探索における三種の神器』と大仰な名前を付けて書いてしまったので、平易な言葉で問いかけなおそうと思う。

ユーザーがサイトで自分にマッチしたものを探すときに重要な3つの機能って？

なんかまだ硬い。

サイトに来た人が見つけたいものを見つけるのにたいせつな機能ってなーんだ？

いえす。すごくかんたんな質問だ。

これは特に引っかけ問題でもなんでもない。
探索とかいう言葉をタイトルで使ってしまった理由もおおよその予想が付くと思うのだが、早い話が『検索』という言葉が回答のひとつになるので使いたくなかったのだ。

と
い
う
こ
と
で
す
こ
し
だ
け
考
え
て
み
よ
う

1. 検索機能 - Search

いえす。ひとつは、検索機能だ。

これが重要じゃないという人は、そうそういないと思う。ただ、こういうものの重要性を感じるためのかんたんな方法の紹介として、それがなかったらどうなるか想像するというかんたんな手法を実践してみよう。

• Amazonから検索機能が消えた場合を想像できるだろうか？
• Facebookで検索ができなかったらどうやってつながればよいのだろうか？
• Googleに検索がなかったら？

Googleに検索がなかったら、どうなるんだろうはちょっと自分で言ってすこし興味あるのでやってみた。

完全にこれがやりたかただけやろという状態になってしまった感があるが、とにかく情報過多な中で検索というのはすごく重要なのである。

さて、次は？

と
い
う
こ
と
で
す
こ
し
だ
け
考
え
て
み
よ
う

2. 並べ替え機能 - Sort

いえす、並べ替え機能だ。

だいたい新着順やら人気順、おすすめだったり関連度みたいなのでソートができるというのもたいせつな要因だ。

この点は、日々の実感としてAmazonは流石だと思う。

こじらせ英語UIがお話を複雑にしているが、項目としては上から次の通り。

• 関連する順
• 価格の低い順
• 価格の高い順
• 評価の高い順
• 新着順

関連する順と評価の高い順って変わるの？みたいなところがあると思うのだが、内部的なアルゴリズムは、きっと想像した以上に、騒がしい未来がぼくを待ってるじゃなくて複雑だと思う。

とはいえ、何がすごいかっていうと、評価の高い順で表示されるものと上位6件すべて違う上に、やはり見た感じのタイトルの並びとして、関連する順の方が私の読みたいものが並んでいたという事実だ。

選択肢を無理くり増やして、「これ意味なくね？」とか「これとこれ結果変わんなくね？」とかいったサイトは山ほどあるけど、意味あるソート順を提供しているところで出てきたの真っ先にAmazonだった。

特に、グレーアウトした部分の話をするのも変だが、右上のユーザーエクスペリエンスの測定や左下のウェブ戦略としてのユーザーエクスペリエンスの著者については、2017年のUX Hong Kongで実際にキーノート聞いたりワークショップ受けたりしてるといったこともあって、「なんだ？航空券のチケット情報でも抜いてんのか？」って疑うレベルである。

ちなみに、ほしいものリストでは優先順位を付ける機能があってそれ順にソートできたりする。

えーと、Google検索はソートなんてぜんぜんできないと思うんですがどうなんですか？ってお話をしておきます。
Webを横断的に検索するといった極度に広いデータを探索してかつ万人に使用される機会があるものは、パーソナライズし過ぎない方がよいといったこともあると思っています。
同じワードで検索したのに、ある人の検索結果には1つ目に出るのに、ある人の検索結果には1ページ目にすら出ないといったのは、明らかに混乱を生み出すし、そんな世界をGoogleは望んでいない。（と思う）

はい、つぎー。
Search, Sortと来ているので、次は何のSでしょうねー。

と
い
う
こ
と
で
す
こ
し
だ
け
考
え
て
み
よ
う

3. 絞り込み機能 - Filter

いえす、絞り込み機能だ。

当然ながらSではない。
当たり前すぎる。

なんてたってURLにsearch-sort-filterって書いてるからな。

すごーく重要だ。とはいえ本題は実は次だから、また例え話だけしてごまかそう。

• 私の足のサイズは28cmなのでそのサイズ周辺の在庫がないなら除外したい
• 表参道でランチする店を探しているので周辺以外は除外したい
• 東京勤務で考えているのでそれ以外は除外したい
• 確か8月のメールなのでそれ以外は除外したい

とにかく情報過多な時代の皆さまは除外したいものだらけなのですよ。

何がソートできて何がフィルターできるのかの基本

• 明確に順序が付けられるものはソートできる。vice versa
• 明確に順序が付けられるものは、区分を作ることでフィルターの候補にできる。

日付が一番わかりやすい。時間は古い→新しいの時系列に沿って明確に順序付けられるし、年や月、日などを区切ることによって絞り込みの選択肢にできる。
また区分は別に等間隔である必要はない。統計かじった人とかは何か区分をつくろうとすると、どうしても等間隔にしたいといったのあるかもしれないけど。

Google検索の絞り込みは、もう間隔が同じものなど何ひとつない。ただ、これが使いやすいのだ。

違いといったものを挙げると一番大きいのはこれだろう

• ソートの選択はひとつまでで、フィルターは複数選択可能。

それっぽいこと書いてるけど、堂々の脳内出典。

ソートとフィルターは明確に別だという設計をした方がよいぞ。

ごっちゃになってるところ多いよね。っていうか自分がやらかしたって気付いて調べて思ったんだけど。

いやなんていうかそれでうまくいってるんだろうし、ユーザー使うし、困ってないし、むしろ上手くいってるんだろうなと思うけど。
しかし、絞り込みやソート順の要素を追加する度に整合性を保つのにめちゃくちゃ苦労するんだろうなーこのサービスって勝手に思ってる。

特にね、モバイル。やばし。

ある程度、日本でも認知があって、よい実例を挙げようと思って探したのだが疲れて諦めた。誰か教えてほしい。

ちなみに探しまくった中で、現状よいなって思っているのは、Udemyです。

スクショはモバイルアプリだけど、レスポンシブなのでデスクトップのブラウザで確認できますよ。

• ごちゃごちゃしてない
• 現在、設定されているフィルターがある項目は太字になってわかるようになっている
• モバイル時にフィルターとソートが同じモーダルの中に入るがソートが一番上に来る

とにかく最後のが一番重要。
フィルターとソートを明確に区別していて、ソートはひとつのセレクトボックスで済むけど、フィルターは圧倒的に要素の数が多い。だから、まずはひとつのセレクトボックスで済むソートを一番上に持ってきている。デスクトップ時には右側にあって、要素の位置による重要性は絞り込みの方が高い扱いを受けているにも関わらず、モバイルでは逆転させている。

無理やりなデザインと、自然なデザインとでは、こういった情報設計がきちんとされているかみたいなところあるよなと思いました。（こなみかん）

Adobe XD Advent Calendar 2017の3日目の記事です。

Adobe XDはUser Voiceというプラットフォーム上で、XDに対してのフィードバックをまとめています。

Adobe XD Feedback : Feature Requests & Bugs

私もかつてとあるサービスでUser Voiceを利用していましたが、まったく使われなかったです（笑）
それに対して、かなり運用されているあたりXDの人気の強さを物語っていると思います。比較するのも失礼なくらい使われていなかったとも言えます←

3行でわかるXDのユーザーボイス

Feature Requests（機能リクエスト）とBugs（バグ報告）の2つがあります。
バグの方の説明は割愛します。だいたいがもっと情報が必要って返されてるんじゃないですかね（てきとー過ぎる）
報告の出し方についても説明しません。

カテゴリから探す

Feature Requests（機能リクエスト）にはカテゴリっぽいものがあります。

• 01: Design mode | デザインモード
• 02: Prototype mode | プロトタイプモード
• 03: Sharing on the Web | オンラインでの共有
• 04: Asset exporting | エクスポート
• 05: Extensibility | 拡張性
• 06: Integration with other tools | 他ツールとの連携
• 07: Mobile (iOS) | モバイル（iOS）
• 08: Mobile (Android) | モバイル（Android）
• 09: Design Specs | デザインスペック
• Other | その他
  といった具合です。カテゴリから探すといっても、100件超えているのも上の2つだけで、しかもデザインモードが690件といった感じです。デザインツールだし当たり前だよね感があります。

ソートするなら投票が多い順

ソートは4つ種類があります。
Hot, Top ideas, New, My feedbackの4種類ですが、自分でフィードバックを出していない人にとっては実質3種類ですね。
Hotのアルゴリズムはよくわかってないのですが、並べ替えるならTop Ideas（投票数が多い順）だよねって思います。

各フィードバックにはタグが付けられます。

• FEATURE-NEEDS-MORE-INFO | もっと情報がほしいよ
• FEATURE-UNDER-REVIEW | レビュー中だよ
• FEATURE-IN-THE-BACKLOG | そのうちやるよ
• FEATURE-STARTED | はじってるよ
• FEATURE-COMPLETED | リリースしたよ
• FEATURE-DECLINED | いらないんじゃあああ

などなどです。

投票するとなんかあったときに通知メールもらえるぞ

実際、デザインスペックの件についてはもらいました。
自分の一票がデザインスペックにつながったんだなあというのはうれしいです。（いつ投票したのかまったく記憶にないが……）

ざっくり説明しましたが、これでだいぶわかったのではないでしょうか？

おい、3行で説明しろよ。

STARTEDのFeature Requestはよいぞ

ここが言いたかったのだ。のだ。
まず、量が多いから何から見ればよいのか困るだろう。ぼっちで人海戦術をしてみたけど、それはそれでたのしいけど、正直なところ見なくてよかったなあっていうのもまじめに読みまくっていた。

では、外さない、読んで損が絶対にないのはどこか？

それはもう着手開始しているものだよね。そのうち来る機能としてチェックしておいて損はないよね！

FEATURE-STARTEDな機能リクエスト

このリンクから飛んで、パーッと見て興味ありそうなものから読んでみるとたのしかったりするはず。はず。
なんてったって23件（2017年12月3日 現在）しかない厳選ですもの。

たとえばどんなものがあるか？

• Underline text | XDでテキストに下線を付けたい
• Artboard Overlays (sidebar / menu / popup) in interactive prototypes | プロトタイプ上のアートボードのオーバーレイ（サイドバー、メニュー、ポップアップ）
• Copy from XD & paste into Illustrator (or Photoshop) | XDでコピーして、Illustratorにペースト

え、これできないの？から、これできるのはすごいな！まで。（個人の主観です）

皆さんも、お気に入りのものを見つけて気軽にどんどんVoteしていきましょう。

Revision ControlがSTARTED入ってからずいぶん経過しているっぽいけどいつ来るかなーって思っているので、この記事がいいね！って思ったら、リンク先でVoteしてくださいませ（笑）

以上です。

なんやかんやあって作りました。
構築談をあとで書きたいなと。