乱丸 🇯🇵WEB制作

【元・自衛官のフリーランスWEBコーダー】細部までこだわるコーディング🔥 15歳で自衛隊→営業→飲食店MG→WEBの世界へ｜GSAP×JavaScriptの動きある演出もお任せください🙌｜業務提携7社｜#デイトラ WEB制作卒業｜毎日朝から晩までフル稼働💪｜お抹茶、ふらっと散歩好き｜ご依頼はポートフォリオより📩

[乱丸 🇯🇵WEB制作 @ranmaru7888]

／
　GMOコネクト様の
　コーポレートサイトを納品しました📣
＼

このたび、 ”GMOコネクト様のコーポレートサイト" の実装を担当させていただきました✨
これで実案件納品6件‼️

▶️ サイトはこちら
https://t.co/YVebSx97m9

🛠 担当範囲
・サイト全体のコーディング
・アニメーション実装

📅 制作期間
・1週間（TOPページ　＋　下層６ページ）

🧰 使用スキ��
・WordPress（自作テーマ）
・GSAP / ScrollTrigger
・FLOCSS設計

🎨 こだわりポイント
・スライドショーの滑らかなアニメーション
・ブランドカラーを活かしたグラデーション表現
・ユーザー体験を意識したアニメーション設計
・スピード感と見やすさを両立するための動きの調整

急ぎの案件ではありましたが、
「丁寧に、かつスピーディーに」をモットーに、
細部までしっかりこだわって制作しました💪

完成後には「自信を持って納品できるサイトになった」と思える仕上がりに！
これからも、お客様にとって“誇れるサイト”を作っていけるよう、1件1件に真摯に取り組んでまいります🔥

だいぶ、急ぎの案件でも対応できるよう自分なりに時間の使い方やリソース管理ができるようになってきたと思います‼️

#WEB制作 #コーディング #デイトラ

[乱丸 🇯🇵WEB制作 @ranmaru7888]

アクセシビリティ80��以上必須の案件に大苦戦しました…。

しかもチェック基準が最新ではなく、少し前の仕様��ったので、新しい書き方をすると減点されるという罠😇

一番苦戦したのはSVG。

✅ path の文字数が1024文字を超えると減点対象らしく、アニメーション用の細かいパスがほぼ使えない…。

でもsvgのアニメーションはいれたいということで。。。

結局、AIにSVGを書き換えてもらうなどで何とか対応しました💦

別のアニメーション提案もしましたが、既存の形がいいということで、大変でした。他にいい方法があったのかな？？

まぁ、それでも私は元気です😂

[乱丸 🇯🇵WEB制作 @ranmaru7888]

@senyayi ありがとうございます！
本業農家さんには到底及ばないですが、、、😅

[乱丸 ���🇵WEB制作 @ranmaru7888]

最近バタバタしすぎて、Xを全然見れてませんでした😂

〜最近のダイジェスト〜
🍒 旬のさくらんぼ収穫祭
実家のさくらんぼの手伝い。
午前農作業と午後パソコン、夜市場に出すためのパック詰め
目も頭もヘトヘトでした🤣

🎨 GSAPとの永遠の闘い
考える→AI→考える→AIの繰り返し
自分なりの使い方が分かってきた

🛠️ 保守案件であたふた事件
保守で関わらせていただく案件が増え、対応や調整で慌ただしい日々。

最近は新規制作だけでなく、保守・運用周りにも携わる機会が増えてきました。

WEB制作は「作って終わり」ではなく、その後の運用や改善も大切だと改めて実感しています！

引き続きコーディングも保守も頑張ります🔥

[乱丸 🇯🇵WEB制作 @ranmaru7888]

継続で案件をいただくことでClaude Codeの凄さをさらに実感✨

定期的に制作するLPを今回もご依頼いただきました。

何度か制作していく中で、
Claude Code側にも作り方をしっかり学習させるようにしていて、
前回・前々回の実��ルールをまとめた claude.md を作成しました。

そこに今回のデザインを共有したら、

ほぼ一発でベース完成❤️‍🔥

しかも、前回のアニメーション構成まで再現してくれて、「そこまで理解してくれるの！？」って驚きました😂

初回と同じ金額で受注していますが、
作業時間はどんどん短縮。

今回はまさかの1日足らずで完成。

AIを“使う”というより、
「学習させて資産化する」感覚が��なり大事だと思いました。

作る中でしっかりAIも成長させることでどんどんWEB制作が楽になるなと実感💪

今日はAIには作れないようなアニメーション作っていこうと思いますが、、、🔥

[乱丸 🇯🇵WEB制作 @ranmaru7888]

LP無事納品しました！✨

そして…
過去最大レベルの“アニメーションゴリ��リ”なホームページ制作案件を受注しました🔥

納品時には「対応スピードが早い」と嬉しいお言葉までいただけて、かなり励みになりました！

GSAPのオンパレードな実装になりそうですが、複雑な動きも細かく分解していくと、少しずつ形にできると思うので、丁寧に積み上げていきます💪🏻

今まで積み上げてきた実装経験を全部ぶつけるつもりで、
今回も丁寧かつスピード感を持って制作していきます💻

WEB制作、まだまだレベルアップしていきます！🚀

[乱丸 🇯🇵WEB制作 @ranmaru7888]

アニメーション実装での学び！💡

GSAPでアニメーション実装をするとき���
まず細分化して、CSSで状態を作ってから、GSAPで流れるように組んでいるのですが…

「CSSではうまくいっていたのに、GSAPにした瞬間に全然違う動きになる😇」
という現象に遭遇しました。

原因を調べると、ポイントは transform の当たる順番！
GSAPでは👇のように transform が左から順番に適用されるため、

transform: 'translate(40px, 22px) rotate(90deg) scale(1.8)'

順番が違うだけで、位置や拡大率の見え方がかなり変わるみたいです。

さらに注意だったのが、書き方の統一性。
translate: '40px 22px',
transform: 'rotate(90deg)',
scale: '1.8',
のように transform と translate / scale を混在させると、
どちらが優先されるか不安定になって、位置やサイズが崩れることがある…！

⚠️気をつけることは
✅ transform系は1つの書き方に統一する
✅ transformの順番を意識する

を意識しましょう！

CSSとGSAPで「なんか見た目違う…」となった時は、transform周りを���うと解決するかもです👀

[乱丸 🇯🇵WEB制作 @ranmaru7888]

アニメーション講座を進めました！（@hiromu_wbungさんありがとうございます！）

最初は「どこから手をつければいいんだ…？」状態で、パニックでした。

ただ、丁寧に分解していくと、一つ一つは簡単に実装できると気づき、どんどん進め���れました💡

そして最後に timeline() を使った時、
「timeline()凄すぎ！」とかなり感動しました🔥

特に、湯気の表現は全く見当がつかなかったのですが、
グラデーションや filter を組み合わせて“それっぽく”できた瞬間がめちゃくちゃ楽しかったです！

アニメーションへの苦手意識がかなり減って、
「実装できる表現」の引き出しが増えた気がします。

AI時代だからこそ、ただ作るだけじゃなく
“どう魅せるか”
動きを提案できるコーダーとして、アニメーションを楽しんでいきたいです💻

@tepetaasukiさんのデザインもとても可愛くアニメーション付けるのが楽しく進められました！

[乱丸 🇯🇵WEB制作 @ranmaru7888]

人生初高尾山を登ってきました！⛰️

なんか急に山に登りたくなり、勢いで山に向かいました。

登山中にすれ違う人たちと「こんにちは」って自然に挨拶する文化がすごく新鮮で、めっちゃいいな！って思いました。

登山での文化らしいけど、
日頃家でPC触っていて、あまり人とコミュニケーションを取らないから、人の温かさとか、ちょっとした一言で胸があったかくなりました☺️

山を登るだけじゃなくて、
気持ちまでリフレッシュできた気がします。🌿

ただ！山頂は人多すぎてちょっと残念😅

ずっとコードを書いていると視野が狭くなりがちだけど、たまには自然に触れる時間も大事だなと思った！

また、お客さんや制作会社さんにもただ業務的なメッセージだけのやり取りではなくて、ちょっとした挨拶や一言���添えたやり取りをしていった方が、お互い仕事がやりやすくなるのかなと思えました！

AI時代ではありますが、人としてのやり取りも大切にしたいと思います✨

[乱丸 🇯🇵WEB制作 @ranmaru7888]

GWは外出するには高いので読書ウィーク📕

ということで、
「殺し屋の営業術」という小説が面白かったのでシェア📚

トップセールスマンが、ひょんなことから「殺し屋」の営業をすることになり、2週間で2億稼がないといけないというストーリーです！

これがただのエンタメじゃなくて、学び多かったです‼️

僕も元々営業マンだったのですが、 営業スキルや心理学、ニ��ズの引き出し方が全部詰まっていて、めっちゃ勉強になりました！

・相手のして欲しいこと、解決して欲しいことを解決してあげる。
・相手も気づかないようなニーズを見つけ出して、アプローチする。

どんなに商材や環境が違っても応用すれば通ずるものがある。
だから、その場限りのスキルではなくて、物事の核となることを理解すればいくらでも応用できる！

WEBの営業でも「クライアントの課題をどう解決するか」という視点で向き合えばさらにいい提案ができると思うので考え直そうと思う🧐

また、コードを書くということも、これからはもっと進化していくけど、AIを使う技術や、WEBを扱うという根本なことは変わらないと思うので、目先の技術だけではなく、本質の部分を理解して時代についていこうと思った🔥

ぜひG Wの空き時間の小説に😆

最後まで読むと、どうひっくり返して、どう相手のニーズを解決して稼ぐのか面白いので読んでみてください👀

[乱丸 🇯🇵WEB制作 @ranmaru7888]

@hayakawa_design それは楽しそうですね！！！✨
マカロニえんぴつのライブも行ってみたい！！

[乱丸 🇯🇵WEB制作 @ranmaru7888]

サンボマスターのライブ行ってきました！✨

正直、ただの「ライブ」じゃなかった���す。

熱い！とにかく熱すぎる🔥

会場の2万人歌うのではなく、来てくれた一人一人に全力で想いを伝えてくれているのが伝わって、それに応えるように思いっきり叫んで歌って盛り上がりました！

「全員優勝パレードツアー～全員優勝決定シリーズ」というライブで、全員優勝させてもらいました。

熱くさせる曲でもあるのはもちろんですが、
叫んで、歌って、踊りまくって、
ロックンロールで日々の疲れや苦しみを全て解放してくれたような感覚になれた最高のライブでした！

曲間のトークも「どう届けたいか」「どんな想いがある���か」本気でぶつけてくれて、感動しました😢

めっちゃ喋るし、まさかのアンコールで３曲も追加してくれて3時間半くらいの想像以上に長ライブでした😆

最近ちょっと疲れてる人、将来に不安ある人は
一回ライブ行ってみてほしい。

全員優勝、ちゃんと決まってます😆🔥

今日もロックンロールで営業していきます👍

[乱丸 🇯🇵WEB制作 @ranmaru7888]

めちゃくちゃ刺さった漫画���シェア💡

『リアル』っていう作品なんですが、正直かなり衝撃でした。

あの「スラムダンク」の井上雄彦さんの作品で、
車椅子バスケをテーマにしつつも、
本質は“人生の挫折と向き合う人間ドラマ”。

実際、物語の中心はスポーツというより、
・突然これまでの人生を失った人
・「もう普通には戻れない」と突きつけられた人
そんな人たちのリアルな葛藤です。

※正直かなり重いです（笑）

でもその分、
「今こうして働けてること」
「目の前の仕事があること」
これがどれだけ価値あるか、考えさせられます。

特に刺さったシーン🎬

陸上に本気で向き合っている少年が、いきなり病気で下半身が動かなくなってしまい、もう走ることができなくなって挫折している中で、
20歳で死ぬことを余命宣告されている人と出会い、その人が元気に明るく生きている理由がわからず、失礼ながら「なんでそんな元気で生きているのか？」と聞いた時の言葉です。

その余命宣告されている人が言ったセリフ👇

「ジェットコースターに乗ったことはあるかい？ 乗っている時に、このカーブを2回曲がったら終わりだとか、この坂を下ったらもう終わりだとか考えていたら、ジェットコースターを最後まで楽しめないでしょ？」

これ聞いてハッとしました。

将来の不安（AIとか案件とか）ばかり考えてると、
“今の仕事”をちゃんと楽しめなくなるなと。

だからこそ、
��今やってる案件
・今のスキル積み上げ
ここにもっと集中していきたい。

重いけど、めちゃくちゃ学びになる作品です🔥

気になる方はぜひ読んでみてください👇
https://t.co/HpLy4cTPcF

[乱丸 🇯🇵WEB制作 @ranmaru7888]

@Ryo_web_cording mix-brend-modeのループは２回目なので、３回目はないようにします😭

[乱丸 🇯🇵WEB制作 @ranmaru7888]

今日の沼��💡
mix-blend-mode: screen;でしっかり沼りました…😂

mix-blend-modeは「階層が大事」って分かってたのに、背景ありセクション × 光エフェクト × テキスト前面この組み合わせで完全に迷子になりました。

該当箇所の直下にmix-blend-modeをかけないといけないとわかっていたのですが、私の固定概念の「imgタグに直接書かないといけない」という思い込みが原因でミスっておりました。

imgタグに直接書いていたので、直親の要素にz-indexをかけてしまうとその階層がズレるので、blend-modeが解けてしまっておりました。

改めて
✔ 親子の階層構造
✔ z-indexのかけ方（途中で指定するとブレンド崩れる）
✔️固定概念

ここがめちゃくちゃ重要と気づきました。

前の営業会社で上司によく言われた
「最大の敵は固定概念と先入観」
という言葉を思い出しました。。。

営業の時の上司は人生にとって、すごいいいことを教えてくれました。

半日沼っていましたが、 @Ryo_web_cording さんに相談して一瞬で解決してくれました！！！

本当に足を向けて眠れません😭
ありがとうございました！！！

皆さんも固定概念と先入観で時間を溶かすのはやめましょう。。。

これでまたひとつバグの処理が上手くなったと思うので、バンバン案件やっていきまする！

[乱丸 🇯🇵WEB制作 @ranmaru7888]

ちょっと遅れて沼ラジを見ました👀

将来についてすごい考えさせられる。

最近、面談した時に
「将来どうなりたいとかありますか？」
という質問に答えるのがすごくモヤモヤしていたので、ハッとした😶‍🌫️

AIの進化のおかげで楽になった分、将来が不安になる。
AIにコード書かせている間にできることを少しずつ、広げて、見つけて、深めていこうかな〜〜

また、イタリア旅行行く前に年間プランで入ったhttps://t.co/tmJahDkN8mの存在を思い出した！！

最近めっちゃサボってもったいないことをしているので、今日からclaude codeにコード書かせている間に、英語と筋トレしていこうと思った💪

[りょー｜フリーランス @Ryo_web_cording]

今日の沼ラジでは「みんな1週間お疲れ様会」をしました！🍺

結果、僕が煎餅食って咀嚼音がASMRとなって終了しましたww

みなさん本当に真面目に頑張ってるからこの１時間だけでもみんなでリラックスしようぜー的なノリで始めましたが最終的にはいつもの落差の激しい沼ラジ状態に...ww😊

来週もみんなで頑張っていきましょうー🔥✊

#RyoHack

[乱丸 🇯🇵WEB制作 @ranmaru7888]

営業強化月間🔥
動いた分だけちゃんと結果出てきた💪

今週は面談6件 →
✔️ 1件はすぐにお仕事いただけました！
✔️ 2社と業務委託契約
✔️ 2社は5月か6月からお仕事いただけそうな予感！

まずはすぐに面談数を増やせてよし！

やってみて実感したのは、
「闇雲に営業するより“狙いを持つ”方が圧倒的に効く」ということ。
ターゲットを絞って、営業をする返信率が上がりました。

ただ！！いくら面談をやっても大事なのは👇
無理に単価を下げないこと。

よく営業マン時代に上司に言われていたのを思い出します。

「単価＝己の価値‼️」

いまだに上司の言葉は胸に刺さります。

低単価では、短期的には受注できても、のちのちの自分を苦しめるだけです。

これからも続けていくには、目先の利益ではなくて、将来のことも考える！

たくさん面談して、自分の力を精一杯尽くせる仕事をしていきます🔥

#WEB制作 #コーダー #フリーランス

[乱丸 🇯🇵WEB制作 @ranmaru7888]

Claude Codeで“自分専用の環境構築スキル”を作れました💻

新規で案件をスタートするときに
・案件ごとにGitHubのベースコードをクローン
・そのまま進行中ファイルに組み込み
→ 環境構築がほぼ一瞬で完了できるようにしました🔥

さらに👇
スキル登録も名前をいちいち覚えなくていいように、グローバル言語でスキルを実行できるようにできたのは嬉しい🥹

今まではずっと
「誰かのコードをコピペ」して、使っていたけど、
今回は、Claudeと対話しながら制作できたので、大きな成長になったと思う。

しかも、 Gitでコード管理もできていなかったので、Gitの理解も深まったし、AIの使い方もレベルアップできた！

これで新規案件スタートした時の環境構築が一瞬で完了して、制作終わったらコードが綺麗に管理できるので、資産になる！

今までよりもスタートダッシュが早いコーディングができますねぇ〜😁

爆速コーディングいたしますので、
スピード感重視のコーディング案件もぜひご相談ください🙌

[乱丸 🇯🇵WEB制作 @ranmaru7888]

LP無事納品完了しました🎉

継続的でお仕事をいただいているディレクターさんとの案件でした！

継続で案件をしていくと、そのディレクターさんが「大事にしているポイント」が見えて、修正が少なく、納品までスムーズにできました！

見る人（ディレクター・ユーザー）目線でコーディングすることで固定概念や先入観に囚われない見直しができてきてるかな?っと思ってます！

早く！そして、正確に！美しく！
そんなコーディングを致します🔥
#WEB制作　#コーダー

[乱丸 🇯🇵WEB制作 @ranmaru7888]

本日から #RyoHack の鬼コミット始動👹

営業を習慣化させるために
まずは「頑張る癖」をつける‼️

暇になったら病んじゃうんで、とりあえず時間を決めて営業活動していきます！

一日一善！営業三件‼️

徹底していきます💪🏻