何個知ってる？入社して知った面白業界用語10選

こんにちは！意匠部新卒デザイナーの大桐です。

つい4ヶ月前まで、私は建築学生でした🪚
そして今年の4月に初めて足を踏み入れたWEB業界。舐めていました、業界の差。まるで異世界です！
異世界では聞いたことのない業界用語が毎日飛び交っています。

「このままではだめだ！」と思った私は、入社して初めて知った業界用語 ¹⁾をまとめてみることにしました。
今回、その中から、言葉の由来が面白い！知ってるとかっこいい！と思ったものを10個紹介しようと思います。

1) WEBデザイン用語、WEBプログラミング用語や、印刷用語、その他、 IT/WEB業界全般で使われる用語を含みます。

■ 面白業界用語のイラストクイズに挑戦してみよう

「でも、ただ用語を紹介&解説するだけじゃ、デザイナーのブログっぽくないな...」
と思ったので、意匠部のデザイナーに業界用語のイラストを描いてもらい、それを全10問のクイズにしてみることにしました🎨🖌！！！

あなたは、イラストが意味する業界用語が分かるでしょうか？
イラストは全て、言葉の由来に基づいて描かれているので、意味だけじゃなく由来まで知っていれば正解できると思います！ 全問正解だったら、あなたは間違いなくWEB業界玄人！！！！！

これからWEB業界に進むか迷っている人も、
最近WEB業界に入った人も、
WEB業界で既に働いてる人も、
面白業界用語のイラストクイズに挑んでみてください！

イラストを楽しむだけでもOKです😊

第一問 難易度 ★☆☆☆☆

さあ、第一問目です。
このイラストが意味する用語はなんでしょうか？
エンジニアがよく使う用語です！

（絵：齋藤 来瞳）

第一問のイラストは、同期の新卒デザイナー、くるめちゃんが iPad を使ってイラストレーターで描いてくれました！ くるめちゃんは、学生の頃からロゴやパッケージデザインを多く手掛けてきた北海道ガールです！

ヒント

おや、なにやら様子のおかしいパソコンの中から生き物が出てきていますね！
この生き物は英語でなんというでしょうか？

答え

正解は…………
「バグ（bug）」でした！
コンピューターなどのプログラム上の不具合を意味する言葉ですね。

そう、「バグ」という言葉の由来は「虫」なのです。
1940年代、コンピューター開発に関わっていた Grace Hopper が、正常に動作しないコンピューターの内部に虫が挟まっているのを見つけ、「バグ」という言葉を使ったことが起源とされています。
（初めて「バグ」という言葉を使った人物については諸説あり）

以降、「バグ」はコンピューターの故障やプログラム上の不具合を指す言葉として広く使われるようになったのです。

また、バグを取り除く作業は、「除去」や「分離」といったニュアンスを持つ接頭辞 “de-” を “bug” につけて、「デバッグ（debug）」といいます。
この言葉も、プログラマーがよ〜く使っている言葉なので、覚えておきましょう！

[参考]

1. Sharron Ann Danis. “Rear Admiral Grace Murray Hopper”. 1997-02-16. https://ei.cs.vt.edu/~history/Hopper.Danis.html, (参照 2023-07-25)
2. 堀田隆一. “#2721. 接頭辞 de-”. hellog～英語史ブログ. 2016-10-08. http://user.keio.ac.jp/~rhotta/hellog/2016-10-08-1.html, (参照 2023-07-26)
3. “新英和大辞典 第五版”. 研究社. 1980.

第二問 難易度 ★☆☆☆☆

続いて第二問。
このイラストが意味する用語はなんでしょうか？
UIデザインでよく使われる用語です！

（絵：河邉 宏樹）

デッサンの講師もしている河邉さんに、iPad × プロクリエイトで描いていただきました！
シズル感がありすぎて、よだれが出てきてしまいますね。
河邉さんは、アートディレクションから企画まで広く活躍しているデザイナーです！

ヒント

ハンバーガーの前にうっすら横線がありますね、、、
この三本線、見覚えありませんか？

答え

正解は…………
「ハンバーガーアイコン（ボタン） 」でした！

「ハンバーガーアイコン（ボタン）」とは、クリックするとナビゲーションメニューが表示される、WEBサイトやアプリの画面上にある3本線「≡」のアイコン（ボタン）です。
シンプルに、メニューアイコンの形状がハンバーガーに似ていることに由来しています。
たしかに、3本の横線「≡」がハンバーガーのパティやバンズの間の具材に似ていますね！

実は、このアイコンは1981年に Norm Cox というデザイナーによって作成されてから、30年近く使われてこなかったものだったそうです。
このアイコンが普及し始めたのは1981年の30年後、、、そう、スマートフォンが普及し始めた頃です！！！ パソコンほど大きくないスマートフォンの画面に、多くの情報を収めるにはもってこいだったのですね。

多くのサイトにハンバーガーメニューのアイコンが使われるようになり、今では多くの人が親しんでいるUIとなりました。

しかし、認知度が高いと言えど、

• 一目見ただけでは何を表しているかわかりにくい

• メニューアイコンだとはわかっていても、開いてみないとどんな内容なのかがわからない
  

などのデメリットもあります。
そのため、近年、WEBサイトやアプリでハンバーガーアイコンを廃止している企業もあるそうです。

そんなハンバーガーアイコンですが、他にも以下のような似た見た目・役割のアイコンがあります。

3つの点が横に並んだ「ミートボールアイコン」、3つの点が縦に並んだ「ケバブアイコン」、9つの点や四角形が縦横3つずつ並んだ「弁当アイコン」などなど。
それぞれ、ハンバーガーアイコンとどんな違いがあるのか、どんな使い分けをされているのかについて調べてみると面白いかも！？

[参考]

1. Ana Gonzalez. “A Brief History of the Hamburger Icon”. Placeit Blog. https://blog.placeit.net/history-of-the-hamburger-icon/, (参照 2023-07-25)
2. CARRIE COUSINS. “Loving & Hating the Hamburger Icon”. 2018-09-17. https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/, (参照 2023-07-25)

第三問 難易度 ★★☆☆☆

第三問！
このイラストが意味する用語はなんでしょうか？
WEB業界だけでなく映像制作や広告、印刷業界などで幅広く使われる用語です！

（絵：岡田 洋坪）

このイラストは、岡田さんに iPad × プロクリエイトで描いていただきました！
岡田さんは、最近カヤックへ中途入社されたアートディレクター／デザイナーです！以前は映像制作会社で働いていたそうです。
プロクリエイトでこんな趣ある和風イラストも描けるんですね！

ヒント

職人さんが一生懸命、紙を漉いています。
おや...よく見ると、イラストの中に答えが書いてありますよ.......！

答え

正解は…………
「ウォーターマーク」でした！

「ウォーターマーク」は、画像や映像の上に薄く入っているロゴやマークのことです。写真素材サイトなどで購入前の画像に入っているあのマークですね。
「ウォーターマーク」を入れることで、コンテンツの作者や所有者を明確にでき、コンテンツが盗まれるリスクを減らすことができます。また、自分の名前やブランドの認知度を高める目的でも使われることがあるそうです。

現在では「ウォーターマーク」というと「電子透かし」を指すことが多いですが、本来は、お札に描かれている野口英世のような「紙の透かし」のことでした。

紙のわずかな凹凸で表現された野口英世は、光にかざすとよく見えますよね。あの凹凸は、かつてどうやって作られたかご存知でしょうか？

先ほどの「ウォーターマーク」のイラストでは、職人さんが木の枠（漉き桁）を持って紙を漉いていますよね。
「透かし」を入れる時には、その漉き桁に針金で模様をつけることで、漉きあがった時にその模様が紙の薄い部分として転写されるのです！
このように、水で濡らしながら透かしを作成することから watermark つまり、water（水）+ mark（印）と言われるようになったという説があります。その他、紙を光に照らしたときや水に濡らしたときにだけ目に見えるものだから、という説もあります。

「ウォーターマーク」という言葉は、歴史のある言葉だったのですね！

[参考]

1. “ウォーターマーク（透かし）とは”. Dropbox. https://experience.dropbox.com/ja-jp/resources/what-is-watermarking#:~:text=%E5%85%83%E3%80%85%E3%81%AE%E9%80%8F%E3%81%8B%E3%81%97%E3%81%AF%E3%80%81%E7%B4%99,%E3%81%AB%E7%94%B1%E6%9D%A5%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82, (参照 2023-07-25)
2. “第三章印刷とブック・デザイン”. 国立国会図書館. https://www.ndl.go.jp/incunabula/chapter3/index.html, (参照 2023-07-25)

第四問 難易度 ★★☆☆☆

第四問！
このイラストが意味する用語はなんでしょうか？
WEB・広告・印刷業界などのデザイナーがよく使う2つの用語が隠されています！

（絵：白井 章平）

このイラストは、白井さんにフォトショップで描いていただきました！
白井さんは身に着けるだけで神々しい後光が差すウェアラブル後光という謎の装置も作ったりしているプランナーなのですが、元意匠部デザイナーということでイラストを描いていただきました。

今回のイラスト制作現場を見に行くと、おや、、、なんと、タブレットを用いず、マウスでぽちぽち線を描いてるじゃありませんか！職人技です！！！

ヒント

爆発してます！！！爆発するものと言えば？
WEB業界では、「〇〇を置く」という風に使われます！
そして、人と一緒に吹き飛んでいるのはなんでしょうか？
こちらは、「〇〇を敷く」という風に使われます！！！

答え

正解は…………
「バクダン」と「座布団」でした！
どちらも文字を強調したり目立たせる時に使用されるものです。

■ バクダン

「バクダン」とは、爆発してるギザギザの吹き出しのことです！
（漢字で「爆弾」よりカタカナで「バクダン」と表記されることの方が多いようです）

(作：大桐 佳奈)

↑こんな感じで、特売チラシやポスターなど、商品やサービスを目立たせるために使用されているのをよく見かけませんか？
「バクダン」を使用したデザインは視覚的に強い印象を与えるため、文言を強調したい場合に効果的なんです。なんだかお得感もありますよね！
「バクダン」は黄や赤と相性が良く、より目立たせるために文字や図形にアウトラインやドロップシャドウなどの効果が用いられていることが多いです。

ポスターやバナーを作っていると、「ここ目立たせたいからバクダン置いといて〜」と言われたりします。

■ 座布団

「座布団」とは、このように文字の背面に敷く色のついた四角や丸などの図形のことです。

たしかに、文字が座布団の上に座ってるように見えますよね。 そして、その色のついた図形を敷くことを「座布団を敷く」といいます！ 座布団を敷くケースは以下のような場合が挙げられます。

　座布団を敷くケース

・文字を目立たせたい／差別化したい場合 → 文字とコントラストの強い色を敷くと効果的
・背景が複雑だったり、文字と背景が同系色であるために文字が埋もれている場合

このように、文字を強調したり目立たせる時にもってこいな「バクダン」と「座布団」ですが、いずれも使いすぎると効果が薄れてしまうので、しっかりと役割を理解して使っていきましょう！

[参考]

1. 株式会社ウィル・コーポレーション. “賢者の印刷用語集”. 賢者の販促. 2023-03-28. https://www.well-corp.jp/solution/, (参照 2023-07-26)
2. 鷹野 雅弘. “ベテランほど知らずに損してるIllustratorの新常識（8）Illustratorでの「座布団」の実装方法アレコレ”. Adobe Blog. 2018-01-26. https://blog.adobe.com/jp/publish/2018/01/26/dtp-illustrator-kihon-tips-08, (参照 2023-07-26)

第五問 難易度 ★★★☆☆

第五問！
このイラストが意味する用語はなんでしょうか？
IT業界全般のエンジニアがよく使う3つの用語が隠されています！

（絵：田 子千）

こちらは、同期の新卒デザイナーのデンちゃんに iPad × プロクリエイトで描いていただきました！
デンちゃんは、弊社でいちばんのカラフルガールで、絵本作家でもあるデザイナーです！

ヒント

見えてるものを英語で3つ答えたら、それが正解かもしれません！
1つ目は哺乳類、2つ目は爬虫類、3つ目は食べ物ですよ！！！
それぞれの言葉の語尾に「ケース」をつけると......？

答え

正解はそれぞれ…………
「キャメルケース」「スネークケース」「ケバブケース」でした！

いずれも、コーディング時などでの命名規則のことで、単語の区切り方の違いで呼び分けています。
プログラムを書いている時、変数名やクラス名など様々な場面で命名する必要があるのですが、その際に活用できる命名規則なのです。
（プログラミングをしていれば必ず必要になる知識です！）

私たちデザイナーは、エンジニアに書き出した画像ファイルなどを渡す時のファイル名や、Figma のコンポーネント名、Blender のオブジェクト名などで命名規則を気にする必要があります。
例えば、ハンバーガーアイコンの SVG ファイルをエンジニアに渡したい時、代表的な命名規則は以下になります。

• iconHamburgerMenu.svg → キャメルケース
• icon_hamburger_menu.svg → スネークケース
• icon-hamburger-menu.svg → ケバブケース

画像のファイル名には（あまり大文字を使いたくないので）スネークケースやケバブケースが用いられることが多い傾向があります。

代表的な「キャメルケース」「スネークケース」「ケバブケース」の他にも命名規則の種類があり、まとめるとこんな感じです。

キャメルケース camelCase （ローワーキャメルケース lowerCamelCase）	単語の区切りを大文字にする命名規則 由来：大文字の部分がラクダ（camel）のこぶのように見えることから
スネークケース snake_case	単語の区切りをアンダースコアでつなぐ命名規則 由来：歩いているヘビのように見えることから
ケバブケース kebab-case （チェインケース chain-case）	単語の区切りをハイフンでつなぐ命名規則 由来：串刺し料理のケバブのように見えることから
パスカルケース PascalCase （アッパーキャメルケース UpperCamelCase）	全ての単語の先頭を大文字にする命名規則 由来：プログラミング言語の Pascal で幅広く用いられていたことから
コンスタントケース CONSTANT_CASE （アッパースネークケース UPPER_SNAKE_CASE）	全て大文字で表記し、スネークケースと同様に単語の区切りをアンダースコアでつなぐ命名規則 由来：定数（constant）の命名に用いられることが多かったため

以上のように、いろんな命名規則がありますが、ファイル名を決めたり、コードを書く際にはスタイルが統一されている方が良いです。 どの命名規則が使われるかは、プロジェクトのルールやエンジニアの好み、プログラミング言語の慣習によるのでプロジェクトごとにしっかり確認しましょう！

[参考]

1. “キャメルケース”. IT用語辞典 e-Words. 2021-06-23. https://e-words.jp/w/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9.html, (参照 2023-07-26)
2. “スネークケース”. IT用語辞典 e-Words. 2022-07-20. https://e-words.jp/w/%E3%82%B9%E3%83%8D%E3%83%BC%E3%82%AF%E3%82%B1%E3%83%BC%E3%82%B9.html, (参照 2023-07-26)
3. “ケバブケース”. IT用語辞典 e-Words. 2022-07-20. https://e-words.jp/w/%E3%82%B1%E3%83%90%E3%83%96%E3%82%B1%E3%83%BC%E3%82%B9.html, (参照 2023-07-26)
4. “History around Pascal Casing and Camel Casing”. Microsoft. 2004-03-02. https://learn.microsoft.com/en-us/archive/blogs/brada/history-around-pascal-casing-and-camel-casing, (参照 2023-07-26)

第六問 難易度 ★★★☆☆

やっと半分まできました！第六問です！
このイラストが意味する用語はなんでしょうか？
WEBデザイン業界でよく使われる4つの用語が隠されています！

（絵：鈴木 菜々子）

こちらは、最近狩猟免許を取ろうとしているベルこと鈴木さんに iPad × プロクリエイトで描いていただきました！
ベルさんは、新卒時代にカヤックの新人賞を受賞した入社3年目のスーパーデザイナーです！

ヒント

全てWEBやアプリデザインにおける英語のUI用語です！イラストをよく見ると、名前が書いてありますね！
全部で4つです！

答え

正解は…………
「アコーディオン（accordion）」「カルーセル（carousel）」「トースト（toast）」「スナックバー（snackbar）」でした！

どれもWEBやアプリデザインにおけるUIコンポーネントの名称で、その見た目から命名されています！

UIコンポーネントとは「ボタン」「チェックボックス」「テキストフィールド（文字入力欄）」などの画面上に表示するUIパーツのことです！

それぞれのUIコンポーネントの特徴をざっくり説明していきます！

■ アコーディオン（メニュー）

項目をクリックすることで隠れていた情報を表示するUIコンポーネントです。
クリックするとアコーディオンのように開いたり閉じたりすることから、「アコーディオン（メニュー）」と呼ばれています。

メニューの端にある「下向きの矢印 ↓」や「＋」のマークを押すとメニューが展開され、「上向きの矢印 ↑」や「−」マークをもう一度押すことで、メニューを閉じることができるアレですね！
矢印などのマークによって、展開できるコンテンツであるとユーザーが理解しやすくなります。

■ カルーセル

複数の画像やコンテンツをスライド表示させるUIコンポーネントです。
メリーゴーランドのように回転する動きから 、メリーゴーランドのフランス語である「カルーセル」と呼ばれています。
（木馬が上下しないものをメリーゴーランド、上下するものをカルーセルと呼び分けるという説もあり）

クリックによって切り替わったり、一定の間隔で自動的に切り替わったりするアレですね！
ユーザーはページ遷移や縦スクロールを行わずに、複数の情報を確認できます。

カルーセルの下には、複数の今何番目か表す丸が表示されていることが多いですが、それらは「カルーセルインジケーター（carousel indicator）」もしくは「カルーセルドッツ（carousel dots）」と呼ばれています。

■ トースト

一時的なメッセージや通知を表示するためのUIコンポーネントです。
下から上に出てくる様子が、トースターから出てくるトーストに 似てるから「トースト」と呼ばれています。

メールを送信した時やエラーの発生時など、操作完了時や状態が変更された時に、よく画面下部に出てくるアレですね！
このように、ユーザーが行った動作に関連しないものを表示するものです。

トーストは一時的に表示され、自動的にフェードアウトすることが多いため、ユーザーの操作を妨げずに情報を伝えるのに役立ちます。

Google の Material Design の記述によると、トーストは Android のみで使われるようです。

■ スナックバー

「トースト」と同様に、一時的なメッセージや通知を表示するためのUIコンポーネントですが、「スナックバー」はユーザーが行った動作に関連するものを表示したり、アップデートなどの実施する予定の操作を伝えるために使われます。
また、時間経過や他の画面操作でユーザー自身が消すことができる通知です。
（見た目では、「トースト」と大きな違いはなく、「スナックバー」と呼ばれる理由についての言及は見つかりませんでした🥲）

今回、4つのUIコンポーネントを紹介しましたが、その他にも様々なものがあります！それぞれにメリット・デメリットがあるので、是非調べてみてください！
本ブログでは全てを紹介できませんが、目的に応じてUIコンポーネントを選択し、WEBやアプリをより使いやすく魅力的にしていきましょう！

[参考]

1. “Snackbars”. MATERIAL DESIGN. https://m2.material.io/components/snackbars, (参照 2023-07-26)
2. “Using snackbars”. MATERIAL DESIGN. https://m2.material.io/components/snackbars/android#using-snackbars, (参照 2023-07-26)
3. “Toasts overview”. Get your app ready for the new Samsung devices. 2023-05-11. https://developer.android.com/guide/topics/ui/notifiers/toasts?hl=ja, (参照 2023-07-26)
4. “Toast”. developers. https://developer.android.com/reference/android/widget/Toast, (参照 2023-07-26)
5. “Snackbar”. developers. https://developer.android.com/reference/com/google/android/material/snackbar/Snackbar, (参照 2023-07-26)

第七問 難易度 ★★★☆☆

第七問！
このイラストが意味する用語はなんでしょうか？
エンジニアなら使ったことがあるかもしれない言葉です！

（絵：大桐 佳奈）

こちらは、私が板タブレット × フォトショップで描きました！ 動植物の絵を描くのが好きなので、柔らかい線を描くためにアナログ派だったのですが、今回初めてペンタブを使ってみました。
でも、基本的にアナログ派なので、学生時代は大工のバイトをしたり罠を仕掛けて狩猟したりしていました。今年も狩りに行きます。

ヒント

18世紀前半に書かれた、あの有名な冒険物語のシーンが由来になっています！
2つの卵がそれぞれ逆向きにエッグスタンドに立ってることと、卵の背中に書かれた数字がヒントです！

答え

正解は…………
「リトルエンディアン（Little Endian）」「ビッグエンディアン（Big Endian）」でした！

簡単に言うとどちらも、「データの並べ方」を表す用語です。

「エンディアン」という呼び方は、もともとは「ガリバー旅行記」に出てくる、ゆで卵をどちらの端の方から最初に割るかという議論に由来しています🥚
物語中では、大きな方の端から割る人々は「Big End-ian」、尖った方の端から割る人々は「Little End-ian」と呼ばれています（ “-ian” は「〜な人々」を表す接尾辞）。 ここから転じて、コンピューターの「データの並べ順」を表す言葉として使われるようになったそうです！

一般的には、データをメモリに格納する際のバイトの配置順序（バイトオーダー）を表すエンジニア用語として用いられていますが、日付の表記において年・月・日をどの順序で記述するかの分類にも用いられます！

本記事は意匠部ブログですし、よりわかりやすい後者で説明すると...

　2023年8月31日の表記方法

ビッグエンディアン　→　2023/08/31　（年月日の順：中国、日本、韓国など）
リトルエンディアン　→　31/08/2023　（日月年の順：イギリス、フランス、イタリアなど）

ちなみに、「ミドルエンディアン」もあります。
ミドルエンディアン　→　08/31/2023　（月日年の順：アメリカ）

同様に、データをメモリに格納する際にも、ハードウェアやファイルフォーマットによって「リトルエンディアン」だったり「ビッグエンディアン」だったりとバイトの配置順序が異なるケースがあります。
デザイナーが気にする機会はあまりないかもしれませんが、ハードウェアやファイルフォーマットでのエンディアンの違いには注意しなくてはなりません！

[参考]

1. “Endianってなに？”. 東光高岳. 2006-09. https://uquest.tktk.co.jp/embedded/learning/lecture05.html, (参照 2023-07-26)
2. “Endianness”. Wikipedia. 2023-6-23. https://en.wikipedia.org/wiki/Endianness, (参照 2023-07-26)

第八問 難易度 ★★★★☆

第八問！ このイラストが意味する用語はなんでしょうか？
WEBデザイン業界でよく使われる用語です！

（絵：田 子千）

再び、新卒デザイナーであり絵本作家でもあるデンちゃんに制作してもらいました！
先ほどは iPad でしたが、今度は切り絵で表現してもらいました！

ヒント

このイラストは.....あの有名なグリム童話、「ヘンゼルとグレーテル」ですね！
（お菓子の家が、お野菜の家になっているのがとってもキュートです！）
森の中で迷子になったヘンゼルが、道しるべとして使ったのは、、、◯◯◯ですね！
さぁ、もうおわかりでしょう。

答え

正解は…………
「パンくずリスト（breadcrumbs / breadcrumb list）」でした！

「パンくずリスト」は、ウェブサイトの上の方にある、階層順にリンクがリストアップされているものです！
「Home > Recruit > Internship」←こんなやつですね！
これによって、サイトの構造や、ユーザーが今サイト内のどこにいるのかが認識しやすくなり、ユーザビリティを高めることができます。

「パンくずリスト」という言葉は、「ヘンゼルとグレーテル」の物語中、森の中で迷子になった兄妹が、部屋から持ち出したパンくずを道しるべとして使っているあのシーンが由来になっています。

WEBサイトでも同じように、ユーザーが辿ってきたルートを示す役割を担っているため「パンくずリスト」と呼ばれるようになったのですね！

「パンくずリスト」には主に次の3種類があります。

位置型	閲覧中のページがサイト内のどの階層に位置するかを示す。 辿り着くまでの経路が違っても、同じページであればリストも同一となる。 最も主流であり、パンくずリストといえば、位置型を示す場合が多い。
属性型	閲覧中のページがサイト内のどのカテゴリに属するのかを示す。 ユーザーが辿ってきた経路によって表示されるリストが変わる。 ユーザーが条件を指定してページを閲覧するECサイトや物件情報サイトなどでよく利用される。
パス型	閲覧中のページにどういう経路でたどり着いたのか（閲覧履歴）を示す。 ユーザーが辿ってきた経路によって表示されるリストが変わる。

ユーザーの利便性が上がる「パンくずリスト」ですが、童話のとあるシーンが由来になっているなんて、メルヘンですね！

[参考]

1. “パンくずリスト”. Wikipedia. https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88, (参照 2023-07-26)

第九問 難易度 ★★★★☆

第九問！
このイラストが意味する用語はなんでしょうか？
WEBデザイナーがよく使う用語かもしれません！

(制作：重見 果歩)

このキュートなお人形は重見さんが粘土で制作してくれました！ 重見さんは、ホラーが大好きで、ちょっとぶっ飛んだ芸人さんみたいなデザイナーです！

ヒント

筋肉ムキムキの人が怒っています！
なにやら白くて四角い物体を投げつけようとしていますね。
美味しくて健康にも良い〇〇です！

答え

正解は…………
「Noto」でした！

「Noto」は Google と Monotype（一部 Adobe）が共同開発したフォントファミリーです。
みなさんの中には「Noto Sans (CJK) JP」はよく使うし、知ってるよ！という人も多いと思います。

でも「Noto」という言葉の由来を知っていますか？ 「Noto」は実はダブルミーニングになっているのです！

• ラテン語で “I write, I mark, I note” という意味
• “No Tofu” の略（“No More Tofu” と説明しているものもあり）

さて、“Tofu” ってなんでしょう？？

テキストが正しく表示されない場合に発生する、「□」「〿」こんな四角形ありますよね？
これが「Tofu （豆腐）」と呼ばれているのです！

そう、筋肉ムキムキの人が力一杯投げていたのは.....豆腐だったのですね！

「Noto」は、この「Tofu」をなくし、多言語環境での文字表示の問題を解決するために作られたフォントファミリーです。
「Noto」フォントファミリーのうち、日本語、中国語 (繁体字 / 簡体字)、韓国語 は「Noto Sans CJK」と呼ばれており、こちらは Google と Adobe の共同開発です。

「Noto Sans (CJK) 〇〇」の「〇〇」の部分は基本的に国の言語を表しています。

例えば...

いろんな Noto Sans 〇〇
Noto Sans KR	Korean（韓国語）
Noto Sans HK	Hong Kong（香港語）
Noto Sans TC	Traditional Chinese（中国語[繁体字]）
Noto Sans SC	Simplified Chinese（中国語[簡体字]）
Noto Sans JP	Japanese（日本語）
Noto Sans CJK JP	Japanese（日本語）、Chinese（中国語）、Korean（韓国語）

「Noto Sans JP」は（基本）日本語のみ、 「Noto Sans CJK JP」は日本語、中国語 (繁体字 / 簡体字)、韓国語の全てが収録されているが、その中で日本語が優先的に表示されるものです。
（※「Noto Sans JP」と「Noto Sans CJK JP」ではウエイトの数が違ったりします）
（※「Noto Sans Japanese」という開発段階のものもあります。ややこしいですね）
（※ Google Fonts では「Noto Sans JP」のことを「Noto Sans Japanese」と呼んでいたりもするようですが、ダウンロードされるのは「Noto Sans JP」です）

ちなみに「Noto Sans CJK」は Adobe からは 源ノ角ゴシック（Source Han Sans）として公開されています。
（※「源ノ角ゴシック JP」もあったりとほんとややこしいです）

▲「Noto Sans CJK JP」に「源ノ角ゴシック（Source Han Sans）」を重ねると、字形が一致することがわかります。

以上の背景から、
Google と Adobe が開発した「Noto Sans (CJK) JP」（※ KR なども）の従属欧文は
Google と Monotype が開発した「Noto Sans」とは異なることに注意してください！

▲「Noto Sans」と、「Noto Sans JP」＆「Noto Sans CJK JP」の従属欧文の比較

「Sans」はおなじみ「Sans-serif（サンセリフ体）」のことですね。フランス語で「飾り（serif）が 付いていない（sans）」という意味だそうです。いわゆる和文書体で言う「ゴシック体」ですね。
（欧文で「Gothic」というと「Blackletter」を指すとのこと）

「Noto Sans」と並んで、「Noto Serif」や「Noto Mono（等幅）」という姉妹フォントもあります。（「Noto Serif CJK」もあります）

ところで、「Noto Sans」の発音は「ノトサン」なのでしょうか？それとも「ノトサンズ」なのでしょうか？
以下の動画では「Sans」の「s」を発音し、「ノト サンズ」 と言っていますね！

youtu.be

収録文字数が豊富なだけでなく、ウエイトの種類も豊富で、バリアブルフォント（ウエイト、字幅などを自由に調整できるフォント）もリリースされていたり......と素晴らしいポイントが他にもたくさんあるフォントなのでぜひ調べてみてください！

[参考]

1. “Noto Sans Japanese”. Google Fonts. https://fonts.google.com/noto/specimen/Noto+Sans+JP, (参照 2023-07-26)
2. “誰でも使えるオープンソース フォント システム”. Google Developers. 2016-10-20. https://developers-jp.googleblog.com/2016/10/an-open-source-font-system-for-everyone.html, (参照 2023-07-26)
3. “Noto: A typeface for the world”. Google Fonts. https://fonts.google.com/noto, (参照 2023-08-09)
4. “More than 800 languages in a single typeface: creating Noto for Google”. Monotype. https://www.monotype.com/resources/case-studies/more-than-800-languages-in-a-single-typeface-creating-noto-for-google, (参照 2023-07-26)
5. “Noto fonts”. Wikipedia. 2023-08-05. https://en.wikipedia.org/wiki/Noto_fonts, (参照 2023-08-09)
6. “オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。”. Google Developers. 2014-07-16. https://developers-jp.googleblog.com/2014/07/noto.html, (参照 2023-08-14)
7. “Source Han Sansの紹介：オープンソースのPan-CJK書体”. Adobe Typekit Blog 日本語版. https://blog.typekit.com/alternate/source-han-sans-jp/, (参照 2023-08-14)
8. “「源ノ角ゴシック」と「源ノ角ゴシック CJK」との違いは？”. Adobe Blog. 2018-12-18. https://blog.adobe.com/jp/publish/2018/12/18/cc-adobefonts-source-han-sans-japanese-source-han-sans-cjk-japanese, (参照 2023-08-14)
9. “ややこしい「源ノ角ゴシック」と「Noto Sans」のまとめ". DTP Transit. 2021-04-20. https://dtptransit.design/fonts/genno-noto-sans-matome.html, (参照 2023-08-14)

第十問 難易度 ★★★★★

第十問！最後の問題なので難易度は高いですよ！
このイラストが意味する用語はなんでしょうか？
こちらはWEB用語というわけではありませんが、IT/WEB業界でよく使われている言葉です！

(絵：髙木 凜)

こちらは、毎月「つくっていいとも」（弊社の社内自由発表会）の表紙イラストを担当してくださっている、イラストも得意な髙木さんが iPad × プロクリエイトで制作してくれました！

ヒント

キリンの首やゾウの鼻など、長〜いものが短くなっていますね！
「長いものが短くなったWEB業界っぽい言葉」を1つでも答えられたら正解です！

答え

正解は…………
「i18n」「a11y」「l10n」「k8s」などの「ヌメロニム（numeronym）」でした！！！

「ヌメロニム」とは、長い英単語を数字で省略して表現した「数略語」のことです。
IT系ではよく使われている言葉なのだとか。

このかっこいい略し方は、1985年に誕生したのだそうです！
Jan Scherpenhuizen が自分の電子メールアドレスの作成をシステム管理者に依頼したところ、「S12n」 というアカウントを与えられ、この表現方法を気に入った本人が社内に広めていったのだそう。

■ ヌメロニムの作り方

一般的なヌメロニムは元の文字の先頭と末尾のみ残して、間にあった文字をその文字数で置き換えて作られます。
例えば......
「internationalization」は、「i +（18 文字）+ n」で構成されているので、ヌメロニムにすると「i18n」となります！
調べると、ネイティブは「アイ エイティン エヌ」と発音していました。

■ ヌメロニムリスト

i18n	internationalization	国際化
l10n	localization	ローカライズ、地域化
m17n	multilingalization	多言語化
g11n	globalization	グローバル化
a12n	administration	管理、行政
a11y	accessibility	アクセシビリティ、利用しやすさ
p13n	personalization	パーソナライズ
s13n	standardization	標準化

などなど。
この中でデザイナーが耳にする機会が多そうなのは a11y（アクセシビリティ）でしょうか。
UIデザインの際には、文字の大きさ、背景とのコントラストなど a11y にも配慮したいですね。
ヌメロニムは他にもたくさんあるので、業界人っぽくなりたい方は調べてじゃんじゃんみんなの前で使ってみましょう！

[参考]

1. Tex Texin. “Origin Of The Abbreviation I18n”. Internationalization (I18n), Localization (L10n), Standards, and Amusements. http://www.i18nguy.com/origini18n.html, (参照 2023-07-26)
2. “Numeonym”. Wikipedia(En). 2023-07-10. https://en.wikipedia.org/wiki/Numeronym, (参照 2023-07-26)

さいごに

いくつ正解できましたか？イラストから業界用語を推測するのは、なかなか難しかったのではないでしょうか？
全てわかった猛者は、間違いなく真のWEB業界玄人です！！！

10個の業界用語をクイズ形式＆解説つきで紹介したので、ちょっと長い記事になってしまいました。ここまで読んでくださりありがとうございました。
そして楽しいイラストを制作してくださったデザイナーの皆様、記事の監修をしてくださった OJT の小原さん、ありがとうございました！

できる限り正しい文献を見るように努めましたが、誤っている情報もあるかもしれません。その場合は、ご指摘いただけると幸いです。