久しぶりのSketchに関するエントリーです。今回はSketchで円グラフやドーナツグラフなどのグラフ図形を作成してみます。アプリケーションやダッシュボードなどのデザインをする時などによく登場する図形なのですが、Illustratorなどを使うと簡単に作成できるのですが、毎回そのために別のアプリケーションを立ち上げるのは面倒、、ということもあると思います。簡単なグラフ図形であれば十分Sketchで作成できますので、画面デザインをしながらそのまま作成してきましょう。   まずは適当なサイズで円の図形を描きます。この時に注意しておくのは最終的に、この2倍のサイズのグラフが出来上がるという点です。少し小さめに作成しておくといいでしょう。塗りは無しに設定しておき、線だけ残しておきます。   続いて図形の線幅を作成したサイズと同じにします。線の位置は「center」に設定しておきます。   そのまま「Edit」でパスを変形できるようにしておきます。右側のアピアランスパネルが変わります。   アピアランスパネルの中の「Open Path」をクリックして、パスが繋がらないように変更します。そうすると円形の一部分が開いたような形になります。   その状態のままパスのライン状に新たなアンカーポイントを追加します。この追加した位置がグラフの開く幅になります。グラフのデータに合わせて任意の場所に設定します。   余分なアンカーポイントを追加したところまで削除します。扇型のような図形が出来上がりました。目的とするグラフの開き幅ができれば、パスの編集を終了します。   このままではオープンパスの形になるので、アウトライン化してベクター図形にしておきます。   現在は中央下部が基準となっているので、必要に応じて回転させます。回転の中心軸が扇型の中央になるよう移動させます。   中央上部から開始するように回転させます。これでグラフっぽい見た目になってきました。   これを繰り返して重ねることで円グラフのベースが出来上がりました。必要に合わせて色を変更してみます。   ちなみに、図形をそのままオープンパス化すると、扇型の中心角が270度になってしまいます。それより広げたい場合にはオープンパス化する前にアンカーポイントを追加し、その状態でオープンパス化することで270度より開いた扇型を作成することができます。   この方法でアレンジするとこのようなデザインのグラフが作成できました。円グラフだけでなく中央部分をマスクするとドーナツグラフも作成できますね。   今回はSketchを使って円グラフやドーナツグラフを作成してみました。UIデザインツールであるSketchではアプリケーションのダッシュボードのデザイン作成にもよく使われるアプリケーションになります。そんな時にそのままサッとグラフを描けるととても楽ですよね、Sketchをお使いの方はぜひお試しください。   （参考記事） ・Sketchでオブジェクトを回転させて花模様の図形を描いてみる ・Sketchで放射状に広がる旭日マークを描いてみる ・Sketchで作成するリボンデザインのバリエーション ・Sketchで中華風デザインに使える雷文模様を描いてみる ・Sketchで陰陽太極図のマークを描いてみる ・Sketchで和風デザインに使えるヱ霞文様を描いてみる ・Sketchで手書き風のいびつな形の円を描いてみる