要素を入れ替えるということ

タイトルだとピンとこないんですが画面設計の話です。

要素という言葉を使っていますが、大きなブロックのことです。
htmlで言うと section や div でくくられる単位のことだと捉えてください。

「AとBの（レイアウトの）順番を入れ替えられますか？」っていう確認がたまにあります。Bの方を優先したいため、Aと入れ替えたいという意図はわかります。例えば下記のレイアウトがあって「内容①と内容②の順番を入れ替えられますか？」と言われたらどうでしょうか？

内容①〜内容④は並列関係にある情報なんで、多少ストーリーは変われど無理な話ではないですよね。

では、下記のnoteのような記事コンテンツ、Qiitaなどでもいいんですが、ここでのレイアウトの入れ替えとなるとどうでしょうか？例えば「プロフィールエリアとコメントエリアの（レイアウトの）順番を入れ替えられますか？」

この場合大きく意味が変わってきます。

まずはエリア本来の役割を考えてみましょう。

【記事内容 → プロフィール → コメント】順の場合

プロフィールエリアの役割
・記事を書いた人の紹介
・記事を書いた人の過去記事の紹介

プロフィールエリアには自己紹介文がありますし、ユーザーのフォローボタンもよく配置されています。記事を書いたユーザーの直近の記事や人気の記事も配置しましょう。ブログサイトや記事サイトに多い形式です。

コメントエリアの役割
・コメントを書いてほしい

記事に対してのコメントなので入力エリアの高さは1〜2行程度でよいでしょうし、WYSIWYGエディターは必要ないでしょう。コメントは投稿された降順（最新のものが上位）で表示するのが一般的ですね。コメントに対してのいいねまたは返信機能もありますね。

それぞれのエリアの役割としてはこのようなことが考えられましたので、
プロフィールエリアとコメントエリアを入れ替えてみましょう。

パッと見、違和感ないように思えます。

【記事内容 → コメント → プロフィール】順の場合

コメントエリアの役割
・コメントを書いてほしい

入れ替える前に比べてコメントを書いてください感が強くなりました。デザインで強弱は付けれるものの、優先順位が上がったためユーザーに強くコメントを求めているように見えます。

プロフィールエリアの役割
・記事を書いた人の紹介
・記事を書いた人の過去記事の紹介

記事とプロフィールエリアに距離感が生まれ、関係性が薄れてしまいました。コメントエリアが途中に挿入されたため、コメントをしたユーザーや記事を書いた人が登場し、誰が書いた記事なのか見えづらくなってしまいました。

このように、エリアによっては入れ替えてしまうと本来の役割が機能しなくなることがあります。ではコメントエリアとプロフィールエリアが入れ替わった時、どのような役割を持たせることができるのでしょうか？

下記の例を考えてみました。

改：【記事内容 → コメント → プロフィール】順の場合

コメントエリアの役割
・議論してほしい

先ほどはブログサイトのようでしたが、コメントエリアを記事内容の直後にするとスレッド型のコミュニティサイトになります。記事内容に対してコメントありきのページになるため入力エリアの高さは長文が書けるよう調整した方がよいでしょうし、WYSIWYGエディターは必要になるでしょう。投稿された順番は時系列で見えた方がよいので昇順（古いのものが上位）で表示します。コメントに対してさらに議論されることも想定されるため返信や引用機能も考えられます。

プロフィールエリアの役割
・スレッドの関連記事を紹介

このレイアウトではプロフィールエリアが機能しないため、関連記事エリアとして利用しましょう。自己紹介文やフォローボタンの配置は考えづらいです。スレッド内容の関連記事を表示すると回遊しやすくなりそうです。

要素の入れ替えは見た目やhtmlの構造でとらえると容易に思えます。しかし、入れ替えるエリアによってはサイトの性質を大きく変えてしまうものがあります。なぜこの順番で要素を配置しているのかを考えて画面を設計しましょう。