引き算繰り下がり暗記表で学ぶ Sketch のSymbol 使い方

僕は引き算が超苦手です。特に繰り下がりが発生すると計算に時間がかかり、暗算ができません。

例えば 13 - 7 = 6 の計算が2秒くらいかかります。そしてこれが3桁, 4桁の引き算になってそれを暗算しろと言われると脳がパンクして計算ができなくなります。

僕が普段引き算をするときに取っている手法はまず 7 - 3 行い、4 を導き、 10 - 4 をして 6 導くという方法です。 この計算方法ではどうしても脳のバッファを余計に使ってしまうし、時間もかかります。

(引き算はいくつか解き方があり、ここに良い感じに載ってました )

そこで僕が取った手段は、 繰り下がりの計算結果を暗記する ことです

「繰り下がりの計算結果を暗記するなんて大変そう」と思うかも知れませんが、考えてもみてください。皆さん掛け算の計算はどのように行っていますか。そう、 九九 を覚えているから掛け算を素早くできているわけです。では同様に引き算の繰り下がりの計算結果も覚えてしまおうと考えるのは自然なことだと思いませんか(早く小学校にこの考え方を普及させるべきだ)。

さらに繰り下がりが発生するパターンは 9 * 9 = 81 よりも断然少なく、 36通り です。これは大人の皆さんでも今から覚えられることでしょう。

ということで早速表を作ってみました。今回は Sketch というMac 用のデザインツールで表を書いています。完成品は以下です。印刷して部屋にかざってみましょう。

数字が色分けされていてとても見やすいですね。色分け方としては1と1の補数である9は同じ赤色、2と2の補数である8は同じオレンジ色といった具合に、その数字の補数は同じ色にしています。こうすることで数学的な規則性を色から感じることができて、デザイン的にも美しいですし、10の補数を覚えるのにも有用です。(10の補数を覚える有用性についての記事 補数は計算力の基礎の基礎 : 親力講座 )

また、読み方も書いてあって、九九のように音読で覚えることができそうです。九九の場合、「いんにがに」「いんさんがさん」と「が」を使って覚えますが、ここでは九九との脳内での混同を避けるために「いんにのく」「いんさんのはち」と表記しているのも地味な工夫点です。

Sketch

ここからが本題ですが、この表をSketchでどのように作ったか、ポイントを話していきたいと思います。最大のポイントは本記事タイトルにあるように、Sketch の 「Symbol」という機能をふんだんに使っているということです。

以下のGIFはSketch公式より引っ張ってきました(スクリーンレコーダー + GIF化したらなんか見た目ひどい感じになりましたが気にしないでください)

Symbol はあるオブジェクト(絵or 絵の組み合わせ)をSymbol化することができ、作ったSymbolからインスタンスを生成することで、Symbolへの変更をインスタンス全体に反映させることができるという仕組みです。 つまりイラストのあらゆる場所で使われているパーツをちょっと変更したいと思った時に、Symbolに変更を適用すればあらゆる場所のインスタンスも同時に変更されます。同じパーツを手作業で何度も編集したり、変更したパーツをコピペしまくるといっためんどくさい作業から開放されますね。

このSymbolという機能を繰り下がり暗記表では以下のオブジェクトをSymbol化しました。

• 数字(1, 2, ..., 9)
• 読み方( いん, に, さん, ... く, の)
• 数字 + 読み方 のグループ

シンボルの作り方

シンボルにしたいオブジェクト(またはグループ) を選択したあと、ツールバー上の 「Create Symbol」を押します。

以下は数字や読み方をシンボル化した様子です。

このようにシンボル化した数字と読み方を組み合わせて、さらに新しいシンボル(ここではsectionと命名)を作ります。

正直、このsectionを作る作業はめんどくさかったです。section1-2 を作って、そこから36個分複製と編集を繰り返しました。ここのあたりのめんどくささは所詮はデザインツールなので仕方ないのかなと思います。ここらへんを自動化できるやつあったら良いですね(あったら教えて)。

section1-2からsection1-3 を作る方法ですが、下記画像のようにSymbolを選択したあと、Replace with > Symbols からシンボルを入れ替えることができるので多少楽になります。

さて、シンボルを全て作り終えたらあとはそれらを組み合わせて完成させるだけです。

とりあえず表の横線や縦線を horizontal_line や vertical_line というグループを作り、作成しておきます。

列と行それぞれに数字のシンボルを置いていきます。それを row_name と colomn_name という風にグルーピングします。

最後にsectionたちを配置していきます。まず、sectionを置く場所を確保した後に、シンボルをreplaceしていくという作業になります。

まず 1-2 の場所に section1-2 を置いたあと、1列目に等間隔で section1-2 を縦にコピペして並べます。その縦のsectionを column1 という名前でグルーピングします。 次にその column1 をコピペし、 column2 を作ります。 column2 は column1 よりsectionが1つ少ないので(2-2の場所) その部分を消します。そして column2 から column3 をコピペします。以下同様に column9 まで作成します。

この段階ではそれぞれのcolumn グループに入っているsectionは全て section1-2 です(コピペしただけなので)。これを先程も言及した Replace with > Symbols で36回分シンボルを入れ替えることで適切なシンボルに変更します(やはりここもちょっとめんどい)。

これで完成です。Symbolを使うことで Replace with > Symbols が使えていい感じにデザインを組み立てられましたね。 ですが、実はSymbol機能の良さが発揮されるのは完成してからなのです。例えば数字の 3 というシンボルの色を変更したいと思ったら、3 シンボルを編集すれば良いだけです。一回の変更で全ての3の色が変更されます。 実際自分もこの機能を使って楽にデザインの調整を行うことができました。例えば、実は始めは適当にこんな配色だったのですが、黄色とか見づらいので変えました。

デザインの調整にコストがかかってしまうと、微調整する気力が失せますよね。あらかじめシンボル化しておくことで未来の自分の編集コストを格段にさげることができます。

また、Symbol には override という機能があり、インスタンスごと内容を微調整することが可能です。例えば 読み方 シンボルをオーバーライドしてみましょう。 "6 - 9 = 7" の読み方としてろく , く , しち シンボルを普通に組み合わせると "ろくくのしち" という読み方になってしまいます。これだと音読しづらいので "ろっくのしち" という読み方をふりたいですね。そのばあい ろく シンボルをオーバーライドして ろっ という文字に書き換えることができます。

まとめ

• 引き算は僕人間には難しい
• 繰り下がり暗記表をSketchで作った
• Sketch の Symbol機能は便利だから使おう

お絵書きたのし〜。

何かもっと良い方法があるとか、Sketchじゃなくてhogehogeを使えばもっと楽にとかあったら教えてください！コメントとかTwitter @macinjoke とかに。