残念、8割は画像でした

ココナラを主戦場にLP系案件を受けている僕が感じた、現代のフリーランスWeb系エンジニアが必要なスキルに関して書いてみました

Transcript

1. コード書けると思ってた？ 残念、 8割は画像でした。 tanahiro2010 / ちょっとしたLT
2. 1 / 11 自己紹介 HN tanahiro2010 生息地 ココナラ & Twitter（X） 肩書 ちょっとエンジニアやってる人 主戦場 LP開発（単価1〜10万円帯） 最近の発見 コードより画像と格闘してる
3. 2 / 11 きっかけ ある日のLP案件を受けて気づいた "背景：画像" "ヘッダービジュアル：画像" "サービス紹介セクション：画像" "料金表：画像" "よくある質問：画像" …これ、CSSほぼいらなくない？
4. 3 / 11 LPの実態（体感） 75 12 8 3 2 0 10 20 30 40 50 60 70 80 画像 テキスト 背景色・余白 CSS芸 コンポーネント設計 ※完全に個人の感想です（n=ひとり）
5. 4 / 11 じゃあ、エンジニアに 何が必要なの？ （コードじゃないかもしれない）
6. 5 / 11 現代フリーランスWeb系に必要なスキル 画像編集 「背景抜いて」「文字差し替えて」は普通に来る Figma読解 渡してくれる人はいる。読めないと詰む ビルダー系 Elementor等。案件によってはこれが全て ヒアリング力 「いい感じに」を形にする力がすべてを制する 基本のHTML/CSS 一応は必要。ただし想像の10分の1くらい
7. 6 / 11 Figmaは「作れる」より「読める」でいい 現実 クライアントがFigmaを使ってデザインを渡してくれることはある でも PhotoshopのAIファイルや「これ参考で」なPinterestのURLも来る なので Figmaは読んで数値を拾えればOK。デザイナーになる必要はない 結論 Figmaを「作るツール」として覚えるコストを、 画像編集に振ったほうが費用対効果が高い
8. 7 / 11 画像編集、実際何が来る？ よくある 背景透過してPNG化してください よくある テキストだけ差し替えて書き出してください たまにある これをスマホ用にリサイズしてください ごくまれに もう少しオシャレにしてください（定義不明） 伝説 Photoshopのファイルごとください（お断りした）
9. 8 / 11 理想と現実 理想（エンジニアになりたての頃） • コンポーネント設計を考える • 状態管理でパフォーマンスを最適化 • アニメーションをCSSで魅せる • TypeScriptで型安全に書く • モダンなビルドツールを選定 現実（今日の案件） • 画像の背景を抜く • 画像のテキストを差し替える • 画像をリサイズする • また画像を切り出す • あ、もう一枚画像が来た
10. 9 / 11 まとめ 01 LP案件の実態は「コードより画像」 少なくとも1〜10万円帯の案件はほぼそう 02 Figmaは「読める」程度でOK 作れる必要はない。数値を拾えれば戦える 03 画像編集スキルは必須 背景透過・テキスト差し替え・リサイズは確実に来る 04 ヒアリング力がすべてを制する 「いい感じに」を形にできた者が勝つ
11. ご清聴ありがとうございました （このLTの資料、画像ゼロで作れました） tanahiro2010 ココナラとTwitterに生息してるエンジニア 質問・ツッコミ大歓迎