フロントエンドカンファレンス北海道2024のLPをつくってみた

#frontendo

1. フロントエンドカンファレンス 北海道2024のLPをつくってみた @618knot(のっと)
2. ⾃⼰紹介 - のっと(@618knot) - スタッフ(LP制作‧制作物) - 千歳市⺠ - 公⽴千歳科学技術⼤学 理⼯学部 情報システム⼯学科 4年 - 某社 Webエンジニアインターン(1年8ヶ⽉くらい) - 来年からWebエンジニア？ - 来年から札幌市⺠？ - 引っ越し先を探しています 2 => 近いうちにアイコンを変えます ﾖﾛｼｸｵﾈｶﾞｲｼﾏｽ
3. 千歳市で思いつくところ - 新千歳空港 - ⽀笏湖 - サーモンパーク(道の駅) - サケのふるさと千歳⽔族館 - キウス周堤墓群 3 ⽀笏湖(https://lake-shikotsu.jp/)
4. 本題 4
6. LP⾒ていただけましたか？ 6
7. まだ or もう⼀回⾒たい⼈ 7 🔍フロントエンドカンファレンス北海道2024
8. LP開発に関わる話をします 8
9. 3⼈(初⼼者) + メンター(?) メンバー紹介 9 ⻫藤賢悟(@kengo20_03) えび🦐(@025cm) - 学⽣ - Next.js勉強中 - iOSエンジニア - WEBフロント初⼼者 - 学⽣ - React初⼼者 n13u(@_n13u_) - フロントエンドエンジニア - 困ったときに助けてくれます
10. - Next.js(App Router) - TypeScript - Tailwind CSS - shadcn/ui 使⽤技術 10
11. 開発フロー - がissueを⽴てる - みんながやりたいissueをやる - issueのブランチを切る - コーディング - PRを⽴てる - レビュー(n13uさんメイン) - devブランチにマージ 11
12. 開発フロー - GitHubのProjectsでタスク管理 - 優先度付けるなど 12
13. 裏話 13
14. ガントチャートをつくってみた 14 ⾒づらいので⼼眼で読み取ってください ロゴ納品 Phase1(V0) Phase2(V1) CfP締め切り
15. Phase1(V0), Phase2(V1)ってなんですか 15 現在公開されているLPは第⼆形態(V1)です - 事実上の作り直しをしています
16. Phase1(V0)はこんな感じだった 16
17. なんで作り直した？ 17 - ロゴが完成する前にLPデザインがあった - ロゴ完成 -> LPデザイン の流れのほうが健全な流れ - CfP160件超😨 - (いい意味で)⼤誤算 - もうちょっとちゃんとするか... - 元のデザインが最初はPC画⾯しかなかった - PCデザインを切り貼りして無理やりスマホデザインにした
18. 反省 18
19. 技術的な⾯ - Next.jsがやりたかった - 悔いはない - React + Viteでも⼗分だったかも - ただし必要なライブラリとかは⾃分で追加しないといけない - Next.jsには必要なものが全部あるからその点でも〇 - スタッフにフロントエンドエンジニアがいっぱいいる - 特に不安なし - 絶対に詰まない 19
20. 何よりも先にロゴを⽤意したほうがいい 20 - 制作物系も同じ - V0はロゴより先にデザインを進めて、後から差し替える 形だった - ロゴとデザインのミスマッチが⽣じた - ロゴの完成が絶対に最優先 - カンファレンスのイメージに直結する - ロゴができるまでは落ち着こう
21. 開発規模より開発体制 - (⼤した規模にならないだろうと思って) 個⼈開発のノリで始めたのがよろしくなかった - 開発規模より、何⼈でやるか(開発体制)の⽅が⼤事だと思った - コーディング規約がなかった - ディレクトリ構成がバラバラ‧無秩序ディレクトリの誕⽣ - ⾝をもってコーディング規約のありがたみを知る 21
22. まとめ(特に⾔いたかったこと) - カンファレンスロゴ(と各種素材)はとても⼤事 - Next.jsよかった - Tailwind CSS‧shadcn/uiもよかった - 開発規模(成果物の⼤きさ)より開発体制の⽅を気にしたほ うがいい - 簡素でもコーディング規約的なものがあると安⼼ - 初⼼者チームでも完成まで持っていけた 22
23. おわり 最後まで楽しんでいってください！