nuxt+netlify+contentfulで作ったサイト

OVERVIEW

上述の技術を使ってみたかったので作りました。

YEAR 2019

テーマは「かっこいいアニメーション」「パフォーマンス」「ダークテーマ」です。

また、せっかく作るのなら新しい技術に挑戦したいと思ったので、巷で話題(多分)のnuxt+netlify+contentfulで作成しました。結果的にlighthouseでperformance 98という爆速サイトができました。

こだわったところ


・ヘッダーの部分のUI

タブを切り替えているような感覚で操作できますが、ページ遷移しています。ページ遷移を感じさせないシームレスな遷移をアニメーションで実装することでタブにするよりも読み込みが早く、ユーザー体験向上を図っています。グラデーションの色もダークなテーマにいいアクセントになっていて気に入ってます。

・パフォーマンスについて

 worksページでは動画を扱うページは読み込み容量が増えてしまうので、遅くなってしまうのはある程度仕方ないですが、静的サイトジェネレートすることで出来るだけパフォーマンスを維持できるようにしています。

・最初のアニメーション

 web表現を練習する場所という名目で作っているのでアニメーションにはこだわりました。サイトに来た人がワクワクするような施策です。

難しかったところ

・contentfulとの連携周り

 contentfulとの連携のコードまわりが大変でした。コンフィグ周りのコードをいじるのはまだ苦手です。

今後頑張りたいところ

今後コンテンツが増えた時のロードの仕組みであったり、カテゴリ分けの仕組みであったりを導入したいと思ってます。



 

 


WEBSITE