このサイトについて

mosunset

はじめまして、管理者のmosunsetです。

• ネット上では「mosunset」というハンドルネームを使っています。
• コアラの写真をアバターにすることが多いです。(この写真を他の人が使っているのもよく見かける)

もともとは趣味でWeb開発や資格試験の勉強をしていたのですが、知識や経験を誰かの役に立つ形で発信してみたい、という思いからこのサイトを立ち上げました。技術者としての実験や学習の場であると同時に、日常生活の記録や資格取得の備忘録としての側面も兼ね備えた、ある種の“総合ポータル”に育てていければと考えています。

mosunset-webとは

mosunset-webは、管理者の日常生活やWeb開発、資格取得に関する幅広いコンテンツを提供するサイトです。具体的には、

• ブログでの技術情報・資格取得の体験談・最新のWeb開発事情
• Playground（ツール集）での実用的なユーティリティツール（文字数カウンターなど）
• 資格紹介ページでの保有資格の一覧と取得体験記
  などを展開しており、現段階ではいわゆる自己満足的なサイトとなっています。しかし、今後はPlaygroundページを始めとして、訪問者にも価値を提供できるコンテンツを追加していきたいと思っています。

「ブログをやるなら本気でやりたい」というこだわりから、技術要素やサイト構成にかなりの時間を注いできました。ただ、あくまで最終的なゴールは「訪れた人が役立つ情報を得られること」です。

• Web開発でつまずいたときのヒントに
• 資格試験を乗り越えるための励ましに
• 毎日の生活をちょっと便利に管理するためのツールに

そんな幅広い用途で気軽に利用していただきたいと考えています。
今後もさらに使いやすく、わかりやすく、何か新しいことに挑戦したくなるような情報発信を続けていきたいです。

現段階では第3回目大幅改修中ということで正しくTitleがついていないなど粗があるが、ちょっとづつ直していこうとしています

ブログセクション

• ブログページ（/blog）
  最新の技術情報や資格学習のヒントが一覧形式で掲載されています。カテゴリごとに記事を整理しているため、興味のあるジャンルに素早くアクセスできます。

• 個別記事ページ（/blog/[slug]）
  専門性の高い技術解説や、資格取得の体験談などを詳しく紹介。読みやすさを重視しており、図解やコード例を多く含んでいるのが特徴です。

Playground（ツールセクション）

• Playgroundページ（/playground）
  日常で使える便利ツールが集約されています。現在は主に文章作成や文字数カウント（/playground/char-count）など、シンプルかつ役に立つ機能を提供。今後さらにツールを増やす予定です。

資格紹介ページ（アクセス制限付き）

• 資格一覧ページ（/qualification）
  管理者が保有している資格情報が一覧で確認できるページです。
• 特定資格ページ（例：/qualification/drivers-license）
  資格取得に関する具体的なアドバイスや受験体験談を詳しく掲載。閲覧には制限があり、公開範囲がコントロールされています。

その他の便利ページ

• リンク集ページ（/link）
  関連する外部サイトや便利なサービスへのリンクがまとめられています。
• お問い合わせフォーム（/contact）とサンクスページ（/contact/success）
  payload cms に統合できるよう開発中です
• サイトマップ（/sitemap）・プライバシーポリシー（/privacy）・利用規約（/terms）
  ユーザーが安心して利用できるよう、サイトの利用方法や規約を整備しています。

技術スタックと選定理由

mosunset-webはモダンなWeb技術を積極的に採用しており、以下のような特徴とメリットを活かしています。

Next.js

• SSR（サーバーサイドレンダリング）・SSG（静的サイト生成）
  高速なページ表示とSEO最適化を実現。最新のApp Routerを利用することで、動的なページ管理とルーティングが効率化されています。
• TypeScriptとの連携
  型定義が明確で開発効率・保守性を高めます。
• Vercelへのデプロイ
  Next.jsに最適化されたインフラ上で、継続的なデリバリーをスムーズに行えます。

Payload CMS

• TypeScriptベースのヘッドレスCMS
  フロントエンドとの連携が容易で、安全性の高いコンテンツ管理が可能。
• 直感的な管理画面
  開発者以外でもコンテンツを更新しやすく、メディア管理機能が充実。
• 画像最適化とフォーカルポイント機能
• • thumbnail（幅300px）
  • square（500px × 500px）
  • small（幅600px）
  • medium（幅900px）
  • large（幅1400px）
  • xlarge（幅1920px）
  • OG画像（1200px × 630pxの中央クロップ）
    利用シーンに合わせて複数サイズを自動生成し、クロップ時には重要な部分を保持できます。さらに、アクセシビリティ向上のためにaltテキスト管理を必須化。
• SEOや翻訳プラグインの拡張性
  メタタグ管理や多言語対応など、検索エンジン対策やグローバル展開に有利です。
• PostgreSQL・S3ストレージとの統合
  大規模データやメディアファイルの効率的な保存・運用が可能です。

TypeScript

• 静的型付けによるバグの早期発見
• 開発チーム全体のコード可読性・保守性の向上

Tailwind CSS

• ユーティリティファーストのCSSフレームワーク
  細かいスタイルを高速かつ簡単に実装でき、デザインの一貫性を保ちやすいです。
• モバイルファースト対応
  幅広いデバイスで見やすいレスポンシブデザインをスムーズに導入できます。

ESLint / Prettier

• コード品質と可読性の向上
  Lintによる静的解析とフォーマッタで、一貫したコーディングスタイルを維持しながらバグを減らします。

その他

• pnpmで高速かつ効率的なパッケージ管理
• Gitでのバージョン管理により、チーム開発や履歴管理がスムーズ

今後の展望

1. コンテンツの充実
   ブログや資格紹介、ポートフォリオを定期的に更新し、より多くの役立つ情報を提供します。
2. パフォーマンスとUXの向上
   Core Web Vitalsスコアの改善をはじめ、アクセシビリティやユーザビリティをさらに高めていく予定です。
3. インタラクティブ機能の強化
   Playgroundツールの拡張や日常生活管理機能の高度化など、ユーザーが楽しみながら使える仕組みを増やしていきます。
4. アクセシビリティ対応
   WCAGガイドラインを意識して、より多様なユーザーにとって使いやすいUIを追求していきます。