結論から言うとAdobeXDだけで三角形（正三角形）を作成するよりも、フォトショかイラレで作成してCreativeCloudライブラリで共有した方が100倍早いです。とはいえ、AdobeXDは無料で利用できるアプリケーションとなっていますが、PhotoshopやIllustratorは体験版の利用期間が終了してしまうと有料となるためどうしてもAdobeXDだけで作成したいなんてケースも稀にあるかもしれません。
そんな時のためにAdobeXDだけで三角形を作成する方法をご紹介しておこうと思います。
少しでも作業を短略するためにショートカットキーはできるだけ把握しておきましょう。
https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html
AdobeXDで不等辺三角形を作成する場合
こちらの作成は簡単で「ペンツール」利用して適当に三点をクリックしてパスを閉じましょう。
AdobeXDで二等辺三角形を作成する場合
長方形ツールを使いシフトキーを押しながらドラッグで正方形を描画します。四角形の頂点をダブルクリックして編集モードにした上でデリートキーを押すと二等辺三角形の完成です。
頂点編集モードが入りづらいんですが角の内側をダブルクリックで選択できます。
AdobeXDで正三角形を作成する場合
この正三角形を作成する場合が、とても面倒で通常であれば前述の二等辺三角形をベースにパスを操作して終わるのですが、パス操作できるものの動作がよくわからずコマンドキーを押しながらクリックで動くもののグリッドへの吸着やスマートガイドも表示されず。
Google先生に頼った結果、ヒットしたkotar0さんのQiitaを参考にさせてもらいました。
適当に正方形を作成
先ほどと同様に適当に正方形を描きます。
楕円形ツールで左下、右下の頂点を基点に二つの円を作成
※この時にalt+シフトキーを押しながらドラッグで基点からの描画になります。
また、作成した二つの円をコマンドキーとGでグループ化しておきましょう。
円の交点に正方形を作成
グループ化した円と交差に作成した正方形を選択して交差を選択
最初に作成した正方形の左上の頂点を編集して三角形へ変更
XYの数値把握用に線を引きXYの数値を記憶
三角形の右上の頂点をダブルクリックで選択してX188、Y446.5を入力
不要なガイドを作成して完成！
不等辺三角形であれば、特に問題はないんですが正三角形が面倒なので効率を考えてもフォトショとイラレでの作成をオススメいたします。
Adobe XD CCが3月のアップデートでさらに便利に！
