デザイナー・SIIN SIINさんの個人ウェブサイトにおいて、既存のビジュアルを維持したまま中身をゼロから作り直す、フロントエンドの再構築を担当しました。 以前のサイトはjQueryベースの構成で、テキストが画像として配置されていたり、全画像を一斉に読み込む仕様だったりと、運用面やアクセシビリティに課題を抱えていました。これらを解決するため、Reactを用いてモダンな設計へとアップデートしています。 具体的には、まずテキストを画像から実データへと置き換えることで、スクリーンリーダーでの読み上げを可能にし、テキストエディタのような柔軟な改行も実現しました。また、画像の読み込みをサムネイルと高解像度版に分け、ページ表示の速度を大幅に改善しています。さらに、クリック範囲のばらつきを整えるなど、細かなストレスを取り除くことで、見た目の印象は変えずに使う上での心地よさを向上させました。 全体は「Project」と「Exhibition」の2つのセクションで構成されており、情報の重なりを意識した設計になっています。また、数秒間操作が止まると画面上の文字が消え、デザイナー名の「S・I・N」だけが浮かび上がるイースターエッグも実装しました。元のデザインが持つ独特な世界観を尊重しながら、技術によって長く使い続けられる健やかな基盤を整えることが、今回の私の役割でした。