【表介 2.0 / 表子 2.0】作った表をURLでシェアできるようになったよ！

ニャンコー不落

2026年5月31日 23:58

こんにちは、ニャンコー不落です🐈‍⬛

今月は新サイトを立ち上げて、そこで「表子」用のテンプレートを紹介していく予定でしたが、またもや横道にそれてしまったようです f(^ ^;

今の「設定内容をコピーする方式」ではコードが長くなってしまい、使い勝手もイマイチなので、「表子」をアップデートすることにしました！

新サイトの方はというと、、、

コンセプトの決定
サイトデザイン完成
新ドメインの取得

までは終わっていて、「表子・表介」もこちらに移動しましたので、後は「表子2.0」を駆使して、コンテンツ作成を急ぎたいと思います。

今後、出番が減りそうな「表介」のほうも、いちおうは同じようにアップデートしています。

【表介2.0】👉 https://latticelite.com/tool/hyosuke/
【表子2.0】👉 https://latticelite.com/tool/hyoko/

「表子」の基本的な使い方は同じですので、初めての方はこちらもお読み頂ければと思います。

それでは、今回も表子さんにアップデート内容を解説してもらいたいと思います。

⭐アップデート内容

こんにちは、表子だよ。

5月もあっという間だったね、みんな調子はどう？

リリースしたばかりの「表子」だけど、もっと使いやすく、デザインの幅が広がるようにブラッシュアップしたから紹介するね！

今回の一番のこだわりは、URLでサクッと共有できるようになったことかな。

他にも、シルエットにこだわって角丸を調整できるようにしたり、せっかく仕立てたデータが飛ばないようにブラウザに記憶させたり。

とっても使い勝手が良くなってるから、絶対チェックしてね！

```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#wN4e{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.5px;}tr{height:36px;}col.col1{width:150px;}col.col2{width:445px;}tr.row1{height:40px;}tr.row2,tr.row3,tr.row4,tr.row5{height:63px;}}table{border-collapse:separate;border-spacing:5px;table-layout:fixed;width:610px;}td{background-color:#fff2e6;color:#4d4d4d;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:16px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;font-weight:bold;border-radius:4px 4px 4px 4px;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.a1{border-right:none;background-color:#e67300;color:#ffffff;font-size:20px;}.b2,.b3,.b4,.b5{background-color:#ffffff;color:#262626;font-size:14px;text-align:left;border-radius:8px;font-weight:normal;}.hlink{width:610px;text-align:right;margin:2px 0;padding:0 5px;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
  columns 1
  A["<div id='wN4e'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'></colgroup><tr class='row1'><td class='a1' colspan='2'>コードエリア（ページ下部）</td></tr><tr class='row2'><td>HTML</td><td class='b2'>表をWebサイトやブログに貼りたい時は、HTMLコードでの取得が便利だよ。</td></tr><tr class='row3'><td>画像</td><td class='b3'>ページのタイトル画像に使いたい時や、ページの冒頭にMermaidを貼りたい時は画像でダウンロードしてね。</td></tr><tr class='row4'><td>復活の呪文</td><td class='b4'>設定内容を短くしてって表介くんにお願いしたら、手が勝手に動いてこうなったんだって…（ちょっと怖いんだけど）</td></tr><tr class='row5'><td>URL</td><td class='b5'>作った表はURLでも見れるようになったから、保存にも共有にも使えるよ！</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#bVH_T1JRFPd9wWttTn-w_LK12mMuf3DsiY6KfuhX12RtrdbPgI9goTBgTRdt796HCj6XEwvN6ZBqiDKwsjabIP9Lh4f4E39Cdd9DodXu7t5555zPl3PurxuvhJdSSLALVsuYRRRGBWcwKNgF73zgRUB4bWJ7h5hrqCssBZ0hZ0S6zpl4hMwej8cq2fo5hkPIPDFNjwX1mSXbnXFRHKXlUbPVRg9CV8bCZpeHHgZ1OiRfaD4wwD0wIcbdh1Cz8hBNuAKRSGAmGvI990aiYlSM3os-Ckqzw1Yx4vWF6cfp8kvDVtFHc5PUnqUb9UwE52613UG-I9XLs34eOdC42-61eC2X8pbZ-2F76-9_0SwdzpiCQzyd4ybHImQKB_y-aRbxVjE4N8CNsAPcyCDPlDkH6ne3KNvp20BjtuBc1xDrQJzb7uUNWrq3iwUZjSbE-LsRd5fOwJQ7rjIMy3AM_9e9DeQIlBIoCSA5UA6AfGiU4qBs0SQ5rh6r50quUUp08JNPHFPOeiYHJPlMcgH5DuQTKHEgMVBSoBSAfAacr38tAVkGnAYcq70ngA9BxhTa0sF7gIvaako73QC8Uj2taPF9wLtA4iCTzrO3J5qy-ubSAeAikEpTS8kbZcD5arkCONYSIjGQcTtKW0ye7xYA5x1SaMbpmwaS_NfcBd0eKDKQLChHdJKmzw3AWcAFkEmPdrpf-3ZCWdcOaqmldD1X0Ipb2uKCVvwBJHmWLgBevUB8BJytZ3LVE5UmyTrgPODl88ymbniD6pMEyLiWUAGvaOqOHuQ19Z3ekAW8DngR8IFOldYZdg3an3KWPg_OAFnSM7manKKoZs8a4P1GKcE9fTzlrpa3DQL6aPjwT4rOSUg9qwJZAaLSjVOdfEsKq4a1amVHK2zSEiHawpfadsKI9a3HDWyjhH8D" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```

```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#zpZ6{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.5px;}tr{height:36px;}col.col1{width:150px;}col.col2{width:445px;}tr.row1{height:40px;}tr.row2,tr.row3,tr.row4{height:63px;}}table{border-collapse:separate;border-spacing:5px;table-layout:fixed;width:610px;}td{background-color:#fff2e6;color:#4d4d4d;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:16px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;font-weight:bold;border-radius:4px 4px 4px 4px;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.a1{border-right:none;background-color:#e67300;color:#ffffff;font-size:20px;}.b2,.b3,.b4{background-color:#ffffff;color:#262626;font-size:14px;text-align:left;border-radius:8px;font-weight:normal;}.hlink{width:610px;text-align:right;margin:2px 0;padding:0 5px;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
  columns 1
  A["<div id='zpZ6'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'></colgroup><tr class='row1'><td class='a1' colspan='2'>セルの書式設定</td></tr><tr class='row2'><td>部分装飾</td><td class='b2'>セル内で選択した箇所だけを装飾できるようになったよ。</td></tr><tr class='row3'><td>角の丸み</td><td class='b3'>この表にも使ってるけど、角ばったセルの枠を丸っこくできるんだ。どう？素敵でしょ？</td></tr><tr class='row4'><td>表全体</td><td class='b4'>前回までは表の両端に余白が空いちゃってたけど、「余白０」にできたから、「ノード」の項目を外して「表全体」の設定にしたよ。</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#bZFNTxNRFIaZj3ohgcgC5CMxmmlIWJDJUEjVunBrTKq_oZSpbax00jamxJrMubWFShEpEYIktE0NFBsHF5g02sqPOZ1-rPoTNHcGShfm5GZm7n3Oe9_3zN-7b6U3alTySC55UVakBcmnaZJHCq5HXkWkdyI_PstNkuGYqvmivrh6R3CIhDgDgYBLdU8JnECIc3mVlUwmnKr7wZKiLLDjBafLzYqQkcWYcyXAiiO3vGoouh6ZFp44COefIOTq5BlZXonE45HXyWjoZTCeVJJK8lHyhaauzbmUeDAUYw_fSlidcykhtveU2ZPHyO1lLXF_YM2IQ_vjIh8WiZcs-T1BOSj3r5fXHsc8N1__e1tj4ewUAhFZjnsCT4gjFgmHVnkiuhQtMS3M89PC_IzINQQvmfLfSA7KDzQturXE8CzvJYLfExRtWTa36wHZoINw4TEiPGQZuMbQMMfxnMCJ_TWJ9DemqghG66hm1nc6le-m8WVotJuqmJuZTjndLf95bjNmJo1w2oVa68MxwgFCoW1stLI6QhFhF2nephFOEbaRbiHdRMggVBG-IZQRCmxHp6Od0zyC0azVEC4TCHsIRqdUYSClzcalxZ4wAdhFOEMdrIYf1xrXfo-LSPOWStkS2Rm4eY-Z0ilrh0yvXmhfFFuff1rAAdKNXr0w0ilVzHSl2di7MLPb5tExgm393PJiNGuldvUcodpsHLYPGwi59tkvhPcIJaSpK49Q6HtEPWeTvfon1Let2JYdxmwhzdoMpj5iqo6prMUY3WK6fWQgzZtf962ZnqCe6zuzGfuXWIIH_SH-Aw" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```

```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#Aka0{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.5px;}tr{height:36px;}col.col1{width:150px;}col.col2{width:445px;}tr.row1{height:40px;}tr.row2,tr.row3,tr.row4{height:63px;}}table{border-collapse:separate;border-spacing:5px;table-layout:fixed;width:610px;}td{background-color:#fff2e6;color:#4d4d4d;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:16px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;border-radius:4px 4px 4px 4px;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.a1{border-right:none;background-color:#e67300;color:#ffffff;font-size:20px;font-weight:bold;}.b2,.b3,.b4{background-color:#ffffff;color:#262626;font-size:14px;text-align:left;border-radius:8px;}.hlink{width:610px;text-align:right;margin:2px 0;padding:0 5px;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
  columns 1
  A["<div id='Aka0'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'></colgroup><tr class='row1'><td class='a1' colspan='2'>その他</td></tr><tr class='row2'><td>画面の拡大機能</td><td class='b2'>表の入力エリアとプレビューエリアの右端アイコンで、画面の拡大や縮小ができるようになったよ。</td></tr><tr class='row3'><td>ショートカットキー追加</td><td class='b3'>太文字、イタリック、下線はショートカットキーで変えられるよ。<br/>値だけのコピー、設定だけのコピーもできるようになったんだ。</td></tr><tr class='row4'><td>値や設定の記憶</td><td class='b4'>編集中に他サイトにアクセスしたり、ページを閉じたりしても、データが消えないようにブラウザ記憶するようにしたよ。</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#fVFdSxtBFHWzm44WxD5o1UJpu0HwQZY1StqmD30thdDfEOOmCU3NkoSiNIW9M1bjR5FWSawifjSaaJpNqVRTYvDH3GwSf0XLJH6kReQyzJ25Z849586f--_ld1pEdstOZVhR5SHZq-uyWw5Mhd-E5Q-SrauHtEc13RvxxrS7ol0ixOH3-52aq1cUREIco-M8FNLt0FyPR1R1iJeHHE4XD0I6hqOOMT8PgdzyaMHIVLhPfG4ngq-bkPPKSzI6Fo7Fwm_jkeDrQCyuxtX40_grXZsYcKqxQDDKN-9YSBtwqkF-94KLUzpJ16g--bBl9UttyTuSLSS13xM8ZMTnDigB5VKAMvEs6r46XZdNcHtNHyKRuJMHoo0QezQcCo7biORU9ck-cdDWJw72S0JZ9JBe3xVlK33Lo2GXPkk8RPS5A1KTlM_tYkBNmJ0IoU4iPuEehHJbuyDYBFGQLlcHwgaCWSkl23pqK6WzjR0Es7qwbaUz1f3NOivP1rezCKb1cdeaX0eaRXaAdAchiyyF7DuyZWS7yE5aSqa1dFjLFXhO00gPkR0iZNCA_xogna4VTevHEsIiB8AnpAtIEwgzCDmEA4RvCJv8xqCPkB4jy_BOLIE0h4w1kjyyk_pp2Zrf-mmlD6rJWSufQgManU-5IsaQFtCASnGhdryGULiBCCFjpecQEkjnkC6eyzHobctII2whfEYwG45WONqAejZvmWvXlCi90dEyf2LQHs5Lpy9YzHp2tTpztFs7zp6tz1SKeYRcpZRE-ovbYQnOwYdaQFpC-hsh1SCb537ZWqNtEemXs-Qcwup5iWP2uByOmW1gThEWq0cJbpMrmr4SyJLI9pHuIT1qSkH4-q-D1OWH_AU" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```

【表子2.0】
👉 https://latticelite.com/tool/hyoko/

⭐機能説明（コードエリア）

🔹HTML

noteに載せるときはMermaidが基本だけど、自前のサイトやブログに飾る時は、Mermaidだとちょっと不便。

そんな訳で、HTMLコードとしてコピー・保存できる機能を盛ったよ！

「保存」ボタンを叩くと、HTMLファイルで落ちてくるから、ブラウザで開いて、全体のバランスが崩れてないかチェックしてみて。

🔹画像

noteのトップにMermaidコードを置くと、エラーになって着崩れしちゃうから、アイキャッチ的に使いたい時はダウンロードした画像を使ってね。

記事のタイトル画像としても映えるよ！

でも実は、noteのMermaidに規制が入ったらどうしよう……
ってちょっと不安だったんだけど。

表介くんに相談したら「画像でも出せるよ」って提案してくれたから、秒で採用しちゃった💖

🔹復活の呪文

これまでの「表子」は設定データが重すぎて、シェアするにはちょっと野暮ったい感じだったの。

「もっとスリムにできない？」って表介くんにお願いしたら……

なんだろう、エモいっていうか、かなり独創的なアウトプットが返ってきちゃった。

正直、解読不能でちょっと引いてるんだけど（笑）、これも彼のこだわりなのかな。

こんなメモまで添えられてて、私には何だか意味不明。

ゆうて　いみや　おうきむ
こうほ　りいゆ　うじとり
やまあ　きらぺ　ぺぺぺぺ
ぺぺぺ　ぺぺぺ　ぺぺぺぺ
ぺぺぺ　ぺぺぺ　ぺぺぺぺ　ぺぺ

表介くんとは昔からの幼馴染なんだけど、彼、独特の世界観を持ってるっていうか……。

真冬でも、アイス片手にハーフパンツで歩いてるし、何を考えてるか読めないところがあるんだよね🍦

🔹URL

じゃあ、今回のアップデートの目玉機能を説明するよ！

この機能、作った表をアーカイブする時はもちろんだけど、誰かとお気に入りをシェアしたい時、ぜったい「枠💌枠」すると思うの。

noteやSNSに「復活の呪文」を載せるのもアリだけど、それだと「コピーして、表子を開いて、ペースト」っていうステップになるから、ちょっと重いでしょ？

URLならワンクリックで即表示できるから、お気に入りの表デザインができたら、今宵のテンプレートにして、どんどん紹介しちゃおう！

でもURLが長すぎると、プラットフォーム側で弾かれちゃうこともあるから、そんな時は「復活の呪文」をセレクトしてね。

【表子2.0】
👉 https://latticelite.com/tool/hyoko/

⭐機能説明（セルの書式設定）

🔹部分装飾

```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#jOnD{*{box-sizing:border-box;}.hyoko{width:610px;col{width:607.015px;}tr{height:105px;}}table{border-collapse:collapse;table-layout:fixed;width:610px;}td{background-color:#fff2e6;color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:16px;text-align:center;vertical-align:middle;padding:10px 15px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:3px solid #ff8d1b;}.a1_1{color:#ff8d1b;font-size:36px;font-weight:bold}.a1_2{font-size:24px;font-weight:bold}.a1_3{font-size:24px}.a1_4{font-size:18px}.hlink{width:610px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
  columns 1
  A["<div id='jOnD'><div class='hyoko'><table class='bl'><colgroup><col></colgroup><tr><td><span class='a1_1'>表子 2.0</span>　　<span class='a1_2'>表作りなら私に任せて！</span><span class='a1_3'><br/></span><span class='a1_4'>最新ツール「表子」で、あなたのnoteをプロっぽく彩っちゃお✨</span></td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#TY5NSwJRGIUbr3bJFgVFH4sgrgQubLwziphMU8sIpB8QLRwdc8ga8Q590ARzZ9oURdGiFgkhQvZB0T79M732sesnFGMR8cI5h4eXw_ma2CWbepVkiCxKIiUxkqtUSIaUdsw1k-wJwtAICgUxjhSLRVlPjSKEMI7QtJSQcmIXpwuShnGfxCJa0b8ADkqpyraAe7O6Ud0xx1A0hIX8MMa_D_MoPIsGVDQwh8KLOKmZlmWu21VjtWTZ1Kb2jL1U0TemZGqVDOZbTivrUzI1fLbg7xKncXSZ5KnIEilxSzPLBRIjTE7-z75KabIyHgxog8FAWQhkcX8-k2B_k0PMLBuFHkEQGgqj6kf95vXhdFIWqRJXwXHAcRQm-bjTroF7CPwO3IP3Jgd-33l-Bn4J_PqzxZW4qjBZDXc9ob7VnLfzJ_D2wWuBdw_O0U8xOMfAm-Bw4K5fxa-AP26Ylg7uGXgX4D0AbwBvAz95bd92cx1cD_jhS-1Giavf" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```

セル内でテキストを部分的にセレクトして、スタイルを変更できるようになったよ。

特に表のタイトルをデコる時にオススメ。

テキストの背景色
テキストの色
フォントの種類
フォントサイズ
文字形式（太文字、イタリック、下線、打ち消し線）

🔹角の丸み

「角の丸み」設定も、今回こだわったカッティングのポイント！

直線的なラインを少し丸めるだけで、一気に抜け感が出て、こなれた印象になるんだよね。

右サイドバーでは、次の4つのシルエットが選べるよ。

角丸なし　　　・・・　エッジの効いたシャープな印象（デフォルト）
角丸あり　　　・・・　少しニュアンスをつけた柔らかい印象
スタジアム型　・・・　両端が滑らかでモダンなカーブ
円形／楕円形　・・・　ポップでアイコニックなフォルム

「詳細設定」をタップすると、専用のポップアップが出るから、ピクセル単位でこだわりたい派の人も満足できるはず。

左サイドにプリセットを置いてるから、まずはベースのスタイルを決めて、右上のテキストで数値を微調整するのが、オシャレに仕上げるコツだよ。

上にあるタブで、罫線の設定画面ともシームレスに行き来できるよ。

「全体設定」で「ボーダー：間隔なし」に設定しちゃうと、角丸のディテールが消えちゃうから、気を付けてね。

🔹背景と枠

前は、表の両端にどうしてもデッドスペースができちゃって、全体として窮屈になりがちだったんだけど、不要な「ぜい肉」をそぎ落とすテクニックを見つけたの。

今は「ノード」の代わりに「背景と枠」って名前にリネームしてて、今後はあえて余白を入れたり、ギミックを付けられたりできるといいな。

【表子2.0】
👉 https://latticelite.com/tool/hyoko/

⭐機能説明（その他）

🔹画面の拡大機能

表の入力エリアとプレビューエリアの右端に、ワークスペースを広げるためのアイコンを置いたよ。

真ん中のオレンジのラインは、マウスでドラッグして上下に動かせるから、作業しやすいサイズ感に調整してみて。

🔹ショートカットキー追加

表作りがはかどるように、ショートカットキーを増やしたから、ぜひ使ってみてね。

Ctrl + B ボールド
Ctrl + I イタリック
Ctrl + U アンダーライン

Ctrl + S コピー後、スタイルだけをペースト
Ctrl + D コピー後、データだけをペースト

🔹値や設定の記憶

前の「表子」は、編集中に他サイトに飛んだり、ページを閉じたりすると、せっかくの表データがリセットされちゃって不便だったんだよね。

そしたら表介くんが「ローカルストレージが使えるよ」って教えてくれて。

アイス1本で作ってくれたんだ。

リセットして最初から作り直したい時は、右下の「全てクリア」ボタンをポチッとしてね。

【表子2.0】
👉 https://latticelite.com/tool/hyoko/

💫2026.08.08 「表子 2.1」リリース！

noteのアップデートに合わせて、表子も「Mermaid 11」に対応したよ♪

note記事の冒頭に貼りつけても問題なくなったし、リンクも新しいタブで開けるようになってるからチェックしてみてね！

表を重ねて飾れる「レイヤー機能」を中心に、「フォント・画像の調整機能」や「表子リンクの設置機能」などが追加になってるよ。

スマホとかブラウザの表示設定で、表がギューって狭くなっちゃう問題も見つかって、今回しっかり見直したの。

noteに貼りつけた表がある人は、「表子 2.1.0」で作り直すのがオススメ！

ひと手間かかるけど、きれいに見せるためにお願いね☆

⭐おわりに

表子さん、説明ありがとうございました。
（表介くん、責任をなすりつけてゴメンなさい🙇）

あとはニャンコー不落が、余談を交えながら補足しておきたいと思います。

本当は「影」や「疑似要素」など、まだまだパワーアップさせたかったのですが、サイトの立ち上げが進まないので、ここまでを「表子 2.0」として出荷することにしました。

途中、「40周年」を祝いたいという想いから、「復活の呪文」機能を作って、もっとも胸熱で記憶に残っていたシーンを、表子で打ち込んでみました。

「ロンダルキアの洞窟」を抜けた後の、真っ白な雪原の大地。

祠に辿りつく前に、何度も全滅を食らいましたが、遠く懐かしい記憶です。

```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#NL1w{*{box-sizing:border-box;}.hyoko{width:610px;col{width:38px;}tr{height:36px;}tr.row3{height:15px;}tr.row1,tr.row2,tr.row4,tr.row5,tr.row6,tr.row7,tr.row8,tr.row9,tr.row10,tr.row11,tr.row12,tr.row13,tr.row14,tr.row15,tr.row16,tr.row17{height:38px;}}table{border-collapse:collapse;table-layout:fixed;width:608px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;line-height:1.5;white-space:pre-wrap;word-break:break-all;}.bl{td{font-size:16px;text-align:left;padding:0;border:hidden;}.a1{background-color:#000080;font-size:12px;text-align:center;vertical-align:top;}.a4,.l9,.m9,.n9,.o9,.p9,.i10,.j10,.k10,.l10,.m10,.n10,.o10,.p10,.h11,.i11,.j11,.k11,.l11,.m11,.n11,.o11,.p11,.f12,.g12,.j12,.k12,.l12,.m12,.c13,.d13,.e13,.f13,.g13,.i13,.j13{background:url(\"https://latticelite.com/tool/image/dq2/dot_06.png\") center center/cover no-repeat border-box;}.b4,.i4,.j4,.k4,.a5,.b5,.a6,.b6,.a7,.b7,.c7,.a8,.b8,.c8,.d8,.a9,.b9,.c9,.d9,.e9,.f9,.a10,.b10,.c10,.d10,.e10,.f10,.g10,.h10,.a11,.b11,.c11,.d11,.e11,.f11,.g11,.a12,.b12,.c12,.d12,.e12,.n12,.o12,.p12,.a13,.k13,.l13,.m13,.n13,.o13,.p13,.a14,.b14,.c14,.d14,.e14,.f14,.g14,.h14,.i14,.j14,.k14,.l14,.m14,.n14,.o14,.p14,.a15,.b15,.c15,.d15,.e15,.f15,.g15,.h15,.i15,.j15,.k15,.l15,.m15,.n15,.o15,.p15,.a16,.b16,.c16,.d16,.e16,.f16,.g16,.h16,.i16,.j16,.k16,.l16,.m16,.n16,.o16,.p16,.a17,.b17,.c17,.d17,.e17,.f17,.g17,.h17,.i17,.j17,.k17,.l17,.m17,.n17,.o17,.p17{background:url(\"https://latticelite.com/tool/image/dq2/dot_07.png\") center center/cover no-repeat border-box;}.c4,.l4,.c5,.j7{background:url(\"https://latticelite.com/tool/image/dq2/dot_13.png\") center center/cover no-repeat border-box;}.d4,.e4,.f4,.g4,.m4,.d5,.e5,.f5,.g5,.h5,.l5,.m5,.d6,.e6,.f6,.g6,.h6,.j6,.k6,.l6,.e7,.f7,.g7,.k7,.l7,.g8,.h8,.j8,.k8{background:url(\"https://latticelite.com/tool/image/dq2/dot_09.png\") center center/cover no-repeat border-box;}.h4,.n4,.m6,.h7{background:url(\"https://latticelite.com/tool/image/dq2/dot_12.png\") center center/cover no-repeat border-box;}.o4,.p4,.o5,.p5,.n6,.o6,.p6,.n7,.o7,.p7,.m8,.n8,.o8,.p8{background:url(\"https://latticelite.com/tool/image/dq2/dot_05.png\") center center/cover no-repeat border-box;}.i5,.j5,.k5,.i8{background:url(\"https://latticelite.com/tool/image/dq2/dot_11.png\") center center/cover no-repeat border-box;}.n5,.m7,.l8,.k9{background:url(\"https://latticelite.com/tool/image/dq2/dot_15.png\") center center/cover no-repeat border-box;}.c6,.d7,.e8,.g9{background:url(\"https://latticelite.com/tool/image/dq2/dot_14.png\") center center/cover no-repeat border-box;}.i6,.f8,.h9,.i9,.j9{background:url(\"https://latticelite.com/tool/image/dq2/dot_10.png\") center center/cover no-repeat border-box;}.i7{background:url(\"https://latticelite.com/tool/image/dq2/dot_08.png\") center center/cover no-repeat border-box;}.h12{background:url(\"https://latticelite.com/tool/image/dq2/dot_02.png\") center center/cover no-repeat border-box;}.i12{background:url(\"https://latticelite.com/tool/image/dq2/dot_01.png\") center center/cover no-repeat border-box;}.b13{background:url(\"https://latticelite.com/tool/image/dq2/dot_04.png\") center center/cover no-repeat border-box;}.h13{background:url(\"https://latticelite.com/tool/image/dq2/dot_03.png\") center center/cover no-repeat border-box;}}.l1{margin-left:-608px;td{height:1px;padding:0;}div{width:100%;height:100%;display:grid;font-size:14px;text-align:left;align-content:center;padding:4px 8px;border:none;}.lct{display:block;}._c1{font-size:16px;text-align:center;align-content:end;padding:0;border:hidden;}._o2{color:#ffffff;font-size:12px;text-align:center;padding:0;border:hidden;}}._c1_1{color:#ffcd00;font-size:48px}._c1_2{color:#ffcd00;font-size:33px}._c1_3{color:#ffffff;font-size:33px}._c1_4{color:#e60000;font-family:monospace;font-size:48px}._c1_5{color:#ffffff;font-size:33px}.bl,.l1{display:inline-block;vertical-align:top;}}","block":{"padding":0}} }%%
block-beta
  columns 1
  A["<div id='NL1w'><div class='hyoko'><table class='bl'><colgroup><col><col><col><col><col><col><col><col><col><col><col><col><col><col><col><col></colgroup><tr class='row1'><td class='a1' rowspan='2' colspan='16'></td></tr><tr class='row2'></tr><tr class='row3'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row4'><td class='a4'></td><td class='b4'></td><td class='c4'></td><td class='d4'></td><td class='e4'></td><td class='f4'></td><td class='g4'></td><td class='h4'></td><td class='i4'></td><td class='j4'></td><td class='k4'></td><td class='l4'></td><td class='m4'></td><td class='n4'></td><td class='o4'></td><td class='p4'></td></tr><tr class='row5'><td class='a5'></td><td class='b5'></td><td class='c5'></td><td class='d5'></td><td class='e5'></td><td class='f5'></td><td class='g5'></td><td class='h5'></td><td class='i5'></td><td class='j5'></td><td class='k5'></td><td class='l5'></td><td class='m5'></td><td class='n5'></td><td class='o5'></td><td class='p5'></td></tr><tr class='row6'><td class='a6'></td><td class='b6'></td><td class='c6'></td><td class='d6'></td><td class='e6'></td><td class='f6'></td><td class='g6'></td><td class='h6'></td><td class='i6'></td><td class='j6'></td><td class='k6'></td><td class='l6'></td><td class='m6'></td><td class='n6'></td><td class='o6'></td><td class='p6'></td></tr><tr class='row7'><td class='a7'></td><td class='b7'></td><td class='c7'></td><td class='d7'></td><td class='e7'></td><td class='f7'></td><td class='g7'></td><td class='h7'></td><td class='i7'></td><td class='j7'></td><td class='k7'></td><td class='l7'></td><td class='m7'></td><td class='n7'></td><td class='o7'></td><td class='p7'></td></tr><tr class='row8'><td class='a8'></td><td class='b8'></td><td class='c8'></td><td class='d8'></td><td class='e8'></td><td class='f8'></td><td class='g8'></td><td class='h8'></td><td class='i8'></td><td class='j8'></td><td class='k8'></td><td class='l8'></td><td class='m8'></td><td class='n8'></td><td class='o8'></td><td class='p8'></td></tr><tr class='row9'><td class='a9'></td><td class='b9'></td><td class='c9'></td><td class='d9'></td><td class='e9'></td><td class='f9'></td><td class='g9'></td><td class='h9'></td><td class='i9'></td><td class='j9'></td><td class='k9'></td><td class='l9'></td><td class='m9'></td><td class='n9'></td><td class='o9'></td><td class='p9'></td></tr><tr class='row10'><td class='a10'></td><td class='b10'></td><td class='c10'></td><td class='d10'></td><td class='e10'></td><td class='f10'></td><td class='g10'></td><td class='h10'></td><td class='i10'></td><td class='j10'></td><td class='k10'></td><td class='l10'></td><td class='m10'></td><td class='n10'></td><td class='o10'></td><td class='p10'></td></tr><tr class='row11'><td class='a11'></td><td class='b11'></td><td class='c11'></td><td class='d11'></td><td class='e11'></td><td class='f11'></td><td class='g11'></td><td class='h11'></td><td class='i11'></td><td class='j11'></td><td class='k11'></td><td class='l11'></td><td class='m11'></td><td class='n11'></td><td class='o11'></td><td class='p11'></td></tr><tr class='row12'><td class='a12'></td><td class='b12'></td><td class='c12'></td><td class='d12'></td><td class='e12'></td><td class='f12'></td><td class='g12'></td><td class='h12'></td><td class='i12'></td><td class='j12'></td><td class='k12'></td><td class='l12'></td><td class='m12'></td><td class='n12'></td><td class='o12'></td><td class='p12'></td></tr><tr class='row13'><td class='a13'></td><td class='b13'></td><td class='c13'></td><td class='d13'></td><td class='e13'></td><td class='f13'></td><td class='g13'></td><td class='h13'></td><td class='i13'></td><td class='j13'></td><td class='k13'></td><td class='l13'></td><td class='m13'></td><td class='n13'></td><td class='o13'></td><td class='p13'></td></tr><tr class='row14'><td class='a14'></td><td class='b14'></td><td class='c14'></td><td class='d14'></td><td class='e14'></td><td class='f14'></td><td class='g14'></td><td class='h14'></td><td class='i14'></td><td class='j14'></td><td class='k14'></td><td class='l14'></td><td class='m14'></td><td class='n14'></td><td class='o14'></td><td class='p14'></td></tr><tr class='row15'><td class='a15'></td><td class='b15'></td><td class='c15'></td><td class='d15'></td><td class='e15'></td><td class='f15'></td><td class='g15'></td><td class='h15'></td><td class='i15'></td><td class='j15'></td><td class='k15'></td><td class='l15'></td><td class='m15'></td><td class='n15'></td><td class='o15'></td><td class='p15'></td></tr><tr class='row16'><td class='a16'></td><td class='b16'></td><td class='c16'></td><td class='d16'></td><td class='e16'></td><td class='f16'></td><td class='g16'></td><td class='h16'></td><td class='i16'></td><td class='j16'></td><td class='k16'></td><td class='l16'></td><td class='m16'></td><td class='n16'></td><td class='o16'></td><td class='p16'></td></tr><tr class='row17'><td class='a17'></td><td class='b17'></td><td class='c17'></td><td class='d17'></td><td class='e17'></td><td class='f17'></td><td class='g17'></td><td class='h17'></td><td class='i17'></td><td class='j17'></td><td class='k17'></td><td class='l17'></td><td class='m17'></td><td class='n17'></td><td class='o17'></td><td class='p17'></td></tr></table><table class='l1' aria-hidden='true'><colgroup><col><col><col><col><col><col><col><col><col><col><col><col><col><col><col><col></colgroup><tr class='row1'><td><div class='_a1'></div></td><td><div class='_b1'></div></td><td rowspan='2' colspan='12'><div class='_c1'><span class='lct'><span class='_c1_1'>祝！</span><span class='_c1_2'> </span><span class='_c1_3'>ドラクエ </span><span class='_c1_4'>40</span><span class='_c1_5'> 周年</span></span></div></td><td><div class='_o1'></div></td><td><div class='_p1'></div></td></tr><tr class='row2'><td><div class='_a2'></div></td><td><div class='_b2'></div></td><td colspan='2'><div class='_o2'>2026.5.27</div></td></tr><tr class='row3'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row4'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row5'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row6'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row7'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row8'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row9'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row10'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row11'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row12'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row13'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row14'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row15'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row16'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row17'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></div></div>"]
```

本当は、白地に薄緑のドットが刻まれたマスですが、あえて白系のドットで作ってあります。

他のキャラクターや洞窟、険しい山や海なども、表子でドット化したものを画像にして、最後に繋げて完成です。

最近のドラクエはやっていませんが、あの頃の時代を生きられて良かったなと思います。

素晴らしいゲームを世に送り出してくれて、感謝に尽くせません。

ありがとうございました。

【表子2.0】
👉 https://latticelite.com/tool/hyoko/

いいなと思ったら応援しよう！

この記事が参加している募集

noteの書き方

6.2万件