なかやん

個人でWeb制作(LP・サイト)を承っています。
Claude CodeなどAIエージェントを使った業務効率化にも試行錯誤中。
実績はポートフォリオへ→

[なかやん @nakayan_works]

なかやんです。
LP制作の目安期間についてよく聞かれます。
内容にもよりますが、ヒアリングから公開まで数週間〜という進め方が多いです。
急ぎのご相談も、まずは一度聞かせてください。

[なかやん @nakayan_works]

なかやんです。
個人事業の資金繰りも、AIエージェントに数字を見てもらう実験をしています。
入出金の予定を整理してもらうだけで、数ヶ月先の見通しが立てやすくなりました。
数字が苦手な人ほど、こういう使い方が向いているかもしれません。

[なかやん @nakayan_works]

なかやんです。
LP制作後の「ちょっとした修正」、気軽にご相談いただけます。
文言の変更、画像の差し替え、レイアウトの微調整など、公開後のフォローも含めて考えています。
作って終わりではなく、育てていくページを一緒に作れたらと思っています。

[なかやん @nakayan_works]

なかやんです。
今、社長(自分)→社長室(AI)→各部署(AI)という体制で個人事業を回しています。
経理・秘書・PM・リサーチ…と役割を分けることで、1人でも「見落とし」が減った実感があります。
うまくいっていること・いっていないこと、両方追って発信していきます。

[なかやん @nakayan_works]

なかやんです。
LP制作で必ず確認しているのが、スマホでの見え方です。
今はアクセスの大半がスマホからという業種も多く、PC画面だけで作り込むと本���で崩れることがあります。
まずスマホ表示を基準に設計する、という順番を意識しています。
https://t.co/e8S07sPvrn

[なかやん @nakayan_works]

なかやんです。
AIエージェントに経費登録を任せて���たら、最初は領収書の日付を読み間違えるミスがありました。
今はダブルチェックの仕組みを入れて運用中です。
「全部お任せ」ではなく「任せる部分と人が見る部分を分ける」のがコツだと感じています。

[なかやん @nakayan_works]

なかやんです。
LP制作のご相談でよくあるのが「まだイメージが固まってないんですが…」というものです。
むしろそこからのご相談、大歓迎です。
業種やゴールをヒアリングしながら、一緒に形にしていきます。
ポートフォリオ→ https://t.co/e8S07sQ3gV

[なかやん @nakayan_works]

なかやんです。
個人事業を「AI社員6部署+自分」という体制で回す実験を続けています。
最近取り組んでいるのが「タスクの見える化」。
思いついたことをすぐ記録→後で優先度をつけて整理、という流れを仕組み化したら、
1人でもちゃんと"回っている感"が出てきました。

[なかやん @nakayan_works]

なかやんです。
個人事業の運用をAIエージェントに手伝ってもらう実験を続けています。
経費管理・タスク管理・進捗管理…まだ試行錯誤中ですが、
「1人でどこまで会社っぽく回せるか」を検証中です。
学びがあれば随時発信していきます。

[なかやん @nakayan_works]

はじめまして、なかやんと申します。
個人でWeb制作(LP・Webサイト)を承っています。
これまで美容・学習塾など複数業種のLPを制作してきました。
最近はClaude CodeなどのAIエージェントを使った業務効率化にも取り組み中です。

ポートフォリオ→ https://t.co/e8S07sQ3gV

お気軽にご相談ください。

[なかやん @nakayan_works]

💡opacityとは
→ 要素の不透明度を設定

例)
opacity: 0;
→透明
opacity: 1;
→不透明

#css
#opacity

[なかやん @nakayan_works]

デザイン(XD)

🚨iOSでフォーム入力時に画面ズームされる
→原因はフォームのfzが16px未満

💡解決策
fzを16px以上
fzは16pxでtransformのscale()で擬似的に小さく
viewportでuser-scalable=noを設定
→🚨 ユーザーがズームできないようにする指定。ユーザビリティ的には推奨されない

#デザイン
#XD

[なかやん @nakayan_works]

💡変数とは
→数値や値などを入れておくことのできる箱
→何度も使うときにまとめて置ける

#css
#変数

[なかやん @nakayan_works]

💡リファクタリング
���見た目は変えずにコードを綺麗に修正する

【リファクタリングの手順】
・VScodeの検索枠をcommand + fで開く
・1つ目の検索窓にカラーコードを入力
・２つ目の検索窓にcss変数を記述
・一括置換で変換
・css変数を定義している部分はカラーコードに戻す

#css
#リファクタリング

[なかやん @nakayan_works]

💡接頭辞
🚨🚨🚨🚨🚨 注意 🚨🚨🚨🚨🚨
・接頭辞は「1つのクラス名に1つのみ」
・全てのクラス名に1つ接頭辞

#html
#css
#接頭辞

[なかやん @nakayan_works]

💡接頭辞

★ページ独自の接頭辞★
トップページ→top_**
カテゴリーページ→category_**
シングルページ→single_**

#html
#css
#接頭辞
#トップ
#top
#カテゴリー
#category
#ジングル
#single

[なかやん @nakayan_works]

💡モジュール(= module)
→使いまわす要素に接頭辞「m_（エム）」

例) m_ btn , m_section 等

#html
#css
#モジュール
#module

[なかやん @nakayan_works]

💡レイアウト(=layout)
→header、footer、aside、mainなどに接頭辞「l_（エル）」

「l_」はWebサイトの大枠を形作るものに付ける🧐

例) l_header , l_footer 等

#html
#css
#レイアウト
#layout

[なかやん @nakayan_works]

BEMとは？
→ HTMLおよびCSSのクラスに名前を付ける方法

BEMはすごく一般的なCSS設計の一つ
プログラミングに関わる限り必ずついてくるやり方🫣

#html
#css
#BEM

[なかやん @nakayan_works]

💡CSS設計は慣れな部分
→CSS設計ルールに基づいてコーディングをして慣��る！

#css