# TDU講座紹介html作成

## サーベイ・メモ
### 大鐘
- 納品形態
- HTMLを納品
- CSSはフレームワークを利用、いくつかのデザインを提案して進めていく
- HTMLに付け加え
- 受講生の声的なもの
- カルーセルで、講義動画や演習の一部をもっとみせる
- 写真でビジュアル的に訴求
-

### 服部
- 全体的なこと：CDNから読み込むのかnpmなどで自前で用意するのか
- 用いるフレームワークの重さにもよりそう
- [参考](https://qiita.com/subaru44k/items/fba81d77744e418c2e43)
- そもそも：フロントのフレームワークは使うのだろうか
- クラス名の競合などには注意
- 参考サイト
- [1](https://webdesign-trends.net/entry/12965)
- [2](https://wiblok.com/css/css_framework_2021/)
- [Bootstrap](https://getbootstrap.jp/)
- 服部は使用経験あり
- レスポンシブで、グリッドシステムとかが便利で楽
- 没個性？
- [よく使うクラス](https://qiita.com/nakanishi03/items/c80a16b9b9796c25f890)
- [Tailwind](https://tailwindcss.com/)
- Bootstrapのように、クラスでデザインを指定
- が、予めデザインされたものを使うというよりはクラスでCSSをゴリゴリ指定していくタイプらしい
- @applyでクラスをまとめられる
- [Pure.css](https://purecss.io/)
- 軽くして自由度を上げたBootstrapという感じ
- その分自分で書くコードも増えそう
- [Materialize](https://materializecss.com/collections.html)
- Googleっぽいあれ
- Rippleがあるのが個人的好み
- iconはBootstrapと違ってタグの中に名前を書く
- [foundation](https://get.foundation/)
- Bootstrapに次いで人気
- カスタマイズ性が高い
- [UIkit](https://getuikit.com/)
- Bootstrapなどよりかっこいい（と思う）
- クラス名の先頭に"uk-"とあり区別がしやすい
- [Skeleton](http://getskeleton.com/)
- 軽量なので学習コストが低く、シンプルなものを作るなら向いてる

- まとめると
- 定番のものならBootStrapやFoundation、TailWind
- かっこよくするならMaterializeやUIkit
- シンプルにするならPureやSkeleton

- いろいろなWebサイト
- [東進のトップページ](https://www.toshin.com/)
- どこに何があるのかわかりづらい
- 上の方は余白が少なくて窮屈に感じる、下の「お知らせ」くらいかもっとゆったりしててもいいと思う
- [ICE](https://www.toshin-correction.com/)
- MUIを使っていて自分の好み
- 線がもう少し太い方がメリハリは出るが、スマートさはなくなりそう
- [大阪ガスのトップ](https://www.osakagas.co.jp/)
- トップに大きい写真があるのはキャッチーに感じる、動きやスライドショーがあったらさらに作りこんでるな、という印象を受ける
- 下の方の▶の位置に統一感がなくて好きでない
- [過去問プロジェクト](https://nagase-contents.jp/kakomon/home/)
- 内部向けだったらこれくらいで十分、フォントはもう少し大きい方がいいと思う
- [東京大学トップ](https://www.u-tokyo.ac.jp/ja)
- 無理にかっこつけず綺麗に整列させているのが個人的には好き
- 白い背景に白のカードが少し残念
- [京都大学トップ](https://www.kyoto-u.ac.jp/ja)
- 東京大学とレイアウトは似ているが、ヘッダーがより丁寧
- カードにホバーしたときに拡大されるのは個人的に好き
- [ここ](https://web-kanji.com/posts/cool-website)に載ってた、かっこいい企業サイト
- [fukusuke](https://f-fukuske.jp/fukuske/)
- 写真の使い方が良い
- 右上の三本線が見づらくなる瞬間があったり、2枚の画像が同じものを表していることに気づかなかったり、微妙なところもある
- [Vext](https://www.vext.co.jp/)
- アニメーションは頑張りすぎても重くてちゃんと見られなかったら意味ない
- スクロールすると遅れて現れるのはかっこいいが、やりすぎると「早く出せよ」って思う
- [黒木テック](http://www.kurokitec.com/)
- ズームイン→フェードインと常に動いているスライドショーが良い
- [aircord](https://www.aircord.co.jp/)
- こんな立派なものは作れない
-

## 4/11 mtgメモ

- 21000人の企業のイントラからTDUの講座紹介ページ作成
- HTMLページ
- 各ページのHTML埋め込み
- サンプル動画、テキスト
- 申し込みボタン
- 講座（２つ）
- AI
- RPA
- 各業者別々に作ってる
- かっこいい感じにしてくれれば
- ６/4締めで７月~開講申し込み
- 載せる材料はある
- 一覧から飛んだページを作りたい
- 要望
- かっこいい
- デジタル感あふれる
- 脱word
- 目を引くもの
- 脱大学のシラバス

- 納品：html版下データ
- PC前提で（会社のイントラ）
- 【企業への問い合わせ事項】明日
- htmlの横幅指定はあるか？
- ファイルサイズ指定？
- 企業用のでもアカウントがあれば
- 最終的な納期、5/17募集開始
- デモ、トライアルができるのか
- こっちからも講座の売り込むところから、追加要素
- 申し込みしたくなるような仕組み
- TDUアカウント、閲覧用にもらう
- 一通り講座見れる

- 【次回MTG】
- 4/15(金) 19:00〜 Zoom
- 数案できたら、Slackに投下

- TODO
- コンテンツの確認
- いくつか案を出したい
- それぞれデザイン作る
- githubに作成したhtml
- 講座紹介パワポ、後藤さんからもらう

- IT側mtg
- 4/14(木)19:00〜
- HTML

## 4/15　mtg 議事録

- sample06ベースに
- 基本情報
- TDUの価値づけ
- パワポpp.1
- 素材をもらって埋め込む
- 講座概要
- 中身
- 対象者
- 講師
- チャプター
- sample03のチャプターベース
- サンプル映像
- 素材mp4で
- RPAの映像待ち
- サンプルサイト
- スクリーンショットで
- スケジュール
- Slackの方で適宜調整
- 22日19時~に完成チェックmtg
- 26日に納品
- 役割
- RPA:大鐘
- データ処理：服部
- 開発
- sample06
- materialize
- IT側mtg
- 4/19(火)19:00~
- HTMLデザイン確認、すり合わせ

## 4/19 ITmtg

- 服部
- 上のタブ修正いい感じ
- swiper使えばswipeもできた
- 大鐘
- チャプターいい感じ
- ロゴをフッターの右に
- 4/21にSlack送信
- fixフォルダ作成
- ここにいれていく
- 各ブランチで作業し、マージしたらSlackで報告
- 分担
- 服部
- タブ,Swipe動作の反映
- 大鐘
- ヘッダー画像の作成
- 左にタイトル、右にTDUロゴ

## 4/22 mtg

- 要望
- 基本情報
- 図以外のところをテキスト部
- pp.1、上だけテキスト
- 「大学生」をトル
- pp.1、教育ネット左、ビル右
- TDUロゴはトル
- レイアウト角さん提供画像
- pp.2、三木先生と川倉先生だけ
- pp.3、下の吹き出しをテキスト
- 理解、確認、定着、縦に変更
- Googlecolab,python,,の部分は、講座概要へ
- たのしいpythonは削除
- 講師写真挿入
- DATA:pp.2の画像をそのままで
- RPA:素材もらう
- TODO
- 服部
- 基本情報の後半
- DATAの反映
- (余裕あれば)サイズ変更時の乱れを修正
- 大鐘
- 基本情報の前半
- チャプターのレスポンシブ化
- RPAの反映
- フォルダ構成の変更
- rpaとDPのzip分ける形で格納
- 4/24(日)に完成
- 4/25(月)朝にSlack送信
- 【次回MTG】
- 4/25(月) 19:30〜 Zoom

## 4/25 mtg

- 要望
- 理解・確認・定着、スライドの色に

## 成果報告準備
- @服部さん　こちらに追記お願いします

> 統括MTGであらたに発生して、進行しているPJTについて、
どんなことに取り組み、どんな結果になったのか報告の場も統括MTGの場で設けたいと思っております！
つきましては、
@大鐘崇史
HTMLを活用して東進デジタルユニバーシティ講座紹介ページを作成　について
来週の統括MTGで報告をしていただくことは可能でしょうか？
どんな人と、どんなことに、どんな苦労がありつつどんな成果が出たか等、ご報告いただきたいと思っています！

- 開発体制
- 社員側担当：角さん、後藤さん、太田部長
- 開発：大鐘、服部
- 開発内容
- 講座紹介用のHTML静的ページの作成
- データ処理、RPAの２講座
- テスト確認用のAWS EC2セットアップ
- 開発スケジュール
- 2022/04/上旬
- メンバーアサイン
- 要件についての確認MTG
- 2022/04/中旬
- 開発チームにて、サンプル案作成
- MTGにてサンプル確認、フィードバック
- 2022/04/下旬
- 開発チームにて、修正案作成
- MTGにてサンプル確認、フィードバック
- 最終版のHTML納品
- 2022/05/上旬
- テストページ確認用のAWS EC2セットアップ
- リモートデスクトップから確認できるように
- 2022/05/中旬
- 最終版の軽微修正
- 納品
- 成果物、工夫ポイント
- モダンなデザイン
- マテリアルデザイン
- タブの切り替え
- TDUのカラーに合わせた配色
- レスポンシブデザイン
- ipad,iphoneでの表示にも対応
- 振り返り
- どんな人と、どんなことに、どんな苦労がありつつどんな成果が出たか
- 大鐘
- hoge
- 服部
- 期限は結構短かったが、その分集中して取り組むことができた。
- CSSフレームワークについて詳しく知れるいい機会となった。
- サンプルはもう少し最初の候補を多めに作っておいたほうが良かったかもしれない。
- ミーティングは適当な頻度で開催され、毎回手際よく進んでおり、コミュニケーションが取りやすかったので良かった。
- 先方の問題だが仕様がもう少し明確だと良かったと思う。作ったものが実際に表示されるときに崩れたら悲しい。
- 社員の方とのミーティングは初めてだったこともあり、勝手がわからず無作法な言動があったかもしれません。不快な思いをさせていたら申し訳ありません。
- 大鐘さんとの分掌は適切であったと思う。ありがとうございました。
- アニメーションやタブなど技術の活用はうまくできたと思うが、それが本当にどんな環境でもちゃんと表示されるか、検証の時間をもう少し取ったほうが良かった。