こんにちは。さわです。
少し前にこちらの個人サイトを作成しましたので、記事にしてみました。
はじめに
私はアウトプットも兼ねて個人開発のwebクソアプリを作成しており、そのアプリをまとめた個人サイトが欲しいと前々から考えていました。
１年ほど前にVue.jsで就職活動用のポートフォリオサイトを作成していたので、今まではwebアプリを誰かに見せたいときにはそのサイトを経由していました。ですが、自分のスキルシートや当時のやる気満々テキストを掲載していたため、どうしてもそれが目に入ってしまうので恥ずかしかったのです。
それに加えてVue2を使用していたこともあり、思い切って作り直したのがこちらのサイトです。
要件
まず初めに、満たしたい要件を決めました。
下記の３点です。
- 表示の速さ
- 更新のしやすさ
- シンプルなデザイン
それぞれ簡単にご説明します。
1. 表示の速さ
ユーザーの離脱率をなるべく減らすため、さっと開いて見ていただけるサイトにしたいと考えました。
SSGを採用したり、ページ遷移を減らしたり、なるべくCSSで代用したり…といった、諸々に気を配りながら制作しました。
2. 更新のしやすさ
面倒くさがりな性格なので、更新し易いようにしています。
詳しくは後述するのですが、ヘッドレスCMSを活用して管理画面から更新できるようにしています。
3. シンプルなデザイン
このサイトをなるべく使い続けたいので、あえて流行りのデザインやUIを取り入れないようにしました。
モノクロを基調としたカラーにしてベーシックな構成にしています。
使用したツール
フレームワーク：Astro
ヘッドレスCMS：Newt
ホスティングサービス：Netlify
git管理：Github
デザインツール：figma
イラスト作成ツール：CLIP STUDIO PAINT
上記のサービスを使って作成しました。
以下にざっくりと選定理由を書いておきます。
Astro
ReactやVueで作成したアプリをまとめて管理したいという要求に合致しました。
現在は作成したアプリを同じディレクトリにぶち込んでまとめて管理できています。
あとは読み込み速度を重視している点や、小規模のサイトにふさわしい点などもぴったりでした。
Newt
無料枠でできる範囲が広かったのと、使いやすい管理画面が好印象だったので選択しました。
バリデーションを細かく設定できるので、データを入力する際に大変助かります。
あとはお問合せフォームの機能も使用させていただいており、一括で管理しています。
Netlify
こちらも無料枠内で使えるのと、使い慣れているという点が大きかったです。
Github,figma,CLIP STUDIO PAINT
使い慣れているからです。お世話になっております。
主なポイント
制作の際に心がけたところなどを挙げます。
SSG
サイト更新の頻度も低いので、読み込みの速さも求めてSSGにしました。
GithubとNewtをnetlifyのWebhookで連携させています。
mainブランチにプッシュするかCMSを更新することで、自動的にビルドされるようになっています。
管理画面で更新しやすく
新規データを入力するたびにコードをいじるのは億劫なので、予期できる部分はあらかじめ拡張性をもたせました。
例を挙げます。
新しいアプリを公開するとき、管理画面で「2023」を新カテゴリとして設定すると、サイト上に2023年分のアプリとして反映されるようになっています。
また、管理画面ではメタ情報の入力忘れや不備を避けるため、細かく設定や注意書きを設けたりしています。
手軽さや時短にも繋がると期待しています。
画面の情報量を少なく、シンプルに
なるべく目に入る情報量を少なくしています。
具体的にいくつか例を挙げます。
-
ヘッダーのメニューをアイコンに
PC画面でのヘッダーのメニュー部分はアイコンで表示し、直感的に触れるようにしています。
とはいえ文字を無くすと伝わりにくいので、自ら素材を作ったりせずに一般的に浸透しているアイコンを設定しました。
-
フォームに入力したときに、枠線の色を変える
入力漏れの部分があったときにわかりやすいようにしています。
.png)
-
サムネイル画像の彩度を下げる
アクセントカラーや全体的な雰囲気を邪魔しないように、画像の彩度を下げました。
.png)
OFUSEの利用
投げ銭サービスであるOFUSEのリンクを貼りました。
収益がモチベーションに繋がるかもしれないので新たに設けてみました。
犬のイラストを挿入
昔飼っていた犬を参考に描きました。アクセントをつけるために線をふにゃふにゃさせました。
軽くするためにwebpに変換したりもしています。
余談ですが、ここのサイト名は飼っていた犬の名前である「レオン」からきています。
大切な存在なので、亡くなってからも大切にしたいです。
おわりに
勢いでざっと書いてみました。
お読みいただきありがとうございました。
肝心のwebアプリを最近作れていなかったり、サイトに必要な機能（戻るボタンなど）がまだ実装できていません……
後から手を加えやすいように管理しているので、気が向いたときにちまちま実装していけたらと思っています。
