はじめに
アプリなどのプロトタイプを作るのに便利なAdobeXDですが、使える基本図形が四角形と円しかないため、正三角形を作ろうと思うと案外苦労したりします。
そこで、この記事では基本図形を組み合わせて正三角形を作る方法を解説します。
この記事を書いた発端としては、業務でよくUIのデザインを考えることがあり、その際に三角形を作る方法をググってもあまりパッとした情報がなかったためです。
もっといい方法もあると思います。知っていたら教えてください。
illustratorで描けばいいって？ XDと違って無料期間7日間しかないじゃないですか
なんでもいいから三角形をつくる
いきなりですが、正三角形ではなく、ただの三角形を作る方法を先に示します。
これは簡単です。
まずは画面左の長方形ツールを選んで（キーボードのRでも選べます）、
おもむろに四角形を描き、
選択範囲ツールに切り替え（キーボードのVでも切り替えられます）、四角形をダブルクリック。
そうするとパス（図形の頂点）を選択できる状態になります。
どこでもいいので、パスを1つ選んだ状態でキーボードのdeleteを押すと、三角形の出来上がり！
あとはパスをつかんでグリグリすれば好きな三角形がつくれますね。
正三角形をつくる
正三角形を作りたい場合、上記の方法だと正確な正三角形はつくれません（多分）
そこで、角度を変えた複数の正方形と交差ツールを使ってつくります。
まず正方形をつくります。
正方形にするにはshiftを押しながらです。
コピーして3つ同じものを用意します。
1つはそのままに、残り２つをそれぞれ60°と120°に回転させます。
その３つを下の写真のように重ねます。
ピクセル単位で頂点同士が一致するように拡大しなが十字キーを使って頑張ってください。
重ねられたら、赤ワクで示した交差ツールをクリックすれば、
正三角形の完成です。やったー！
一度作ってしまえば、基本図形と同じように拡大縮小や回転ができます。
正多角形をつくる
同じ要領で好きな正多角形を作ることができます。
例えば正五角形であれば下の写真のように重ねて、合体ツールを使います。
ちなみに正五角形の場合は360/5=72なので72°ずつずらした正方形が５つ必要ですね。
六角形であればこう
弱点
360の約数の正多角形しかつくれません。
少数点以下の角度で指定すればで限りなく近いものは作れるとおもますが。
正三角形はなぜ合体ツールでつくれないのか
面積の関係。
正五角形以上は正方形より面積が広いので、その図形内に基本の正方形が収まります。
そのため、外枠を当てはめていき、合体ツールで整形できます。
しかし、三角形は正方形よりも面積が狭いのでどう頑張っても外枠ではつくれないのです。
よって内枠で交差ツールを使うしかありません。
おわりに
考えてみたら正三角形はまだしも、アプリのUIで正五角形使うことなんてほぼありませんね。