--- title: ユーザー定義シェイプ date: 2022-09-15T18:25:32.000Z updated: 2026-01-08T14:51:00.652Z tags: - Higher-order_functionality url: https://baku89.com/ja/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%AE%9A%E7%BE%A9%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97 --- # ユーザー定義シェイプ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6323fe9313b8f9002062d7f2.png)\ （ より転載途中） 多くのアプリでは、直線、円、多角形といったシェイプは機能として予め組み込まれています（ビルトイン）。Illustratorのチュートリアルでは、作りたい造作のために算数の作図のように、ビルトインのシェイプを複雑奇怪に組み合わせている光景を目にすることがあります。 [Glisp](/glisp)では作りたいグラフィックに応じて好きなシェイプをユーザー定義できます。（[End-User Development](/End-User_Development)）そのパラメーターを、インスペクタ画面での数値入力だけではなく、図形上に表示されたハンドルから[Direct Manipulation](/direct-manipulation)できるようにすることで、プログラム可能性と直感性を両立しています。 ### 正多角形 扇状のスライダーから頂点数をコントロールできます。 ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6323fdfc49b51e001d7a8946.gif) ### 角丸四角形 角丸四角形のR半径と、その尖り具合をコントロールできます。 ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d50e0b2091001dcb436f.gif) R半径のハンドルはありませんが、折れ線に対して角丸エフェクトを適用したオブジェクトです。 ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d506d18860001d68b3d3.gif) ### 円弧 中心、始点、終点から円弧を描くことができます。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d54c2994700020776566.gif) ### 外接円弧 今度は3点を通る円弧を描画できます。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d560ed694a001d89a737.gif) ### 足指セパレーター カスタムシェイプを組み合わせてカスタムシェイプを作ることができます。円弧を組み合わせるとフットネイルの時に挟むアレのようなシェイプを作ることも可能です。「ジグザグ」「サイン波」はIllustratorのアピアランスにもある機能ですが、円弧からなる波は一風変わった質感を感じさせます。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d56a3c226f001ddbfef4.gif) ### Glispのロゴ 実はGlispのロゴはGlispそれ自身を用いて、円弧や半円を組み合わせてデザインされています。ちなみにこのロゴはプログラミング言語の理論的基盤をなすラムダ計算という概念になぞらえ、「λ」を意匠に取り入れています。 [wp.baku89.com](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d580dfd251001de6cf32.mp4) ### 渦巻 正多角形シェイプの扇状スライダーを応用して、渦巻をつくることもできます。 ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d59c315947001dd5718a.gif) ### グラフ図形 点群の指定距離以下のペアを線でつないだ図形です。クリック操作で頂点を追加できます。 ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d5a92048ed001fc44e42.gif) ### 路線図風ドロネー分割 グラフ図形の応用例としてこんなものを作ることもできます。ドロネー分割は、ざっくり言えば線が交差しないように点群を三角形分割する手法です。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d5e2a593010022d2c43e.gif) ### 点群オブジェクト 今までの例は、具体的な形の「大きさ」「長さ」といった単純な数値パラメーターをコントロールしていましたが、これは点の集合という少し抽象的なオブジェクトをランダム生成しています。それ自体を上記の路線図シェイプの入力に使うことで最終的にグラフィックを生成しています。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d5ed7fb47500227391d5.gif) 点群オブジェクトは「編集可能にする（Make Editable）」操作によって、一つ一つ手動調整できるようにすることができます。以下は、頂点に丸を置くと同時に、輪ゴムでくるんだかのような囲いを描画している例です。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d5f87693f9001d020e01.gif) 点群から3点を選りすぐり、外接円を描いた例です。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d60437d041001d717a4b.gif) ボロノイ分割もできます。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d61937d041001d717aea.gif) ### サーキット 円柱に紐を巻きつけながら結んだような図形を書くことができます。円の位置と半径だけではなく、時計回り/反時計回りのどちらの方向に巻きつけるかを指定できます。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d626b8e8f80023439a84.gif) Paul Nicholsen氏によるロゴなんかも、普通にIllustratorで作ろうとすると大変ですが、このユーザー定義ハンドルがあればより細かく試行錯誤を重ねることができそうです。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d635e2af5b002395ead1.gif) ### ひょうたん サーキットシェイプは円柱同士を直線で結ぶだけでしたが、曲線で結ぶとひょうたんのような形をつくることもできます。英語圏では「Blob」などと呼ばれる図形です。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d63c10a3c90023070ac2.gif) ### 吹き出し WordやExcelの「シェイプツール」で使える吹き出しツールを定義してみました。学級通信を作るのに便利かもしれません。 [wp.baku89.com](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d6497fb4750022739490.mp4) ### ニコちゃんマーク Wordにも笑顔シェイプはありますが、Glispはその「喜び度」をパラメーター制御することもできます。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d651573ce000238350e9.gif) ### 円グラフ ユーザー定義できるのは単に「形」だけではありません。グラフのようなより複合的な図も、データ入力することで作ることができます。データ・ビジュアライゼーション目的に良いかもしれません。![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d65b29947000207770e1.gif) ### 二次ベジェ デザイナーの型が見慣れている「ベジェ曲線」は、アンカーポイント間のカーブを「入りの接線」「抜きの接線」の2点で制御しています。実はこの制御点は何個に設定することもでき、それは「(制御点の数 - 1)次ベジェ」という風に呼ばれています。Webで使われるSVGという画像フォーマットでは二次ベジェを使うことができます。制御点は一つなので単純な曲線しか描けませんが、3次ベジェとはまた変わった使い心地がして面白いです。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d66559add30022a76bdb.gif) ### トランスフォーム 位置・回転・スケールといった、トランスフォーム情報そのものにもハンドルを定義することができます。 これはスケール。\ ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-6329d6701d59730023ddb0b7.gif) これは「アフィン変換」と呼ばれる、位置・回転・スケールに加えて「せん断」というひし形にひしゃげさせる変形をハンドル化したものです。 [#Higher-order\_functionality](Higher-order_functionality)