個人サイトについて語る

情報発信では、Twitter、Instagram がメジャーであるが、規約や仕様によって制限され自由度が小さい。 個人サイトというものに回帰してみるのもアリである。 このサイトは、W○X 等を利用していないので、宣伝や広告がなくユーザーフレンドリーである。

デザイン的なこと

このサイトは、Jekyll というフレームワーク的なもので作られており、 テーマはすべて自作している。 ここでいうテーマは、フォントの大きさ、サイズやサイトの構造、余白等だ。 また、レスポンシブデザイン (スマホ、パソコンなどの様々なデバイスに対応するデザイン) やダークモードにも対応している。 一見シンプルに見えるが、CSS だけで、13.5 KiB もある。 これには、理由がある。 デザインを理解していない人が作るプレゼンテーション資料によくみられるが、 強調色を多用したり、虹色のグラデーションや小さい余白などの使用でダサいデザインができる。 このように、下手にデザインをするとかえってダサくなるのだ。 つまり、強調色を多用せず余白を適切に設定するなどすれば良いのだ。 それらを細かく行った結果が、膨大な量の CSS である。 このホームページがダサいという人がいれば意見してほしい。 個人的にはシンプルでムダな動作がないウェブサイトがベストだと考えている。

ホームページの設計

このホームページは Jekyll で作られている。 Jekyll は HTML のテンプレートを書いておき、 マークダウンの内容をテンプレートと組み合わせることでウェブページの作成が楽になっている。 具体的には、通常なら HTML をページひとつひとつに書く必要があり、 変更したい場合はひとつひとつのページを変更するといった面倒なことをしなければならないが、 Jekyll を使用することで、変更が容易になっている。

GitHub Pages への配置

このサイトは GitHub Pages を利用している。 GitHub Pages は無料でもウェブページが公開でき、さらに独自ドメインを設定することができる。 ただし、無料の場合はパブリックリポジトリのみ Pages が利用可能といった制限がある。 Jekyll の配置だが GitHub Actions を使用することで、プッシュしたときにウェブページが生成されるようになっている。 Jekyll はプッシュしただけでもページが生成されるようにできるが、workflows を使用することでプラグインの利用を可能としている。

必要な技術

このような個人サイトの作成に必要な技術は、

• Jekyll
• HTML
• CSS / SASS
• GitHub
• JavaScript / TypeScript (必須ではない)

である。 個人サイトを作成するだけで、これだけの技術力が身につくことを考えれば、 プログラミング初心者にはまず、個人サイトを作成することを勧めたい。