ROUTE06 Design Engineerのべこ(@becolomochi)です。
この記事では2023/6/28に行われたデザイナーイベントKOD(Knock Out Design)のLPを支える技術について書きます。
LPはこちらです。
使用言語・ライブラリ・ホスティング先について
今回のLPでは以下を使用しています。
- React/Next.js
- Sass(SCSS)
- Cloudflare Pages
選定理由は、社内のプロジェクトでも使用しておりノウハウが貯まっていたためです。
React/Next.jsでのスタイリング方法はさまざまありますが、私自身が慣れているSCSSをimportする方法にしています。
実装期間
実装期間は2週間程度でした。メイン業務もありつつだったので実際は4営業日ほどだったかと思います。
スタイリングについて
デザインは完全オリジナルであったため、CSSライブラリはデフォルトスタイルをリセットするためのnormalize.cssのみ使用しました。
実装方法を検討するのに楽しかったことが2つあったので、それらについて書きます。
黄緑色のシャドウが映える吹き出し
1つ目は黄緑色のシャドウがついた吹き出しをCSSでどう実装するかでした。
最終的にclip-pathプロパティとfilterプロパティのdrop-shadowという比較的新しい技術を使用しています。
三角の部分を擬似要素でclip-pathプロパティを指定し作っています。
更にグレーの線を表現するためにbefore疑似要素でグレーの三角を、上に重なる形でafter疑似要素で白の三角を置くことでグレーの線がついているように表現しています。
三角は今までborderプロパティで作っていましたが、clip-pathによって便利な世の中になったな…！と思っています。
黄緑色のシャドウはfilterプロパティのdrop-shadowで作っています。
従来からあるbox-shadowプロパティだと、メインのボックスにはシャドウがつくのですが、疑似要素の三角の部分にはつきません。
filterプロパティのdrop-shadowでは疑似要素の部分にも同じ形状で影をつけることができます。
box-shadowプロパティとfilterプロパティで作った吹き出しのサンプルを用意しました。
ボタンのripple effect
2つ目はボタンにhoverしたときの効果です。
サンプルを用意したので以下をご確認ください。
アプリ等でもよく見る効果ですが、ripple effect（波及効果）という名前がついていることを今回初めて知りました。
実装のポイントは以下です。
- a要素またはbutton要素には、はみだしたところを隠すoverflow hiddenを設定
- a要素またはbutton要素にafter擬似要素で塗りを作り、hoverのタイミングでこの擬似要素をscaleで拡大率を上げる
デザイン担当のてくさん(@im_not_tech)に実装イメージとしてFigmaのプロトタイプでアニメーションを用意してもらえたので、理解しやすく助かりました。
（プロトタイプを見たときはFigmaでこんなことができるのか…！と驚きました。）
マークアップをしてきた人がNext.jsを使った感想
マークアップを長くやってきた者ですが、Next.jsは以下が個人的に便利だなと感じました。
LP制作で必須なものを用意してくれている
CSSに対してAutoprefixを設定しなくてもデフォルトで付与してくれるのは感激しました。
metadataも各ページに用意でき、ogpの設定も用意されており、このあたりは毎回書き方をググりながらやっているのですが、設定が楽でした。
便利な面もありつつ、デメリットは以下が挙げられそうです。
- マークアップより学習コストが上がる
- JSXの書き味はHTMLとは異なるため慣れが必要
- Node.jsや各ライブラリのバージョンアップに追随していかなければならない
まとめ
最後まで読んでいただきありがとうございました！
LP、無事に公開できて良かった…の一言に尽きます。
Googleアナリティクスの設置とOGPの設定はやや手間取ってしまったものの、公式のドキュメントとブログが手厚く、この2つは1人で実装できたので自信がつきました。
Cloudflare Pagesの設定もコーポレートサイトで先に対応をしていた方に助言をもらえてありがたかったです。
他のメインの業務との兼ね合いで時間が取りにくく最後のほうは駆け足になってしまいました。
時間やリソースにもっと余裕があれば、デザイナーと議論を重ねてもっとこだわりたかったなという気持ちも正直あります。
次のLP実装に向けてCSSやインタラクションなどの筋トレをしておきたいです:weight_lifter:
共催のUbieさん、参加してくださったデザイナーの皆様ありがとうございました！！
（当日は体調を崩してしまい参加できずだったので次回は当日もバリバリ稼働したいです……）
KODレポート📝
当日の雰囲気はデザイナーメンバーの記事をぜひご覧ください❤️🔥💥🥊
クマノさん↓
てくさん↓
kaoriさん↓
ちゃがさん↓
採用情報
ROUTE06の採用情報です。こちらもご覧ください！
Discussion