オフグリッドのウェブサイトと考える
“生存可能”なエネルギーとの付き合い方
ーエネルギーとデザイン vol.1

ペーパーレス化や廃棄物の活用など、目に見える物質的な資材を扱う業界では、限りある資源を無駄なく使わんとする潮流が生まれて久しい。一方で、目に見えない電力を源にするデジタルデザインの業界では、限りあるエネルギーへの想像は足りているだろうか。これからは、成長や無限を暗黙の前提にせず、制約の中でエネルギーや資源を循環させ、その条件下でいかに創造力のある取り組みを育んでいくかが重要な視点ではないだろうか。

本シリーズ「エネルギーとデザイン」では、デジタルデザインに留まらず、社会との持続的な共生を目指しながら自らエネルギーと経済圏を作っている方々との対話を通じて、エネルギーをめぐる新たな試みの現在地に焦点を当てる。

vol.1で焦点を当てるのは、デジタルデザイン。ロフトワーク京都のプロジェクトスタジオ「なはれ」では、手を動かしながら目に見えないエネルギーを理解するための一つの試みとして、太陽光で動くオフグリッドのウェブサイトを制作・運用している。

サイトを開くと、冒頭の「このウェブサイトはオフラインになるかもしれません」という言葉や、バッテリー残量など、一般的なWEBサイトではあまり見ることのない情報が目を引く。着想の背景や制作プロセスについて、制作チームのメンバーに聞いた。

写真右から順に、

• 国広 信哉（株式会社 ロフトワーク）
• 浅野 隆昌（​​グラフィックデザイナー / instagram）
• 伊藤 友美（株式会社 ロフトワーク）
• 山田 哲也（ウェブエンジニア / X）

なはれのウェブサイトは、50Wの太陽光パネル2枚から得た電力を動力源とする。いわば太陽のリズムと共に動くウェブサイトだ。ウェブサイトには欠かせないサーバーのほか、電力・電圧・電流を測るセンサーやインターネットに繋ぐためのモバイルWi-Fiなど、必要な電力の全てを太陽光で賄っており、曇天が続くとオフラインになることもあるという。

企画した国広さんに話を聞くと、普段の仕事のプロセスで出てきた素朴な疑問から、この企画の構想が始まっているようだ。

国広「ウェブサイト制作をする過程で、グラフィカルなモーションなどの演出はどこまで必要なのか、ウェブサイトが24時間閲覧できることは必ずしも必要なのか、そんなことを考える機会がありました。ウェブサイトをはじめとするデジタルデザインも、電力という限りあるエネルギーを使用しています。けれど、物質的に手に取ることができないこともあって、そのエネルギーが無限にあるように錯覚しやすい側面があると思います。

そんなことを考えているとき、『LOW←TECH MAGAZINE』というウェブマガジンに出会いました。自作したサーバーと太陽光から得た電力だけで運用しているウェブサイトなのですが、その理念にすごく共感して、こんなサイトを作ってみたいと思ったことが事の発端です」

一方で、この企画には社会的な背景も関係しているという。サステナビリティという言葉はすっかり耳馴染みになりつつあるが、デジタルデザインの世界でもその潮流を受けた議論がなされはじめている。2015年には、持続可能な開発目標を定めたSDGsの採択、気候変動問題に関する国際的な枠組みであるパリ協定の合意、循環型経済を目指すEUのサーキュラーエコノミーパッケージの発表が行われたが、デジタルデザインの世界では2019年に「Sustainable Web Manifesto」が宣言されている。これは、ウェブサイトをはじめとするデジタルデザインを制作する上で、電力消費を抑えること、データの透明性を高めることなど、６つの目指すべき方針が示されたマニフェストだ。さらに、その方針を実現するための具体的なガイドラインをW3Cが示した「Web Sustainability Guidelines 1.0」が2023年に登場。国広さんと共にこのウェブサイトを企画した伊藤さんは、仕事上でもそうした社会的な変化を肌で感じていたと話す。

伊藤 「仕事でウェブサイトの実装周りのディレクションを行っていますが、最近だとフレームワークと呼ばれるものを使用する傾向があります。Next.jsやAstroなど、様々な種類のフレームワークがありますが、使用することでコーダーが書いたソースコードを圧縮してくれる側面があります。コードを圧縮することでファイルの容量が小さくなって軽量化され、そのウェブサイトが使用するサーバーへの負担を軽減したり、閲覧しているデバイスの消費電力を抑えてくれるといった効果があります。

『サステナブルウェブデザイン』という言葉は、国広から企画の話をもらった時に初めて知ったのですが、思い返すと日常の中でサステナビリティを意識するシーンは年々増えているように感じます」

そうして2023年4月に始動した、なはれのウェブサイト制作。「そもそも実現できるのか？というところからのスタートでした」と、国広さんは話す。太陽の日照時間や機器の電力使用量など、要件を満たすための数値の計算から始まったという。エネルギー研究者の山見拓さんがオフグリッドシステムを監修し、ロフトワークの土田直矢さんがサーバーを構築。時には遠隔からの調整作業を行いながら、なはれのウェブサイトβ版が試運転を開始した。（2023年に執筆された記事）

そして、2024年4月のなはれのリニューアルに際し、オフグリッドの仕組みはそのままに、日々の活動を発信できるようなプロジェクトサイトへと刷新。グラフィックデザイナーの浅野さんとウェブエンジニアの山田さんが新たにチームに加わり、ヘッドレスCMSの導入と配信方法の検討、情報設計の見直しとデザインの再考などを行い、現在のウェブサイトが完成した。

見た目も中身もガラリと変わったサイトを見ながら、浅野さんにデザインでのこだわりを聞いてみると、意外にもその答えは「デザインをする前の整理」だった。

浅野 「環境負荷を減らすことを突き詰めるなら、極端な話、意匠性は必要ないんです。ウェブサイトは使用する色によってもデバイスの消費電力が変わるので、黒地の背景に薄いグレーの文字でデザインすれば、消費電力を抑えることはできます。一方で、誰がそんなサイト見るの？という議論もありますし、サーバーの消費電力は考えなくていいの？という問いも出てきます。そこで、何を基準とするのかをチームで話すところから始めました。

そこで決めた線引きは『太陽光パネル２枚の電力でできること』。つまり、無制限に軽量化を目指すのではなく、明確に設定した電力の範囲内で、サーバーを含むオフグリッドのシステムがきちんと駆動し、意匠性もきちんと担保されたウェブサイトを作ること。このように線を引いたので、サイトの中には点滅しているランプがあったり、クリックすることで注釈が飛び出す機能をつけたりと、ある種なくても成立する“無駄”も設定の範囲内で遊びとして取り入れています。ただし、その“無駄”を実現するための仕様やコードは出来るだけ無駄なくスマートにやることもチームで決めました」

こうした線引きをしたことで、エンジニアの山田さんは「普段の仕事とは違ったプロセスがあった」と話す。

山田 「普段の仕事では、消費電力ではなくエンジニアの工数をおさえる、つまりは予算を抑えることに主眼が置かれることが多いので、『ライブラリ』という工数を減らせるパッケージツールを使用することが多いです。ウェブサイトを閲覧するユーザーのマウス操作によって反応するインタラクションはJavaScriptという技術を利用し、実装することが多いのですが、『ライブラリ』はそういった機能をより簡単に使用できるツールです。ただし、これを使用すると必要のない機能まで一緒についてきてしまうんです。今回『“無駄”をスマートに実現する』ことを決めたので、いつも使用しているライブラリは使用せず、自分でJavaScriptコードを一から書きました」

「予算」から「電力」に制約の基準を変えるだけで、クリエイティブのプロセスもまるで変わっていく。浅野さんと山田さんの話は、そんなことを示唆しているように感じた。

こうした線引きを整理した上で、デザインで大切にしたことは「完璧主義ではない、風通しの良さ」だと、浅野さんは話す。

浅野 「このウェブサイトは、中央集権的な大きな力に頼らず、自作のオフグリッドのシステムで自立している。これはオフグリッドウェブサイト自体の機能の話ですが、このサイトの思想とも捉えられます。その点を踏まえ、隙のない意匠を追求するのではなく、表示するデバイスによってコロコロ見え方が変わってしまうような、ある種の気楽さのようなものを大切にしました」

サイトをよく見ると、画面右端に小さく文字や写真が並んでいることに気づく。カーソルを合わせてクリックすると、まさに浅野さんの説明にあったように、文字や画像がコロコロと画面の上を移動し、表示内容が切り替わるようなメニューのインタラクションが発生する。浅野さんが「A面/B面」と表現するこの切り替え機能にも、計算しつくされた動きを求めるのではなく、その場の成り行きを許容する寛大さのようなものを感じる。太陽光という、人間がコントロールできないものに頼っているということも関わっているのだろうか。こうした姿勢が、コーディングを行う際のある遊びに繋がったと山田さんは続ける。

山田 「一般的にソースコードを書くときは、『About』や『Project』など、サイト内にある大項目ごとに段落を分けるようにして書いていくのですが、今回は改行を行わず、全てを一列に書き上げたんです。これは、浅野さんが行った『コンテンツの表示順だけを決めて、後は成り行きに任せる』ようなデザイン手法にリンクさせて、ソースコードも一列に並べちゃうというアイデアが出てきました。」

山田 「ソースコードを一列で書いてしまうと、サイトを更新したい時に直すべきところを探すのが大変になるわけです。エンジニアが苦労するので普段の仕事ではまずやらないことですが、このような遊びも入れてみました。」

伊藤さんによると、一行で記述するとHTMLのファイル容量も軽量化できるメリットもあるらしい。その他にも、このサイトにはまだ隠された遊びがありそうだ。サイトをスクロールすると、ダークモードへの切り替え機能を発見する。消費電力を抑えるという意味でダークモードがあることは自然な流れにも思える。しかし、限られた電力内で遊ぶことを優先していたため、あらためて実装を決めたのはローンチ1週間前だったという。

浅野 「やっぱりダークモードがあってもいいんじゃないか？という話になって、急遽作ることになったんです。このサイトの画像は全て二階調のディザ処理をすることでデータ容量を軽くしているのですが、ダークモードに切り替える時に、ハンコにつけるインクの色を変えるかのように、画像の色が切り替えられたら、新たに画像を用意する必要もないし、試みとしても面白いんじゃないかと思いました。

これを言ってしまうと野暮かもしれませんが…実はサイト下部に載せている京都タワーの写真は、ダークモードにすると夜の京都タワーに変わるんです。急遽、国広さんに夜の写真を撮ってくれないかお願いしたら『すぐに撮ります』と言ってくれて実現しました」

聞けば聞くほど遊び心満載な、なはれのウェブサイト。伊藤さんは、初めこそオフグリッドのシステムがこれだけの機能に耐えられるのか不安もあったというが、これだけ色々な遊びを取り入れてもなおサイトが軽いことに驚いたと話す。

「２枚の太陽光パネルでできること」という明確な線引きがあるからこそ、できる範囲のことには貪欲になれる。制約がある方が自由になれるのかもしれないと、逆説的なことを感じた。

そうして生まれたなはれのウェブサイトは、国際的なWebデザイン・開発アワードであるCSS Design AwardsでSpecial Kudos（特別賞）を、CSS WinnerでStar（優秀賞）を受賞。国広さんは「リッチな表現を追求したウェブサイトが受賞しやすい中で、いわば逆の姿勢を貫くこのサイトが受賞できたことは素直に嬉しいですね」と話す。このサイト以外にも、太陽光を動力源としたオフグリッドサーバの仕組みを活用したプロジェクトが世界的に評価されていることも国広さんの背中を押しているという。

国広 「地球上で太陽光があたる場所が時間帯によって違う性質を利用して、その時間帯に最も太陽光があたっている場所からサーバーの電力を賄う『Solar Protocol』というプラットフォームがあるのですが、今年彼らがメディアアートの祭典『Ars Electronica』でSTARTS Prizeを受賞していました。彼らの『Energy-Centered Design（エネルギーの制約から様々なデザインを捉え直す思想）』のアイデアに僕たちも影響を受けていて、そういった先駆者の彼らが大きなアワードで受賞したことに勝手ながら嬉しく感じていました」

そんな嬉しい知らせに続けて、国広さんがボソッと「多分、不安なんですよね」と言葉を漏らす。この言葉の裏側を覗いてみると、エネルギーというテーマに向き合う国広さんのより根底にある思想が見えてきた。

国広 「災害、パンデミック、紛争など、自分の力ではどうすることもできない出来事が続いていて、どこか不安な気持ちがあるんだと思います。普段から誰かが提供しているサービスやシステムに頼りすぎていると、そうした有事の時に全く太刀打ちできなくなってしまう。そういう意味で、持続可能というよりは“生存可能”を追求したいと表現する方が、僕としてはしっくりくるんです。

一度壊れても、自分で直してアップデートする。限られた資源を循環させながら、暮らしを作る。そうしたことを通じて『どうやって生き延びるか？』を考えていきたいし、いろんな実践者たちとこれからたくさん会っていきたいです」

この言葉を聞いて、新型コロナウイルスが世間を騒がせていたころ、スーパーから食材や生活用品が次々となくなっていく様子を前に自分自身の脆弱さを痛感したことを思い出す。制約の中でいかに自由になれるかを探求することは、新たなクリエイティブを生み出すきっかけになるだけでなく、先行きの見えないこれからの時代を生き抜く上で、一人ひとりが持つべきマインドセットであるとも言えそうだ。

vol.2では、デジタルデザインからは少し距離を置き、地域新電力事業をローカルの地域課題解決に活かす取り組みの実践者の方たちの物語を追いかける。

企画：国広 信哉・伊藤 友美
執筆：キムラ ユキ
写真：村上 航