Q&A
私の理解力が低く…恐れ入りますが質問を失礼します。
質問者様の知りたいことは実際のコードではなく、
・どういった仕組みで実装したらいいのか
・それを踏まえた最適なレイアウト
の助言がほしいということでしょうか？
また、
> フローは動的に動かさない予定です。
というのは、JSで要素を生成するのではなく、すべての要素を最初からHTMLに書いておき、表示非表示を切り替える手法で対応したい、ということでしょうか？
前提
お世話になっております。
WEBサイトのページに、添付画像のように「ご利用の流れ」のフローを設置したいのですが、そのフローに分岐があります。
どう表現したらよいか分からず、知恵をお貸しください。
実装の前に実現方法を質問しています。
カテゴリ1，2・・とあり、カテゴリ2が押されたらjQueryでカテゴリ2のフローをdisplyay:block 表示し、
フロー自体は画面からはみ出るのでスクロールバーを設定する予定です。
しかし、フローに分岐があり、Aの場合・Bの場合を常に表示させておくと画面の領域を大幅に取ってしまいます。
「
例えば「Aの場合」「Bの場合」といったボタンをどこかに置く、などが考えられますか？
フローは動的に動かさない予定です。
レイアウトはイメージです。何かほかに良い手法があればご教授願います。
よろしくお願い致します。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
- ▲▲機能を動作するようにする
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
はい、コードについては質問しておりません。
下記の認識であっております。
・どういった仕組みで実装したらいいのか
・それを踏まえた最適なレイアウト
> フローは動的に動かさない予定です
勝手にスライドさせないという意味でございます。
すべての要素を最初からHTMLに書いておき、表示非表示を切り替える手法で対応したい
であっております。
ありがとうございます！
レスポンシブでタブレットやスマホにも対応されますか？
（安い案件でしたらPCのみとかもたまにありますので確認させてください…）
フローが横向き＋はみ出たら横スクロールは
絶対または希望度の高い条件ですか？
フローの内容量が画像を拝見するかぎりは多そうに見えるので、その量でしたら私なら縦フローにしたいと思いました。
はい、レスポンシブ対応は行っております。
フローは横向き、はみ出たら横スクロールと考えております。
フローは最大8個まであります
縦フローですとイメージがわかないです。
ステップ1だけ見えている状態で、スクロールさせるイメージでしょうか？
このイメージですとステップ1しか見えないので、視認性が悪くなるのではと懸念しております。
それと分岐の表現方法が一番の問題で、困っております。
回答2件
0
ベストアンサー
本当に色々な考え方があると思いますので、これがおすすめということではなく、「もし私ならこうするかも…」というただの一アイデアとしてご紹介させてください。
- コメント欄にて、「横向きフローで横スクロールは必須ですか？」とお伺いした理由は、ユーザーにとって使いにくそうと思ったからです。
- 縦なら、マウスホイールでスクロールするだけで済むものを、横スクロールはドラッグ操作が必要になります。
- また、右にはみ出たところに続きがあることに気づきにくいかもしれません。
- スマホのデザインは縦になると思うので、そうするとPCとSPのCSSコーディングが大幅に違うことになるので、工数が増えます。
- やむを得ない場合（表など）を除いて、私でしたら縦スクロールだけで対応するようにします。
- PC・SP共通
- カテゴリの選択は、タブ風のデザインにしてみるのもすてきかと思いました。
- PCについて
- 参考デザイン：https://imgur.com/ICT7Zx2
- 分岐後のSTEPは、両方のパターン表示。
- ただし選択されている方が強調されるようなデザインにする。
- SPについて
- 参考デザイン：https://imgur.com/CGTSj43
- 分岐後のSTEPはアコーディオンの中に収納。
- デフォルトは情報閉じた状態にする。
※私のデザインの引き出しが少ないだけで、きっと横スクロールもいいデザインがあるかと思います。完全に否定しているわけではありませんので、本当にただの一例として読んでいただけたら幸いです…！
- ピュアJSのタブの実装例：https://jsfiddle.net/srwoua3g/
- アコーディオンはjQueryで簡単に実装できます：https://jsfiddle.net/oyxszrun/
投稿2022/10/05 01:56
編集2022/10/05 03:34総合スコア2314
0
いろいろな方法があると思いますが、質問の図や内容から考えた一例を。
まず、カテゴリの切り替えは、ラジオボタンを使います。checked属性をつけておけば初期値は選択状態になります。デザインを変更したい場合は、ラジオボタンは非表示にしておいて、関連付けたラベルの方でデザインします。
表示/非表示は、ラジオボタンのチェックが付いていれば表示(display: block)、そうでなければ非表示(display: none)
アニメーションさせたければ、displayではできないので、opacity(透明度) を使います。
これらはJSを使わずにHTMLとCSSだけで可能です。
フローのレイアウトは、CSS Grid を使います。レイアウトの自由度が高いので。
分岐線は、border で表示させて、position: absolute;で絶対配置します。
ざっくりとしたサンプルを作成しましたので、ご参考に。
矢印はテキストで適当ですので、WEBフォントを使うかSVGを使うなどして見栄えよくするといいでしょう。
投稿2022/10/04 14:48
編集2022/10/04 15:52
総合スコア33715
ご回答とサンプルコードをありがとうございます。
分岐ですが初めから表示させるのですね。
何か非表示にさせて押されたら表示させる方法を考えておりました。
出来れば赤で囲ったBルートは非表示にさせておいて、AとBを切り替えられるようなフローをイメージしております。
それも、カテゴリの切り替えと同様の手法で可能です。JSを使ってもいいでしょう。
アイデアやヒントは提示できていると思いますので、それをもとにできるところまでご自身で作成してみてはどうですか。
はい、ある程度考えがまとまってきました。Photoshopでデザイン設計をしてみます。
ありがとうございました。
あなたの回答
tips
プレビュー
