このページのコードが起動しませんでした。

index.htmlをフォルダから直接開くと、ブラウザがJavaScriptモジュールを読み込めません。そのため図表に載せる相手を選んでも何も起きません。フォルダはhttpで配信してください。

powershell -ExecutionPolicy Bypass -File serve.ps1

そのうえでhttp://localhost:8080/を開いてください。

身長比較 — 並べて見比べ、ダウンロードできる図

身長を打ち込めば、絵が持ち帰れます。描くために何かを送ることはありません。

言語: 日本語
ソースを見る
名前と身長、そしてそれでできる図表はブラウザー内で処理されます。処理のためのアップロードはありません。

身長の図表は計算と絵です。送るファイルもなければ、頼るサービスもありません——そしてこのページが受け取る唯一のファイル、目盛りに載せるご自分の画像も、ここで読まれてどこへも行きません。男性・女性・男の子・女の子は、このページと一緒に配られるパブリックドメインの絵で、男の子と女の子は小さくした大人ではなく実在の子どもを描いたものです。家族の図表が、誰にも名指しできないかたちで狂って見えるのを防いでいるのが、まさにそこです。そのどの段階も、あなたが読めるこのページの数百行のJavaScriptの中で起きます。ネットワーク機能はそもそも一つもなく、それがここで大事なのは、打ち込む内容が人の一覧と、その一人ひとりの背丈だからです。

いまの通信: 確認中…

オフライン: 確認中…

言葉を信じる必要はありません。DevToolsを開き、ネットワークタブを見ながら名前と身長を打ってみてください。どのリクエストにも、そのどちらの1文字も乗っていません。あるいはインターネットを切って、それでも図表を作ってみてください。

1 誰を比べるかを書きます

名前、身長、そしてどの図を描くか。どの行にも最初から身長が入っていて、その上から打ち込めます。身長は普段の書き方のままで構いません。173、1.73 m、5'8"、68 inのどれでも読めます。各欄の下の行がどう解釈したかを示し、欄が空のときや身長が読み取れないときは赤でそう伝えます。黙って推測されることはありません。

ここでの上から下は、図表では左から右です。行を動かすには左端の取っ手をつまんで動かすか、キーボードから同じことをする矢印を使ってください。どちらの場合も、身長順に並べ替えていた図表はご自分の並びに戻ります。

SVGは、どんな絵でも目盛りの上に置けます。ロゴでも、間取り図でも、機械の部品でも構いません。ファイルはこのページの中で読まれ、どこにも出ていきません。残るのはその中の図形だけで、行ごとに選んだ一色の塗りとして届きます。ネットワークに手が届きうるもの——リンクされた画像、スタイルシート、フォント、スクリプト——は、誰かに送るかもしれない図表の中に運び込まれず、そこに置いていかれます。塗られた図形ではなく細い線で描かれた絵は、一つの塊のしみになって出てきます。この道具が向かないのは、その一点だけです。

写真やPNGはそのまま載り、自分の色を保ちます。ですから行の色は、その名前を書くだけになります。こちらもこのページの中で読まれ、載せる前に描き直されます——図表がどれだけ重くなるかはそこで抑えられ、ファイルの付帯情報は置いていかれます。透明なところは透明のままなので、切り抜きは目盛りの上にきれいに立ちますが、写真は背景ごと来ます。先に切っておくのが良いでしょう。

ほとんどは、ただの四角ではなく絵として届きます。取っ手のついたドア、上に冷凍室のある冷蔵庫、ソファだと見て分かるソファ、というふうにです。絵はその行の二つの数値に合わせて収められるので、形を決めるのは数値のほうです。ご自分の数値を上から打ち込めば、絵がそれに従います。三つだけ絵がありません。自由に使えて比率の正しいものが見つからなかったからで、バスケットゴールと海上コンテナ、キッチンカウンターは、かつてどのものもそうだった長方形として届きます。

このうちいくつかは本当に決まっています。20フィートの海上コンテナは定義上259 cmの高さで、バスケットのリングは305、アメリカの室内ドアは203に81です。残りは規格ではなく典型的な値で、ドアも窓も天板も国によって家によって違います。どれも普通の行として入るので、ご自分のものを測って本当の数字を上書きしてください。

物の幅を空欄にすると自動で決まります。入力した幅を読み取れない場合は、修正するまでその行をグラフに描きません。

2 持ち帰ります

文書やチャットに貼るならPNGです。取っておくならSVGで、こちらは図表をピクセルではなく指示として持っているので、どんな大きさでも鮮明に印刷でき、ベクターを開けるものなら後から色を変えられます。

目盛りを描く 図表を横切る線と、左右両側の数字です。なくても二人を正しく比べる絵にはなりますが、どちらが何センチなのかは言わなくなります。

各図の上に名前と身長を書く 切っておくと、図表は目盛りの上のシルエットだけになります。貼り付ける先に名前を書くつもりなら、そちらが望ましいはずです。

背景をまったく付けない 透明にして、すでに色のあるスライドに載せるためのものです。目盛りと文字は上で選んだ色に合わせて濃くも淡くも描かれるので、背景そのものを切っていても、絵が載る先の色をおおよそ指定しておいてください。

これは描画領域の高さなので、仕上がりの絵は少し高くなります。名前がその上に載るからです。幅は図が何体あるか、それぞれの見出しがどれだけ広いかで決まります。何ピクセルになったかは絵の下の行が伝えます。

見た目

Markdownで表示

身長比較チャートの作り方

  1. まず全員を入れて、見た目はそのあとで。1行が、図と名前と身長と色です。名前は任意で——名前のないシルエット二つに身長だけを添えた図が、まさに求められていることも多くあります—順番が大事なら、各行の矢印で左右に動かせます。
  2. 身長は普段の書き方のまま打ち込みます。173、1.73 m、5'8"、68 in、5 ft 8はどれも正しく読まれます。欄の下の行が、何と解釈したかを両方の単位系で示すので、読み違いは印刷したあとではなく描かれる前に見えます。単位のない数字は、メートル法の図ではセンチメートル、ヤード・ポンド法の図ではインチで、3未満の裸の数字はメートルです。身長1.73 cmの人はいません。
  3. その人に合う図を選びます。子どもはおよそ頭六つ、大人は七つ半の背丈です。ですから縮めた大人として描かれた子どもは、名指しにくく、それでいてすぐ目につく形で違って見えます。男の子と女の子は小さくした大人ではなく実在の子どもを描いたもので、家族の図表が家族らしく見えるかどうかは、その大半がここで決まります。どの行にも最初から身長が入っているので、誰かを足せば誰かが描かれます。そのまま上から打ち込んでください。
  4. 見慣れたものを図表に置きます。数字は抽象的で、戸口はそうではありません。誰もが大きさを知っているものを一つ加えること——ドア、窓、教室のホワイトボード、自動販売機——それが、二つの身長を述べるだけの図表を、それを見せる図表に変えます。メニューには二十点が分類して並んでいて、どれも自分の数字を上書きできる普通の行として入ります。ものには高さのほかに幅もあるので、ドアは細い帯ではなく203に81です。
  5. あるいは、自分の絵を載せます。自分の画像は、お手元のファイルを受け取り、指定した高さで目盛りの上に置きます。図表の主題が人ではなく製品や車両、建物であるときに手を伸ばすものです。SVGは他の図と同じくその行の色で描かれ、写真やPNGはそのままの姿で載ります。どちらも自身の比率を保ち、どちらもどこにも送らずにここで読みます。
  6. 読み手が慣れた単位に目盛りを合わせます。センチメートルとフィートの切り替えは、欄の中身を解釈し直すのではなく書き換えます。ですから図表そのものは動かず、表記だけが変わります。読み手が二種類いる図表なら、各図の上に書かれる身長は図表の単位で、各欄の下の行には両方が出ます。
  7. 貼るならPNG、印刷するならSVG。PNGは指定したピクセル高さの絵で、チャット欄や文書やスライドが求めるのはこちらです。SVGは図表を指示として持っているので、どんな大きさでも鮮明に印刷でき、ベクターを開けるものなら後から色を変えられます。

詳しい解説

身長比較チャートの作り方 身長の一覧を並べて見せる絵にする方法。身長の書き方、子どもにどの図を選ぶか、なぜ見慣れたもの一つが三人目より効くのか、そして図表をPNGやSVGとして取り出す方法。

よくある質問

打ち込んだ内容はどこかに送られますか?

送られません。図表はこのページのJavaScriptが、ご自分の端末の上で描いています。この道具にはネットワーク機能そのものがなく、何かを取りに行くことも送ることもありません。ページのContent-Security-Policyには接続してよいアドレスがすべて書かれていて、そのどれもこのサイトのものではありません。ここではっきり言っておくべきなのは、入力が人の名前と、その一人ひとりの背丈の一覧であり、このサイトが扱うもののほとんどより私的なものだからです。

図表はダウンロードできますか?

できます。PNGでもSVGでも、透かしもアカウントもなしにです。PNGは指定したピクセル高さで描かれ、文書やスライド、チャットに貼るのはこちらです。SVGは図表をピクセルではなく指示として持っているので、どんな大きさでも鮮明に印刷でき、後からどのベクターエディターでも開いて色を変えられます。どちらも画面に出ているのと同じマークアップから作られるので、プレビューと食い違いようがありません。

身長はどう書けばいいですか。センチメートルですか、フィートですか?

どちらでも、どの行でも、普段お書きになるとおりで構いません。173、173 cm、1.73 m、5'8"、5 ft 8 in、68 inはすべて理解され、欄の下の行が何と読んだかを両方の単位系で示します。単位のない数字は、図表がメートル法ならセンチメートル、ヤード・ポンド法ならインチです。3未満の裸の数字はメートルと受け取ります。1.73 cmは誰も打ち込まない身長だからです。

子どもが小さな大人に見えないのはなぜですか?

子どもは小さな大人ではないからです。身体のプロポーションは年齢で変わります。2歳児はだいたい頭四つ半、8歳児は六つ、大人は七つ半の背丈です。ですから頭は幼い子どものほぼ4分の1、大人の8分の1を占めます。ここでの男の子と女の子は、縮小したシルエット一つではなく実在の子どもを描いたもので、家族の図表が、大きさの違う大人四人ではなく家族に見えるのはそのためです。

図はどこから来たものですか?

四つとも他の方の絵で、すべてパブリックドメインです。男性はpitr氏、女性はMadeleine Price Ball氏、女の子はOpenClipart-Vectors、男の子はNIH BioArtライブラリのためにRyan Kissinger氏が描いたものです。どのファイルも公開されたままの姿でvendor/に入ってこのページと一緒に配られるので、原典と突き合わせられます。パブリックドメインは何も求めません。そこが肝心で、絵はあなたがダウンロードする画像の中に入るので、表示を求めるライセンスなら、その義務があなたの図表にくっついてしまいます。

自分の画像を図表に載せられますか?

はい——自分の画像は、絵でも写真でも受け取り、打ち込んだ高さで目盛りの上に置きます。ロゴでも、間取り図でも、機械の部品でも、車でも、その物そのものの写真でも構いません。比率はその画像自身のものなので、幅を書き入れる必要はありません。

SVGは一色の塗りで描かれます。その行に設定した色で、図表の他の部分がそうだからです。ですから塗られた図形ではなく細い輪郭線で描かれた絵はしみになって出てきますし、それにはこの道具は向きません。残るのは図形だけです。ファイルはパスと長方形と円から一から組み直され、ネットワークに手が届きうるもの——リンクされた画像、スタイルシート、フォント、スクリプト——は置いていかれます。

写真やPNGはそのままの姿で載り、自分の色を保ちます。行の色は名前を書くためだけのものになります。載る前にここで描き直されるので、図表に持ち込む量には上限があり、ファイルのメタデータは置いていかれます。透明は保たれるので、切り抜いた画像は目盛りの上にきれいに立ちます——写真は背景ごと連れてくるので、先に切り落としておく価値があります。

どちらのファイルもどこにも行きません。それが二重に大事なのは、ダウンロードした図表が、誰かに送るかもしれないファイルだからです。

幼児や赤ちゃんの図がないのはなぜですか?

本ツールのパブリックドメインのライセンス条件と描画要件に合う幼児や赤ちゃんの絵を見つけられませんでした。付属する子どもの図は男の子と女の子で、子どもの絵の全目録ではありません。もっと幼い子は実測した身長に設定するか、適切な自分の画像を追加してください。寸法は目盛りが示します。

一つの図表に何人まで載せられますか?

12人です。技術的な限界ではなく——描画は30人でも喜んでこなします——ただ、1ダースを超えると列が上に書かれた名前より狭くなり、絵が読めなくなります。もっと必要なら、名前を消せば幅が戻りますし、二枚に分けたほうが一枚より伝わります。

ものを図表に置けますか?

置けます。しかも大半は絵付きで届きます。メニューには出発点として二十点が四つの組に入っています。ドアと窓、学校とオフィス(ホワイトボード、机、書類キャビネット、プロジェクタースクリーン)、街のもの(自動販売機、キャスター付きごみ箱、バスケットゴール、20フィートの海上コンテナ)、そして家のもの。そのうち十七点には絵が付いています——取っ手のあるドア、上に冷凍室のある冷蔵庫、見ればソファと分かるソファ——絵は行の高さと幅に合わせて収められるので、大きさを決めるのは相変わらず数字で、その上から打ち込んだご自分の数字も相変わらず効きます。残りの三点はただの長方形です。正しく、かつ比率も正しい自由な絵が見つからなかったからで、大きさを扱う図表では、間違った絵より正直な四角のほうがましだからです。

本当の規格もあれば典型的な寸法もあり、ページはそれを声に出して言います。見慣れたもの一つは、人を何人増やすよりも図表のためになります。比較を、大きさの実感に変えてくれるからです。

犬や猫の図はありますか?

ありません。見落としではなく、意図した欠けです。どちらも作ってはみました——横向き、立った姿勢で、頭を肩の高さに合わせ、絵の上端が隣に書かれた身長になるように。どの犬種標準も動物をそこで測るからです。ただ、出せるほどの出来にはなりませんでした。正面を向いた四人の隣に横から見た四足動物が立っていると、絵がよくても間違いに見えてしまいます。当面は、その動物の肩の高さの長方形が正直なところです。

図表をリンクで共有できますか?

ここからはできません。これも意図したことです。それを提供する道具は、一覧まるごとをアドレスに入れることで実現しています。つまり、あらゆる名前と身長が、そのリンクが旅する先すべてに残ります。チャットサーバーのログ、メールの検査装置、誰かの閲覧履歴、リンクプレビューを取りに行くサービス。絵をダウンロードして、そちらを送ってください。同じことを伝えますし、一覧は持って行きません。

無料ですか。図表を商用に使えますか?

無料で、アカウントも透かしもなく、結果を報告書やプレゼン、広告や製品に入れて構いません。このサイトには広告があり、それが費用をまかなっています。ここで作った図表について、私たちのものは何一つなく、何も保存されません。

目盛りが1ではなく10刻みなのはなぜですか?

間隔が、決まった数ではなく、その絵が何本の線を支えられるかから選ばれるからです。大人二人の図表なら10センチごとに1本、そこにバスケットゴールを置けば線は25センチに移ります。一枚に90本の線は、目盛りではなく灰色のにじみだからです。フィートとインチでは1・3・6・12インチの段階なので、線は中途半端なところではなく丸いインチに載ります。

図表を暗いスライドに置けますか?

置けます。背景を、載せる先の色に設定すれば、目盛りと文字がそれに合わせて濃くも淡くも切り替わります——当て推量ではなく、その色の輝度から計算しています。そのうえで絵自体を透明にしたければ「背景をまったく付けない」にチェックを入れてください。インクを決めるのは選んだ色のままなので、濃紺のスライドに向かう透明な図表は、その上で読めるように出てきます。

オフラインでも動きますか?

動きます。ページを一度読み込んだあとインターネットを切っても、そのまま使えます。これは何もアップロードされていないことを示す一番簡単な方法でもあります。図表を描いてもらうために一覧を送り出す道具なら、線を抜いた瞬間に止まってしまうはずです。