この記事は CAMPHOR- Advent Calendar 2019 19日目の記事です。
"駆け出し建築家" にWebサイトの作り方を教えた話をします。
背景
僕にはTという友人がいる。高校生の時からの付き合いになる。彼は東京芸大の建築学科で勉強していた人で、今は海外の大学院に留学している。このTという人が、Webサイトの作り方を教えてほしいという話を持ちかけてきた。
Tは建築学科の学生だ。建築学科の学生は授業で「これこれのようなテーマで建築を考えなさい」というような課題をたくさん出されるらしい。そして彼らは、建築の模型やスケッチ、その説明文を制作して提出する。Tは、これらの模型の写真やスケッチ、文章を公開するためのWebサイトを作りたい、またそれとは別に、自分が書いた建築批評文や紀行文も公開したい、と考えていた。そして重要なことに、このWebサイトを作る際には、既存のブログサービスやWebサイト構築サービスは使いたくないというのだ。
Tはすでにいくつかの文章をWeb上に公開していた。例えばissuuというPDF公開サイトでポートフォリオを公開したり、noteで批評文を書いたりしていた。そして、それらを一新し統合したいという気持ちから、Wixを使ってホームページを作った。しかし、Wixでは十分にデザインがコントロールできず、また有料プランに入らないと広告が表示されてしまうことから、納得行くWebサイトを作れずに悩んでいたのである。
そのころ僕は、会社の同期の影響を受けて、「エモい図形」を創作するという遊びをしていた。そして創作した「エモい図形」を公開するために、以下のようなWebサイトを作っていた。
見てもらえばわかるが、このWebサイトは、CSSなどによる装飾のほとんどない、素のHTMLの無骨なデザインである*1。これを見たTは、凝った作りをしなくてもデザインとして成立させることができるのだから*2、自分でHTMLを書くことでWebサイトを作ることも可能なのではないかと考え、僕に相談を持ちかけた*3。
考えたこと
僕はこの相談を受けて、ITに詳しくない人間に上記の条件を満たすWebサイトを作らせるにはどうしたら良いだろうか、ということを考えた。
既存のサービスを利用するのが嫌だということなので、最終的には何らかの手段によってHTMLを生成して、Webサーバーにアップロードする必要があるだろう。継続的に記事を更新したいとのことなので、僕ならHTMLを全部手書きするのではなく、例えばJekyllを使ってMarkdownからHTMLを生成する仕組みを作っておいて、MarkdownをGitHubにpushするとビルドが走ってWebサイトが更新されるようにするだろう。
しかし、Tは建築学科の学生であって、ITは専門外だ。一般的な人に比べればITのスキルはある方だとはいえ*4、我々Webプログラマーと同じ技能を仮定してはいけない。彼の持ち物であるWindows PCで、どうやってJekyllを動かすというのか。Rubyは誰がインストールするのか。そもそもプログラミングができない人がJekyllをセットアップすることって可能なんだっけ？
もしセットアップを僕が変わりにやってあげたとしたら、その手順はTには再現不可能なものとなり、Webサイトが存続する限り僕がメンテナンスする必要がある。いまJekyllのセットアップをしてあげるのは簡単だが、保守する責任が生まれ、将来に渡って僕の負担になる。これを防ぐために、Webサイトの保守責任はTにある、ということから出発して考え始めるべきだ。つまり、Tに理解可能な範囲の知識のみによって、Webサイトを構築する必要がある。*5
よくよく考えてみると、当たり前のことながら、Webサイトを公開するのにJekyllもGitもプログラミングも必要ない。必要な知識は「HTMLとCSSの書き方」と「HTMLファイルをWebに公開する方法」だけだ。HTMLとCSSを手書きすることと、手動でHTMLをアップロードすることさえ厭わなければ、最小限の知識によってWebサイトを構築することができる。そしてその場合、Tから見て理解不可能な部分が少ないため、何かが壊れたとしても(基本的には)自分でトラブルシュートすることができるだろう。
このようなことを考え、「多少の手作業は許容し、Tが理解できる知識の中でWebサイトを作る。HTMLとCSSの書き方、HTMLファイルを公開する方法だけは僕が１から教える。」という方針で、Webサイトの作り方を考えることにした。
Webサイトの作り方
HTMLをまず教えた。タグというのがあって、例えばリンクを作りたかったら a タグに href を指定して文章を囲めばよいとか、h3 タグというのがあって見出しにはこれを使うとか、画像を貼りたかったら img タグをつかって src に画像のURLを指定するとか。そして次に、URLの構造を教えた。まずhttps/httpという文字列から始まり、ドメイン名というのが入り、後ろのスラッシュにより区切られた文字列はディレクトリ構造と対応している、相対リンクと絶対リンクというのがあって...などなど。CSSはHTMLのタグの中の style 属性の中に直書きしてもいいし、 style タグの中にまとめて書いてもいい。HTMLタグには id と class というのを指定できて...云々。
こうして書いたHTMLとCSSを、netlify にアップロードして公開する方法も教えた。netlifyには、フォルダをドラッグ・アンド・ドロップで投げ込むと、それをそのまま公開してくれる機能があるので、Tはドラッグ・アンド・ドロップするだけで、Webサイトの動作確認もできるし、Webサイトを公開することもできる*6。GitHub Pagesにあるような、ブランチとかコミットとかの小難しい概念はない。
自明かつ素朴だが、現代においては廃れてしまったように見える、古式ゆかしい "ホームページ" の作り方である。
こうして苦労しながらも、TはWebサイトの作り方を学習し、Webサイトが公開された。
できたもの
すきまのビルは、Tが授業の課題で設計したビルの解説だ。写真がそれっぽいとWebサイトがそれっぽくなるということがわかる。この他にも、ちぐはぐなリアル、汚れと欠けなど、Tが制作したものが公開されている。制作物の一覧ページもちゃんと作ってある：Archi-tecture。
また、建築作品とは別に、冗長な都市、持続する運動、水のようなものに浸る街など、ブログのようなもの(紀行文？)も書き始めたようだ。この記事はTwitterを通じて "建築家界隈" に割と広く読まれたらしく、反響もそれなりにあったとのことだ。Twitter cardも設定してあって(Twitterにリンクを貼って確かめてみよう！)、気合を感じる。
全体的に、これはどうなんやというコードや、レイアウト崩れなどが散見されるが、動いてるしこれでよいのだと思う*7。Tはこれからもコンスタントに紀行文を書いていくつもりで、今はMarkdownで３つ目の文章を書くことに挑戦中らしい。
まとめ
このように、駆け出し建築家でありITの素人であるところの友人TにWebサイトの作り方を教えた。プログラミングができない人でもHTMLを手書きしてWebサイトを書けるようになるし、それは意義があることだ、という当たり前のことを再確認する結果となった。利便性を得るために既存のサービスを利用するのもよいが、自由を手に入れるという観点からは、このような基礎的な手法に立ち返るのも良いのではないかと思った。
*1:私はデザインセンス、特に色彩に関するセンスが欠けているため、苦肉の策としてこのようなデザインを好んで使う
*2:確か、このようなデザインのWebサイトを作るのはどのぐらい大変なのか、と事前に聞かれたような記憶がある
*3:T本人の言葉を借りると『(私の「エモい図形」のページに可能性を感じたのは)「ざっくり書いたな」という見た目そのままでも、デザインとして成立しているなと思ったから。逆の例としては、いかにホームページ作成サービスで「シンプル」で「ストイック」な見た目のものを作っても、そのコード（建築的にいうなれば工法）がシンプルでないことがあり、結果としてなにか嘘くさいものになってしまうように感じた。』
*4:最近の建築学科の学生はプログラミングをしたり3Dプリンタを触ったりするらしい
*5:Jekyllを使ってGitHub PagesでWebサイトを公開するには、Ruby、HTML、CSS、テンプレートエンジンという概念、Git、GitHubなどの知識が必要であり、これらをTに１から教えるのは現実的ではない。
*6:ステージング環境とかそういう難しいことは考えない
