制作会社勤務のWebコーダー｜制作会社◂◂フリーランス◂◂公務員◂◂アフリカでボランティア2年◂◂公務員｜三重県在住
Joined August 2013
- Tweets952
- Following195
- Followers422
- Likes7.4K
久しぶりに最先端なものに触れたくて #沼脱 イベントに参加しました！
どのようにAIを活用し、その結果どのようなアウトプットになるのか生配信でみれて感激、というか、今ほぼ手動で行っていることに焦りを覚えました；
AIに教えてもらいながらAIへの指示書を作っていこうと思います🫡
本日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本以上のコードストックとして凝縮させた「コーディング沼からの脱却」の詳細は下記リンクからご確認ください🙌
ryoblog.myshopify.com/pages/…
※ご購入いただければ過去のイベントアーカイブ見放題です！また、私が実際に使用しているベースコード、進捗共有シートなども使用することができます👍
4月から上の子が小学生になり、今朝は娘1人で登校🎒
家から曲がり角まで娘を見送った後、玄関で号泣😭笑
フルリモートで働かせてもらってるおかげで登校する娘を見送れたんだなと思うとWEB制作勉強してよかったなと思います🌸
(WEB制作はじめてから、プレッシャーのせいか毎日悪夢みるけど！😂笑)
19
302
入社２ヶ月目、shopify案件に携わらせてもらってます！
liquidってshopifyにつかわれるファイルだったのね🤔レベルの初心者でしたが笑
CSS当てるくらいの作業であればできるようになってきました！
プログラミングが必要な部分になると途端に怯む自分が悔しい😂
27
1,077
制作会社で勤務してから１ヶ月が経ちました。
あっという間でした！
入社すぐは、まあ、ゆったりかなと思いきや
バンバンお仕事をお任せいただき笑
忙しい日々を過ごしてます。
フリーランスでお仕事なくて悲しい気持ちになっていたことを考えると、ほんと、毎日コーディングできて幸せです😂✨
216
10,634
転職活動本格始動してます！
営業の時との違いを感じたのは【返信率】
7割以上は返信をいただいています（ほぼお祈り😂）
営業の時は返信がないのが当たり前だったから
すこし驚き
忙しい中時間を割いて目を通してもらっていると思うと
心苦しいですが🫣
後悔のないように進めていきます！
37
2,047
【.htaccessファイルの書き換え😱】
サーバーにある全サイトの.htaccessが書き換えられてしまいました💦
WordPressサイトのセキュリティが甘かったせいかもしれません🥲
今サーバーを初期化して改めてサブドメインの設定を行っています💦
1
27
2,307
ユイ| Webコーダー retweeted
＼デザイナーへ広がれ✨／
【現場コーダー目線で本当に欲しい指示内容等まとめ】
※すっっごいわがままなこと書きます🙇♂️
指示書があるだけで神！✨と心から思うのですが、『せっかく作るならディレクターやコーダーとのコミュニケーションコストを無くしたり、認識齟齬やコーダーの工数を極力削減したい！』と思ってらっしゃる仏のような方もいらっしゃるようなので
コーダー目線で「こうだったら嬉しい！」というものを共有させていただきます😊
様々な指示書をいただくのですが、「ここまで細かく書かなくても良いのに...🥺」と思う時もあるので、併せて不要なところはデザイナーさんも削減いただければと思います👍
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
①指示書に欲しい内容 (1枚目)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
★使用しているフォント
「フォントウェイト」の情報が欲しいです！
特に日本語はデータ容量が多いため、必要な太さだけをインストールします。指示書に使われている太さがあると調べずに済むので非常に工数削減になります。
★カラー
変数設定してコーディングするのであると嬉しいです！
★コンポーネント
極力保守性を担保し、同じclass名で作成するのでどこをまとまりで作っているのかを共有していただけたら非常に嬉しいです！
★アニメーションについて
私自身、デザインの意図や世界観をなるべく汲み取るようにしてアニメーションのスピードや距離感を調整するようには心がけておりますが、デザイナーさんがイメージしているものがあれば参考サイトなどと共に共有いただけたら認識齟齬がなくなると思います！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
② カンプの配置 (2枚目)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PCとSPは両方見ながらコーディングするので各ページで隣にあると助かります！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
③ ホバーアニメーションの指示 (3枚目)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ホバーもコーディングしながら作っていくので、できれば隣に指示があると見落としも防ぐことができ、非常にやりやすいです！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
④ 画像の素材について (4枚目)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
たまに素材を書き出しやすいように、素材を別で用意してくださっている神様のような方もいらっしゃいます✨
もし素材をまとめてくださるのであれば...
・ボックス(ドロップ)シャドウ、角丸が無い状態
・マスクしている場合はマスクをつけたそのままの状態
・PCとSPで縦横比、マスク位置が異なる素材は別で
用意いただけたら、住んでる場所を聞き出して足の方向をそちらへ向けないようにして寝ます...🙏w
※基本画像はコーダーが書き出すものだと思っているので、こちらは無くて全然OKだと思ってます！
以上です！
お互いにコミュニケーションコストや、指示書作成の手間、コーディング過程などで極力無駄な工数を削減できれば、win-winになると思います。
たくさんの方へ広まって欲しいなと思いますので、もし参考になった方がいらっしゃればぜひ拡散 or 引用RT(感想等)をしていただけたら嬉しいです🙇♂️
コーダーのみなさんもぜひよろしくお願いします😊
【統一感】
ポートフォリオサイトを作っているのですが
なんかダサい....🥹
今一度ページを見直してみて
border-radiusがついてる要素と
ついてない要素があり
バラバラだったのでいったんとっぱらってみました！
結果、ダサさが薄れた気が！
統一感って大事だなと🙌
デザイン素人の気づきでした📝
23
900
案件が落ち着いたので
再び転職活動の準備をしています！
転職支援コースのメンターさんから
「ポートフォリオの実績紹介部分のデザインがイマイチ」とのフィードバックがあったので😂笑
Canvaでブラッシュアップ中です！
3，4月で実績も増えたので
パワーアップさせるぞ～🙌
24
895
【Cursor × Figma MCP】
CursorとFigmaを連携しようとしたのですが
「Faild to create client」のエラーが🥲
【試したこと】
・Power shell のセキュリティポリシーを変更←×
・Node.jsのインストール←インストール済
打つ手がなくなったので
一旦連携は置いといてコーディングします…！😂
2
40
1,437
Xご無沙汰してましたが、案件対応してました！
今週から義実家に帰省🏡
今朝はみんなが寝ている午前2時半から作業💻
おとといは美容院に行くギリギリまで仕事してたし、
場所も時間も選ばず働けるのはありがたい🙏✨
改めてWebのお仕事の良さを実感中！
42
760
【他気づき】
・フォントサイズはPCカンプから変わらない
・中央寄せなどもともと左右に余白のある要素はカンプサイズで固定のものも
「画像が広がり続けるなら
フォントも大きくしなきゃだよね...?」
と思い込んでいたのですが案外そうでもなさそう。（10サイトくらいしかみてないけど…）
1
4
399
