FBまとめ_優先順位記載（12月16日更新）

[taiki0521]

@naoki-00-ito
全ページの現段階のFBまとめましたので優先度高から随時ご対応いただければありがたいです！
（一旦こっちでできたやつからチェックつけてもらって、それをgitの各ページのFB箇所にも反映していくつもり）

○優先度：高

▼ローディングアニメーション

• LINEでも伝えた、SPで見た時に動画再生ボタンが出てしまうのはマストで無くしたいです。
  その上で可能であればやっぱり毎回動画を再生させたいけど、重くて無理な場合は動画が入っている時と同じ見た目で静止画が入る
  →ある程度時間がたってローディングすんだらそのまま動画が動き始める
  という感じにしたいです！(issue)

▼共有パーツ・トップページ

• この指摘と被るかもだけど、スクロールでマウスストーカーが流れていっちゃうのが気になる！こんな感じでマウスにずっと着いていてほしい
  →横スクロールの時にはマウスストーカーが上に流れていっちゃうから直したい、、！
• フッターのコンタクトをsvgに。ホバーした時の動きを線画に。このサイトのようにコンタクトホバーしたら次のコンタクトとかも同時にホバーの動きが出てほしい。（1単語だけじゃなくて）(issue)
• 月の部分、画像共有したので対応お願いします、！
• ファーストビューの文字アニメーション、SP時のもの格納したので対応お願いします！
• faviconも格納したので対応お願いします
• ロゴ部分、svgに変更ください
• sp時に実績のタイトル消えちゃってるので出してほしいです
• スマホ実機で見た時に、ブラウザ固定の下のバーの影響でそこに100vhで指定したいもの（添付のメニューとか、ページ遷移時のぼかしの範囲とか）がそこの位置に反映されてなくて、これってどうにかなったりするか確認してほしい、、！(issue)

▼アバウト

• 左右の余白全ページこれでお願いします！（ブラウザ幅375pxの段階で20近くくらいあってもいいかなあと思っている）
• h1って現状コーディング上では、左右統一の20pxの余白がついているだけで、左が40px(20+20）になってないかなと思っているんだけどわいの環境があれなのかな？？制作一覧のh1も合わせて調整して欲しいです！このサイトみたいな感じ(issue)

▼制作一覧

• 各実績詳細への遷移カードについてる各カテゴリのタグのrow-gapを0.2remに
• 実績詳細のタイトル30px→28pxに
• h1サブテキストのmargin-leftを1→0.8remに(issue)
• tagは2行分領域確保。titleは1行であふれる分は三点リーダーで省略(issue)
• ヘッダーとスライダーの間のpaddingを削る（削った分スライダーのサイズも大きくする）(issue)
• 可能であれば、sp時に、縦スクロールだけじゃなくて横にスワイプで横に動くようにもしたいのですが、可能かな、、？→何ならsp時は普通に縦スクロールはできずに制作一覧は横スワイプだけでの動きでもいいです！(issue)

▼制作詳細

• 最初ページインした時、アニメーションをつけている影響かもだけど、MV部分は最初から表示されるようにしてほしい！！
• 上記添付のタイトル部分だけどmax-width決めて改行される形がいいかなあ、、改行ない形だと画像の始まり部分がずれちゃうと思うので、一旦デザイン上だと640pxをmaxで作ってた！→ページ終わりの横渡りの部分も同様
• h1のフォントウェイトを500にしてほしい
• 添付の箇所の項目内容の内容のフォントサイズは1920px時で16pxでお願いします！（Overviewの箇所の文章は18pxで大丈夫）(issue) #177
• safariで見たときに制作実績詳細がかなり死んでいるので（横渡の部分）、確認して欲しいです！！（他にもメニュー周りの余白感が変だったりした）（issue) #185

---

○優先度：中
▼ローディングアニメーション

• ページ遷移時に、ぼかしだけだとガタつきがうっすら見えるのが気になるので、ぼかしはいいんだけどその前に一旦ベタ塗り（テクスチャ素材は入った状態のもの）が入ってそのうちにローディング済ませて、その後に今のボカシの動きが入って、ぼかしが徐々になくなりコンテンツガくっきり見えるという感じにしたいなと思ってる、！ #142
  ベタ塗りの色は、背景色に合わせる感じで（アバウトは黒、制作一覧詳細はベージュ）やるのが一番自然かなあと思っている。
• 「TAIKI SATO」のアニメーション後、他の要素が出てくるまでの時間が遅いからもう少し早くしたい、！ #141
  • 対応見送り 「TAIKI SATO」のアニメーション後、他の要素が出てくるまでの時間が遅いからもう少し早くしたい、！ #141 (comment)

▼共有パーツ・トップページ

• フッターの流れているコンタクトをクリックしたら
• あとトップで使用しているアバウト画像のSPの際、画像のサイズ全体的に現状の1.15倍くらいにしてほしいです！ #143
• footerのget in contactの下側がデスクトップだと見切れてしまっている（文字の下半分が切れちゃってる）。一方でspだと下側に余白が生まれちゃっていて、グレー背景が見えてしまっている #144
• FVの「作品集」の文字だけど、1920px以上の時に、「TAIKI SATO」の文字との距離感が空いてしまうから、1920時の距離感維持したい（月画像のように、TAIKISATOの文字も1920px以上も比率維持で拡大だと変かな？変そうであれば、作品集の文字が離れて行かないようにしたいです、、、！） #145
• FVの重なりエフェクトの際、このサイトやこのサイトとかもそうだけど、確か前やってくれていたやつ残っている側が少し暗くなる感じになっていたと思うのでそれは適用したいです！ #146
• フッターがわの重なりが（特にsp時）ちょっと違和感あるかも、、、、多分重なりが解けていく段階でフッターがわの動きが止まっているのが原因なのかなあ・・　このサイトの重なり方とか綺麗なのでこういう感じにしたいんだけどご確認いただければ幸いです、、！このサイトも #147
• 実績詳細のFVにある「scroll」の箇所をmix-blend-mode:color-dodge;のような乗算などで背景色に応じて文字色変わる感じにしたいです #148
• 上記可能そうであればヘッダーにも適用したい！（文字リストとmenuの文字）
• あと上記の話にも関係するんだけど、今見ているやつとそうでないやつ（添付で言うとmisiaの森が今見ていて、佐藤製麺所が見てないやつ）の色や不透明度を変えたくて、上記の指定次第だけど例えば添付だとmix-blend-mode:color-dodge; にしているんだけどこう言う感じのいけそうかな？（主のやつより目立たない感じにしたいからシンプルに不透明度下げるでもいい）
• worksのh2が内側によっている？？一応デザイン上だと、添付のところがイコールの想定だった
• menu内のデザインfixしているやつに変更して欲しいです、！ #149
• ボタンホバー時の動きが遅いので、0.6sに変更ください #150
• FVの文字の、「Web design / Graphic design / Art direction」と「Portfolio」を大文字にお願いします！あと「(PORTFOLIO)」という感じで()をつけてほしい！ #151
• SP時のTAIKISATOの文字の大きさが気持ちばかりでかいのでmax-width:98%;くらいの大きさにして欲しいです！（俺の方でいじれるのがmax-widthくらいだったからそこ調整してみてみたけど、コーディング上はmax-widthをいじるのではなくてそのくらいの大きさになればいいので気持ち小さくしてほしい！という感じです） #152
• slackでもお伝えした、コンテンツ幅を可変にする件、お願いします！あと他にもpx指定あればご検討ください
• フッターの流れているcontactからメールが開かれると、宛先の部分のアドレスが変になっている #153

▼アバウト

• sp時の画像が大きくなってくる箇所が、大きくなり始めるのがブラウザ上で上の方に行った時から大きくなるけど、これ中央あたりからどんどん大きくなる感じにできる？？？スタート位置を画面中央ちょい上とかにしたいという感じです #154
  （pcは今の位置から大きくなるのでいいです！！(issue)

▼制作一覧

• 制作一覧と制作詳細がPCの横スクロールの際に、背景色が縦スクロールになっているのを調整したいです！（コンテンツは普通に横移動だけど、背景のテクスチャが縦移動してる)。 #155
• 横スクロールの最後の部分の余白量の制御って難しいのかな、、？macのデスクトップのサイズとかで見ると余白がかなり出てしまう、、(issue) #156
  →ただこれ見る環境によりまくってしまうのかなあ
• spで見た時のブラウザ固定の下部バーの影響で画像のサイズが拡大縮小するのは良いんだけど、比率維持した状態で拡大縮小するようにしたいです、、！
• sp時の制作一覧の各実績画像、もう少し大きく表示したいけど可能そうかな、、？（もう少し下側の確保エリア削っても大丈夫かと思うので、、！） #157
• 制作一覧のタイトル文字は画像下までに収める感じにしてほしい（今だとprivateworksとかの下まで伸びているから） #158
• sp時、filterを開いた時に開いてないところに黒不透明度がかかるけど、今だとFilterを閉じるときにアロー押さないと閉じないから、そこに加えて黒不透明度の範囲のところもタップでFileterの画面が閉じるようになってほしい #159
• Filter」の字を大文字にして欲しいです！ #178

▼制作詳細

• h1とprivateworksの文字の距離感が結構空いているのでもう少しデザインくらいの距離感にしたい！ #160
• 横渡の文字が右寄せになっているから左寄せに #161
• また横渡の要素の上の余白はもっと広げたい（デザイン上だと104px） #162
• sp時のnext projectの横渡の画像をmv-sp（正方形のやつ）にして欲しいです！pc時は今のまま縦長の画像で良いです。
• やはり一覧へ戻るボタンを追加したいので、余白感などfigma参照していただいて追加いただければありがたいです、、 #163
• 一覧へ戻るボタンにホバーの動きをつけて欲しいです！ボタンのホバーと同様に、黒丸になって白矢印になる感じにお願いします #179
• マウスストーカーを今の二つの円の形をシンプルに一つのものに変えたいです！課題内に詳細記載します #180

---

○優先度：低
▼ローディングアニメーション

▼共有パーツ・トップページ

• menuボタン内の余白を調整してほしいです。 #183
  pc時、下の余白を6px→5pに。
  sp時、padding:4px, 12px, 3pxに。
• menuボタンをマウスオーバーした時だけ、他のテキストリンクをホバーした時みたいなマウスストーカーの挙動が起こらないため、可能であればmenuホバー時もマウスストーカーに挙動つけたい（円が合体して小さくなるやつ） #184
• 細かいし出来たらで大丈夫！ローディング後にまたトップページ内ですぐにロゴを押してローディングした時に「TAIKI SATO」の文字アニメーションが起こらないからできればつけたい（他ページに行って戻ってきたり、トップページにずっといても一定の時間過ぎると再度通常にローディングアニメーションが起こる）
• トップのアバウト箇所のスピード感が全体的に少し早いので気持ちゆっくりしてほしいのと、画像同士のスピード感添付のようなイメージで調整いただければありがたいです！！（ちょっともしかしたらまたスピード調整していただくかも、、）(issue)
• ワークス部分の切り替えをブラーとフェードインアウトで変更する要素のみ切り替え。（h2の部分や切り替えボタンはそのまま）切り替えボタンの部分ホバーで金文字に。

▼アバウト

▼制作一覧

• 「私たちについて」の文字のデザイン更新お願いします！（下線引かなくなったりとか） #181

▼制作詳細

• 全画面の箇所に背景固定のようなパララックス(issue) #182
  →前LINEで話したこのサイトくらいのパララックス
• この実績のページだけ、マウスストーカーの挙動がおかしい（他ページと色が違うのと、スクロール時に下に行っていなくなってしまう） #207

[naoki-00-ito]

Safariかつ通信速度が遅いで再生ボタンが表示されてしまう件は下記のstyleを入れて様子見する

https://qiita.com/YukiYuki0508/items/651e70b50c278b16cfa1

[naoki-00-ito]

@taiki0521

https://inxst.github.io/st-portfolio/

詳細のSafari崩れ以外は修正したのでご確認お願いします！

[taiki0521]

@naoki-00-ito
ありがとう！！いい感じ！！！！

一点だけ、チェックボックス外させてもらったんだけど、
スクロールに応じてマウスストーカーが離れちゃう（上に流れていっちゃう）件に関して、よくなったんだけどやっぱりまだマウスストーカーが動きまくっちゃうから楽天のサイトくらいガッツりスクロール時はマウス自体にストーカーがくっ付いている感じにしたいんだけど厳しいかな？？
（特に制作実績や一覧のところで、マウスから離れちゃう仕様だとストーカーが上に流れていっちゃって結構気になる、、）

[naoki-00-ito]

実績詳細の横渡り画像のSP切り替えについて、
html構造も変なので合わせて修正する

a > picture > source, img
  > span...

のようなイメージ

https://github.com/INxST/st-portfolio/blob/main/src/components/NextWork.astro

[naoki-00-ito]

@taiki0521
下記対応しました！

• この実績のページだけ、マウスストーカーの挙動がおかしい（他ページと色が違うのと、スクロール時に下に行っていなくなってしまう） #207
• 実績詳細のFVにある「scroll」の箇所をmix-blend-mode:color-dodge;のような乗算などで背景色に応じて文字色変わる感じにしたいです #148
• menuボタンをマウスオーバーした時だけ、他のテキストリンクをホバーした時みたいなマウスストーカーの挙動が起こらないため、可能であればmenuホバー時もマウスストーカーに挙動つけたい（円が合体して小さくなるやつ） #184
• menuボタン内の余白を調整してほしいです。 #183
• 一覧へ戻るボタンにホバーの動きをつけて欲しいです！ボタンのホバーと同様に、黒丸になって白矢印になる感じにお願いします #179
• 全画面の箇所に背景固定のようなパララックス(issue) #182
• 「私たちについて」の文字のデザイン更新お願いします！（下線引かなくなったりとか） #181

[naoki-00-ito]

@taiki0521
対応完了したのでcloseします！