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.4k
フロントエンドカンファレンス北海道2024のLPをつくってみた
#frontendo
knot
August 26, 2024
Tweet
Share
More Decks by knot
See All by knot
2323/03/05 LT
618knot
0
120
ちとせゆるい勉強会.pdf
618knot
0
97
app_dev_meetup_vol.1_tw.pdf
618knot
0
67
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
50
7.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
Being A Developer After 40
akosma
86
590k
Testing 201, or: Great Expectations
jmmastey
38
7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Adopting Sorbet at Scale
ufuk
73
9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Visualization
eitanlees
144
15k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Rails Girls Zürich Keynote
gr2m
93
13k
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
おわり 最後まで楽しんでいってください!