うるみく | わんこをこよなく愛するWEBコーダー🐶

HP・LP・WordPress 制作/コーディング代行｜デイトラ 第4回実案件チャレンジ合格｜プログラマー3年→OA事務10年→デイトラWeb制作コース卒業｜第二種情報処理技術者｜お仕事のご相談は✉[email protected]へ

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

#デイトラ #Web制作コース #実案件チャレンジ
課題と期限は自分にはハードなものでしたが合格することが出来ました😆
関係者の皆様、大変貴重な経験をさせていただき有難うございました🙇‍♀️
お忙しい中採点・講評をしてくださった、はにわまんさん、誠に有難うございました🙇‍♀️
今後も精進致します🔥

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

#デイトラ #ウィークリーコーディング
AI特別編 第2回に参加します！
お題 :「AIを活用した架空パーソナルトレーニングジムサイトの1ページ構築」

Google Antigravityを活用し、エグゼクティブ向けパーソナルトレーニングジム「L'UXE 24」の1ページサイトを構築しました。
URL : https://t.co/mAzh5BKTU5

💎制作ポイント
・リュクス感を高めるため、ロゴやスクロールマーク、価格カードに繊細にきらめく光のアニメーションを実装✨
・アクセスセクションは「隠れ家」をテーマに、パララックス効果と地図がゆっくり出現する演出で、聖域の入り口へ近づく没入感を表現しました(PCのみ🥲)

これまでのウィークリーコーディングで学んだアニメーション演出を取り入れました！
実装はAI任せでしたが、中間サイズは自分で調整しました。
#Web制作 #AI活用

[はにわまん @haniwa008]

#デイトラ #ウィークリーコーディング AI特別編スタートです✨

お題は「AIを活用した架空パーソナルトレーニングジムサイトの1ページ構築」

話題のAIを使って、1週間でどこまで完成度を高められるか、にチャレンジします💪
最優秀賞の人には Amazonギフト券3,000円をプレゼント！

お題の詳細は画像から▼

デザイナー、コーダー問わず誰でも自由に参加可能です。
たくさんのご参加お待ちしてます☺️

----------

【ウィークリーコーディング特別編とは？】

お題を出してみんなでチャレンジする #デイトラ #ウィークリーコーディング を、AI活用テーマで開催する特別企画です🧑‍💻

「AIってどこまで使えるんだろう？」
最近そう感じる方も多いのではないでしょうか🤔

短納期で作りきるには、もうAIの活用が前提の時代。
そこで今回はAIも含めて使えるものは全部使いながら、1週間で仕上げることをテーマにしました！

自分が手を動かすところ、AIに任せられるところ。
その線引きの感覚は、触ってみないと掴めません。

今のAIの現在地を、自分の手で確かめてみてください！

お題の詳細は画像から▼

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

#ウィークリーコーディング
「スクロールに合わせてSVGのグラデーション線が伸びていく表現」

絶景めぐりということで、SVGのパスを道のイメージに寄せてみました。

[はにわまん @haniwa008]

今週の #デイトラ #ウィークリーコーディング
お題は「スクロールに合わせてSVGのグラデーション線が伸びていく表現」

LPの導線演出、サービス紹介のタイムライン、実績紹介、ストーリー設計などでかなり使える実装。
こういった「体験に落とし込める実装ができる人」は現場でも重宝されます！

📝実装のヒント
✅ SVGのpathの長さを取得する
✅ 長さ分の線をずらして非表示→スクロールに連動して描画する
✅ スクロール量と進行度はGSAP + ScrollTriggerなどを同期が可能

SVGを作るところがまず難しいかもしれませんが...。まずは直線で動きを確認してみるだけでも大丈夫です🙆‍♂️
「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！

👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊
来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！

----------
👨‍💻 ウィークリーコーディングとは？
流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨

✅ 毎週月曜にお題 & 前週の実装例を公開
✅ デイトラ生以外も参加歓迎
✅ 実装スキルやスニペット集のレベルUPに！

ぜひ挑戦してみてください！💪

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

WordPressサイトへのアニメーション追加のご依頼を納品しました。

クライアント様から
「とても丁寧に作業していただき、こちらの意図も汲み取って対応いただけた」
と嬉しいお言葉をいただきました✨

無事に納品できてほっとしています😌
これからも丁寧な対応を大切にしていきます！
#独サポ

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

#デイトラ #ウィークリーコーディング
お題「切り替わる速度がわかるインジケーター付きスライダー」

Splideで挑戦してみました。

[はにわまん @haniwa008]

今週の #デイトラ #ウィークリーコーディング
お題は「切り替わる速度がわかるインジケーター付きスライダー」

自動再生の残り時間が「円の進捗」で見えるUIを足してみてください！
制作会社のLPやブランドサイトでもよく見る表現で、
ライブラリをベースにUIをカスタマイズする実装力を見せやすいUIです。

📝実装のヒント（※Splideの場合）
✅ svgのcircleで円周の線を準備（dasharrayとdashoffset）
✅ Splideのautoplay:playingで進捗率を取得
✅ 進捗率を円周に換算してsvgのdashoffsetを更新
✅ Splideのmoveのタイミングでスライド番号を更新

「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！

👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊
来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！

----------
👨‍💻 ウィークリーコーディングとは？
流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨

✅ 毎週月曜にお題 & 前週の実装例を公開
✅ デイトラ生以外も参加歓迎
✅ 実装スキルやスニペット集のレベルUPに！

ぜひ挑戦してみてください！💪

[こうき | 間借りカレーで日本一周中 @tanshiokoki73]

＼日本一周しながら全国各地で間借りカレー／
始めます！

5年間の間借りカレー営業の経験を活かし
今度は日本全国でカレー屋営業します！

「うちの地元に美味しい食材あるよ！」
「ここで間借りできるよ！」
という情報があればぜひ教えてください！

あなたの街でスパイスカレー作らせてください🍛

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

今週の #デイトラ #ウィークリーコーディング
お題：「フッターがめくれて登場」

GSAPのscrollTriggerで実装。

footerをfixedにしてbottom:0にする。
フッターの高さ分、直前のセクションにmargin-bottomを追加。

フッターの高さはjsで動的に取得することで保守性UP⤴️

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

今週の #デイトラ #ウィークリーコーディング
お題：「文字の一部を拡大してそのまま背景にしよう」

GSAPのScrollTriggerで実装。
スクロール量の調整で試行錯誤しました⚖️

うちのワンコの座り方おかしいです🙄

[よしお👨‍🏫Udemy講師 @yesmyoshi]

✅ 僕が運営するコミュニティ #wpFUNNY 【無料体験】のご案内

期間限定・１０名限定で募集します！

コミュニティにご興味がある方は、ぜひ以下をご確認いただけたら嬉しいです！🙌
https://t.co/d9wohbS04A

この機会にぜひどうぞ！

[よしお👨‍🏫Udemy講師 @yesmyoshi]

✅ WordPressブロックテーマで肝となる「theme.json」を少し解説

theme.jsonは、パッと見だとごちゃっとして目をそむけたくなります。
今回は、超シンプルな内容で、かつ、見やすいようにいったん細かい中身を折り畳んで理解していきましょう。
少しはお友達になれるかなぁと！

こちらになります。
👇️

もちろん、上記以外にももっともっといろんなことが設定できます。

ぜんぶの中身を開くと僕も大変なので、ここでは、上の図の先頭にある「settings → layout」を開いてみましょう
👇️

こんな感じになってます。
自ら数値を指定しなければ、これが基準となりサイト全体で統一されます。

ブロックエディタ上では、「なし」とか「幅広」といった指定ができますが、ここでも上記で指定した幅が基準となるので、この幅が保たれますね。
👇️

layoutで指定した通り、
なし（contentSize）→1080px
幅広（wideSize）→1280px
となっています

まずは大枠の構成と、そんな感じの指定ができるんだね！って感じで抑えておくとよいかもです！🙌

参考になれば幸いです🙏

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

#デイトラ #ウィークリーコーディング
お題：「写真にグリッチ効果をかけてみよう」

・画像に擬似要素を追加し、元の画像を重ねて表示。
・clip-path プロパティと transform を使用したキーフレームアニメーションを定義し、画像が断片的にズレるノイズ表現を実装。
・mix-blend-mode: hard-light を使用して、重なった部分の色味が変わるように調整。

[よしお👨‍🏫Udemy講師 @yesmyoshi]

👨‍🏫 「サーバー引っ越し・ドメイン移管」が怖くなくなる講座

✅ 無料開催！
✅ ZOOMオンライン・ライブ

🗓️ 2月5日（木）20:00〜22:00

※ちょっと時間オーバーするかもです🙏寛大な心で受けとめてください🙇‍

Web制作で意外と避けて通れないのが「サーバー移転やドメイン移管」です。
この作業に自信がない方や不安を持つ方は多い印象です。

たしかに、これをミスすると「メールが使えなくなった」「いっこうにサイトが切り替わらない」などのトラブルに陥ることも全然ありえます。

こうした失敗は、「そもそも仕組みの理解不足」から起きると思っています。
学べる情報はたくさんあるけど、独学ではなかなか理解するのが難しい分野かとも思います。

Udemyやコミュニティ内の講座で「わかりやすい」と多くの評判をもらって調子づき始めている僕が、初心者でもしっかり理解いただき、サイト引っ越しやドメイン移管を恐れず自信をもって実施できるような講座を行います！

この機会にぜひどうぞ！

🔻 無料講座のお申し込みはこちらから！
https://t.co/OS9VxMls4x

お申し込み〜参加までは以下の３ステップのみ。LINEの登録とかはないので、お気軽にどうぞ〜
--
①上記のGoogleフォームからお申し込み
②メールにZOOMリンクを送ります
③あとは当日にご参加ください
--

🙏 できたら、拡散してもらえたら泣いて喜び...いや、すみません！泣きはしません！が、めっちゃ嬉しいです！ぜひよろしくお願いします！🙏

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

今週の #デイトラ #ウィークリーコーディング
お題：「3Dに写真を並べて回転させよう」

ヒントとAIを頼りに実装してみました。

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

#デイトラ #ウィークリーコーディング
「スクロールに追従するナビゲーションを表現しよう」

『世界の絶景スポット』で実装してみました。

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

#デイトラ #ウィークリーコーディング
お題「ホバー時に追従する画像を表示しよう」
requestAnimationFrameを使わなくても実装できるけど、
requestAnimationFrameのタイミングで更新した方が滑らかで軽くなるらしいので
requestAnimationFrameを使って実装しました。

画像はうちのワンコです🐶

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

@shibamodayo しばもさん、コメントありがとうございます！
そして、同世代で学んでいる方からの言葉は、なおさら励みになります🥹
「明けない夜はない」という言葉、沁みますね...。
お互いのペースで、一歩ずつ積み重ねていきましょう。
これからも一緒に頑張っていけたら嬉しいです☺️

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

オンラインスクール「デイトラ」Web制作コースを無事に卒業しました。
毎日の積み重ねが形になって、ようやくスタートラインに立てた気がします。
課題制作では、HTML/CSS/JavaScriptを使ったサイト構築やFigmaデザインの再現、WordPressでのテーマ制作にも取り組んできました。
思うように進まない日もありましたが、そのたびに少しずつ理解が深まっていくのが嬉しくて、気づけばここまで来られました。
これからは、実績を積みながら、誰かに喜んでもらえるサイトを届けていきたいです。
#デイトラ #デイトラコミュニティ #独サポ

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

@hayakawa_design ハヤカワさん、ありがとうございます！
そしておめでとうございます！🎊
週次MTGの最中に独サポmanaメン5人のうち3人が同時に卒業発覚して、わぁって盛り上がりましたよね😆
とても良い思い出になりそうです✨
今後ともよろしくお願いいたします☺️

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

ブロックテーマのライブ講義に参加しました！
事前知識ゼロだったので学びが多かったです。
・htmlベースのテンプレートだということ。
・ヘッダー、フッター、サイドバーなどの領域もブロックエディタで編集するということ。
・theme.jsonでテーマのスタイルなどを管理するということ。
次回は実際にサイトを作っていくとのことなので、また楽しみにしています😄

[よしお👨‍🏫Udemy講師 @yesmyoshi]

ブロックテーマ講座をやりました！
今後も連載でやっていきますので、お楽しみに！🙌

※最近コミュニティ内では、「ここまでOKですか？」ときくと「り」と返答を頂くのがはやっています（「了解」の略で「OK」を意味している、と思う）

[うるみく | わんこをこよなく愛するWEBコーダー🐶 @UruMiku]

#デイトラコミュニティ #独サポ
＼決意表明！／

2026年はネガティブ思考から卒業することを宣言します🔥

🐶コツコツ生活を整え、自己肯定感UP
🐶1月中にポートフォリオサイトを完成させる
🐶何事も自信を持って全力で取り組む
🐶人とのつながりに感謝しご縁を大切にする
🐶ウィークリーコーディングに取り組む
🐶4月までに0→1を達成させる

本年もよろしくお願いいたします🙇‍♀️