ポートフォリオを作成しました。

はじめに

ポートフォリオを新しく作成しました。就活も終わっているし、昔作成したポートフォリオがあるし、作る必要性は正直ほとんどないのですが、自分はもっと良いものが作れるんだぞということで新しく作り直すことにしました。

特にデザイン、アクセシビリティにこだわって作ったので、隅々まで見ていただけますと幸いです。

ポートフォリオを作るに当たって使用した技術を紹介します。

フロントエンドのフレームワークとしてAstroを使用しました。選定した理由としては以下があります。

Astroを使うことでページの読み込みが高速になったのがとても良かったです。また、localhostを立てるだけでパフォーマンスやアクセシビリティチェックがワンタッチでできるのが開発体験としてとても良かったです。今後も静的サイトを作る時には使いたいと思いました。

トップページのスクロールアニメーションに使用しました。我ながら気持ちがいいアニメーションができたと思います。

GSAPを使うと、スクロールによるアニメーションの起点と終点を表示することができるので、開発中の挙動を見るのにとても便利でした。

ブログのOGP画像作成に使用しました。jsx(tsx)からsvg画像を生成することができます。結構おしゃれなOGP画像ができたなーと思います。

個人的にデザインにこだわって作ったのでこだわりポイントを紹介させてください。

自分はシンプルなレイアウトが好きですが、その中でも個性が出せるといいデザインになると考えています。今回はpcをテーマにして、大胆なタイポグラフィーと大胆な塗りつぶしで印象的なデザインにしました。

ページタイトルをあえて右寄せにしてみたり、プロダクト一覧での並べ方をちょっと変えてみたりと、シンプルの中にも細かい工夫を入れてみたりもしてます。

WCAG2.1の基準で、このサイトはレベルAAに準拠しています。

自分がシンプルなレイアウトが好きなのはアクセシビリティを担保しやすいからでもあります。複雑なデザインになると、色のコントラスト比への影響が出てしまう、文字サイズの拡大やズームをした時に大きくデザインが崩れてしまうなどが起こりやすくなります。

実装してからアクセシビリティを考えるとかなり修正が面倒だったと思うで、デザインの段階からアクセシビリティを考慮する大切さがわかりました。

トップページのスクロールアニメーションがお気に入りです。ヌルヌル動いて気持ちいい。今回は実装しながらデザインを考えましたが、デザイナーの方々はどうやってアニメーションの構想を練っているのか…。

スクロールアニメーションはアクセシビリティの影響があるので、早めにアニメーションを停止できる機能をつけないといけないなと考えています。ユーザーによっては、スクロールのようなインタラクションによるアニメーションがめまいを引き起こしたり、集中してコンテンツを読むことができなくなることもあるためです。

ということでポートフォリオを作成しました。デザイン、アクセシビリティなどのいい勉強になりました。

ところでブログ機能作ってみたけど、何を書こうか…。