
フロントエンドのコーディング業務で活動🙋|第3回 実案件チャレンジ 優秀賞👑|#デイトラ #Web制作 コース卒業|実績20件💫|業務委託2件🤝|品質チェック100項目💎|35歳|石川県|3児のパパ👨🏻|朝活派🌞|Github✦WordPress🌐|#デイトラコミュニティ|自己紹介は固定ポストへ!📹
Joined January 2024
- Tweets2.5K
- Following338
- Followers614
- Likes23.4K
クロノ|石川Webコーダー retweeted
【制作物がギャラリーサイトに掲載されました✨】
デイトラギャリー(daytora-gallery.com/)に制作したコーポレートサイトが掲載されました!
🔹コーポレートサイト
🔹ディレクション・デザイン・現在も運用を担当
(コーディング:クロノさん@Kurono_WebCoder)
🔹URL:admic.biz
🔸point
ユーザーがスムーズに必要な情報にアクセスできるよう、情報設計から見直し、導線やコンテンツを最適化することで、企業のサービス内容や強みを効果的に伝えるサイトを目指しました✨
--------
掲載頂いた事が大変励みになりました✨
今後も、企画設計から運用までトータルでサポートし、事業の成長を支援するホームページ制作を続けていきます!
ありがとうございました😊!
クロノ|石川Webコーダー retweeted
✨デイトラギャラリー掲載作品追加!✨
新たに12個の作品を追加いたしました👏
デイトラギャラリー経由でお仕事のご相談が来た!という話もちらほら届いております...!
今後も、クリエイターの方にとってお仕事につながるきっかけを作れるような運営をしてまいります😊
#デイトラ #デイトラギャラリー
クロノ|石川Webコーダー retweeted
このあと、21:00~!
#デイトラコミュニティ にて第5回0→1座談会を行います🍀
🍀登壇者
クロノさん @Kurono_WebCoder
しょうさん @sho_web440
ぽてさらさん @pote_design922
ぜひご参加お待ちしてます🙋♀️
チャットで盛り上げてくれると嬉しいです✨
#デイトラ
クロノ|石川Webコーダー retweeted
#デイトラ 11DAYS
Web制作コース座談会終了
130名以上の方が聞いてくださり大好評でした✨
登壇して下さった4名の皆さん、本当にありがとうございました!
体験談を聞いてやる気が出た方も多いと思いますが、ぜひ「いい話聞いたな」で終わらないよう行動に移してくださいね👍
録画も近日公開です!
クロノ|石川Webコーダー retweeted
/
#デイトラ #11DAYS 参加者多数!
盛り上がっています🎉🎉
\
お年玉キャンペーン記念!
特別イベント【11DAYS✨️】
その第一弾Web制作コース編
100を超える大勢の方にご参加いただき
たいへん盛り上がっています🙌
もちろん受講生&卒業生さんへの質問もOK!
明日以降も各コース連日開催予定です😊
ぜひご参加ください!!
そして登壇いただいた方・ご参加いただいた方
本日はありがとうございました😌
クロノ|石川Webコーダー retweeted
\卒業生のリアルな声が聞ける/
#デイトラ 11DAYS開催🎊✨
1/19〜1/29までの10日間
デイトラの各コース卒業生に、学習のコツや受講後の変化を聞く座談会を開催します🎉
✅実際受けた人の感想を聞きたい
✅受講後にどう変わったか知りたい
という方はぜひ!
開催スケジュールは次のポストで👇
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
Sassでpxをremに一括変換👩💻
pxを一気にremに変換できたら
超便利だと思いませんか?👀
VS Codeの正規表現検索を使えば
あらゆるpx表記を一瞬で置換できます🙋♂️✨
(-3pxや1.25pxなど、小数点やマイナス付きも変換)
🔧 使い方🔧
1️⃣ 検索欄に「 (-?\d*\.?\d+)px」 と入力
2️⃣ 置換欄には「 rem($1) 」と入力
3️⃣ 正規表現を有効化
4️⃣ 置換ボタンを押すとすべてのpxが一括でrem表記に変わります!
※「rem()」はSassの関数を別途定義しておく必要があります🧑💻
このテクニックを使うと
コーディングは微調整のしやすいpx単位行って
最終的にはrem単位での実装も簡単に出来ます👨🎨
remで書く手間を減らせるので
コーディング効率が大幅に向上します😊✨
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
VScodeで数値をサクッと調整!✳️
VSCodeで数値を増減させたいとき
ショートカットを使えば手間いらず!
「NumberBy」を検索すれば
便利なショートカット一覧が出てきますよ!👀✨
🔧 設定方法 🔧
1️⃣ VSCodeショートカットから「NumberBy」を検索🔍
2️⃣ 一覧からショートカットを設定!⚙️
私の設定は添付画像のとおり😁
このテクニックを使うと
数値の手動変更が減って作業スピードがアップ⏩!
快適にコーディングが進みますよ〜🙌💻✨
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト
クロノ|石川Webコーダー retweeted
学習中の方は絶対見てほしいポスト!
爆速でデイトラ卒業 → 成果を上げ続けている
クロノさんの1年の積み上げ記録です👀✨
成果の裏では人一倍の努力や試行錯誤があると
改めて感じられる素敵なポストです☺️
◥◣◥◣2024年の振り返り◢◤◢◤
今年1年を振り返ってみました‼️
Web制作を始めて0から始めて丸1年。
稼働時間は1600時間🚀
この1年間は
「めちゃくちゃ大変だったけど、めちゃくちゃ楽しかった!」の一言に尽きます✨
1年間でしてきたことをまとめたので
学習中の方や今からWeb制作を始める方の
参考になれば嬉しいです😁
========================
◣ 1月 ◥
✨ Progateで学習スタート
📖 デイトラWeb制作コースに挑戦
🌟 デイトラコミュニティに入会
Progateで最初は
HTMLやCSSのコードが全然覚えられなくて
「自分に向いていないのでは?」と不安になりました。
でも、続けていけば覚えるだろう。
コーディング自体は楽しい!
そう思い、デイトラ受講を決意しました。
◣ 2月 ◥
📚 初級編完了
⌨ タイピング練習
初めて自分でサイトっぽいものを
作れてテンション爆上がり!
タイピング練習を毎日10分くらいしていた。
今思えば速さはそこまで要らないけど
タッチタイピング出来るようになっていて良かった。
オンライン自習室にも入って
エントランスでウロウロしたり
チャットOK部屋にも頑張って入ってみた。
◣ 3月 ◥
📚 中級編修了
👨💻 デイトラチーム企画 初参加
尾道でボコボコにされる…
Swiperで丸3日ハマったのは今となっては良い思い出
最後はメンターの神サポートで無事解決!
わからないところを解決するだけではなく
・なぜそうしたほうが良いのか?
・原因はどこなのか?
そういった観点まで教えていただいたのは
今でも役に立っています。
失敗したところ、抜けがちなところなどをまとめて
自作のチェックリストを作り始める。
◣ 4月 ◥
📚 上級編修了
PHPが全然わからない…でもなんとか実装は出来る
そんな状態で卒業制作にチャレンジ!
phpはこういう場面でこういうコードを使う
っていうところだけざっくり抑えていました。
◣ 5月 ◥
📚 実務編少し挑戦(FLOCSS、Gulp、git)
💼 営業活動スタート
📈 初案件受注(下層1P、協業)
🏆 第2回実案件チャレンジ合格
🏢 交流会初参加
初交流会では超緊張したけど
同じレベル感の人と話せて楽しかった!
チーム企画で一緒だった方から
初案件もいただけて感激
GitHubを使ったチーム制作にも挑戦。
営業はココナラを初めにやってみた。
Figma限定で格安で募集。
実案件チャレンジでなんとか合格するも
自分の詰めの甘さを痛感。
反省点をしっかりまとめる。
◣ 6月 ◥
🎓 卒業制作提出、Web制作コース卒業
📦 初案件納品 完了
☀️ サンライズ交流会 初開催
📈 2件目案件受注(ココナラ・LP)
受講から4ヶ月半で卒業!
初案件(WP・下層1ページ担当)も無事納品して
案件の流れを把握出来た。
さらに、ココナラで自力で案件を獲得できたのが本当に嬉しかった。
◣ 7月 ◥
📄 実務編LP1本制作
📮 CSで初営業メール送付
実務編LPを制作して、後の案件で役立つ場面もありました。
数をこなせば経験値が上がるなって感じた
なんか自分のレベル上げしているような感じが
ゲームみたいで楽しい。
CSで初営業メールを2件送付。
まさかの1件が返信で継続受注。
◣ 8月 ◥
🎬 0→1座談会登壇
🏆 第3回実案件チャレンジ優秀賞受賞
📦 案件2件納品
💵 月5万円達成!(年間目標)
実案件チャレンジで念願の優秀賞を獲得!
第2回で自分のチェックの甘さを痛感して
それを挽回するために挑んだ第3回の実案件チャレンジ!
しっかりと成果を残せて良かった。
年間目標にしていた月5万円の収入もクリア!
◣ 9月 ◥
🎥 デイトラ受講生インタビュー動画公開
💵 デイトラ受講費回収成功
学習初期のころによく見ていた
受講生インタビュー動画に出演!
目標にしていた先輩方の立場になれたことがとても嬉しかった。
ただインタビュー動画撮影後は緊張のあまり体調を崩した。。。
◣ 10月 ◥
🌙 ミッドナイト交流会開催
夜の交流会は普段あまり関わったことのない方と
お話出来て楽しかった。いい刺激になった。
人と話すことの大切さ改めて感じる。
◣ 11月 ◥
🏕️ 金沢オフ会開催
リアルのオフ会って楽しすぎる!
深い話やオンラインではできない話がたくさんできて
とても刺激を受けました。
◣ 12月 ◥
📦 案件納品10件達成!
切り良く10件納品して年納めになりそう。
今年の納品額は40万ちょっとということで想定していたよりは
お仕事出来た感じになりました。
========================
◣ やっておいて良かったこと ◥
✅ メンター質問
問題を解決するだけではなく
考え方や背景も教えて貰えたのでとても勉強になる。
納得出来るまで相談すべき!
✅ コミュニティで交流
同じレベル感の仲間は特に大切。
挫折しそうな時に仲間がいるだけで頑張ろうってなるから。
✅ 卒業制作まで走り切る
デザイン、shopify、営業など
色々やったほうが良いんじゃないかな?
って思うこともあったけど
卒業制作まで学べばコーディングだけでも
案件対応出来る実力は付く。
卒業という一区切りも私にとっては良かった!
✅ 曖昧にしない
沼ったとき、実装で違和感を感じたときに
そのままにしない
納得できるまで解決することでスキルが上がりました。
◣ 不要だったこと ◥
❌️ 初級編のポートフォリオサイトをこだわる
ここ変えてみたいなってところを
いくつかチャレンジすればOKだった
❌️ 沼った時に悩みすぎる
何日も沼った状態でいたときもあったけど
さっさとメンター相談して解決すべきだった。
悩んでも解決しない考え方もあった。
❌️ 体調が崩れるまで頑張る
時には無理をしないといけない状況もありますが
体調を整えないといつか崩れます。
そして1度崩れると戻るのにも時間がかかります。
睡眠、食事、運動は大切に。
❌️ これもやったほうがいいかなってやつ
触ったことのないデザインソフト
かっこいいアニメーションなどなど
やっておいたほうが良いことはたくさんありますが
意外と必要になってからでも対応出来ることが多かったです!
なんでも思いつきで手を出さない。
========================
こうやって振り返ると
1年前にデイトラを選んで学び始めたのは
本当に正解だったなって思います💡
仲間との出会いがなかったら
ここまで頑張れなかったかもしれません。
(何度か挫折しそうになってる)
「ここ大変だよね!」って
共感し合える仲間がいたおかげで
気持ちが楽になったし、続けられました👏
スキル面の不安も多かったけれど
気になることは徹底的に解決してきたことで
少しずつ成長できた実感があります✨
なにかに熱中するって、本当に素敵なことです😊
2025年も全力で駆け抜けます!🔥
みなさんの1年はいかがでしたか?🤔
#デイトラ
#デイトラコミュニティ
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
拡張機能WhatFontでフォント情報を瞬時に確認✨
WhatFontを使えば
ページに使われているフォント情報を
一瞬で調べられます!😁
🔧 使い方 🔧
1️⃣ Chrome拡張機能「WhatFont」をインストール
chromewebstore.google.com/de…
2️⃣ 拡張機能を起動
3️⃣ 気になるテキストをクリックすると
フォント情報が表示されます!
このテクニックを使えば
フォント情報の確認がよりスムーズになります🎨
カンプどおりに設定されているか確認する時に使えますね💡
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
Ctrl+Shift+Kで行を削除?片手で届かないよね🤔💭
「行を削除」ショートカットキーは
デフォルトだと「Ctrl+Shift+K」で片手で届かない💦
そんな時はショートカットキーを
カスタマイズしてもっと楽にしよう!🙋
左手だけで操作完了!👌✨
🔧 ショートカットの設定方法🔧
1️⃣ キーボードショートカットから「editor.action.deleteLines」を検索
2️⃣ ショートカットを「Ctrl+Shift+X」に変更🔄
これで片手操作が可能に!🙌
効率アップでコーディングがスムーズに進みます🤩
時短&ストレスフリーな作業を実現しよう!
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト🚀
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
バランス機能で瞬時に選択!🎯
コードを効率的に編集したいなら
バランス機能を活用しましょう!
簡単に選択ができ、驚くほど時短できますよ✨
🔧 バランス機能の使い方🔧
1️⃣ ショートカットで「editor.emmet.action.balanceOut」を検索
2️⃣ ショートカットキーを登録
(私は「Ctrl」+「Shift」+「A」)
3️⃣ 選択したい範囲の最も外側の要素を選択
4️⃣ 「Ctrl」+「Shift」+「A」を押す
このテクニックを使えば
コードの選択が一瞬で済み
作業効率が飛躍的に向上します⏩
選択作業の時間を短縮しちゃいましょう🎉
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト
クロノ|石川Webコーダー retweeted
◥◣ 制作実績 ◢◤
新潟市のIT企業「アドミックシステムウェア株式会社」様
HPのコーディングを担当させて頂きました‼️
👨担当👩
ディレクション・デザイン:ささこさん(@sasako_design)
コーディング:クロノ
💡こだわったポイント💡
・管理画面の不要なメニューを非表示にしてシンプル化
・セキュリティ対策
・多彩なホバーアニメーションの実装
・記事編集画面でも実際に表示される画面と同じスタイルになるように実装
・管理画面のメニュー位置を使いやすいように配置変更
🕦制作過程🕦
・初稿提出まで100時間で制作
・FVを含めレスポンシブで違和感が出ないように注力
・アニメーションは0.1s単位で微調整
・Figmaのコメント機能で円滑にデザイナーと連絡
・アニメーションなどは制作途中で動画や画像を使って認識のズレがないか確認
🚀サイトはこちら🚀
admic.biz/
================
コーディングの機会をいただいたささこさん
本当にありがとうございました!😆
アニメーションの提案で参考サイトを付けていただいたり
私が沼った時にお声掛けいただいて制作過程でとても安心してコーディングすることが出来ました😊
コーダーに寄り添った提案から姿勢がとても印象的でした😚
クロノ|石川Webコーダー retweeted
今朝ポストしたサイトのFVと導入事例の背景は、メンター滞在時にアドバイスいただいた部分です🎵
●FV
画像とキャッチコピーを重ねてスッキリさせました✨
●導入事例の背景
元は赤でしたが、「危険を感じる印象」があり、肝心なカードの情報が入りづらいというメンターAikaさんのご指摘で、色々な配色を試しテクスチャを加えました✨
滞在時間後も、
つむにさん(@tsumuni_design)
まつかさん(@matsuka_design)
Tatsukiさん(@Tatsuki_Web)
ゆうさん(@216yuuq)
アドバイスいただき、その節はありがとうございました✨
一緒に作れる楽しさがありました😊
さらに、最終的にはクロノさん(@Kurono_WebCoder)が提案してくれた色になりました👀✨
クロノさんは配色で悩むと、配色も色々試してくれて助かりました☺️
改めて、みなさまに感謝申し上げます🎵
#制作実績 #裏話 #ご協力に感謝 #デイトラ #デイトラコミュニティ
WebデザインメンターAikaさんの滞在テーブルに行ってきました!🏃♀️✨
1人でモヤモヤしていたことがアドバイスいただくことでスッキリしましたし、後半は他の方からもアドバイスを頂き、本当に感謝です!🥲✨
つむにさん(@tsumuni_design)
まつかさん(@matsuka_design)
Tatsukiさん(@Tatsuki_Web)
ゆうさん(@216yuuq)
最後までお付き合い頂きありがとうございました😭✨(お忙しい所お時間頂きすみませんでした😭💦)
またぜひ交流やお話できたら嬉しいです!今後もよろしくお願いします😊♥
#デイトラコミュニティ
クロノ|石川Webコーダー retweeted
◇◆ 制作実績 ◆◇
アドミックシステムウェア株式会社
コーポレートサイトリニューアル
…………………………………………………
新潟市周辺の中小企業の皆様に、アドミックシステムウェア株式会社をより深く理解していただき、信頼関係を構築することを目的として、コーポレートサイトのリニューアルを行いました✨
admic.biz
目的▶企業イメージの向上・信頼感の醸成🤝
ターゲット▶新潟市及び周辺地域の中小企業の経営者様、担当者様
期間▶3.5ヶ月
制作範囲▶企画立案、デザイン設計、構築、運用、SNSアカウント開設と運用
…………………………………………………
📜経緯
既存サイトは6年間更新されておらず、企業イメージの低下や、顧客獲得における機会損失が懸念されていました。この状況を改善するため、サイト全体の刷新をすることになりました!
📌制作のポイント
ユーザーがスムーズに必要な情報にアクセスできるよう、導線やコンテンツを最適化することで、企業のサービス内容や強みを効果的に伝えるサイトを目指しました✨
POINT1 🧭導線とコンテンツ
ユーザーがどのようにサイトを回遊するか想定し、必要な情報にアクセスしやすい設計を作成しました。また、コンテンツでは、導入事例やお役立ち情報の掲載により、ユーザーの疑問点を払拭できる情報提供を行っています。
point2 💎強みと価値の明確化
ヒアリングを通じて会社の強みを言語化し整理しました。最初は言語化することが難しかったのですが、制作初期に行うことで、サイト全体を通して企業の価値が伝わるようにしました。
POINTO3 🎨スタイリッシュなデザイン
親切で分かりやすいデザインにすることは大前提として、ITのプロフェッショナルとしての企業イメージを表現するため、スタイリッシュなデザインを採用しました。
POINT4 🗺️サイト流入経路の確保
新規のお客様にも見ていただけるよう流入経路を確保しました。
SEOを意識したお役立ち情報記事の掲載、snsの開設と運用です。こちらもご提案の上、運用も行っています。
…………………………………………………
コーディングはクロノさん(@Kurono_WebCoder)に依頼させていただきました🧑🔧✨
クロノさんはコーディングのスキルも素晴らしいのですが、プロジェクト全体を見据えてご提案やサポート頂けたことが本当に助かりました。無事公開することができたのは、クロノさんのサポートのおかげです。
改めて感謝申し上げます!☺️🙏✨
今後も、企画設計から運用まで、事業の成長を支援するホームページ制作を続けていきます! 😊
よろしくお願いします。
(なお
クロノさんがどれだけ素晴らしいかという事と制作のポイントについても、改めてポストしていこうと思います。
また今後のポストも読んでいただけると嬉しいです^^)
#制作実績 #ホームページ制作 #新潟 #Webデザイン
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
VSCodeでAlt+矢印キーでカーソル位置を履歴から移動!💨
次のショートカットで
カーソル位置の履歴を簡単にたどって
前の場所に戻ったり、次に進んだりできます⏪⏩
コード編集にとても便利な機能ですよ!💻✨
🔧 使い方🔧
1️⃣ 「Alt」+「←」前のカーソル位置に戻る
2️⃣ 「Alt」+「→」次のカーソル位置に進む
このテクニックを使うことで
効率よくコードを編集できるので
ストレスフリーな作業が可能になります💥
ぜひ試してみてください!
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
同じ単語を一瞬で全選択!💡
複数の同じ単語を一つずつ選択するのが
面倒だと思ったことはありませんか?🔍
そんな時に便利なショートカットキーをご紹介!🎯
🔧 使い方*🔧
1️⃣ コード内の任意の単語を選択
2️⃣ 「Ctrl」+「Shift」+「L」を押す
このテクニックを使うことで
一括編集が簡単になり、時間を大幅に節約できます⏳✨
作業効率をぐんとアップさせて
コーディングを進めましょう💪🔥
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
VScodeでターミナル履歴を簡単表示!⏫
コーディング中に同じコマンドを
何度も入力するのは大変ですよね?🤔
そんな時に知っておくと便利なのが
VScodeのターミナル履歴機能です!💡
🔧 使い方 🔧
1️⃣ ターミナルを開く
2️⃣ 「↑」キーを押すと直前に入力したコマンドを表示
3️⃣ さらに「↑」キーを押すと過去の履歴をどんどん遡って表示
このテクニックで作業効率がグッとアップ!⚡️🙋
同じコマンドを繰り返し入力する手間が省け
作業がスムーズに進みます!🙌
履歴をさかのぼれるので
過去のコマンドも簡単に再利用できる優れた機能です!😁
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
CSS Peekで瞬時にスタイル確認👀✨
VScode拡張機能「CSS Peek」を使えば
HTMLコードから瞬時にCSSセレクタにジャンプできちゃいます!⚡️
🔧 使い方🔧
1️⃣ VScodeにCSS Peek拡張機能をインストール
marketplace.visualstudio.com…
2️⃣ HTMLのクラス名やIDを「Ctrl」+「左クリック」
このテクニックを使うことで
効率よくスタイルをチェック&修正できるようになります!⏩✨
HTMLとCSSの行き来が簡単になり
コーディングがスムーズに進みますよ!🚀
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト #時短テクニック #Web制作
クロノ|石川Webコーダー retweeted
\コーディングブースト!時短テクニック/🚀
エクスプローラを簡単に表示する方法👨💻
エクスプローラでフォルダを探すのに
手間取っていませんか?👀
右クリック一つで
該当フォルダを表示させる方法があります!😄
🔧 使い方 🔧
1️⃣ エクスプローラで対象のフォルダを選択
2️⃣ 右クリックして「エクスプローラで表示する」を選択
このテクニックを使えば
わざわざフォルダから探さなくても
探したいデータがすぐに見つかるようになります!⏱️
時間を有効に使っていきましょう✨
========================
※他にもたくさんの時短テクニックを
プロフィールのハイライトにまとめています✨️
よかったら見てみてくださいね!😆
#コーディングブースト



















