# 2020.01.26 Web サイトもろもろ相談
※ 基本的に、TSConf を参考にして作っています

# Figma
Figma デザイン全体
https://www.figma.com/file/eXTR093DpegVZ6jpYgeLY9/React-Conf-JP-2020?node-id=0%3A1

モバイルビュー プロトタイプ
https://www.figma.com/proto/eXTR093DpegVZ6jpYgeLY9/React-Conf-JP-2020?node-id=74%3A2488&viewport=-128%2C149%2C0.17905575037002563&scaling=scale-down

<iframe style="border: none;" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FeXTR093DpegVZ6jpYgeLY9%2FReact-Conf-JP-2020%3Fnode-id%3D0%253A1" allowfullscreen></iframe>

# コンテンツ
## サイト内共通
### ヘッダー
@れこ @MastoChiba

言語切替えは2月初旬リリース時点で実装しますか？
一応 UI は作っておきました🙆‍♀️

### フッター
@sakito @れこ

追加したい・いらないものがあれば言ってください〜🙋‍♀️

## TOP
### タイムテーブル
@sakito @れこ

前回の議事録に記載していた暫定の内容を流し込みました。
表示項目どうしましょうか？以下の項目を掲載してます。

- 開始時間
- 持ち時間
- サムネイル画像
- トークタイトル
- スピーカー名
- トーク言語

ng-japan や TSConf みてみると `開始時間 〜 終了時間` 表記になっていたのですが、`開始時間 + 持ち時間` にするのはどうでしょう？🙋‍♀️

- 終了時間 = 次のトーク開始時間なので、重複してごちゃっとする。全体の流れが把握しづらい？

### Speakers
こちらも表示項目どうしましょうか？こちらは特にこだわりはないので、おまかせします🙏

@sakito @れこ
- サムネイル画像
- スピーカーフルネーム
- 海外ゲスト・日本人関係なく英語(ローマ字)表記だと助かります🙇‍♀️
- 欧文書体に比べて、和文フォントの方が書体が大きめなので
- Twitter
- GitHub

あと載せるとしたら、職種とか会社名ですかね？

### Venue
@sakito @れこ

TSConf からコピペしました。住所追加してます。
NAVITAIME JAPAN の写真はどこかからいただけそうでしょうか？

### Sponsors
@sakito

2月初旬リリース時点では掲載しますか？
スポンサーさんにいつごろ掲載予定なのかアナウンス済みでしたら教えてください🙏
一応レイアウトは組んでおきました！

### Team
@sakito

Core Team メンバーとして、今 Slack などでアクティブな人を拾って順番適当で載せました。( sakito さんは代表なので一応先頭に🙆‍♀️ )

React Japan User Group の Member List も、同じような形で掲載するイメージでしょうか？それともリンク掲載？

## 下層ページ: Speaker 詳細
@sakito @れこ

Speaker 詳細ページに＜Speaker 情報 + トーク情報＞を乗せる形にしました。
タイムテーブル・Speaker 一覧共に遷移先が同じです。

コンテンツ粒度的に、Speaker / トーク詳細それぞれ作るほどではないのかな〜？と🤔
タイムテーブルからの遷移のときに、違和感ないかどうかが懸念

▼ 余力があれば、OGP 画像もちゃんと作りたい

<img src="https://i.imgur.com/zt0dPPJ.png" width="300px">

# 実装
## ブレイクポイント
@れこ @MastoChiba

レスポンシブでサイトデザインするの久々なので、ブレイクポイント仕様のベストプラクティスがちょっと分からず...オススメあれば教えてください🙇‍♀️

参加者層的に、前日までは PC 閲覧・当日はほとんどスマホ閲覧 & PC だと思うので、タブレットサイズをそこまで考慮しなくていいのかなーとは思います。

いまは TSConf 真似して以下で作っております。

- 769px 以上 ( PC ビュー )
- 768px 以下 ( モバイルビュー )
- Figma では device-width = 375px で作ってます