デザインを知らないエンジニアによるウェブデザインの工夫
jnsato.com で自己紹介ページをホストしている。
いろいろ工夫はしているのだけれど、自分がどういう意図で何をどう工夫したのか、いずれ自分でも忘れてしまいかねないから、ここに書き残しておく。
いくつかの記事に分割して書くことにする。ひとまず今回はデザインについて。
全体の方針
レイアウトの動機としては、次の3つの方針が最初から念頭にあり、これに従って進めた。
1. ページ内リンクは置かずに一枚のページで完結すること
細かいサブカテゴリごとにページを分けてしまうと、あれも入れなきゃこれも入れなきゃと際限がなくなってしまう。いったんそれには蓋をして、トップページにあって違和感のないものだけを載せるようにした。
2. 余白を十分にとって広々と表現できるようにすること
これは個人的な好み。それから、もともと多くの情報を載せるつもりはなかったため、余白を十分にとらなければかえってスカスカな印象が出てしまう気もしていた。
3. 白を背景色に使わないこと
これはもっともこだわりたかったポイント。ビビットなメインカラーを選んで白色と対照させるやり方は、それこそ無難なデザインにはなるが、自分のページでは安易なやり方に流れたくはなかった。
配色
二色の淡いアースカラーを背景色に選択した。文字色は背景色とのコントラストを意識してビリジアンを選択した。
color.adobe.com でカラーホイールをグルグル回して、気に入ったクリーム色を中心に組んだ。グレーはクリーム色との組み合わせ、補色とかトライアドカラーのオプションからたしか選んだと思うが、いま同じように入力してみても再現しないので確信はない。
派手すぎなくいて特徴はあり、粋な配色になったと思う。
フォント
fonts.google.comでふたつピックアップした。セリフ体は Quattrocento でサンセリフは Montserrat 。
見出しと地の文は、セリフの有無でコントラストをつけたいと思っていた。結果、見出しにはサンセリフを、地の文にはセリフを使っている。逆でもよかったが、フォントありきで両パターンを試してみて、そうした。
コンテンツ
サービス
エンジニアとしての自分の守備範囲を端的に紹介している。これだけでは物足りなさもあるが、逆にいくら書いても満足できない部分だとも思うので、これくらいのボリューム感にしている。
アイコンはオープンソースの feathericons.com を利用した。
スキル
利用したことのある技術を列挙している。ちょっと触っただけ、みたいなものまで書いていくと収拾がつかない一方で、業務でしっかり使ったもの、と限定してしまうと心許なくなりかねない。よってプライベートなものであっても、サービスとして稼働させたことがある技術であれば載せる、という線引きにしている。
この部分は AWS amplify でサーバーレスバックエンドを立てて、ビルド時に動的に生成している。詳しくは別の記事に書いた。
レスポンシブ対応
レスポンシブ対応については、そもそもレイアウトが単純なため、外部ライブラリは使わずに人力でマークアップしている。横並びの要素に対しては、単純な割り算で幅を計算して切り替えているだけ。
ただし、フォントサイズが常に画面幅に対して適当なサイズになるようにするのは苦労した。結論としては、画面幅の変化に対して連続的なフォントサイズは静的な計算式として表現できる。その計算式を算出してくれるサービスもあるので、それを取得して font-size に指定した。
この部分のテクニックについては、次の記事を全面的に参考にしているので、出典として掲げる。
おわりに
以上、自己紹介ページの紹介をした。普段はデザインにはタッチしないエンジニアが、どんなことを考えてデザインに取り組んだかの参考にしてもらえると嬉しい。
次回も引き続き、このウェブサイトについて、今度はホスティングの工夫について話そうと思う。
