1ビットアイコン
1-Bit Icon Design / 1982–1990s / 技法 / UI表現
Susan Kare が Macintosh のために確立した、白と黒の二値だけで描くアイコンの作法。方眼紙の一マスを一ピクセルとして下絵を起こし、はさみが切り取り、ごみ箱が削除を指すように、日用品の輪郭で命令を言い換える。その原画帳は美術館の収蔵品になった。
ひと目で判断
見た目の特徴
- 白と黒の二値しか使わず、灰色は市松に間引いた点の集まりで代用される
- 輪郭が1ピクセルの線で閉じられ、内側は塗りつぶしか網点かのどちらかしかない
- はさみ、ごみ箱、書類といったありふれた物の輪郭が、そのまま操作の名前になっている
- 方眼の一マスずつ点を置いた跡が残り、斜めの線は階段状に折れる
向いている用途
- 文字を添えずに操作を示す小さな絵記号を、どの言語圏でも同じ意味で読ませたいとき
- 拡大も補間もできない小さな枠の中で、輪郭の形だけで見分けをつけたいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 絵の中に文字を入れず、名札は絵の外の行へ出す。添える書体も同じ枡目のビットマップにそろえ、斜体や飾りを持ち込まない。
- 構成
- 方眼を先に引き、その一マスを一ピクセルとして下絵を起こす。輪郭を閉じてから内側を決め、枠の縁には一マスぶんの余白を残す。
- 素材
- 色は黒と白の二つだけにする。中間の明るさが要るときは点を市松に間引いて作り、灰色そのものは持ち込まない。斜めの線は階段のまま残し、ならさない。
- 注意
- 灰色や中間色を足して階調を増やすと、二値でしか成立しない輪郭の強さが失われ、小さく置いたときに形そのものが読めなくなる。
- 関連研究
- MoMA と SFMOMA が共同で収蔵した Kare の原画帳の記録 / 日用品で命令を言い換えるという発想が、どこまで説明なしに通じたか / 二値の市松で中間調を作る網点の使い分けと、その限界
関連項目
- 案内用ピクトグラム（Pictogram System）共通する印象：技術 / 親密。1ビットアイコンと案内用ピクトグラムの違いを見る
- ピクセルアート（Pixel Art）共通する印象：遊び / 技術。1ビットアイコンとピクセルアートの違いを見る
UI表現をさらに見る
同じ「UI表現」から、共通する印象が多い順に次の項目を選んだ。
- フラットデザイン / ベクターミニマリズム（Flat Design / Vector Minimalism）共通する印象：親密 / 遊び。
- クレイモーフィズム（Claymorphism）共通する印象：親密 / 遊び。
- ダイエジェティックUI（Diegetic UI）共通する印象：遊び / 技術。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/one-bit-icon
- Markdown
- [1ビットアイコン（1-Bit Icon Design） — デザインスタイル辞典](https://indexstyle.org/ja/styles/one-bit-icon)
- HTML
- <a href="https://indexstyle.org/ja/styles/one-bit-icon">1ビットアイコン（1-Bit Icon Design） — デザインスタイル辞典</a>