Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Report

コンパスと定規を用いる作図手順の理解およびその試行を支援するツールの開発
齊藤仁美 1

加藤直樹 2

概要：全国学力学習状況調査の結果から，基本的な作図の方法の理解や作図方法の選択に課題があることが読み取れる．また，学習指導要領に明記されている，図形の性質に基づいた作図を行えるようにするための指導も十分に行われていない．そこで本稿では，学習者に文房具を用いた基本的な作図方法を理解させたり，図形の性質に基づいて作図する方法を考えさせたりするため，作図時に文房具の動きをアニメーション表示すると共に，作図のヒントになる
補助線や手順自体を表示する機能を有した作図ツールを提案する．
キーワード：作図，中学校，数学，ツール開発

Development of Tools to Support Understanding and Trial ofDrawing Procedures using Compasses and Rulers
HITOMI SAITO†1
1. はじめに
1.1 研究背景

NAOKI KATO†2
るのではなく，図形の対称性や図形を決定する要素に着目して作図の方法を見いだし，その方法を図形の性質や関係に基づいて説明する活動を大切にする」とされており，作

平成 28 年度に実施された全国学力・学習状況調査[1]の図の方法をそのまま覚えさせるための指導ではなく，図形

中学校数学 A において，「垂線の方法について理解していの性質から作図の方法を考えるようにするための指導が求るかどうかをみる」ことを趣旨とし，図と文章で説明されめられている．たとえば線分の垂直二等分線を作図する場

た作図の方法を読み取り適切な作図を選択する問題が出題

合，「対角線が垂直に交わる」「対角線がそれぞれの中点でされた．この問題における正答への反応率は 31.1％と低い交わる」という性質を持つ菱形を用いて作図する方法を見

値を示し，「垂線の作図の方法の理解に課題がある」とされいだしていく（図 2）．以下，線分の垂直二等分線，角の二ている．見た目の似ている「線分の垂直二等分線」という

等分線，垂線をまとめて「基本三直線」とする．

選択肢への反応率が 31.9％と，正答に対する反応率よりも河端・松尾は，中学校第 1 学年，第 2 学年の生徒計 330

高くなっており，基本的な作図の方法の理解に課題がある名に対し，コンパスと定規を用いて作図された図を見て等ことが読み取れる．
また，平成 30 年度に実施された同調査[2]においては，「折り目の線と角の二等分線の関係を理解しているかどうかをみる」ことを趣旨とし，紙の折り目を作図する方法を選択する問題が出題された（図 1）．この問題における正答への反応率は 55.6％であり，およそ半数の生徒しか正答することができていなかった．この結果から，作図する線をイメージすること，また作図の方法を適切に選択すること

図 1に課題があることが読み取れる．

折り目の線のイメージ図

コンパスと定規を用いる作図は，中学校第 1 学年数学科で指導する．学習指導要領[3]では，第 2 章各教科・第 3 節
数学・第 2 各学年の目標及び内容〔第 1 学年〕・2 内容・B
図形（1）において，ア（ア）「角の二等分線，線分の垂直二等分線，垂線などの基本的な作図の方法を理解すること」
およびイ（ア）「図形の性質に着目し，基本的な作図の方法を考察し表現すること」と明記されている．この点について学習指導要領解説[4]では，「作図の方法を一方的に与えⓒ2024 Information Processing Society of Japan

図 2

菱形の性質を用いて線分の垂直二等分線の作図を行うイメージ図

1Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Report
しい長さの線分を選択したり，作図手順の理由を説明した

2.2 既製品りする問題を出題した[5]．その結果，「作図手順の理由を考

作 図 を 行 う た め の 既 存 の ツ ー ル と し て ，「 Geometricえるという経験が，生徒の印象に残るように指導がなされConstructor[7]」や「GeoGebra[8]」が挙げられる．これらのていないと考えられる」としている．ここから，作図の方

ツールでは，点を自由にプロットして直線や円を描画した法を覚えたり定着させたりすることに重点が置かれ，作図

り，直線の長さを表示したりすることができる．しかしコの方法の根拠を考える機会が少ないことが読み取れる．実

ンパスと定規を用いた作図の際，学習者は基本的に図に表際の教育現場では，図形の性質に着目した作図が十分に行示されている点や線のみを用いるため，自由に点をプロッ

われていない場合があるといえる．

トできる機能が適切でない場合がある．

さらに，文房具を用いて紙面上に作図する場合，描画しまた，Geometric Constructor や GeoGebra には，半径の長た作図を消す際に，誤って既に正しく描画されている作図さを数値で入力して円を描画する機能や，長さを測定するまで消してしまうことがある．コンパスの開き具合が変わ機能がある．これに対し学習指導要領解説では，「作図とは，ったり針の先がずれたりしてしまうなど，作図の問題にお定規とコンパスだけを用いて，一定の条件を満たす図形をいて本質的ではないコンパスの操作に手間取ってしまう学

つくることを意味し，定規は 2 点を通る直線をひく道具と習者もいる．これらの学習者は，文房具の使い方に気を払して使い，コンパスは円をかいたり長さを写し取ったりすいながら作図の方法を考える必要があり，作図に対する意る道具として使う」と明記されており，長さを数値で指定欲が低下したり，学習指導要領に示されている内容が十分できる機能は実際の作図場面に即していない．

に身につかなかったりする可能性がある．
1.2 本研究の目的

さらに，インターネット上には基本三直線の作図方法を学習できる動画が数多く存在しているが，教科書やワーク

研究背景に記した課題を解決するためには，作図によっなどの手元にある問題とは対応しておらず，手元の問題のて描画される線や，作図を行うための性質を持つ図形を意

図のどこにどのような線が描画されるのかわかりにくい．

識しながら作図を行うために，それらを視覚的に示すツー

学習者が自分で点や線を指定して作図できるようにする必ルの活用が有効である．また，既に描画した図形要素に影要があるといえる．

響を与えずに，新しく図形要素を描画したり削除したりす

2.3 先行研究ることができるツールが，文房具の使い方に気を払わず作図できるという点で有効である．

風間らが提案した作図システム[9]では，タブレット端末の画面上に表示したコンパス，定規，消しゴム，図形のテ

そこで本稿では，学習者に基本的な作図の方法を理解さンプレートといった文房具メタファを動かしながら作図でせること，作図したい線をイメージする能力を養うこと，きる．マウスではなくペンによる入力を可能にしたことで，作図を行うための性質を持つ図形を視覚的に理解させるこ

ユーザーが紙面上で作図するのと同じように画面上の操作とを目標とした，コンピュータの画面上で作図を行える作を行うことができる．また加藤らはこのシステムに対し，

図方法学習ツールを提案し，その設計，開発，評価についシステム内の計算機がユーザーの意図を推測し，自動的にて述べる．

作図を調整する機能を提案した[10]．

2. 既製品と先行研究
2.1 コンピュータでの作図の有用性

このシステムを受けて伊藤らは，画面上に表示された三角定規や円定規を用いることで，実際の作図と同じように両手を使った操作ができるツールを提案した[11]．

辻󠄀は，コンピュータ環境下における作図活動の効果を検

風間らのシステム内の文房具メタファのうち，図形のテ討することを目的とし，中学校第 3 学年の生徒 8 名を，図ンプレートは「ユーザが任意の図形を登録し，それを呼び

形学習ソフト Cabri-Geometry を用いてコンピュータ環境下出すことにより描画するもの」とされており，「移動や拡大で図形問題を解く生徒と，鉛筆，コンパス，定規を用いて縮小，回転することにより，テンプレートを調整し描画す

紙面上で図形問題を解く生徒に分け，その様子および問題る」ことが可能になっている．しかし実際の作図場面におへの解答を比較した[6]．ここで辻󠄀は「生徒が問題解決においては，図形のテンプレートを用いて作図すること，図形

いて，視覚的に正しいように見える要素に左右されることの大きさを自由に変えることはできない．加藤らが提案しが少なくなる可能性を，コンピュータ環境が持つと考えらた機能は，既に描画されている図形上の点や接線に合わせれる」としており，コンピュータでの作図活動が，一見すて文房具メタファを調整することを可能にしているが，こると等しい長さに見える線分や等しい大きさであるようにれも実際の作図場面において学習者が行うことはできない．

見える角などに左右されたまま問題解決を進めることを抑伊藤らのツールでは，コンパスが扱えず，描画する線の制するという可能性を示唆している．

ⓒ2024 Information Processing Society of Japan

軌跡や文房具の動きを見ることができない．また，線分の2Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Report
垂直二等分線，角の二等分線，垂線の作図の方法を見るこめ，基本三直線の作図手順を開始する前に，性質を持つ図とができず，基本三直線の作図方法の理解には繋がりにく形を補助線として表示する機能を提供する（図 4）．この機い．

能によって，表示された図形の性質を用いて作図するため

3. 作図の学習を支援する機能の提案
3.1 基本コンセプト
作図問題が正答できない要因は，基本的な作図の方法の理解が十分でない，作図する線をイメージできない，図形の作図方法を考える機会を与える．なお，学習者の理解度に合わせるために，「補助線あり」モードと「補助線なし」
モードの二つのモードを用意し，それらを切り替える機能を提供する．
3.3 基本三直線の補助線と作図手順の設計の性質を用いた作図が行えないといった知識・技能の不足

本節では，作図する図形要素に合わせて補助線を表示し，である．また，文房具の操作が不慣れなことにより，作図それを見てユーザーが作図方法を考え，その後ボタンを押の学習に対する意欲が低下することで，学習内容が十分にして作図手順をすることで手順を確認できるようにするた

身につかないという課題もある．

めに，作図手順表示機能で表示する補助線と，手順の設計

そこで本稿では，これらの課題を解消するために，コン
ピュータの画面上で作図を行う際に，線分，半直線（直線の一部分で，1 点を端として一方にのみ延びている線），直について述べる．
3.3.1 線分の垂直二等分線を作図するための補助線と作図
手順の設計

線，円弧（これらを線要素と呼ぶ）を描く指示を行うと，線分の垂直二等分線は，二等分する線分上の 2 点から等

仮想的な文房具（以下，文房具メタファとする）を用いて距離にある 2 点を結ぶことで描ける．その 2 点を描くため線要素を描く様子を表示する機能と，作図のヒントとなるには，コンパスを用いて線分上の 2 点を中心とした同半径ように性質を持つ図形を表す補助線を表示すると共に，作の円弧を描き，その交点を作る．

図の過程を再現して表示する機能を提案する．線要素を描

この交点を作る方法をイメージしてもらうために，線分く際にコンピュータ上で文房具メタファがそれらを描くよの垂直二等分線を作図するための補助線は，線分の端点 2うに動いたり，作図方法を表示したりすることで，コンパ点を向かい合う頂点とし，2 点の距離の 3/5 倍の長さを一スや定規を使った基本的な作図の方法の学習ができる．ま

辺の長さとする菱形をなす四つの線分とする（図 5）．

た，作図のヒントとなる補助線の表示や，その補助線をイ

作図手順は，上記の手順に従って，まず，指定した線分

メージしながら作図する仕方を見られるようにすることにの端点 2 点のうち一方の点を中心，2 点の距離の 3/5 倍をより，作図によって描かれる線が通る点や作図する線をイ半径とし，中心角の大きさを 120 度とする円弧を，線分をメージする能力を養うこと，作図を行うための性質を持つ

跨ぐ（指定した線分上にない菱形の 2 頂点を通る）ように図形を視覚的に理解させることが達成できる．これらによコンパスを用いて描くものとする（図 6-a）．

って，作図の学習に対する意欲を高め，学習内容の定着に次に，他方の点を中心とし，先と同じ半径とする中心角

繋がる効果が期待できる．

120 度の円弧を，直前に描いた円弧と交差する（線分上に3.2 作図学習を支援する機能の設計ない菱形の 2 頂点を通る）ようにコンパスを用いて描くも3.2.1 図形描画機能のとする（図 6-b）．

画面上に作図を行うための基本的な描画機能として，点最後に，描いた円弧の 2 交点を結ぶ直線を，定規と鉛筆と線要素（これらを図形要素と呼ぶ）を描く機能を用意すを用いて描くものとする（図 6-c）．

る．線要素は描いた点を指定することで，その点を基にし3.3.2 垂線を作図するための補助線と作図手順の設計て描けるようにする．
3.2.2 文房具のアニメーション表示機能

垂線を作図するための補助線や作図手順は，実際の学校現場での指導方法に合わせ，指定した点が指定した線上に文房具を用いた線要素の描き方を見せるために，それらあるかどうかで 2 通りに分ける（図 7）．なお，指定した点の図形要素を描く際の文房具の動きをアニメーションで表と線の距離が十分小さい場合は，描画する補助線や表示す示する機能を提供する（図 3）．

る文房具メタファが小さくなり見づらくなるため，指定しここで「文房具」とは，コンパス，定規，鉛筆を指す．
線要素の描画に合わせて文房具を動かし，それぞれの図を描くときにどのように文房具を動かすのかを見せる．
3.2.3 作図手順表示機能
基本三直線の作図の仕方を学ぶために，作図を手順ごとに自動で行う機能を提供する．

た点が指定した線上にあるとみなす．
(1) 指定した点が指定した線上にない場合
垂線は，垂直二等分線と同様に，指定した線分（または半直線）上の 2 点から等距離にある 2 頂点を結ぶことで描ける．垂直二等分線の場合との違いは，その頂点の一方が指定されていること，線分上の 2 点が指定されていないこ

また，作図を行うための性質を持つ図形を理解させるたⓒ2024 Information Processing Society of Japan3

Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Reportを通るように）コンパスを用いて描くものとする（図 9-b）．
次に，前の手順で使わなかった他方の交点を中心とする円弧を，2 番目の手順で描いた円弧と交差するように同様に描くものとする（図 9-c）．
最後に，描いた円弧の交点と指定した点を結ぶ直線を，定規と鉛筆を用いて描くものとする（図 9-d）．
図 3

アニメーション表示イメージ図(2) 指定した点が指定した線上にある場合指定した点が指定した線上にある場合は，(1)のようにすでに決まった頂点が存在しない．その場合の垂線は，指定した点と，指定した点と等距離にある指定された線上の点を向かい合う 2 頂点とする菱形の，他の 1 頂点を結ぶことで描ける．この頂点を描くためには，指定した点を中心とした円弧を描き，その円弧と指定した線との交点を 2 点作
った後，それらの点を中心とした 2 本の円弧を描き，その図 4

補助線表示イメージ図

交点を作る．
この交点を作る方法をイメージしてもらうために，指定した点から画面の横幅の長さの 3/20 倍の長さの距離にある線分上の 2 点と，その 2 点から画面の横幅の長さの 1/4倍の長さの距離にある 2 点を頂点とする菱形をなす四つの線分を，垂線を作図するための補助線とする（図 10）．
作図手順は，上記の手順に従って，まず指定した点を中

図 5線分の垂直二等分線の補助線イメージ図

心，中心角の大きさを 216 度とする円弧を，指定した線分（または半直線）と 2 点（線上にある菱形の 2 頂点）で交差するようにコンパスを用いて描くものとする（図 11-a）．
次に，前の手順で描いた円弧と指定した線分の交点のう
ち一方を中心，中心角の大きさを 15 度，半径を画面の横幅の長さの 1/4 とする円弧を，交点の真ん中辺り（指定した線上にない菱形の頂点）を通るようにコンパスを用いて描

図 6

線分の垂直二等分線の作図イメージ図

くものとする（図 11-b）．
次に，前の手順で使わなかった他方の交点を中心とするとである．指定されていない方の頂点を描くために，コンパスを用いて，指定した点を中心とし，指定した線分と交わる円弧を描き，その円弧と線分との 2 交点を作った後，それらの点を中心とした 2 本の円弧を線分で分けられる指定した頂点とは反対側の領域に描き，その交点を作る．
この交点を作る方法をイメージしてもらうために，指定した点と，その点から線分までの距離の 6/5 倍の距離にある線分上の 2 点を頂点とする菱形をなす四つの線分を，垂線を作図するための補助線とする（図 8）．
作図手順は，上記の手順に従って，まず指定した点を中心，中心角の大きさを 90 度とする円弧を，指定した線分と2 点（線上にある菱形の 2 頂点）で交差するようにコンパスを用いて描くものとする（図 9-a）．
次に，前の手順で描いた円弧と指定した線分の交点のう
ち一方を中心とし，中心角の大きさを 15 度，前の手順で描いた円弧と同じ半径の円弧を，指定した線分が分ける指定
した点がない領域に，（指定した点とは反対側の菱形の頂点ⓒ2024 Information Processing Society of Japan

円弧を，前の手順で描いた円弧に交差するように同様に描くものとする（図 11-c）．
最後に，描いた円弧の交点と指定した点を結ぶ直線を，定規を用いて描くものとする（図 11-d）．
3.3.3 角の二等分線を作図するための補助線と作図手順の設計
角の二等分線は，指定した 2 線分がなす角のうち角度が180 度以下の角を二等分する線として作図する．
なお，角の二等分線を作図するための補助線や表示する
作図手順は，実際の学校現場での指導方法に合わせ，二等分する角の大きさが 90 度以下の場合と 90 度より大きい場
合の 2 通りに分ける．
(1) 二等分する角の大きさが 90 度以下の場合
角の二等分線は，指定した 2 線分（または半直線，直線）から等距離にある点と 2 線分の交点を結ぶことで描ける．
前者の点を描くためには，コンパスを用いて 2 線分の交点

4Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Report

るときにクリックした位置までが短い方の距離にある 2 線
分上の 2 点を向かい合う 2 頂点とする菱形をなす四つの線
分を，角の二等分線を作図するための補助線とする（図 12）．
作図手順は，上記の手順に従って，まず指定した 2 線分の交点を中心，その交点から線分を指定するときにクリッ
クした位置までが短い方の距離を半径とし，二等分する角
図 7指定した点と指定した線の関係の角度に 30 度を加えた角度を中心角の大きさとする円弧を，（線分上にある菱形の向かい合う 2 頂点を通るように）コンパスを用いて描くものとする（図 13-a）．
次に，指定した 2 線分と先の手順で描いた円弧との交点（2 線分上にある菱形の向かい合う 2 頂点）のうち一方の頂点を中心，先に描いた円弧と同じ長さを半径とし，中心角の大きさを 20 度とする円弧を，（2 線分上にない菱形の

図 8指定した点が指定した線上にない場合の垂線の補助線イメージ図

頂点を通るように）コンパスを用いて描くものとする（図13-b）．
次に，前の手順で使わなかった他方の交点を中心とし，先と同じ半径とする中心角 20 度の円弧を，直前に描いた円弧と交差する（2 線分上にない菱形の頂点を通る）ように同様に描くものとする（図 13-c）．
最後に，指定した 2 線分の交点を始点とし，前の 2 手順で描いた円弧の交点を通る直線を，定規と鉛筆を用いて描くものとする（図 13-d）．

図 9

指定した点が指定した線上にない場合の垂線の作図イメージ図(2) 二等分する角の大きさが 90 度より大きい場合
角の二等分線は，二等分する角の大きさが 90 度より大きい場合も，90 度以下の場合と同様に描ける．しかし，90
度より大きい場合，補助線となる菱形が潰れて，二等分する半直線を引くときにガイドとなる 2 点が近くなり，半直線が描きにくくなるため，実際の学校現場では菱形の代わりに凧形の性質を用いている．そこで，本ツールでも凧形をイメージしながら作図を進めてもらえるようにする．

図 10

指定した点が指定した線上にある場合の垂線の補助線イメージ図

角の二等分線を作図するための補助線は，先の菱形における 2 線分上にない頂点と 2 線分上にある頂点との距離を，2 線分の交点と 2 線分上の頂点との距離の 5/3 倍とした凧
形をなす四つの線分とする（図 14）．
作図手順は，90 度以下の場合の 2 番目，3 番目の手順において描く円弧の半径を，1 番目の手順で描く円弧の半径の 5/3 倍に変えたものとする（図 15 エラー! 参照元が見つかりません。エラー! 参照元が見つかりません。）．

図 11

指定した点が指定した線上にある場合の垂線の作図イメージ図

4. 作図学習支援ツールの設計と試作
4.1 想定環境を中心とした円弧を描き，その円弧と 2 線分との交点を 2

本ツールでは，授業内で作図の問題の解法を学級全体で点作った後，それらの 2 点を中心とした 2 本の円弧を描き，確認したり，学習者が学校や家庭で作図の問題を解いたりその交点を作る．

する際に使用することを想定しており，対象者は中学校のこの交点を作る方法をイメージしてもらうために，指定

生徒とその教員とする．実行環境は，Windows 10 またはした 2 線分の交点を 1 頂点とし，その点から線分を指定す

Windows 11 を OS とする，ペンまたはタッチ入力が可能なスレート型パーソナルコンピュータ，もしくは，マウスでⓒ2024 Information Processing Society of Japan5

Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Report
4.2.2 Undo 機能，Redo 機能

既に描画した作図に影響を与えずに，新しく作図を描画したり作図を消したりできるようにするため，1 つ前の状態に戻す Undo 機能，1 つ先の状態にする Redo 機能を提供する．
作図によって描画される線がイメージできていない学習
図 12

90 度以下の角の二等分線の補助線イメージ図者にとって，試行による気づきや学びは特に重要である．
作図を 1 つ試行した後，「この作図では思い通りの線を描くことができなそうだ」と思ったときは Undo 機能，「さっ
き消した作図がやっぱり使えそうだ」と思ったときは Redo機能を使うことで，学習者が考えている通りの作図，もしくは正答の作図に近づけていくことができる．
4.3 操作インタフェースの設計
4.3.1 画面構成

図 13

90 度以下の角の二等分線の作図イメージ図

ツールの画面構成は，点や線を描画する「描画エリア」，
図形要素の描画をする作図ボタンを表示する「作図ボタン
エリア」，補助線ありとなしのモードを切り替えるボタンを表示する「モード切替エリア」，ツールからの指示を表示する「指示エリア」，画像の拡大縮小ボタン，Undo 機能を有する戻るボタン，Redo 機能を有する進むボタン，描いた図を全て消すためのクリアボタンを表示する「描画変更エリ

図 14

90 度より大きい角の二等分線の補助線イメージ図ア」で構成される（図 17）．
4.3.2 図形要素の描画(1) 点の描画
描画エリア内の図形要素がない箇所をクリックすると，クリックした場所に点を描くことができるようにする．ボ
タンを押すことなく描けるようにした理由は，どの作図を行うにも必要な図形要素であるため，描画する回数が多いからである．もっとも新しく描画した点は，強調してわか

図 15

90 度より大きい角の二等分線の作図イメージ図

りやすくするため，水色の円で囲む効果を表示する．
(2) 線分の描画

操作するノートブック型パーソナルコンピュータまたはデ

線分を描く操作は，線分ボタンをクリックした後，描画

スクトップ型コンピュータとする．

エリア内に描かれている結びたい二つの点をクリックして4.2 機能設計

指定するものとする．二つの位置ではなく既に描かれた点

前章で設計した機能に加え本ツールに用意する作図学習を指定するようにしたのは，実際の作図場面において，定を支援する機能を次に述べる．

規は 2 点を通る直線をひくための道具として使うと定めら

4.2.1 画像の読み込み・表示機能れているためである．指定が終わると，最初に指定した点

画面上に問題の図を描く際には，紙に書かれた問題の図から後に指定した点に向かう線分を，定規と鉛筆を用いてなどを取り込めると便利である．そこで，画像を読み込ん描くアニメーションを表示する（図 18）．点を選択した際で画面上に表示する機能を提供する．

には，選択した点を強調してわかりやすくするため，点を読み込んだ画像は基本描画機能で描かれる図や，後に記
すアニメーション表示機能による文房具メタファが見にく

ピンク色の円で囲む効果を表示する（図 19）．
(3) 半直線の描画

くならないように，それらの図の下側に薄く表示する（図

半直線を描く操作は，半直線ボタンをクリックし，描画

16）．また，ユーザーが画像に合わせて作図しやすいように

エリア内の結びたい点を 2 点クリックして指定するものとするため，読み込んだ画像の大きさを変えられるようにすする．指定が終わると，最初に指定した点を始点とし，後る．

に指定した点を通る半直線を，定規と鉛筆を用いて描くアⓒ2024 Information Processing Society of Japan

6

Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Reportに指定した点を通る円を，コンパスを用いて描くアニメー
ションを表示する（図 22）．
点を 1 点指定する方法は，円ボタンを 2 回クリックし，
描画エリアに描かれた点をクリックして指定するものとす
る．指定が終わると，指定した点を中心とし，直前に描画した円の半径と同じ長さを半径とする円を，コンパスを用
図 16

画像表示機能のイメージ図

いて描くアニメーションを表示する．点を 1 点指定する方法を用意したのは，実際の作図場面において，コンパスを同じ長さに開いたまま繰り返し作図することがあるためである（図 23）．
点を選択した際には，選択した点を強調してわかりやすくするため，点をピンク色の円で囲む効果を表示する．
4.3.3 基本三直線の描画
基本三直線の作図のヒントを示す補助線のための性質を

図 17

ツールの構成持つ図形を描画し，それに合わせて文房具メタファを用いて描くアニメーションを表示する．なお，補助線なしモードのときは菱形や凧形の表示は行わず，1 本目の線の描画と文房具のアニメーションを開始する．
(1) 線分の垂直二等分線の描画
線分の垂直二等分線を描く操作は，垂直二等分線ボタン
をクリックし，描画エリア内の線分をクリックして指定す

図 18

線分描画のイメージ図

ニメーションを表示する．点を選択した際には，選択された点を強調してわかりやすくするため，点をピンク色の円で囲む効果を表示する（図 20）(4) 直線の描画
直線を描く操作は，点を指定する方法と，線分（または半直線）を指定する方法の 2 通り用意する．
点を指定する方法は，直線ボタンをクリックし，描画エリアに描かれた結びたい二つの点をクリックして指定するものとする．指定が終わると，指定した 2 点を通る直線を，定規と鉛筆を用いて画面の端からもう一方の端まで描くア
ニメーションを表示する．
線分を指定する方法は，直線ボタンをクリックし，描画
エリア内に描かれた線分をクリックして指定するものとす
る．指定が終わると，指定した線分と重なる画面の端からもう一方の端まで延長した直線を描くアニメーションを表示する．
（図 21）．点を選択した際には，選択した点を強調
してわかりやすくするため，点をピンク色の円で囲む効果を表示する．
(5) 円の描画
円を描く操作は，点を 2 点指定する方法と，1 点指定する方法の 2 通り用意する．
点を 2 点指定する方法は，円ボタンをクリックし，描画
エリアに描かれた二つの点をクリックして指定するものとする．指定が終わると，最初に指定した点を中心とし，後ⓒ2024 Information Processing Society of Japanるものとする．点を選択した際には，選択した点を強調してわかりやすくするため，点をピンク色の円で囲む効果を表示する．指定が終わると，補助線をオレンジ色の線で表示する．その後進むボタンをクリックする度に，作図手順を順にアニメーションで表示する．次に描く円弧や直線がある場合はその線を描くアニメーションを続けて表示する．
(2) 垂線の描画
垂線を描く操作は，垂線ボタンをクリックし，描画エリ
ア内の線分，半直線，直線のうちいずれか 1 本と，点を 1
点クリックして指定するものとする．点を選択した際には，選択した点を強調してわかりやすくするため，点をピンク色の円で囲む効果を表示する．また，線を選択した際には，選択した線を強調してわかりやすくするため，線のまわりをピンク色で囲む効果を表示する．指定が終わると，補助線をオレンジ色の線で表示する．その後進むボタンをクリックする度に，作図手順を順にアニメーションで表示する．
また，アニメーションを表示している途中で進むボタンを押すと，そのアニメーションを止めて描画中の線を即座に最後まで描画する．次に描く円弧や直線がある場合はその線を描くアニメーションを続けて表示する．
(3) 角の二等分線の描画
角の二等分線を描く操作は，角の二等分線ボタンをクリックし，描画エリア内の線分，半直線，直線のうちいずれ
か 2 本をクリックして指定するものとする．線を選択した
際には，選択した線を強調してわかりやすくするため，線7

Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Report
4.3.4 その他の機能の操作(1) Undo 操作・Redo 操作

描画エリア内の図形要素を 1 つ前の状態に戻す Undo 操
作は，戻るボタンをクリックすることで行う．また，描画
エリア内の図形要素を 1 つ先の状態に進める Redo 操作は，
進むボタンをクリックすることで行う．
図 19

図形要素描画のための点を選択する際のイメージ図(2) 画像の選択・表示・削除
画像を表示する操作は，画像ボタンをクリックすることで行い，特定のフォルダに存在する画像データファイルのサムネイルとファイル名を表示した，画像データファイル
選択画面を表示する．その後，読み込みたい画像データフ
ァイルのサムネイルの上でダブルクリック操作を行うか，クリックをして選択状態にした後に「開く」ボタンをクリックすることで行う．
表示している画像を削除する際は，画像ボタンを押すこ

図 20

半直線描画のイメージ図とで行う．
描画エリア内に表示している画像を拡大する操作は，画像拡大ボタンをクリックすることで行う．また，画像を縮小する操作は，画像縮小ボタンをクリックすることで行う．
4.4 試作
本ツールは，Visual Studio Code を用いて開発を行った．
実装にあたっては Python を使用し，Tkinter ライブラリ

図 21

直線描画のイメージ図によって GUI の作成，Matplotlib ライブラリによって図形
や文房具メタファの表示，PyInstaller ライブラリによってEXE ファイル化を行った．

5. 評価実験
5.1 概要提案した本ツールの有用性を検証するために，評価実験
図 22

点を 2 点指定する場合の円描画のイメージ図を行った．被験者は公立の中学校に勤務する教師 3 名と，公立の中学校に通う第 1 学年の生徒 89 名である．第 1 学
年の生徒を選んだ理由は，第 1 学年の数学科で作図の学習を行うためである．調査は 2023 年 12 月に行った．
5.2 教師への調査
5.2.1 方法
被験者の教師 3 名に対し，ツールの操作方法を説明した
後，ノートパソコンを用いてツールを使用してもらった，

図 23

点を 1 点指定する場合の円描画のイメージ図

また，1 名には授業内でツールを使用してもらい，その教のまわりをピンク色で囲む効果を表示する．指定が終わる

師ともう 1 名には，筆者がツールを用いて行った授業の様と，補助線をオレンジ色の線で表示する．その後進むボタ

子を見てもらった．

ンをクリックする度に，作図手順を順にアニメーションでその後，アンケートによる調査を実施した．ツールの有表示する．また，アニメーションを表示している途中で進用性についての選択式の質問には，「とてもそう思う」を 2

むボタンを押すと，そのアニメーションを止めて描画中の点，「そう思う」を 1 点，
「どちらでもない」を 0 点，
「そう

線を即座に最後まで描画する．次に描く円弧や直線がある

思わない」を-1 点，「まったくそう思わない」を-2 点とした場合はその線を描くアニメーションを続けて表示する．

点数で回答してもらった．また，ツールの機能や操作などについて，自由記述で回答してもらった．

ⓒ2024 Information Processing Society of Japan

8

Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Report

図 24

教師への選択式アンケート調査結果

5.2.2 結果

その後，アンケートによる調査を実施した．ツールの有

教師への選択式の質問への回答をまとめた結果を図 24

用性についての選択式の質問には，「とてもそう思う」を 2に示す．また，自由記述で回答してもらった内容はその一点，「そう思う」を 1 点，
「どちらでもない」を 0 点，
「そう

部を考察の中で紹介する．

思わない」を-1 点，「まったくそう思わない」を-2 点とした

5.2.3 考察

点数で回答してもらった．また，ツールの機能や操作など

ツールの文房具のアニメーション表示機能によって，文
房具の動かし方を理解したり，生徒が作図に集中したりすについて，自由記述で回答してもらった．
5.3.2 結果

るのに役に立つと思うかという質問に対し，被験者全員が生徒への選択式の質問への回答をまとめた結果を図 25「とてもそう思う」と回答した．自由記述でも「実際にコに示す．また，自由記述で回答してもらった内容はその一ンパスが動く様子などが見れるので、作図の学び初めの段部を考察の中で紹介する．

階にとても有用だと思いました。」とあり，アニメーション

5.3.3 考察表示機能が作図方法の学習に効果的であることが示唆された．

授業内で文房具のアニメーションを見た生徒たちから，
基本三直線の作図方法や，作図するための性質を持つ図形

また，補助線表示機能や Undo 機能，Redo 機能についてが理解できたかどうかについて，肯定的な回答が多く得らも肯定的な回答が得られた．図形の性質を基にして作図のれた．自由記述においても，「かく順番でコンパスが動くの方法を考えたり，これから作図をして描画する線をイメー

で、かき方の手順がわかりやすかった。」や「ひし形やたこ

ジしたりするのに役立つ可能性が示された．

形などの作図が完成した時のイメージがつきやすかったで

その他，「作図に不必要な点が消せるとよいと思います。」

す。」などと，作図の手順を理解できた生徒や作図後のイメや「鉛筆・コンパス等のアニメーションがあるバージョンージを持つことができた生徒の意見が得られ，作図前に考とないバージョンを選択できたらいいなと思いました。」とえたりイメージしたりするものをツールによって補えるこ

改善点が挙げられており，よりユーザーの目的に合った自とが示唆された．

由な操作ができるようにするための改善が必要である．

また，「今まで作図をするとき，図形をイメージしてから

5.3 生徒への調査

作図していた」という質問に対して，「そう思わない」「ま5.3.1 方法

ったくそう思わない」という回答の割合が約 15%を占めて被験者の生徒 89 名に対し，教師や筆者がツールを用いいたが，「これから作図をするとき，図形をイメージしてかて行った授業を受けてもらい，ツールを使う様子を見てもら作図しようと思った」という質問に対してはそれらの回らった．また 4 名の生徒には，授業時間外に電子黒板で使答の割合が減少し，「まったくそう思わない」という回答を用してもらった．

した生徒の数は 0 であった．ここから，本ツールを使用しⓒ2024 Information Processing Society of Japan

9

Vol.2024-CE-173 No.2
2024/2/3

情報処理学会研究報告
IPSJ SIG Technical Report

図 25 生徒への選択式アンケート調査結果
た授業を受けることで，作図のための性質を持つ図形を意

今後は，ユーザーがより自由に使えるようにするために識しながら作図をしようとする意識に繋がる可能性も示さ

機能や操作方法の改善を進め，本ツールを授業や個別学習

れた．自由記述においても，「作図アプリを生徒も使えるよで使用しやすくすることが課題である．

うにしたい。」「自分も使って学習してみたいと思いました」

参考文献と，ツールを使用することで作図の学習に意欲的に取り組[1]

もうとする様子が見られた．
電子黒板でツールを使用した生徒からは，「タッチするだ
けで円が描けた。」と，作図を簡単に行えることに喜ぶ意見が得られた．文房具の扱い方に戸惑うことなく，端末上で容易に作図を行えるという利点が挙げられた．

6. おわりに
本稿では，学習者に基本的な作図の方法を理解させること，作図したい線をイメージする能力を養うこと，作図を行うための性質を持つ図形を視覚的に理解させることを目標とした，コンピュータの画面上で作図を行える作図方法
学習ツールを提案し，その設計，開発，評価を行った．評価実験から，文房具のアニメーションや，作図のための性質を持つ図形を表示することで，作図の方法や性質を持つ図形の理解に繋がる可能性が示唆された．また，作図の学習に対する意欲や，性質を持つ図形を意識して作図を行おうとする意識の変化が見られたりした．さらに，ユーザー

国立教育政策研究所：「平成 28 年度 全国学力・学習状況調
査 報告書・調査結果資料」（2016）[2] 国立教育政策研究所：「平成 30 年度 全国学力・学習状況調
査 報告書・調査結果資料」（2018）[3] 文部科学省：「中学校学習指導要領（平成 29 年告示）」（2017）[4] 文部科学省：「【数学編】中学校学習指導要領（平成 29 年告示）解説」（2017）[5] 河端善登，松尾七重：「小学校算数科と中学校数学科の図形領域における連続性を考慮した図形指導に関する研究 ―図形指導の問題点―」，千葉大学教育学部研究紀要 第 57 巻
pp.175-180（2009）[6] 辻󠄀宏子：「コンピュータ環境での作図活動の効果 —平面図形の学習での図の図形としての認識を促す場の検討—」（1997）[7] Geometric Constructor：
http://www.auemath.aichi-edu.ac.jp/teacher/iijima/[8] GeoGebra：https://www.geogebra.org/[9] 風間信也，加藤直樹，中川正樹：「文房具メタファを用いた
手書き作図システム」（1994）[10] 加藤直樹，福田奈津子，中川正樹：「文房具メタファを利用した作図における自動調整機能」（1996）[11] 伊藤唯，伊地知裕子，浦正広，中貴俊，山田雅之，遠藤守，
宮崎慎也，安田孝美：「数学学習支援のためのテーブルトッ
プインタフェースを用いた作図ツールの提案」（2010）

がより自由にツールを使えるようにするため，さらなる発展性があることが明らかになった．

ⓒ2024 Information Processing Society of Japan10

情報処理学会研究報告
IPSJ SIG Technical Report

正誤表
下記の箇所に誤りがございました．お詫びして訂正いたします．
訂正箇所

誤

正
1 東京学芸大学大学院

1 ページ
脚注

Graduate School of Education,（不記載）

Tokyo Gakugei University
2 東京学芸大学
Tokyo Gakugei University

5 ページ
右 37 行目

図 15 エラー! 参照元が見つかりません。エラー! 参照元が見つかりま

図 15

せん。

7 ページ
右 22 行目

点を選択した際には，選択した点を線を選択した際には，選択した線を強調してわかりやすくするため，点強調してわかりやすくするため，線をピンク色の円で囲む効果を表示すのまわりをピンク色で囲む効果を

る．

表示する．

ⓒ2024 Information Processing Society of Japan