ZetLinkerのウェブサイトに使用した技術紹介

はじめに

こんにちは。Kanehara Takatoです。
私たちZetLinkerでは、ウェブサイトを通じて皆様のビジネスにお役立てできるよう、日々工夫を重ねています。今回、私たちのウェブサイトで採用している技術についてご紹介いたします。この技術選定には、お客様にとって使いやすく、成長の一助となるような機能性や品質の向上を目指す姿勢が込められています。

私たちのウェブサイトには、下記の工夫が込められていますので紹介させてください。

お客様が迷わず使える操作性

ビジネスの成長に応じて柔軟に対応できること
お客様との出会いを増やすためのSEO対策
これらの条件を満たすため、Next.js、TypeScript、JavaScript、Cloud Functions、Firebaseといった、モダンで信頼性の高い技術を採用しました。また、少しの工夫でフロントエンドの品質が向上する「魔法のCSS」も取り入れています。

Next.jsとTypeScript – 高速で直感的なユーザー体験

サイトを訪れるお客様にとって、ページが速く表示され、必要な情報がすぐに見つかることが大切です。そのため、Next.jsを基盤にし、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）でページ表示速度を向上させています。また、TypeScriptの導入により、コードのエラーを未然に防ぎ、サイト全体の安定性が保たれるようにしています。

私たちが目指すのは、「お客様が迷わず操作できるサイト」。Next.jsとTypeScriptの組み合わせで、その目標に少しでも近づけていることを願っています。

Cloud FunctionsとFirebase – 拡張性と柔軟性を備えたバックエンド

私たちのウェブサイトは、成長するお客様のニーズに合わせて柔軟に対応できることが大切だと考えています。そのため、FirebaseとCloud Functionsを採用しました。Firebaseは、認証やデータベース、ホスティングまで揃った機能を提供し、効率的な開発をサポートします。また、Cloud Functionsを使うことで特定の処理を自動化し、サイトが成長してもスムーズに対応できるように設計しています。

お客様にとっても長く使い続けていただけるよう、サイトが柔軟であることを大切にしています。

カスタムSEO対応 – 認知度を広げ、お客様とつながるために

私たちにとって、ZetLinkerのウェブサイトが皆様に見つけていただきやすく、価値が広がっていくことが何よりの喜びです。そのため、SEO対策には特に気を配り、Next.jsのカスタマイズ機能を使ってページごとに適切なメタタグや構造化データを設定しています。

SEO対策によって検索エンジンからのアクセスが増え、皆様により多くの価値を提供できるようになることを目指しています。

フロントエンドの品質をあげる「魔法のCSS」

お客様がウェブサイトを操作する際の快適さを考え、ZetLinkerでは「魔法のCSS」とも呼べるシンプルなCSSコードを使用しています。これにより、意図しない動作や無駄な操作が防げるため、使いやすさが向上します。

* {
  user-select: none; /* テキストの選択を無効化 */
  -webkit-user-select: none; /* WebKit用の選択無効化 */
  -moz-user-select: none; /* Firefox用の選択無効化 */
  -ms-user-select: none; /* Internet Explorer/Edge用の選択無効化 */
  -webkit-touch-callout: none; /* iOSでのコールアウト無効化 */
  overscroll-behavior: none; /* スクロールの挙動を無効化 */
}

img {
  -webkit-user-drag: none; /* SafariやChromeでの画像ドラッグを無効化 */
  pointer-events: none; /* 画像のクリックやドラッグを無効化 */
}

このCSSの効果は、下記に考慮しています。

誤操作防止：無駄な選択やドラッグが防げ、意図せずにページがスクロールされることがなくなります。

操作集中：画像をドラッグやクリックする必要がなく、ユーザーが情報に集中できます。
こうした工夫を取り入れることで、ユーザーが快適にウェブサイトを利用できるよう支えています。

信頼されるパートナーとしての技術選定

私たちが選んだ技術には、どれも「お客様にとって価値があるか」という視点が込められています。高速で安定したウェブ体験、柔軟なカスタマイズ性、未来の成長に備えた設計――これらを実現するための技術選定が、お客様にとっても意味のあるものであればと思っています。

ZetLinkerは、ウェブサイトを通じてお客様の成長を支え、信頼できるパートナーとしてご一緒に歩んでいきたいと考えています。私たちの技術やサービスに関心を持っていただけましたら、どうぞホームページにもお越しください。皆様のお役に立てることを心から楽しみにしております。

皆様が使用している、魔法のCSSがあれば是非コメントでご教示ください！