皆さんこんにちは、福岡で課題解決部に所属しているエンジニアの petamoriken です。iOSDC Japan 2020のデザインスポンサーとして公式サイトを作った話をエンジニア目線で紹介していきます。
公式ロゴ、サイトデザインについては既に公開されている #iOSDC Japan 2020 の公式ロゴ・サイトデザインができるまで を御覧ください。
技術スタック
ゼロからの静的なサイトの構築ということで今回は Next.js の SSG の技術を試してみることにしました。Next.js 自体はまだ社内での採用事例はあまりありませんが、個人的に Next.js を使って SSR するサイトを作っていることもあり、特に問題なく開発を進めることができました。
また CSS in JS として Zero-Runtime な Linaria を採用しました。Linaria は styled-components や emotion とほとんど同じ書き方で TSX/JSX 内にスタイルを記述しますが、最終的な出力が CSS ファイルに切り出される特徴があります。まだ発展途上な技術ではありますが、将来的に流行ってもおかしくないものだと思っています。詳しくは社内のエンジニア勉強会で発表した資料があるのでそちらを御覧ください。
サイト構築
レスポンシブデザイン
PC、タブレット、そしてスマートフォンごとに作っていただいたサイトのデザインをもとにレスポンシブなサイトを作ることになりました。
レスポンシブデザイン用の React Custom Hooks を探したところ、ほとんどが window の resize イベントを使っていて個人的にとても気に食わなかったので MediaQueryList を使ったものをサクッと自作しました。
https://gist.github.com/petamoriken/070878457954f05a1f54e8491b9b1fd9
サイトのビルド時にはスマートフォン用にレンダリングされるようになっていたため、PC やタブレットでサイトを開いたときに一部コンポーネントでちらつきが起きてしまったので、コンポーネントがマウントされるまで非表示にする工夫が必要でした。
ロゴアニメーション
ファーストビューのロゴアニメーションは Lottie を使っています。Lottie について詳しくは Lottieであなたの「サービス」をもっとリッチにアニメーションさせる話 を御覧ください。
After Effects で使っているエフェクトの関係上 lottie-web では SVG のレンダラーを使う必要がありましたが、それによってパスの数が多いアニメーションデータでは Safari で描画のフレームが飛ばされたりそもそも表示されなかったりと問題が起きました。こちらは単にアニメーションを簡略化してもらい解決しました。
アクセシビリティ
今回は情報の表示がメインとなるサイトなため、特にアクセシビリティに気を配りました。具体的には WAI-ARIA の属性を記述し、VoiceOver を使った際に問題なく読み上げられるかのチェックを行いました。
他にも prefers-reduced-motion を使うことでユーザーエージェントの設定によってアニメーションが抑制されるようにしてあります。
iOSDC Japan 2020 が素晴らしいカンファレンスになるように、持っている知識をフルに使って楽しく公式サイトを作らさせていただきました。イベント当日、ぜひ楽しんでいただけたらと思います。
