【制作のポイント】
(1) 受注フォーム（Contact Form 7）
メニュー別に数量を選べる形にし、受取日は flatpickr（日付選択カレンダー）で「明日以降のみ選択可」に。当日・過去日は選べないようにしました。
(2) メニューの更新しやすさ
メニューPDFをカスタムフィールド化。差し替え手順書もお渡しし、お店側で更新できる設計に。
(3) 動きのある表現
パララックスと横スライドは splide で実装。軽さと保守性のバランスを意識しました。
(4) 表示速度への配慮
画像のWebP化・遅延読み込み、ヒーロー画像の fetchpriority でLCPを軽減。CSS設計は FLOCSS を採用し、後から触りやすい・壊れにくい構造にしています。
1
1
180
🗃️自主制作：JS(GSAP/Splide)で実装したUIデモ集
思い出したように投稿(笑)
少し前に研鑽目的で自主制作しました。
構成・デザイン・実装までやってます。
(あまりにシンプルすぎてデザインと呼べるかは謎ですが…)
楽しかったのでまた作成します！
#自主制作 #ハローメンター
web-interaction-patterns.omi…
4
102
May 21
Day 3/30
Building a premium 3D/interactive car rental & chauffeur platform from the ground up!
Here is what’s completed so far:
Modern Vite React architecture with clean feature-based routing
Custom @tailwindcss theme setup featuring luxury black & gold branding
Dynamic AOS (Animate on Scroll) setups for smooth, premium entry states
Fully responsive chauffeur sections optimized across all viewport sizes
Stack: React, Tailwind CSS, Splide/Swiper, and Lucide Icons.
Next up: hooking up the web app and proceed to booking engine with backend
#buildinpublic #reactjs #tailwindcss #webdev #frontend
3
3
12
245
The most common features I get asked from a client is, filters, sliders, and tabs they show me examples of what they want and I have to consult oh to do this ill need to do splide JS or add extra CSS ect...and they go "why cant it be native in Webflow?"
I
1
3
177
スライダーって、スマホ操作を考えるとSwiperがベストだって思ってた。
Splideもタッチ操作しやすくて良い。それに機能がシンプルな分軽量とのこと。
1ページにたくさんスライドショーを入れるならSplideが良さそう。
ja.splidejs.com/
10
467
Must-Try Frontend Libraries 🔥
1. Transition.css — transition.style
2. Chart.js — chartjs.org
3. Packery — packery.metafizzy.co
4. Splide — splidejs.com
5. SimpleParallax — simpleparallax.com
6. AOS — michalsnik.github.io/aos
7. Swiper.js — swiperjs.com
8. GSAP — greensock.com/gsap
9. Three.js — threejs.org
10. Lenis — lenis.studiofreight.com
11. Framer Motion — framer.com/motion
12. Locomotive Scroll — locomotivemtl.github.io/loco…
1
1
5
302
おはようございます！
朝食は魚肉ソーセージ ヨーグルトでした。
タスク
✅新規Webページ制作
今日でトップページが終わりそう。
サブページの方も進めていきたい…
スライダーはsplideを導入。
CSSのclamp()にめちゃ助けられている感じです。
間に合わせるぞ！
2
54
Apr 18
Splideとかだとsectionにaria-labelつけるようにって書いてあったりしてるから、そのへん拾ったりしてるんかな……
ja.splidejs.com/guides/struc…
2
107
Mar 24
📝メガメニューでhoverした時のsplide🟩
①hoverが終わったタイミングでdestoryしないと残ってしまう。
②destroyするタイミングを少し遅らせることで
トランジション（0.25s など）によるバグを解消できた
4
143
「 [splide] null is invalid.」
こんなコンソールエラーが出てしまってるの、
気づいてます・・・？
Splide等のライブラリを使っているとき、
挙動に問題はないはずなのに
コンソールにエラーが出てしまってる...
これ、意外とあるあるですよね。
原因は単純で
カルーセルの要素がないページでも
初期化のコードが走ってるから。
「splide探してるのに、
無いやんけそんなの！！」
って怒られてるっていう訳です。
原因が分かれば解決策も単純。
「要素があるとき”だけ”初期化する」
これだけです。
const sliderElement = document.querySelector(".js-mv-splide");
if (sliderElement) {
new Splide(".js-mv-splide", {
type: "loop",
(その他の設定)
}).mount();
}
Splideだけじゃなくて、
SwiperでもGSAPでも、
全部このパターンでOK。
・まずは要素があるかどうかをチェックする
・あるなら処理を実行
このイメージはJS書くときの基本だから
ぜひ覚えておいて😌
1
1
3
561
Mar 18
円形プログレスインジケーター付きスライダーを実装しました！
( #ウィークリーコーディング )
■実装ポイント
・Splideで自動スライダー(autoplay)
・autoplayの進行度を取得し、円形プログレスに反映
・SVG(circle / stroke-dasharray / dashoffset)で進捗を可視化
・moveイベントでスライド番号(01/03)と状態を同期
ライブラリを使いながら、UIのカスタマイズまで挑戦できて良い練習になりました💪
ポートフォリオにも追加予定です！
#デイトラ #デイトラコミュニティ #RyoHa
Mar 8
今週の #デイトラ #ウィークリーコーディング
お題は「切り替わる速度がわかるインジケーター付きスライダー」
自動再生の残り時間が「円の進捗」で見えるUIを足してみてください！
制作会社のLPやブランドサイトでもよく見る表現で、
ライブラリをベースにUIをカスタマイズする実装力を見せやすいUIです。
📝実装のヒント（※Splideの場合）
✅ svgのcircleで円周の線を準備（dasharrayとdashoffset）
✅ Splideのautoplay:playingで進捗率を取得
✅ 進捗率を円周に換算してsvgのdashoffsetを更新
✅ Splideのmoveのタイミングでスライド番号を更新
「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！
👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊
来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！
----------
👨💻 ウィークリーコーディングとは？
流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨
✅ 毎週月曜にお題 & 前週の実装例を公開
✅ デイトラ生以外も参加歓迎
✅ 実装スキルやスニペット集のレベルUPに！
ぜひ挑戦してみてください！💪
1
1
18
1,090
#デイトラ #ウィークリーコーディング
お題「切り替わる速度がわかるインジケーター付きスライダー」
Splideで挑戦してみました。
Mar 8
今週の #デイトラ #ウィークリーコーディング
お題は「切り替わる速度がわかるインジケーター付きスライダー」
自動再生の残り時間が「円の進捗」で見えるUIを足してみてください！
制作会社のLPやブランドサイトでもよく見る表現で、
ライブラリをベースにUIをカスタマイズする実装力を見せやすいUIです。
📝実装のヒント（※Splideの場合）
✅ svgのcircleで円周の線を準備（dasharrayとdashoffset）
✅ Splideのautoplay:playingで進捗率を取得
✅ 進捗率を円周に換算してsvgのdashoffsetを更新
✅ Splideのmoveのタイミングでスライド番号を更新
「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！
👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊
来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！
----------
👨💻 ウィークリーコーディングとは？
流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨
✅ 毎週月曜にお題 & 前週の実装例を公開
✅ デイトラ生以外も参加歓迎
✅ 実装スキルやスニペット集のレベルUPに！
ぜひ挑戦してみてください！💪
1
9
1,272
3/9（月）
✅#デイトラ #ウィークリーコーディング
お題は「切り替わる速度がわかるインジケーター付きスライダー」
splide初めて使いました。
画面の中央に配置するのに時間がかかってしまいました。
進捗率は前に作ったスクロールの進捗率に合わせた実装を利用できたのでわりとすんなりできました😆
9
257
Mar 8
今週の #デイトラ #ウィークリーコーディング
お題は「切り替わる速度がわかるインジケーター付きスライダー」
自動再生の残り時間が「円の進捗」で見えるUIを足してみてください！
制作会社のLPやブランドサイトでもよく見る表現で、
ライブラリをベースにUIをカスタマイズする実装力を見せやすいUIです。
📝実装のヒント（※Splideの場合）
✅ svgのcircleで円周の線を準備（dasharrayとdashoffset）
✅ Splideのautoplay:playingで進捗率を取得
✅ 進捗率を円周に換算してsvgのdashoffsetを更新
✅ Splideのmoveのタイミングでスライド番号を更新
「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！
👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊
来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！
----------
👨💻 ウィークリーコーディングとは？
流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨
✅ 毎週月曜にお題 & 前週の実装例を公開
✅ デイトラ生以外も参加歓迎
✅ 実装スキルやスニペット集のレベルUPに！
ぜひ挑戦してみてください！💪
1
4
32
6,527
Mar 4
【🎾 制作実績公開！】
テニスのストリング張替サービスのLP型小規模WordPressサイトを制作しました！
今回はディレクションにも携わり、ワイヤーフレーム作成から設計を担当しました。
デザインはchobiさん（@chobi_tt）にご担当いただき、
魅力がしっかり伝わる素敵なビジュアルに仕上げていただきました✨
その世界観を大切にしながら丁寧に実装いたしました。
✔︎ LINE登録につながる導線設計
✔︎ サイト規模に適したUIライブラリ（Splide）採用で軽量＆保守性◎
✔︎ 適切なclamp()活用で柔軟なレスポンシブ対応
✔︎ 更新しやすいカスタムフィールド設計
✔︎ 表示速度・内部SEOにも配慮
✔︎ FLOCSSによる保守性・拡張性を意識したCSS設計
公開後の保守・運用も任せてもらうことになったので、SEO関連の知識も増やしつつ引き続き精進します💪
ぜひご覧ください👇
faststring-racketsports.com/
#Web制作 #WordPress #コーディング
34
2,313