16 3月 2026

ハイパーピクトグラミング例7　ダブルループで自転車を描こう

by SugiyamaReiko | posted in: 開発者ブログ | 0

<pa>エリアで人型ピクトグラムを乗せることもできるし、あとから<script>エリアで自転車を描いてる人型ピクトグラムを自転車に乗せる事ができます。
ダブルループのコードの数字をかえることで、いろいろな模様も描けます。

説明

① 描画エリアの設定

pa = 描画エリア（キャンバス）
id=”pa” → この名前でプログラムから操作できる
type=”n” → 通常の座標モード
scale=”1″ → 拡大率1倍
background-color=”#ffffff” → 背景色を白

② 自転車のフレームを描く

上のフレーム

<line id=“a” x1=“-172” y1=“112” x2=“-35” y2=“112” width=“5” color=“#222325”></line>

直線aを描く
始点 (-172,112)
終点 (-35,112)
太さ5
色黒

👉 自転車の上のパイプ

右フレーム

<line id=“b” x1=“128” y1=“112” x2=“115” y2=“-55” width=“5” color=“#222325”></line>

右側のフレーム

左三角

<line id=“c” x1=“-172” y1=“112” x2=“-35” y2=“-27” width=“5” color=“#222325”></line>

左の三角フレーム

下フレーム

<line id=“d” x1=“-35” y1=“-27” x2=“116” y2=“-27” width=“5” color=“#222325”></line>

自転車の下の棒

斜めフレーム

<line id=“e” x1=“-35” y1=“112” x2=“118” y2=“0” width=“5” color=“#222325”></line>

上から斜めのフレーム

シートポスト

<line id=“” x1=“-35” y1=“112” x2=“-35” y2=“-55” width=“5” color=“#222325”></line>

座席の棒

ペダル

<line id=“” x1=“-45” y1=“-55” x2=“-5” y2=“-55” width=“10” color=“#222325”></line>

クランク

ペダル右

<line id=“” x1=“115” y1=“-55” x2=“90” y2=“-60” width=“10” color=“#222325”></line>

右ペダル

③ 人（ピクトグラム）の作成

左の人

<hp id=“pic1” x=“-150” y=“200” scale=“0.5”

pic1 = 人
位置 (-150,200)
大きさ0.5

body=”0″

lua=”0″

lla=”0″

各パーツの角度

右の人

<hp id=“pic2” x=“150” y=“200”

もう一人

👉 車輪を描くための人

自転車の人

<hp id=“pic3” x=“-10” y=“-45”

自転車に乗るポーズ

④ ペンを手に持つ

pic1.PEN_HOLD(“LLA”);

左下腕にペンを持たせる

pic1.SK();

ペンをスケッチモード

pic1.penw(3);

ペンの太さ3

⑤ 車輪を描く（左）

for (let k = 0; k < 36; k++)

36回回転

👉 360度 / 10度

for (let i = 0; i < 4; i++)

4回

pic1.RW(“LUA”, 90, 0);

左上腕を

90度回転

👉 四角形

pic1.RW(“LUA”, 10, 0);

10度ずらす

👉 花模様

つまり

四角形 × 36回転

＝

車輪模様

⑥ 右の車輪

同じコードを

pic2

で実行

👉 右車輪

⑦ 細い線の模様

pic1.penw(1);

線を細く

pic1.RW(“LUA”, 900, 0);

900度回転

👉 模様を増やす

⑧ ペンを離す

pic1.PEN_RELEASE(“LLA”);

pic2.PEN_RELEASE(“LLA”);

ペンを手放す

⑨ 車輪を移動

pic1.MW(120, –220, 1);

左車輪移動

pic2.MW(85, 250, 1);

右車輪移動

pic3.MW(400, 0, 1);

人を移動

⑩ 人をリセット

pic1.C();

初期姿勢に戻す

⑪ 自転車に乗せる

pic1.SD();

描画開始

pic1.M(–10, –45, 1);

自転車の位置へ移動

次は

pic1.R(“BODY”, –30, 1);

体を傾ける

pic1.R(“LUA”, 50, 1);

pic1.R(“LLA”, 40, 1);

腕をハンドル位置

pic1.R(“LUL”, 70, 1);

pic1.R(“LLL”, –75, 1);

足をペダル位置

プログラム

ハイパーピクトグラミング例6　錯視

by SugiyamaReiko | posted in: 開発者ブログ | 0

ハイパーピクトグラミングで錯視を作成しました。

人型ピクトグラムを反転させ左右に移動させてみたり、線を増やしたり。

どのようにみえますか？

説明

① 画面の準備

<pa id=“pa” type=“n” scale=“1” background-color=“#ffffff”>

</pa>

🔹 `<pa ...>`

描画エリア（キャンバス）をつくっています。

id="pa"
→ この画面を「pa」という名前で使います。
type="n"
→ 通常モード。
scale="1"
→ 拡大率1倍。
background-color="#ffffff"
→ 背景色は白。

② 縦線をたくさん描く

for(let i=-320; i<=320; i+=40){

pa.L(“”,i,–320,i,320);

};

🔹 `for(let i=-320; i<=320; i+=40)`

i を -320 から 320 まで
40ずつ増やしながらくり返す

つまり
-320, -280, -240 … 320 まで動く

🔹 `pa.L("",i,-320,i,320);`

線を描く命令です。

pa.L(色, x1, y1, x2, y2);

ここでは

x1 = i
y1 = -320
x2 = i
y2 = 320

つまり

👉 上から下までの縦線

それを40ピクセル間隔で並べています。

🟦 結果：縦しま模様の背景

③ 1人目のピクトグラム

pa.HP(“pic1”);

→ 「pic1」という人を作る

pic1.CL(“#0000ff”);

→ 色を青にする

pic1.R(“body”,90,0);

→ 体（body）を90度回転

つまり横向きになります。

pic1.SC(0.3);

→ サイズを0.3倍（小さくする）

④ 2人目のピクトグラム

pa.HP(“pic2”);

→ 「pic2」を作る

pic2.CL(“#ffff00”);

→ 色を黄色にする

pic2.M(0,100);

→ 上に100移動する

pic2.R(“body”,90,0);

→ 横向きに回転

pic2.SC(0.3);

→ 小さくする

⑤ 10回くり返しアニメーション

for (let i = 0; i < 10; i++) {

→ 10回くり返す

🔹 左へ少し動く

pic1.MW(–300,0,2);

pic2.MW(–300,0,2);

MW(x,y,分割数) は
なめらかに移動します。

左へ300動く
2ステップで

🔹 反転

pic1.R(“body”,180,0);

pic2.R(“body”,180,0);

→ 180度回転
→ 進行方向が逆になる

🔹 右へ大きく移動

pic1.MW(600,0,4);

pic2.MW(600,0,4);

→ 右へ600動く
→ 4ステップで

🔹 もう一度反転

pic1.R(“body”,180,0);

pic2.R(“body”,180,0);

→ また向きを変える

🔹 左へ戻る

pic1.MW(–300,0,2);

pic2.MW(–300,0,2);

→ 元の中央へ戻る

プログラム

[ピクトグラミング] バンコクのトイレサイン、なぜ色が日本と違うのか

by admin | posted in: 開発者ブログ | 0

画像に写っているのは、バンコクの建物や公共施設に見られる「トイレ」案内サインです。このサインには、左側に青い女性のピクトグラム、右側に黄色い男性のピクトグラムが描かれ、その右側には「TOILET」という英語表記と、タイ語の「ห้องน้ำ」（ハーン・ナム、＝トイレ）が記されています。さらに、左向きの赤い矢印が付いており、トイレの方向を示しています。このサインの特徴として、日本で一般的に見られる「女性＝ピンク、男性＝青」の色配置とは異なり、女性を青、男性を黄色と表現している点が目立ちます。これは、単なるデザインの違いではなく、文化的・実務的な背景が関係している可能性があります。

まず、このサインの本質は「利用者の方向性と区別を明確にするための視覚的案内」です。ピクトグラムは、抽象的な「トイレ」や「男女」の概念を、視覚的に具体的に表現するための手段です。この場合、女性を青、男性を黄色と表現しているのは、色の心理的・文化的な意味を活かしたデザイン選択と考えられます。日本では、女性をピンク、男性を青と表現することが一般的ですが、タイや他の東南アジア諸国では、色の使い方が異なります。例えば、タイでは黄色は「王族・権力」を連想させる色であり、男性を表すのに適しているとされることがあります。また、青は「冷静・落ち着き」を連想させる色として、女性のイメージに使われることがあります。このように、色の使い方は、文化や社会の価値観に根ざしている場合があります。

このサインが設置される場所は、バンコクのホテル、駅、商業施設、学校、病院など、多くの公共空間に見られます。これらの場所では、利用者の国籍や言語が多様であり、英語やタイ語の表記に加えて、国際的に通用するピクトグラムが求められます。また、方向性を明確にするための矢印が付いている点も、利用者の迷いを減らすための工夫です。このように、このサインは、単なる案内サインではなく、文化的・実務的な観点から設計された「多言語・多国籍対応」のサインです。

利用者への注意点として、このサインの色配置が日本と異なる点を認識することが重要です。日本では、女性をピンク、男性を青と表現しているため、このサインを見た利用者は、色の配置が「逆」であると感じることがあります。しかし、これは単なるデザインの違いではなく、文化的・実務的な配慮が反映されたものである可能性があります。また、このサインには、タイ語の「ห้องน้ำ」が記されている点も、利用者への注意点として挙げられます。タイ語を理解できない利用者は、この表記を無視してしまう可能性があります。そのため、英語の「TOILET」が併記されている点は、非常に重要な工夫です。

関連規格や設計観点から見ると、このサインは、国際的な「トイレ案内サイン」の基準に準拠している可能性があります。国際標準化機構（ISO）や、国際建築協会（IAC）などでは、トイレ案内サインのデザインや色の使い方が規定されています。例えば、ISO 7001では、女性を青、男性を黄色と表現することが推奨されています。また、このサインは、視覚的・文化的な配慮を考慮したデザインであるため、国際的な「多言語・多国籍対応」のサインとして設計されている可能性があります。

誤解されやすい点としては、このサインの色配置が「逆」であると感じてしまう点が挙げられます。日本では、女性をピンク、男性を青と表現しているため、このサインを見た利用者は、色の配置が「逆」であると感じてしまう可能性があります。しかし、これは単なるデザインの違いではなく、文化的・実務的な配慮が反映されたものである可能性があります。また、このサインには、タイ語の「ห้องน้ำ」が記されている点も、利用者への注意点として挙げられます。タイ語を理解できない利用者は、この表記を無視してしまう可能性があります。そのため、英語の「TOILET」が併記されている点は、非常に重要な工夫です。

関連する補足として、このサインのデザインは、タイの文化や社会の価値観に根ざしている可能性があります。例えば、タイでは、黄色は「王族・権力」を連想させる色であり、男性を表すのに適しているとされることがあります。また、青は「冷静・落ち着き」を連想させる色として、女性のイメージに使われることがあります。このように、色の使い方は、文化や社会の価値観に根ざしている場合があります。また、このサインは、国際的な「トイレ案内サイン」の基準に準拠している可能性があります。国際標準化機構（ISO）や、国際建築協会（IAC）などでは、トイレ案内サインのデザインや色の使い方が規定されています。例えば、ISO 7001では、女性を青、男性を黄色と表現することが推奨されています。また、このサインは、視覚的・文化的な配慮を考慮したデザインであるため、国際的な「多言語・多国籍対応」のサインとして設計されている可能性があります。

29 1月 2026