楽しい楽しいレスポンシブデザイン！
Kawara Senのホームページについての、取り留めのない話をしようと思う。
こちらのホームページ、音源情報やライブ情報、各種SNSへのリンクをまとめたくて、このようなものを用意することにした。ページを開くと、まず大きな一枚の絵画を背景として、それらへのリンクが並べられている。至って単純なページではあるけれど、この一枚の絵がとても印象的で、目を引くのではないかと思う。
この背景の絵画には、日本画画家の伊能あずささんの作品「waterfront #3」が用いられている。伊能あずささんは昔、個展を観て以来、僕はすっかりファンなってしまって、この度相談したところご快諾いただき、このような運びとなった。
実は現在リリースしている音源のカバーアートにも伊能さんの作品を使用させていただいていて、大変ありがたい気持ちであり、何より、眺めていてとても嬉しい。改めてここにお礼を述べたいと思う。
大事な話はここまでとして、以下が取り留めのない話。
さて、このWebサイト、実は無駄に（深い意味はなく本当に無駄に）自分でhtml+cssコードを書いて作成している。
W**dPressくらい使ったらいいんじゃないかとも思ったけど、そのときの私は何を思ったか、結局、ゼロからコードを記述することにしてみた。
特別ホームページ制作に明るい自分ではなかったが、しかし、一般論として言えば、ホームページ作りはやればできることである。火星に音楽スタジオを作ろうって言っているわけではないのだ。あるいは人類にとって、火星に音楽スタジオを作ることも不可能ではないのかもしれないが、さておき、追求するなら奥は深そうだけど、シンプルなデザイン（見た目がシンプルで美しく洗練された、という意味ではなく、文法的、構造的にシンプルな、という意味）だったら、やればできそうな気がする。よしやってみようという思いつきで作り始めた。
シンプルとはいえ、作り始めるとまぁそれなりに手間がかかる。自分でやることではなかったか……？と心細くなりながらコーディングしていく。div ってなんだ……、paddingとか言ってるけどどこに反映されてるの？？あ、この余白のことか……。うぅむ……。
“Done is better than perfect（完璧を目指すよりまず終わらせよう）”とか言い聞かせながら、取り掛かる。
時間を見つけてはちまちまとコーディングして、ようやくバージョン１のようなものが完成した。細々と気になるところはあるけれど、一旦表示させたいものは表示できたし、何よりまずリリースすることを第一としよう。細かいところは追々少しずつ修正していけば良いのだ。
ホームページはコードを書いただけでは終わらない。それをインターネットの野に放つには、いくつかのハードルを越える必要がある。サーバーのレンタルやらドメインの取得やら、そういうのが必要だということは朧げな知識としては把握していたし、決して困難を極めるほど難しい作業ではないが、とはいえ、それを初めてやろうと思えばそれなりに混乱する。
不安になりつつも一つずつ調べて攻略し、必要なサービスの登録を済ませ、ゴチャゴチャ独り言を言いつつ、ともあれ、なんとか完成して2023年3月、運用開始に至った。
当初想像していた通り、”シンプル”ではあるが、絵画の迫力のおかげで、正直それだけで成立している感じがするし、そういう意味では当初の想像よりも良い感じにできたのではないかとも思う。それに、独自ドメイン（"kawarasen.com"というURL）って結構ワクワクする。
そんなこんなで、簡単ながらも活用していたこのホームページであったが、やはり早々にして、気になることがあった。
パソコンの画面で表示する分には、ある程度意図した通りの配置になっているのだが、これをスマートフォンの画面で表示させると、どうにも様子がおかしい。
公開当初のサイトだと、スマートフォンで表示した時に、こんな感じで、画面サイズに対して、どう考えても小さ過ぎる文字とボタンが表示されていた。
PC画面であればこのくらいでいいのだけど、スマートフォンの画面においてはそうもいかず、拡大すればタップできないことはないけど、さすがに都合が良くないように思える。
通常、今時のWEBサイトであればほとんどの場合、スマホ画面とかPC画面とか、閲覧する画面サイズに応じて適した表示をさせられるような工夫がなされていて、そのおかげで我々は普段、パソコンであれスマートフォンであれ、こういった不便を感じることなく生活できているのである。
これは所謂レスポンシブデザインというやつであるけど、これを自分のページでやろうと思うと、スマホのサイズだとかなんだとか、それぞれの条件に合わせたコードを用意する必要があるらしいという話なのだが、うぅむ。やりたくない……めんどくさそうだし……。
そういうわけで、2カ月くらい放置していたこの仕様、5月になってちょっと時間ができたので、重い腰をあげ、修正を試みることにした。
さて、レスポンシブデザインのやり方をGoogle検索する。せっかくだからと最近流行りのChat GPTにもちょっと聞いてみる。合っているような、そうでもないような回答が返ってくる。
細かいことはよく分からないが、メディアクエリとかいうのをCSSファイルの中で指定して、画面サイズを条件として、表示フォントサイズなんかを記述すれば良いらしい。よし、やってみる。
PC上でブラウザの開発ツールなんかを使って、スマホ表示した時のサイズも確認しながら、コツコツと画面サイズが小さくなった時の記述を追加する。
とりあえずフォントサイズを変えたかっただけだし、それっぽいものが完成する。案外簡単じゃないか！ということで実際にサーバーにアップロードしてスマートフォンで表示させてみたところ、どうも修正がうまく反映されていないようで、修正前のホームページと同じような、不親切なほど小さい文字列が表示されているままであった。
やり方はあっている気がするし……原因が分からない……。こういう先が見えない時は大体気持ちが落ち込むし、それなりにストレスを感じる。
まぁなんかもう諦めて、別に文字くらい小さくてもいいかぁ、みたいなことを何度か思いながら、格闘すること数時間、ようやく解決策らしいものを見つける。
レスポンシブデザインに対応するには、CSSファイルの中にメディアクエリを記述すると同時に、html中にviewportとかいうやつを指定する必要がある。このviewportというやつ、呪文のように記述はしていたのだけど、どうも記述内容が不十分であったらしい可能性に気がつく。
これだ！と信じて実装する。えいやとサーバーにアップロードし、スマートフォンで確認する。
できたのがこれ。
文字が大きくなっている……！解決したようだ。
些細なことだけど、しばらくはこの大きくなった文字列を眺めて、満足できそうな気がする。
最初に述べた通り、このあたり（WEBデザイン系のなんちゃらというあたり）、追求するには奥が深そうであるし、そういう意味では結構まだまだ改善の余地がありそうである。
しかし、不完全であることを認められずに生きていくことは、おそらくそんなに良い考えではない。どうせ自分自身、不完全なまま死んでいくのだ。
そういうことに、あまり悲観的にならないようにしようと思う。
この記事が気に入ったらサポートをしてみませんか？