services
テクノロジー
user experience
そもそも、
ユーザー体験とは何なのか。
ユーザー体験は英語で「user experience」と表記され、「UX」と省略されているのを見たことがある方もいらっしゃるのではないでしょうか。
ユーザー体験とは、あらゆる製品やサービスなどの体験を通して、ユーザーが感じる感情のすべてを指します。
Webサイトを例とするならば、ページを開く前のワクワク感、閲覧中の使用感、見終わった後の嬉しい気持ち、これらすべてがユーザー体験といえます。
質のいいユーザー体験を提供することは、ユーザーの満足度を高め、サイトへの再訪や行動意欲の向上につながります。とくにqueueではWebアクセシビリティの最低対応ラインが高く、より多くの人々にWebサイトを体感していただける機会を提供できるのが強みです。
Webサイトのユーザー体験を構成する要素
ユーザビリティ
Webサイトが使いやすく、必要な情報をすぐに見つけられて、直感的に操作できること
アクセシビリティ
障がいを持つ方も含め、さまざまな立場のユーザーが利用できるWebサイトであること
コンテンツ
ユーザーのニーズに寄り添った、正確で信頼できる情報をしっかりと届けられること
デザイン
Webサイトの見た目、配色、フォントの雰囲気などが、ユーザーのイメージに与える影響
インタラクション
ユーザーのアクションに対し、Webサイトが正しく反応して必要なフィードバックを届けること
パフォーマンス
Webサイトの表示が速い、途中で不安定にならない、などといった技術的な要素が確かであること
core web vitals
質のいいユーザー体験は、
どのようにして可視化されるのか。
その評価指標「コアウェブバイタル」を解説。
queueの技術スタックを語るうえで、「質の高いユーザー体験」の指標を説明することは外せません。
2021年以降のGoogleでは「ユーザーが使いやすいと感じるWebサイトを上位に表示する」ように組み込まれています。
その際に使いやすさの基準としてGoogleが提唱している指標のうち、とくにSEO対策に効果がある3つは「コアウェブバイタル」と呼ばれています。
コアウェブバイタルの3つの指標
コンテンツが1秒でも早く表示されるようにする
01LCP（Largest Contentful Paint）画像や動画などのメインコンテンツが表示されるまでの待機時間を評価する指標
操作に対する応答が1秒でも早く返るようにする
02INP（Interaction to Next Paint）ユーザーがページで行う操作の視覚的な応答速度を評価する指標
レイアウトズレを起こさないようにする
03CLS（Cumulative Layout Shift）ページコンテンツの視覚的な不安定を評価する指標
具体的な対策例
コアウェブバイタルを改善するためには、画像の容量を削減したり、実装を見直したり……と、さまざまな対策が必要です。
画像サイズを最適化する
画像を次世代フォーマット（WebPなど）に変換する
画像の遅延読み込み処理をする
レンダリングブロック要素を排除する
サーバ・ブラウザキャッシュを有効にする
コンテンツデリバリーネットワーク（CDN）を導入する
使用していないJavaScript・CSSを削除・最適化する
タグを削除・整理する
technology stack
コアウェブバイタルを改善するための
queueの技術スタック
ここまでに紹介した対策を効率的に行うために、モダンな技術を選定して開発をしています現在、queueで使用している技術スタックと構築フローは以下のとおりです
フレームワーク
Next.js 
Astro
メリット
- ページの表示が早くなりやすい（とくに初回表示）
- 不要なコードを読み込まないので、ページが軽い
- SEOに強い構築が可能
- 開発効率が上がることで、品質向上に時間を使うことができる
- フレームワークのルールによってコードが統一化され、ミスが起きにくい
コンテンツマネジメントシステム
microCMS
メリット
- 日本語に完全対応したCMS
- デザインの自由度が高い
- セキュリティ性が高い
- データの汎用性が高い
- ページの表示が高速でSEOに強い
microCMSは日本製のヘッドレスコンテンツマネジメントシステム（CMS）で、WordpressやMovable Typeなどといった他CMSと同様に管理画面で情報の登録・管理ができます
ヘッドレスCMSは表示画面（フロントエンド）とシステム部分（バックエンド）が完全に分離しており、デザインのカスタマイズ性が高いのが特徴です
つまりどういうことかというと、microCMSに1つ情報を登録するだけで、Webサイト、モバイルアプリ、デジタルサイネージなど、複数の媒体に活用することが可能になります
また、表示画面とシステムが分離していることで、セキュリティが高いこと、ページの表示が高速なこともメリットとして挙げられます
Webサーバ
Vercel
メリット
- フレームワークとの相性が良い
- ページの表示が高速でSEOに強い
- 安定した情報提供が可能
Vercelは、Webサイトやアプリケーションを公開するためのホスティングサービスです
フレームワークで紹介したNext.jsと開発元が同じため、開発環境との親和性の高さ、そしてセキュリティの高さから、queueではVercelを採用しています
Vercelにはさまざまな機能がありますが、特筆すべきはWebサーバ機能です
グローバル コンテンツデリバリーネットワーク（グローバルCDN）という、世界中に分散配置されたサーバネットワークを利用して、ユーザーに近いサーバからコンテンツを届けることでWebサイトの表示速度を高速化させることができます
また、サーバが分散していることで障害発生時にも他サーバから配信することができ、安定した情報提供が可能となります