ユイ| Webコーダー

制作会社勤務のWebコーダー｜制作会社◂◂フリーランス◂◂公務員◂◂アフリカでボランティア2年◂◂公務員｜三重県在住

[ユイ| Webコーダー @ue_323]

8/26にダブルレインボーにまた出会えました

2年前は8/27だった…！

8/26-27あたりにダブルレインボー出やすいのかな🌈

[ユイ| Webコーダー @ue_323]

保育園のお迎え時🚗

ダブルレインボー🌈が✨

いいことあるかな😆😆😆

[ユイ| Webコーダー @ue_323]

@Ryo_web_cording こちらこそ、ありがとうございましたー！
面倒くさいこといっぱいあるので、笑
小さなことから試してみます！

[ユイ| Webコーダー @ue_323]

久しぶりに最先端なものに触れたくて #沼脱 イベントに参加しました！

どのようにAIを活用し、その結果どのようなアウトプットになるのか生配信でみれて感激、というか、今ほぼ手動で行っていることに焦りを覚えました；

AIに教えてもらいながらAIへの指示書を作っていこうと思います🫡

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

本日4月15日 21:00 〜
現場目線でのAI活用したライブコーディングやっていきます！

[ 本日の内容 ]

◆Chapter 1 : AI活用について
# AI活用における大事なこと
# Cursor, Claude Codeについて
# 部下育成の考え方
# 空き時間の使い方

◆Chapter 2 : 環境構築自動化
# ベースコード # Github連携自動化
# シェルスクリプト # Skills
# CLAUDE.md # 変数設定自動化

◆Chapter 3 : 実際にカンプからコーディング
# Figma MCP # CLAUDE.md 更新 # 手直しの方法

#沼脱 専用Discordのzoom URLよりお入りください！

=========
直近3年間で200件以上のコーディング案件を納品してきた私の全知見を、110本の解説動画と200本以上のコードストックとして凝縮させた「コーディング沼からの脱却」の詳細は下記リンクからご確認ください🙌
https://t.co/NKDOdvfQxo

※ご購入いただければ過去のイベントアーカイブ見放題です！また、私が実際に使用しているベースコード、進捗共有シートなども使用することができます👍

[ユイ| Webコーダー @ue_323]

4月から上の子が小学生になり、今朝は娘1人で登校🎒

家から曲がり角まで娘を見送った後、玄関で号泣😭笑

フルリモートで働かせてもらってるおかげで登校する娘を見送れたんだなと思うとWEB制作勉強してよかったなと思います🌸
(WEB制作はじめてから、プレッシャーのせいか毎日悪夢みるけど！😂笑)

[ユイ| Webコーダー @ue_323]

入社２ヶ月目、shopify案件に携わらせてもらってます！
liquidってshopifyにつかわれるファイルだったのね🤔レベルの初心者でしたが笑

CSS当てるくらいの作業であればできるようになってきました！

プログラミングが必要な部分になると途端に怯む自分が悔しい😂

[ユイ| Webコーダー @ue_323]

制作会社で勤務してから１ヶ月が経ちました。

あっという間でした！
入社すぐは、まあ、ゆったりかなと思いきや
バンバンお仕事をお任せいただき笑

忙しい日々を過ごしてます。
フリーランスでお仕事なくて悲しい気持ちになっていたことを考えると、ほんと、毎日コーディングできて幸せです😂✨

[ユイ| Webコーダー @ue_323]

@hajimaru_web はじ丸さん！
その節はありがとうございましたー！
結局スカウトをいただいた企業ではないところに決めました…🙏
相談に乗っていただき感謝です！🥹

[ユイ| Webコーダー @ue_323]

【ご報告】
8月から制作会社でコーダーとして勤務することになりました🙌

色々相談に乗っていただいた皆様、ありがとうございましたー！！！😊

[ユイ| Webコーダー @ue_323]

転職活動本格始動してます！

営業の時との違いを感じたのは【返信率】
7割以上は返信をいただいています（ほぼお祈り😂）

営業の時は返信がないのが当たり前だったから
すこし驚き

忙しい中時間を割いて目を通してもらっていると思うと
心苦しいですが🫣
後悔のないように進めていきます！

[ユイ| Webコーダー @ue_323]

@yukiMUM22 ゆきさん！おめでとうございます😍💕
お仕事もバリバリされて海外移住も準備しながら…すごいとしか言えないです！笑
お誕生、楽しみですね💕
お身体大事になさってください〜！🥰

[ユイ| Webコーダー @ue_323]

@8810_tomo ひとりで作業していると本当に気づけないことばかりなので、アドバイスいただけてとても助かりました…！
自衛の意識が甘かったなと反省しています🙇‍♀️

もし今後どうしても行き詰まってしまったときは、ぜひご相談させてください🙇‍♀️✨

[ユイ| Webコーダー @ue_323]

【.htaccessファイルの書き換え😱】
サーバーにある全サイトの.htaccessが書き換えられてしまいました💦
WordPressサイトのセキュリティが甘かったせいかもしれません🥲
今サーバーを初期化して改めてサブドメインの設定を行っています💦

[ユイ| Webコーダー @ue_323]

@8810_tomo 具体的なアドバイス、ありがとうございます！
サーバーに関してまだまだ勉強不足なため、セキュリティ設定をするという発想がまずありませんでした。

お〜ちゃんさんのコメント、とてもありがたかったです！🙇‍♀️

[ユイ| Webコーダー @ue_323]

@8810_tomo お〜ちゃんさん、アドバイスありがとうございます！🙇‍♀️✨
サーバーの設定ですね！見落としていました💦
早速確認してみます！

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

＼デザイナーへ広がれ✨／
【現場コーダー目線で本当に欲しい指示内容等まとめ】

※すっっごいわがままなこと書きます🙇‍♂️

指示書があるだけで神！✨と心から思うのですが、『せっかく作るならディレクターやコーダーとのコミュニケーションコストを無くしたり、認識齟齬やコーダーの工数を極力削減したい！』と思ってらっしゃる仏のような方もいらっしゃるようなので

コーダー目線で「こうだったら嬉しい！」というものを共有させていただきます😊

様々な指示書をいただくのですが、「ここまで細かく書かなくても良いのに...🥺」と思う時もあるので、併せて不要なところはデザイナーさんも削減いただければと思います👍

＝＝＝＝＝＝＝＝＝＝＝＝＝＝
①指示書に欲しい内容 (1枚目)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝

★使用しているフォント
「フォントウェイト」の情報が欲しいです！
特に日本語はデータ容量が多いため、必要な太さだけをインストールします。指示書に使われている太さがあると調べずに済むので非常に工数削減になります。

★カラー
変数設定してコーディングするのであると嬉しいです！

★コンポーネント
極力保守性を担保し、同じclass名で作成するのでどこをまとまりで作っているのかを共有していただけたら非常に嬉しいです！

★アニメーションについて
私自身、デザインの意図や世界観をなるべく汲み取るようにしてアニメーションのスピードや距離感を調整するようには心がけておりますが、デザイナーさんがイメージしているものがあれば参考サイトなどと共に共有いただけたら認識齟齬がなくなると思います！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝
② カンプの配置 (2枚目)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PCとSPは両方見ながらコーディングするので各ページで隣にあると助かります！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
③ ホバーアニメーションの指示 (3枚目)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ホバーもコーディングしながら作っていくので、できれば隣に指示があると見落としも防ぐことができ、非常にやりやすいです！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝
④ 画像の素材について (4枚目)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
たまに素材を書き出しやすいように、素材を別で用意してくださっている神様のような方もいらっしゃいます✨

もし素材をまとめてくださるのであれば...

・ボックス(ドロップ)シャドウ、角丸が無い状態
・マスクしている場合はマスクをつけたそのままの状態
・PCとSPで縦横比、マスク位置が異なる素材は別で

用意いただけたら、住んでる場所を聞き出して足の方向をそちらへ向けないようにして寝ます...🙏w

※基本画像はコーダーが書き出すものだと思っているので、こちらは無くて全然OKだと思ってます！

以上です！

お互いにコミュニケーションコストや、指示書作成の手間、コーディング過程などで極力無駄な工数を削減できれば、win-winになると思います。

たくさんの方へ広まって欲しいなと思いますので、もし参考になった方がいらっしゃればぜひ拡散 or 引用RT(感想等)をしていただけたら嬉しいです🙇‍♂️

コーダーのみなさんもぜひよろしくお願いします😊

[ユイ| Webコーダー @ue_323]

【統一感】
ポートフォリオサイトを作っているのですが
なんかダサい....🥹

今一度ページを見直してみて
border-radiusがついてる要素と
ついてない要素があり
バラバラだったのでいったんとっぱらってみました！

結果、ダサさが薄れた気が！

統一感って大事だなと🙌
デザイン素人の気づきでした📝

[ユイ| Webコーダー @ue_323]

案件が落ち着いたので
再び転職活動の準備をしています！

転職支援コースのメンターさんから
「ポートフォリオの実績紹介部分のデザインがイマイチ」とのフィードバックがあったので😂笑
Canvaでブラッシュアップ中です！

3，4月で実績も増えたので
パワーアップさせるぞ～🙌

[ユイ| Webコーダー @ue_323]

@Belink_Lab Reonaさんも同じエラーなのですね！途方に暮れるのわかります…でも諦めきれない🤣

Windowsと相性が悪いんですかね〜😂💦

[ユイ| Webコーダー @ue_323]

【Cursor × Figma MCP】
CursorとFigmaを連携しようとしたのですが
「Faild to create client」のエラーが🥲

【試したこと】
・Power shell のセキュリティポリシーを変更←×
・Node.jsのインストール←インストール済

打つ手がなくなったので
一旦連携は置いといてコーディングします…！😂

[ユイ| Webコーダー @ue_323]

@taro_Web1125 お待ちしてます！笑

[ユイ| Webコーダー @ue_323]

@taro_Web1125 たろさん、ありがとうございます！
再起動してみましたがダメでした…！

孤独なエラーとの戦い中にコメントくださり、めっちゃうれしかったです🥹ありがとうございます！