Low-Tech Web Design
ロー・テック・ウェブ / 2018– / スタイル / UI表現
Kris De Deckerらが2018年に自誌を太陽光サーバへ移し、その作り方を公開したことから始まったウェブの様式。画像を白黒4階調のディザに落とし、ウェブフォントを1つも読み込まず、背景の色面の高さがバッテリー残量を示す。通信量そのものが版面の第一の制約になる。
写真が白黒4階調のディザに落とされ、点の粗さがそのまま見えている / 背景の色面の高さがバッテリー残量を表し、夜や悪天候では下がる / ウェブフォントを1つも読み込まず、等幅やブラウザ既定の書体のまま出る / 記事の分類ごとに、青の#162DAB、赤の#D11305、緑の#006951という決まった色がかかる
辞書情報
- 向いている用途
- 電力も回線も細い相手に向けて、写真を捨てずに1桁軽い記事ページを作るとき。残量や稼働という状態を、文字の表示でなく画面そのものの見た目で伝えたいとき
- 文字
- ウェブフォントを読み込まず、等幅かブラウザ既定の書体で組む。本文の幅は33rem前後の1カラムに収める。
- 構成
- 1カラムを縦に流し、飾りの枠を作らない。画像は本文幅を超えて大きく置いてよいが、元の解像度より軽い状態で置く。
- 素材
- 画像を白黒4階調のディザに変換し、色はCSSのフィルタで分類ごとに後からかける。背景の面の高さを電源の残量に結び付ける。
- 注意
- ディザの見た目だけ真似て高解像度の写真にフィルタをかけると、重さは変わらないまま軽そうに見えるだけのページができる。
- 関連研究
- 2018年のHow to Build a Low-tech Website?本文（4階調のディザと静的生成の記述） / 同サイトのCSS変数（地の#FFF5D1と分類ごとの青・赤・緑） / ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる
関連項目
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/low-tech-web
- Markdown
- [ロー・テック・ウェブ（Low-Tech Web Design） — デザインスタイル辞典](https://indexstyle.org/ja/styles/low-tech-web)
- HTML
- <a href="https://indexstyle.org/ja/styles/low-tech-web">ロー・テック・ウェブ（Low-Tech Web Design） — デザインスタイル辞典</a>