{"id":"low-tech-web","no":535,"name":"Low-Tech Web Design","ja":"ロー・テック・ウェブ","era":"2018–","family":"UI表現","kind":"スタイル","collection":"Dictionary expansion 26","addedAt":"2026-08-19","source":{"title":"LOW←TECH MAGAZINE — How to Build a Low-tech Website? (2018, Kris De Decker, 一次資料)","url":"https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low-tech-website/"},"reference":{"status":"verified","pageUrl":"https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low-tech-website/","credit":"LOW←TECH MAGAZINE — How to Build a Low-tech Website? (2018, Kris De Decker, 一次資料)"},"essence":"Kris De Deckerらが2018年に自誌を太陽光サーバへ移し、その作り方を公開したことから始まったウェブの様式。画像を白黒4階調のディザに落とし、ウェブフォントを1つも読み込まず、背景の色面の高さがバッテリー残量を示す。通信量そのものが版面の第一の制約になる。","cues":["写真が白黒4階調のディザに落とされ、点の粗さがそのまま見えている","背景の色面の高さがバッテリー残量を表し、夜や悪天候では下がる","ウェブフォントを1つも読み込まず、等幅やブラウザ既定の書体のまま出る","記事の分類ごとに、青の#162DAB、赤の#D11305、緑の#006951という決まった色がかかる"],"intents":["静けさ","反骨","技術"],"works":["電力も回線も細い相手に向けて、写真を捨てずに1桁軽い記事ページを作るとき","残量や稼働という状態を、文字の表示でなく画面そのものの見た目で伝えたいとき"],"recipe":{"type":"ウェブフォントを読み込まず、等幅かブラウザ既定の書体で組む。本文の幅は33rem前後の1カラムに収める。","layout":"1カラムを縦に流し、飾りの枠を作らない。画像は本文幅を超えて大きく置いてよいが、元の解像度より軽い状態で置く。","material":"画像を白黒4階調のディザに変換し、色はCSSのフィルタで分類ごとに後からかける。背景の面の高さを電源の残量に結び付ける。"},"avoid":"ディザの見た目だけ真似て高解像度の写真にフィルタをかけると、重さは変わらないまま軽そうに見えるだけのページができる。","colors":["#FFF5D1","#162DAB","#D11305"],"motif":"graphic","pair":["solarpunk","risograph"],"study":["2018年のHow to Build a Low-tech Website?本文（4階調のディザと静的生成の記述）","同サイトのCSS変数（地の#FFF5D1と分類ごとの青・赤・緑）","ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる"],"en":{"essence":"The style starts where Kris De Decker and his collaborators moved Low-tech Magazine onto a solar powered server in 2018 and published how they had built it. Images drop to black and white with four levels of grey, not one web font is loaded, and the height of the colored field behind the page reports how much charge the battery has left. Data weight becomes the first constraint on the layout.","cues":["Photographs are reduced to black and white with four levels of grey, the dot grain left plainly visible","The height of the colored field behind the page shows remaining battery charge and falls at night or in bad weather","No web font is loaded at all, so text arrives in a monospace or the browser's own default","Each content category paints the page a fixed color, blue #162DAB, red #D11305, or green #006951"],"works":["Building an article page an order of magnitude lighter without giving up its photographs, for readers on thin power and thin bandwidth","Reporting a system's state, such as remaining charge or uptime, through the look of the page itself rather than a readout"],"recipe":{"type":"Load no web font; set in a monospace or whatever the browser already has, and hold the text to a single column around 33rem wide.","layout":"One column running down the page with no decorative frames; images may exceed the text column in size as long as they weigh less than the original file.","material":"Convert images to four level black and white dither and add color afterwards with a CSS filter per category, then tie the height of a background field to the power supply."},"avoid":"Copying the dithered look by running a filter over full resolution photographs leaves the payload untouched, producing a heavy page that only looks light.","study":["2018年のHow to Build a Low-tech Website?本文（4階調のディザと静的生成の記述）","同サイトのCSS変数（地の#FFF5D1と分類ごとの青・赤・緑）","ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる"]}}