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