MARCH 2025
担当範囲
Frontend Development
制作期間
元のサイトをアクセスし、改善すべき点をメモする：2日
サイト再構築：3週間
コンテンツ更新：2日
フィードバックを修正：1日
ドメイン名移行：4日
使用したテックスタック
React / React Router / Tailwind CSS / Vite

概要

SIIN SIINさんの個人ウェブサイトをリニューアルするにあたり、以前のサイトにはいくつか満足できない点があることに気付きました。より良いユーザー体験を提供し、今後のコンテンツ更新をより簡単に行えるようにするため、従来のjQueryベースの構成から、よりモダンなReactを用いてサイトを完全に再構築しました。元のデザインを尊重しつつ、ユーザー体験の向上に特に注力しています。

ターゲット

SIIN SIINさんのウェブサイトにアクセス人たち

目的

デザインを忠実に再現しながら、ユーザー体験を大幅に向上するサイトのコンテンツ更新

デザイン

このWebサイトはテキストエディタのようにデザインされています。全体はProjectとExhibitionの2つのセクションに分かれています。ウィンドウのサイズに応じて、テキストもエディタのように自動で改行されます。各プロジェクトにホバーすると、対応する画像が下部に表示される仕組みになっています。

旧サイトの課題

1. コンテンツがすべてHTMLに直接記述されていたため、更新や内容の検索が非常に困難でした。
2. デザインの仕様上、すべての画像を初回で読み込む必要があり、ページの読み込みが非常に遅かったです。
3. 各テキスト項目が画像として表示されていたため、エディタのように自然な改行ができませんでした。
4. 各テキスト項目が画像として表示されていたため、スクリーンリーダーが作品名を正しく読み上げられず、「SVG_1」などのalt属性しか認識されませんでした。
5. ページ送りのクリックエリアが作品画像のごく一部にしか設定されておらず、画像サイズによって有効範囲が変わるため、毎回マウスで「探す」必要がありました。

改善点

1. コンテンツとデータを分離し、Reactコンポーネント側で必要に応じて読み込む構成に変更しました。これにより、更新作業が容易になり、将来的にヘッドレスCMSの導入もスムーズに行えるようになりました。
2. 画像をサムネイルと高解像度版に分けて、初回読み込み時には軽量なサムネイルのみを表示することで、ページ表示速度を大幅に改善しました。
3. Reactコンポーネントによって複数のテキスト項目を1つの段落として構成し、自然な改行や段落表現を実現しました。
4. テキスト項目を直接表示することで、スクリーンリーダーが各作品名を自然に読み上げられるようになりました。その他のサイト全体でもアクセシビリティの向上を図り、誰にとっても使いやすいウェブ体験を目指しました。
5. 作品詳細ページ全体に均一なクリックエリアを設け、どの作品でも直感的かつスムーズにページ送りができるようにしました。
6. 一定時間操作がない場合には、デザイナー名の文字ロゴ（「S」「I」「N」）のみを表示する新機能を追加しました。