制作実績詳細-FB

[taiki0521]

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

[taiki0521]

• 添付部分の画像の箇所も、項目内容（Description）箇所も、想定としては、1920px時に上下に（ヘッダーも含む）120pxずつ余白が開いて、レスポンシブに合わせて縮んでいくような想定だった！
  絶対にそういう指定がいいというわけではないんだけど、今だと横渡の下の部分が揃ってないのと、項目内容の箇所が画像部分より高さ出てしまっているのが気になる！

• 上記の指摘とも少し被るけど、項目内容のところが項目下に余白開きすぎなので調整して欲しいです！で、できる限りここの高さを右隣の画像より出したくないんだけど文字量に依存はしちゃいそうだから、一旦Figma内に入れるであろう文字要素が入ったボードを用意したので（pcの実績詳細デザインの下に置いてある）、そちらも入れた上で調整いただければありがたいです、、！！

• MV部分と、Overview後の画像の横幅を変えるかも（また用意したら共有します）。あとこの二つの画像箇所に（全高さ画像）このサイトみたいな感じでパララックス入れたいです！

• 項目内容（Description）箇所の後に実績によって数は変動するけど色々画像入れていく（逆にその前の箇所は大体どの実績も同様にコンテンツが入る）想定なんだけど、ここ動画とyoutube埋め込みも入れれるようにして欲しいです！（どっちの場合もありそう）

[naoki-00-ito]

• 添付部分の画像の箇所も、項目内容（Description）箇所も、想定としては、1920px時に上下に（ヘッダーも含む）120pxずつ余白が開いて、レスポンシブに合わせて縮んでいくような想定だった！絶対にそういう指定がいいというわけではないんだけど、今だと横渡の下の部分が揃ってないのと、項目内容の箇所が画像部分より高さ出てしまっているのが気になる！
• 上記の指摘とも少し被るけど、項目内容のところが項目下に余白開きすぎなので調整して欲しいです！で、できる限りここの高さを右隣の画像より出したくないんだけど文字量に依存はしちゃいそうだから、一旦Figma内に入れるであろう文字要素が入ったボードを用意したので（pcの実績詳細デザインの下に置いてある）、そちらも入れた上で調整いただければありがたいです、、！！
• MV部分と、Overview後の画像の横幅を変えるかも（また用意したら共有します）。あとこの二つの画像箇所に（全高さ画像）このサイトみたいな感じでパララックス入れたいです！
• 項目内容（Description）箇所の後に実績によって数は変動するけど色々画像入れていく（逆にその前の箇所は大体どの実績も同様にコンテンツが入る）想定なんだけど、ここ動画とyoutube埋め込みも入れれるようにして欲しいです！（どっちの場合もありそう）

[naoki-00-ito]

@taiki0521
#43 (comment)
のパララックス以外は修正しました🤯

• https://inxst.github.io/st-portfolio/works/textile-manufacturer-site/
• https://inxst.github.io/st-portfolio/works/detail/

[taiki0521]

@naoki-00-ito
ありがとうございます！！
あとごめん、、、前にいらないっていったんだけど、添付のパターンが存在しそうだから、sp時に画像の2分割も一応用意いただいてもいいですか、、、

[taiki0521]

@naoki-00-ito
制作実績詳細内に入るパターンで下記二つ追加してほしいです！

• 動画の自動再生&ループパターンと、再生ボタン押してから流れるパターン（音声あり）
• 添付のようにpcとspで画像が切り替わるタイプ（基本的にはpc,sp共通想定）

[naoki-00-ito]

@taiki0521

MV部分と、Overview後の画像の横幅を変えるかも（また用意したら共有します）。あとこの二つの画像箇所に（全高さ画像）このサイトみたいな感じでパララックス入れたいです！

ごめん、上記色々試してみたけど対応厳しいわ...
（厳密にいうとできないわけでは無いのだけれど、構造を大きく変える必要があり、ほぼほぼ組み直さないといけなくなってしまう...）

[naoki-00-ito]

@taiki0521

@naoki-00-ito ありがとうございます！！ あとごめん、、、前にいらないっていったんだけど、添付のパターンが存在しそうだから、sp時に画像の2分割も一応用意いただいてもいいですか、、、

SP2分割作成して下記ページに利用してます！

https://inxst.github.io/st-portfolio/works/keio-fashion-creator/

[naoki-00-ito]

@taiki0521

@naoki-00-ito 制作実績詳細内に入るパターンで下記二つ追加してほしいです！

• 動画の自動再生&ループパターンと、再生ボタン押してから流れるパターン（音声あり）
• 添付のようにpcとspで画像が切り替わるタイプ（基本的にはpc,sp共通想定）

自動再生・ループ

https://inxst.github.io/st-portfolio/works/5days/

音ありボタンで再生

https://inxst.github.io/st-portfolio/works/misia-forest/

画像のPC/SP切り替えについて、
今回コンポーネント化している部分も大部分はpictureタグをそのまま書く形にしているので、記述時に対応してもらう形になると思う。
更新時に切り替えできない箇所あったら都度相談して！

イメージ

<picture>
  <source
    srcset="PC画像"
    media="(min-width: 768px)"
  />
  <img
    src="SP画像"
    alt=""
  />
</picture>

[taiki0521]

@naoki-00-ito
ありがとう！！いくつかFBです！！

• 最初ページインした時、アニメーションをつけている影響かもだけど、MV部分は最初から表示されるようにしてほしい！！

• 上記添付のタイトル部分だけどmax-width決めて改行される形がいいかなあ、、改行ない形だと画像の始まり部分がずれちゃうと思うので、一旦デザイン上だと640pxをmaxで作ってた！→ページ終わりの横渡りの部分も同様

• h1のフォントウェイトを500にしてほしい

▼sp時

• h1とprivateworksの文字の距離感が結構空いているのでもう少しデザインくらいの距離感にしたい！
• 横渡の文字が右寄せになっているから左寄せに
• また横渡の要素の上の余白はもっと広げたい（デザイン上だと104px）

[taiki0521]

@naoki-00-ito

• 添付の箇所の項目内容の内容のフォントサイズは1920px時で16pxでお願いします！
  （Overviewの箇所の文章は18pxで大丈夫）

• やはり一覧へ戻るボタンを追加したいので、余白感などfigma参照していただいて追加いただければありがたいです、、

[taiki0521]

@naoki-00-ito

• safariで見たときに制作実績詳細がかなり死んでいるので（横渡の部分）、確認して欲しいです！！（他にもメニュー周りの余白感が変だったりした）

[naoki-00-ito]

修正は #122 で実施するのでclose