Tangoっていう英単語テストサイトを作った！[Astro×Svelte×TailwindCSS]
こんにちは、中学生のkstdxと申します。
ここ数日Astroがマイブームだったので、そのAstroを使って英単語を学習するためのポータルサイト的なものを作ってみました。
現在利用者さんも少ないので、Zennで宣伝も兼ねて技術的な話をしていこうと思います。
Tango(タンゴ)について
Tangoはタイトルの通り英単語を学習する為のサイトです。
英単語の小テストが出来るアプリや、一覧もセットで載ってるWebサイトみたいなのが見た所なさそうだったので作りました。
実際に5級レベルの小テストはこちらです。やってみやってみてください。
作成理由
自分自身英単語の学習をあまりしたことがなかったので、英検1級等を次取るときのために作ったというのと、既存サービスがなかったからというのが最大の理由です。
ただ、SEO的にはもう埋まっているので、なんとかその他の方法で集客出来ないか考えた結果、TwitterやZennを用いることになりました。
特徴
1. 級別で分ける
独自の基準で5級から1級までの級別に分けています。
2. 単語一覧とミニゲーム
メインはミニゲームですが、英単語の一覧も載せて、より学習をしやすくする配慮をしました。
技術的知見
サイトの作成方法
私は基本的にSSRが好きなんですが、今回はAstroというSSGを使いました。
なぜかって言うと、Astroが単純に有能杉田からです。
また、デザインにはお決まりTailwindCSS、ミニゲームのCSR部分にはSvelteのコンポーネントを作って埋め込みさせていただきました。
フォント
ちょっと特殊なコトを言いますと、フォントはInterとNoto Sans JPを使いました。
Interはとってもおすすめのフォントです。
おわりに
今回宣伝記事を書かせて頂きました。
もちろんTangoはこれから英語のミニブログやいろんな機能を有名になったら追加していこうと思っています。
普段は適当にのんびりとプログラミングとかしてTwitterに生息しているので、ぜひ御覧ください。
文章力も乏しいですが、これからもがんばりますのでぜひTangoをご利用お願いします🙏
-
本記事の構成はQuickURLの記事(https://zenn.dev/sotetu/articles/7499886f9a1168)を参考にしています。 ↩︎
Discussion