Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドカンファレンス北海道2024のLPをつくってみた
Search
knot
August 26, 2024
0
1.5k
フロントエンドカンファレンス北海道2024のLPをつくってみた
#frontendo
knot
August 26, 2024
Tweet
Share
More Decks by knot
See All by knot
2323/03/05 LT
618knot
0
130
ちとせゆるい勉強会.pdf
618knot
0
98
app_dev_meetup_vol.1_tw.pdf
618knot
0
67
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Code Reviewing Like a Champion
maltzj
520
39k
GitHub's CSS Performance
jonrohan
1030
460k
Unsuck your backbone
ammeep
668
57k
Automating Front-end Workflow
addyosmani
1366
200k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
730
Gamification - CAS2011
davidbonilla
80
5k
What's new in Ruby 2.0
geeforr
343
31k
Teambox: Starting and Learning
jrom
133
8.8k
Transcript
フロントエンドカンファレンス 北海道2024のLPをつくってみた @618knot(のっと)
⾃⼰紹介 - のっと(@618knot) - スタッフ(LP制作‧制作物) - 千歳市⺠ - 公⽴千歳科学技術⼤学 理⼯学部
情報システム⼯学科 4年 - 某社 Webエンジニアインターン(1年8ヶ⽉くらい) - 来年からWebエンジニア? - 来年から札幌市⺠? - 引っ越し先を探しています 2 => 近いうちにアイコンを変えます ヨロシクオネガイシマス
千歳市で思いつくところ - 新千歳空港 - ⽀笏湖 - サーモンパーク(道の駅) - サケのふるさと千歳⽔族館 -
キウス周堤墓群 3 ⽀笏湖(https://lake-shikotsu.jp/)
本題 4
5
LP⾒ていただけましたか? 6
まだ or もう⼀回⾒たい⼈ 7 🔍フロントエンドカンファレンス北海道2024
LP開発に関わる話をします 8
3⼈(初⼼者) + メンター(?) メンバー紹介 9 ⻫藤賢悟(@kengo20_03) えび🦐(@025cm) - 学⽣ -
Next.js勉強中 - iOSエンジニア - WEBフロント初⼼者 - 学⽣ - React初⼼者 n13u(@_n13u_) - フロントエンドエンジニア - 困ったときに助けてくれます
- Next.js(App Router) - TypeScript - Tailwind CSS - shadcn/ui
使⽤技術 10
開発フロー - がissueを⽴てる - みんながやりたいissueをやる - issueのブランチを切る - コーディング -
PRを⽴てる - レビュー(n13uさんメイン) - devブランチにマージ 11
開発フロー - GitHubのProjectsでタスク管理 - 優先度付けるなど 12
裏話 13
ガントチャートをつくってみた 14 ⾒づらいので⼼眼で読み取ってください ロゴ納品 Phase1(V0) Phase2(V1) CfP締め切り
Phase1(V0), Phase2(V1)ってなんですか 15 現在公開されているLPは第⼆形態(V1)です - 事実上の作り直しをしています
Phase1(V0)はこんな感じだった 16
なんで作り直した? 17 - ロゴが完成する前にLPデザインがあった - ロゴ完成 -> LPデザイン の流れのほうが健全な流れ -
CfP160件超😨 - (いい意味で)⼤誤算 - もうちょっとちゃんとするか... - 元のデザインが最初はPC画⾯しかなかった - PCデザインを切り貼りして無理やりスマホデザインにした
反省 18
技術的な⾯ - Next.jsがやりたかった - 悔いはない - React + Viteでも⼗分だったかも -
ただし必要なライブラリとかは⾃分で追加しないといけない - Next.jsには必要なものが全部あるからその点でも〇 - スタッフにフロントエンドエンジニアがいっぱいいる - 特に不安なし - 絶対に詰まない 19
何よりも先にロゴを⽤意したほうがいい 20 - 制作物系も同じ - V0はロゴより先にデザインを進めて、後から差し替える 形だった - ロゴとデザインのミスマッチが⽣じた -
ロゴの完成が絶対に最優先 - カンファレンスのイメージに直結する - ロゴができるまでは落ち着こう
開発規模より開発体制 - (⼤した規模にならないだろうと思って) 個⼈開発のノリで始めたのがよろしくなかった - 開発規模より、何⼈でやるか(開発体制)の⽅が⼤事だと思った - コーディング規約がなかった - ディレクトリ構成がバラバラ‧無秩序ディレクトリの誕⽣
- ⾝をもってコーディング規約のありがたみを知る 21
まとめ(特に⾔いたかったこと) - カンファレンスロゴ(と各種素材)はとても⼤事 - Next.jsよかった - Tailwind CSS‧shadcn/uiもよかった - 開発規模(成果物の⼤きさ)より開発体制の⽅を気にしたほ
うがいい - 簡素でもコーディング規約的なものがあると安⼼ - 初⼼者チームでも完成まで持っていけた 22
おわり 最後まで楽しんでいってください!