幹部ナビブログをご覧いただきありがとうございます。
システム部フロントエンド担当の池田です。
毎度ご好評いただいているシンデレラグループのグラビアページですが、このたび、こちらのページを新しく制作しました。
(掲載期限がありますのでその際はバックナンバーからご覧ください。)
今回の制作では、従来のレイアウトを大きく見直し、写真や動画をタイル状にコラージュするような、新しいビジュアルデザインに挑戦しました。
CSSグリッドをフル活用！
写真や動画をただ並べるのではなく、一つひとつのコンテンツが“映える”ように意識して配置しています。特に、縦長や横長の比率の異なる素材を自然にレイアウトできるよう、CSS Gridを中心に設計しました。 これにより、スマートフォン・タブレット・PCすべての表示環境で、レイアウトが美しく保たれるようになっています。
自作CMSで、写真のレイアウトも自由自在
女性のプロフィール情報の登録だけでなく、写真や動画の表示レイアウトも登録画面から行えるようにすることで、運用負荷を大きく軽減しました。 以下は、開発中のレイアウト設定画面のスクリーンショットです。
各ブロックの入れ替えやサイズ変更を、ドラッグ＆ドロップで直感的に操作できるようにしています。これにより、ビジュアルセンスに自信がない方でも、簡単に魅力的なコラージュを作れるようになっています。
制作の裏側
今回の実装では、いくつかの技術的な課題と、それを乗り越える工夫がありました。
✅ 1. グリッド配置のリアルタイム編集
編集UIには gridstack.js をベースに、ユーザーが配置したブロックの情報をリアルタイムで保存・反映できるようにしています。 バックエンドではJSON形式で座標やサイズを保存し、フロントではそれを再構成して表示しています。
✅ 2. レスポンシブ対応のバランス取り
写真ごとに縦横比や重要な被写体の位置が異なるため、単純な自動整列では破綻しがちでした。 そのため、最終的な見た目のプレビューをCMS側でも再現し、編集者が仕上がりを確認しながら調整できるようにしています。
✅ 3. 通信コストとパフォーマンス対策
動画や高解像度画像を多用するため、遅延読み込み（lazy loading）やWebP変換などを積極的に導入。これにより、ファーストビューの表示速度も改善しています。 —
引き続き、編集性と表現力の両立を目指して改良を続けていきます。技術的にもデザイン的にも、より進化した形をお届けできるよう開発を進めています。
最近ハマっていること：ギター改造
仕事の合間に、少しずつ進めていた趣味があります。 最近はギターの改造にハマっていて、なんと先日はパーツからエレキギターをコンポーネントしてみました。
特に苦労したのは塗装工程。 黒のラメ塗装に挑戦したのですが、仕上がりの美しさを追求するあまり、数日間ずっと部屋がラメだらけに…。 フレークが家具や衣類、パソコンの隙間にまで入り込んでしまい、ちょっとしたキラキラ地獄に（笑）
ですが、完成したギターを眺めていると、そうした苦労も全部報われる気がします。塗装の深みやネックの握り心地、音の立ち上がりなど、自作ならではの満足感があります。
技術もデザインも、結局「モノづくり」という意味ではWeb制作と通じる部分が多く、良いリフレッシュになっています。
