ミコト| WEB制作

今週の #デイトラ #ウィークリーコーディング お題は「スクロールに合わせてSVGのグラデーション線が伸びていく表現」 LPの導線演出、サービス紹介のタイムライン、実績紹介、ストーリー設計などでかなり使える実装。 こういった「体験に落とし込める実装ができる人」は現場でも重宝されます！ 📝実装のヒント ✅ SVGのpathの長さを取得する ✅ 長さ分の線をずらして非表示→スクロールに連動して描画する ✅ スクロール量と進行度はGSAP + ScrollTriggerなどを同期が可能 SVGを作るところがまず難しいかもしれませんが...。まずは直線で動きを確認してみるだけでも大丈夫です🙆‍♂️ 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！ 👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊 来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！ ---------- 👨‍💻 ウィークリーコーディングとは？ 流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨ ✅ 毎週月曜にお題 & 前週の実装例を公開 ✅ デイトラ生以外も参加歓迎 ✅ 実装スキルやスニペット集のレベルUPに！ ぜひ挑戦してみてください！💪

今週の #デイトラ #ウィークリーコーディング お題は「切り替わる速度がわかるインジケーター付きスライダー」 自動再生の残り時間が「円の進捗」で見えるUIを足してみてください！ 制作会社のLPやブランドサイトでもよく見る表現で、 ライブラリをベースにUIをカスタマイズする実装力を見せやすいUIです。 📝実装のヒント（※Splideの場合） ✅ svgのcircleで円周の線を準備（dasharrayとdashoffset） ✅ Splideのautoplay:playingで進捗率を取得 ✅ 進捗率を円周に換算してsvgのdashoffsetを更新 ✅ Splideのmoveのタイミングでスライド番号を更新 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！ 👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊 来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！ ---------- 👨‍💻 ウィークリーコーディングとは？ 流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨ ✅ 毎週月曜にお題 & 前週の実装例を公開 ✅ デイトラ生以外も参加歓迎 ✅ 実装スキルやスニペット集のレベルUPに！ ぜひ挑戦してみてください！💪

@nobufwd ノブさん✨ですよね！！！ ありがとうございます！ 都度入力で来年はもっと早く終わらせられるようがんばります🔥

@mkt0655 同感です！ 私は開業届でしたがソフト使ったらあっという間でしたw 過去の自分に言いたい（笑） ミコトさん無事終わってお疲れさまでした😃

確定申告対応完了🎉 過去の自分へ。 ケチらないで会計ソフトを使いなはれ、はよ。

今週の #デイトラ #ウィークリーコーディング お題は「横に流れ続けるテキストをスクロール速度と連動して変化させよう」 ギャラリー系サイトで定番の「横に流れ続けるテキスト」。 スクロールの「速度」まで制御できるようになると、単なるアニメーション実装ではなく挙動を設計できるスキルとして見られるようになります。 📝実装のヒント ✅ 右→左と、左→右で無限ループするテキストアニメーションを2つ用意 ✅ スクロールの速度を取得して、アニメーションの速度を変更 ✅ スクロールが止まったら元の速度に戻す GSAPのScrollTriggerを使うとスクロールの速度の取得やアニメーションの速度の変更がしやすいと思います！ 「実装例コード」は1週間後に👇のストックに追加されます。ぜひチャレンジしてみてください！ ---------- 👨‍💻 ウィークリーコーディングとは？ 流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨ ✅ 毎週月曜にお題 & 前週の実装例を公開 ✅ デイトラ生以外も参加歓迎 ✅ 実装スキルやスニペット集のレベルUPに！ ぜひ挑戦してみてください！💪

【今週の積み上げ】 ☑️ コーディング対応 金曜日にキリの良いところで仕事が終わると、なんとなく心が軽い。でも確定申告が何も進んでないので、土日でなんとかやり遂げたい。デスクトップは氾濫を起こしているし、容量もまずい気がする。デジタル断捨離せねば。今週もお疲れさまでした！

今週の #デイトラ #ウィークリーコーディング お題は「メガメニューを段階的に表示しよう」 ECやコーポレートなど情報が多いサイトで頻出のメガメニュー🗂️ こういう「よくあるUI」を当たり前に実装できる人は現場で重宝されます。 📝実装のヒント ✅ 対応するメニューにメガメニューを設置して非表示に ✅ メニューのホバーに連動する形でふわっと表示 ✅ メガメニュー内のコンテンツは少し遅れて段階的に表示 メニューとどのように連動するかが実装のポイントです💡 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！ ---------- 👨‍💻 ウィークリーコーディングとは？ 流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨ ✅ 毎週月曜にお題 & 前週の実装例を公開 ✅ デイトラ生以外も参加歓迎 ✅ 実装スキルやスニペット集のレベルUPに！ ぜひ挑戦してみてください！💪

世界中で1億回以上インストールされたVS Code拡張機能に重大な脆弱性が見つかった。悪用されればローカルファイルの窃取や任意コード実行が可能となり、開発者の端末から組織全体へ侵害が拡大する恐れがある。未修正の欠陥も残る。 対象はLive Server、Code Runner、Markdown Preview Enhanced、Microsoft Live Previewの4拡張で、研究者は1つの悪意ある拡張や単一の欠陥でも横展開が可能だと警告した。CVE-2025-65717はLive Serverに存在し、localhost:5500で動作する開発用サーバーからファイルを窃取できる。CVE-2025-65716はMarkdown Preview Enhancedで細工された.mdファイルにより任意のJavaScript実行が可能となる。CVE-2025-65715はCode Runnerで設定ファイル改変を通じたコード実行を許す。Microsoft Live Previewにも類似の問題があり、バージョン0.4.16で修正されたがCVEは付与されていない。対策として不要な拡張の削除、未信頼設定の回避、拡張の更新、未使用時のlocalhostサービス停止などが求められている。 thehackernews.com/2026/02/critic…

＼日本一周しながら全国各地で間借りカレー／ 始めます！ 5年間の間借りカレー営業の経験を活かし 今度は日本全国でカレー屋営業します！ 「うちの地元に美味しい食材あるよ！」 「ここで間借りできるよ！」 という情報があればぜひ教えてください！ あなたの街でスパイスカレー作らせてください🍛

【今週までの積み上げ】 ☑️ 納品、案件受注、コーディング 確定申告書の作成、始めました。 excelでまとめてたけど、入金日しか記載してなくてあたふた。請求日も記載しておくべきだった。案件の合間に少しずつ進めるぞ！ 久しぶりにYubinBango.js使ったけど、便利ですな。 pengi-n.co.jp/column/js-yubi…

今週の #デイトラ #ウィークリーコーディング お題は「フッターがめくれて登場」 フッターすら「体験」に変えられるこの演出。 入れるだけでポートフォリオの完成度が一段上がり、「ページの最後まで設計できる人」という印象になります。 📝実装のヒント ✅ フッターはfixedで背面に固定 ✅ メインにフッター分の余白を確保 余裕がある方はめくれる途中や後のアニメーションも実装してみましょう💡 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！ ---------- 👨‍💻 #ウィークリーコーディング とは？ 流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨ ✅ 毎週月曜にお題 & 前週の実装例を公開 ✅ デイトラ生以外も参加歓迎 ✅ 実装スキルやスニペット集のレベルUPに！ ぜひ挑戦してみてください！💪

@nobufwd ノブさん✨ 名刺に間に合って良かったです！ ご依頼いただき、ありがとうございました！

ポートフォリオ完成しました💻 ポートフォリオ（fwd-work.design/portfolio/）をWEB公開するにあたって多くの学びがありました。 ポートフォリオ、デザインはできてたけど実装どうしようと迷ってたところ、交流会への参加をきっかけにちゃんとしようと決心しました。そこで配る名刺にポートフォリオのQRコードをのせたかったんです。 今回コーディングをミコトさん（@mkt0655）に依頼し、コーディングの指定方法でも多くの学びがありました。 ✅メタ情報を決める（WEBページの内容を検索エンジンやSNSに伝える「デジタルの自己紹介カード」のようなもの） ✅ファビコンを決める（ネットでWebサイトを開いたときに、タブの左側やブックマーク（お気に入り）に出てくる「小さなマーク」） ✅どこをテキストにしてどこを画像にするか ✅テキストのフォントと大きさ デザインだけでなくこういったことも大切💡 皆さんもWEBデザインではぜひ意識してみてくださいね☝️

今週の #デイトラ #ウィークリーコーディング 👨‍💻 お題は「写真にグリッチ効果をかけてみよう」 グリッチとは、映像の乱れやノイズのこと。 世界観を一瞬でつくれるのがこの表現です！ 実装できるようになると、単なる装飾ではないユーザーの体験を意識した演出まで踏み込めるようになります。 こうした意図やタイミングまで一緒に考えられるコーダーは現場でも重宝されやすい存在です💡 📝実装のヒント ✅ メイン画像の上に擬似要素でグリッチ用に同じ画像を2枚重ねる ✅ メイン画像はtranslateのxとyを細かくズラして振動しているような演出 ✅ 2枚の重なりの画像はclip-pathでの切り取る反映を変えがら移動 ✅ 重なりの1枚目は大きな切り取り、2枚目は小さな切り取りのように範囲や動き方に違いを出す ✅ 各画像はそれぞれ異なるコントラスト(contrast)、明るさ(brightness)にする 元の状態からコントラストを高めたり、明るくしたり、小刻みに震えたり、断片が移動したり、が組み合わさると乱れやノイズ感に繋がります。 初めてだとかなり難しいと思いますが、ヒントを試して少しでも乱れやノイズを感じられたらOKです！ 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！💪✨

【今週までの積み上げ】 ☑️ 案件受注、コーディング対応 またインフルエンザの波が来ておりますね💦早速娘のクラスも学級閉鎖となりました😅 とりあえずまだ元気なので、警戒しつつ、週末乗り切るぞ！！ 1月もお疲れさまでした！！（体感めちゃくちゃ早かった😭）

今週の #デイトラ #ウィークリーコーディング 👨‍💻 お題は「3Dに写真を並べて回転させよう」 ブランドサイトやポートフォリオで見かけるこの3D表現。 自分のポートフォリオに入れると世界観が変わるだけでなく、3D表現が実装できる人という技術者としての印象が変わります！ 3Dまで実装できる人は少数派なので、 実装できることは明確な差別化にも繋がります！💪 📝実装のヒント ✅ 1周（360°）の範囲で均等になるように各画像をY軸で回転（rotateY） ✅ 各画像をZ軸（translateZ）で前に移動 ✅ 配置した画像全体を、円柱の中心のY軸で回転（rotateY） ✅ 視点はperspectiveで定義 正直かなり難しいので、作れたら凄いです！ 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！

今週の #デイトラ #ウィークリーコーディング 👨‍💻 お題は「スクロールに追従するナビゲーションを表現しよう」 沿革やストーリーなど縦に長いページでよく使われる、スクロールに追従するナビゲーション表現。 迷わずに心地よく閲覧できるようになるので、単なるメニューにとどまらない、ユーザー体験まで考えた一段上の提案ができるようになります！ 📝実装のヒント ✅ IntersectionObserverで各セクションの表示状況を監視 ✅ セクションが表示されたら対応するナビゲーションにクラスを追加してアクティブ状態の切り替え ✅ scroll-behavior: smoothでページ内移動を滑らかに 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！

【今週の積み上げ】 ☑️ 修正案件対応 修正をしていると、自分が新規構築する際には、分かりやすく記述しよう！ととても反省します。 あと、こんな書き方もあるんだ！と勉強にもなりますね。今週もお疲れ様でした！

今週の #デイトラ #ウィークリーコーディング お題は「ホバー時に追従する画像を表示しよう」 リンクやリストにホバーした時に、カーソルの近くに画像が追従して出る表現の実装です！ ギャラリーサイトやアワード系サイトでよく見かける動きになります✨ ✅ 触って楽しいインタラクションを作れる ✅ テキスト主体の一覧でも、必要な視覚情報を補完できる ✅ モダンなインタラクションが実装できるようになる マウスストーカーの応用で実装可能になりますので、復習もかねてチャレンジしてみてください！

【今週の積み上げ】 ☑️ 案件コーディング・納品 迅速な対応に喜んでいただけて良かった！どうしても最後の工程でスピードを求められることになりやすいので、準備は大事です。また、カンプも一通り確認してもし誤字などがあればFBかコーディングで修正するのも喜ばれます。今週もお疲れ様でした！