👊

ポートフォリオサイトをリュニューアルした話

2023/08/30に公開

CSS

概要

ポートフォリオサイトをかれこれ2年以上放置している。
大学生の頃、就活で活用しただけのポートフォリオサイトは、現在となっては技術スタック的にもコンテンツ的にも特筆すべき長所はなく、せっかくの自己表現の場が活用できていない。
そのため、リニューアルすることを決意した。
今回の実装では、「使ってみたい」や「これから伸びてくる(?)」と個人的に感じている技術やツールを活用し、新しいことにチャレンジすることをテーマとして、サイト制作に取り組んだ。

ポイント

1.Figma

デザイン制作はFigmaを使用した。
言わずもがな、デザインツールとして確固たる地位を築き上げているサービスだが、これまでFigmaを使用してゼロからデザインを作成した経験がなかったため利用した。
使用した感想として、基礎的な使い方ができるようになった程度のレベルなので、特筆すべき長所が思い浮かばないが、躓くことなくデザインが作れたということは使いやすいのかもしれない。

2.Astro

Astro自体を使うのは初めてではないが、Content CollectionsとAssetsを初めて取り入れてみた。

2-1.Content Collections

astro@2.0.0で追加された機能。(Content Collections)
事前にコンテンツのデータに対して型定義を設定しておくことで安全に.mdまたは.mdxを管理することができる。
型定義にはZodを使用したが、知見が全くなかったためにその場しのぎのような使い方をしてしまった。改めて学び直す機会を作ろうと思う。

2-2.Assets

astro@2.1.0で追加された実験的機能。(Assets)
assetsというフォルダに格納した画像ファイルを最適化する機能。デフォルトの設定だとwebpに変換して吐き出してくれる。今回は書き出す画像の数が限られていることもあり採用したが、大規模なサイトだとビルドに時間がかかるため、サイトの性質によって良し悪しが決まると思う。また、書き出される形式もimgタグだけなので、アートディレクションが必要な画像などがある場合は、活用が難しいかもしれない

3.swup

シームレスなページ遷移が実装できるライブラリ。(swup公式)
Astroでインテグレーションとして使えるようになったので、今回採用した。
詳しい実装内容は別の記事でまとめた。

4.CSS Grid

先日行われたCSSNiteにてCSS Gridのさまざまな活用方法についての解説があり、経験がない使用方法を知ったので挑戦してみた。特に"grid-template-areas"を使用してエリアごとに名前を配置する使い方は、正直、全く知らなかったので衝撃的だった。CSS Grid自体は業務内でも使用する機会が増えていたが、Flexでもいいじゃんというような使い方しかできていなかったこともあり、今回の実装で幅広い活用方法を試すことができた。

style.css

// こんな感じで使う
.container {
  display: grid;
  grid-template-areas:
    "image title"
    "image copy"
    "image  description";
  grid-template-rows: 50px 1fr 1fr;
  grid-template-columns: 150px 1fr;
}

.image {
  grid-area: image;
}

.title {
  grid-area: title;
}

.copy {
  grid-area: copy;
}

.description {
  grid-area: description;
}

5.Rive

Lottieのようなアニメーション作成のWebサービスだが、Webアニメーションの作成からブラウザ上で行うことができるサービス。(Rive公式)
(しかし、最近Lottieも同じようなサービスが公開された：参考ポスト)
Lottieと比べて軽量ということだったので、使ってみることにした。
感想としては、操作感も良く、動作もかなり軽いと思った。
最終的に書き出したファイルも確かに軽かった。(Lottieとの比較をしたわけではないので参考程度に)

ただ、ドキュメントが多いわけではないので、詰まったら結構大変。でも、公式Discordで質問したら、すぐに返信があり、サポートは手厚かったので助かった。

6.Splide

スライダーにはSplideを利用した。(Splide公式)
かなり軽量で、ドキュメントも日本語なのでとても扱いやすいとの記事を読んで、採用した。
オプションの設定もわかりやすく、かなり使いやすかったが、私が望んだ挙動を標準機能で再現できず、自動再生の機能などは自前のjsで対応した。ただ、それはそれでとても良い経験となった。

成果物

完成したポートフォリオはこちら

まとめ

今回、多くの技術やサービスに触れてきたが、新しいことを学ぶのは楽しいなと改めて感じた。
一度取り入れた技術は、なんとなく動向を追ってしまう。すると最新の技術がキャッチアップできるようになる。というサイクルが自分の中で定着するように、興味があることにはとことん向き合っていこうと思った。

概要