![見出し画像](https://assets.st-note.com/production/uploads/images/90810355/rectangle_large_type_2_2b9929131e7a893d353aa421804e43e9.png?width=1200)
0からサービス作り 音声SNS編⑥
プロトタイプ案(投稿フィード)をBONOの勉強会でフィードバックしてもらいました。
フィードバック内容
コンテンツ部分の構造について、理解ができてない部分がある。
![](https://assets.st-note.com/img/1662816622221-YHw9673nbC.png)
アクションの配置
人の目線の動きは左上から右下へと移動します。
![図1](https://assets.st-note.com/production/uploads/images/85180383/picture_pc_8f2820765b2b920392975470a7116207.png?width=1200)
この目線の導線上に、見せたいものをいかにうまく配置し、最後に行きつく場所でアクションを起こしてもらうか、が重要です。
しかし、今回の自分の作った構造を見ると、最重要アクションである音声の再生ボタンは中央の左側。これでは、あまり再生が期待できない配置になってしまっています。
コンテンツの構成
コンテンツ部分の構造を考える上でも、UIの基本構造と同じ考え方ができます。
UIの基本構造=アクション、ナビ、コンテンツ。
ヘッダーフッターにあるナビやアクションが、コンテンツ内に配置するとなると、なにに置き換えられ、どこに配置されるか。を考えていくと考えるやすいです。
プロトタイプの修正
上記のフィードバック内容を踏まえ、修正してみました。
![](https://assets.st-note.com/img/1662819930503-RXCST08kby.png?width=1200)
構造部分の修正
![](https://assets.st-note.com/img/1662820586980-TqwAbSKQEr.png)
誰が発信しているかがわかる情報
コンテンツ
アクション
それぞれをブロックごとに整理しておくことで、右上→左下の目線の導線上に必要な情報をまとめられた気がしています。
コンテンツブロックの中でもヘッダーフッター的構造が成り立つことは今後デザインするときにめちゃくちゃ助けになりそうだと感じました。
続く…