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.3k
フロントエンドカンファレンス北海道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
A Philosophy of Restraint
colly
202
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Designing Experiences People Love
moore
138
23k
Teambox: Starting and Learning
jrom
131
8.7k
Designing for humans not robots
tammielis
248
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Clear Off the Table
cherdarchuk
91
320k
Infographics Made Easy
chrislema
239
18k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
The Language of Interfaces
destraynor
153
23k
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
おわり 最後まで楽しんでいってください!