20年ぶりに個人サイトを作った
ふと気付いたら、今年の4月でインターネット歴が丁度20年になった。だからという訳では無いけれども、その時以来20年ぶりに個人サイトを作ってみた。
サイトを作った背景
正直な所、今の御時世に個人サイトを作り込むのは悪手だと思っている。昔とは違って、今は目的に特化したプラットフォームが隆盛を極めているから、動画であればYouTubeやniconico、絵であればpixiv、文章であれば数多あるブログサービスというように、幅を利かせているプラットフォームに乗っかれば良い。その方が、個人サイトで細々とコンテンツを公開するよりも、圧倒的に露出機会が増えるからだ。
ただ、利用しているプラットフォームが少なければ問題ないかもしれないけれども、僕の場合はGitHubにQiitaに、最近はこのブログも書くようになって、コンテンツの分散が気になり始めた。最初はこのブログのプロフィールから各プラットフォームにリンクしていたけれども、それだとどうしてもブログの記事の方が目立ってしまい、リンクは埋もれてしまう。なので、個人サイトを新たに用意して、自身の代表的なコンテンツへのリンクを網羅することに特化しようという形になった。
サイトの見所
CSSの進化への対応
僕はHTML 4.01が勧告された1999年当時から、これからはHTMLによる文書構造とCSSによるレイアウトを明確に分離したウェブデザインが当たり前になると思って、CSS1/2のプロパティーは丸暗記するくらいまで嵌まり込んでいた。今はさすがにCSS界隈の動きの速さに付いて行けていないけれども、久しぶりに最新事情を色々と仕入れつつ、ビューポートベースのサイズ指定やカスタムプロパティー、Flexboxといったここ数年の新機軸を採用している。結果として、かなりシンプルなCSSでレスポンシブデザインを実現できたと思っている。
ページの描画速度
描画速度についても気を付けている。Javascriptの利用は必要最小限に留めて、使うものも全て非同期で読み込めるようにした。最近はページ全体の描画が遅れるのをごまかすために読み込み中の効果を入れているページをよく見掛けるけれども、僕はアレには反対の立場で、必要な内容は待たずに見せるべきだと考えているので、敢えて描画を揃えることはしていない。
ベクター画像の多用
画像については、自分のプロフィール画像以外はロゴも含め、全てSVGを採用している。レスポンシブデザインが当たり前となった昨今では、アイコンやロゴのようなページのデザイン要素は原則としてベクター画像を使う方が、ラスター画像を複数サイズで用意するよりも効率的でファイルサイズも概ね削減できるのでお薦めしたい。これについては、僕は趣味でウェブデザインやDTPもやっていて、印刷所に入稿できる程度にはIllustratorを扱えるので、SVGは特に抵抗無く扱えた。後から何が役立つかわからないので、興味のあることは何でもやっておくものだなと最近常々思う。
Font Awesomeの多用
Font Awesomeは無料で様々なアイコンをフォントとして使えるため、知名度は高いと思う。そしてこれ、CSSを使えば自由自在に変形できるので、背景や独立したボタンのような少し変わった使い方もできたりする。僕は絵心が全く無いので、自分で素材を作ることは中々出来ないけれども、こうした既製の素材を利用するだけでも結構それっぽい感じの見た目に出来るのは非常に有り難い。
おわりに
ここまで書いてみて、やっぱり今時の個人サイトは自己満足という側面が強いというのは痛感している。ただ、だからこそ、個人サイトにはその人の個性が強く現れるので、一つの自己表現としては有用とも思っている。例えば就職活動時のポートフォリオ的な利用のように、自分を端的に表現するという点に関しては、一本のURLで共有できる便利なツールとなるだろう。
ちなみに、サイト分析ツールは導入するとグラフを見る度に心を折られる可能性が高いので、あまりお薦めはしない。
