こちら、先日弊社で制作をさせていただいたサイト。
2023年秋に愛媛県で開催される、漫画『アオアシ』の原画展示をはじめとしたさまざまなイベントが催される「アオアシ展」の特設サイトです。
漫画のコマ割りを意識したデザインを随所に散りばめたデザインとなっていますが、少し手間をかけて実装を考案した箇所が大きく分けて２ヶ所あります。
- 背景画像を固定する演出
- リンクの境界線が斜めになっている箇所を見た目通りのリンクに直すための実装
背景画像を固定する演出
ページをどんどん下にスクロールしていっても背景画像は固定される、という演出を用いています。
background-attachment: fixed;というCSSプロパティをつけるだけで実装ができるので、実装難易度は決して高くないものです。
しかし、一度でも実案件でこのプロパティを扱った方なら知っている、必ず悩まされるポイントがあります。
それは、iPhoneをはじめとしたiOSの端末だと、このCSSプロパティの挙動が適用されない仕様になっていること。
背景の演出は、さまざまなwebサイトで用いられていますが、iOSだと挙動が変化してしまいます。
そこでスマホでの挙動のみ、通常の背景となるように変更をかける形で対策をしています。
iOSでも固定背景での実装方法は一応あるのですが、若干無理のある実装であることに加えて、固定背景にするのはスマホでのレイアウト上、向いてないと判断してこのような形に落ち着きました。
リンクの境界線が斜めになっている箇所を見た目通りのリンクに直すための実装
境界線がボタンリンクになっているものは、実装が少し面倒です。
通常HTMLの要素は全て四角形の箱の形を前提とするため、画像の見た目の境界線が斜めになっている場合でも、リンクの境目は斜めになりません。
さまざまな工夫の仕方は存在しますが、今回は複数の画像を含めた要素を一つのSVGとして仕立て上げる手法を採用しました。
See the Pen SVG clipped link by qoorus (@qoorus) on CodePen.
境界線はCSSの
clip-path: polygon(...);を使って、台形に切る表現を実現しました。
そのほか細かい調整のための工夫を施しましたが、ご興味のある方はソースコードを見ていただければわかるかなと思います。
実現したいイメージをデザイナーと膨らませる検証時間
以上、2点の手間がかかった実装部分についてご紹介しました。
弊社の制作は、どういったことをWebサイトで実現したいのかという想いを、デザイナーとコーダーがぶつけ合いながら進んで行きます。
デザイナーのアイデアをより良くしたり、デザイナーにインスピレーションを与えるためにコードのアイデアを共有したり、常にコーダーとデザイナーが協力する体制が大切です。