こんにちは！TANE-beデザイナーです。٩(ര̀ᴗര́)و

複数のWebサイトを眺めていると

• こうデザインしている所多いけど、その理由ってなんだろう？
• 他のやり方ではいけないのかな？

と思ったことはありませんか？

今回はその理由について紹介させていただきたいと思います！知っておくとクォーリティーが上がるWebデザインの基本ルールの中で、今回は「送信ボタンを右に置く理由」「人物画像とテキストの配置」「各文字揃えの特徴」について紹介させていただきます。

戻るボタンは左、送信ボタンは右にする理由

フォームに内容を入力した後表示される確認画面には「戻る」と「送信」ボタンが並んでいます。「戻る」ボタンは左、「送信」ボタンは右に配置することが多いですね。
また、「次の段階に進む」役割のボタンの矢印は基本的に右を向いています。

なぜでしょうか？

ユーザーは実生活での行動や経験に基づいてWeb上のボタンを操作しているので、Webページ・アプリと実際の人々の行動は密接に関係しています。
例えば、動画のプレー・停止ボタンのデザインが実生活のリモコンのボタンと同じことを挙げられますね。
このようなユーザーの実生活での習慣はWeb上のボタンの並び順番にも影響を与えています。

実生活で「左」と「右」は「前」と「次」のメタファーとして使われています。
横書きのテキストを読む時私たちは左から右へ進みますね。

また、駅の表記も前の駅は左に、次の駅は右に表記しています。従って、デザインにおいても「次の段階に進む」「確認」などの肯定的な意味のボタンは右に、「前に戻る」「キャンセル」などの否定的な意味のボタンは左に配置させています。

Google Materialガイドの説明によると、文字を左から右に書くLTR(Left to right)文化圏で進むボタンは右方向だけど、RTL(Right to left)文化圏では左方向だそうです。

もし私がRTL文化圏のデザインをすることになったら、改めてデザイン勉強しないといけないですね、世界は広い。。！ණ⃛(ᵒ͈̑ᴗ̂ᵒ͈̑ )”

人物画像の向きとテキストの配置

行動心理学によると、私たちは人が見ている視線の方向に惹かれるそうです。隣の人が右方向をずっとみていると、私も思わず右を見てしまいます。•̀.̫•́✧

人物画像とテキストの配置においても、画像の中の人物が眺めている方向にテキストを配置すれば、テキストへの集中度が一層上がり、画像とテキストの一体感も高まります。逆に、画像の中の人物がテキストの反対側を向いていたら、ユーザーのテキストへの集中度が落ちてしまいます。

しかし、デザインの制作において初期段階から画像が確定されていることは少ないですね。先に画像とテキストのレイアウトを組んでから後で画像を反映させることが多いです。上記のルールを適用するためには画像を左右反転させることも多々ありますが、下記のことを注意しなければならないです。

その他色んな注意点があると思いますので、画像を左右反転させる時は違和感がないか確認作業が必要です!•̀ㅅ•́

上記の理由もしくは他の理由で画像の左右反転が難しい場合は、テキストと画像のレイアウトを変えるなどの工夫が必要となるかもしれません。この法則はWebページにはもちろん、バナーデザインにも当てはまります！

左揃えのテキストが多い理由

左・中央・右揃えの中で、Webサイトで一番よく使われる文字揃えは「左揃え」ですね。その理由はなんでしょう？こちらではそれぞれの特徴について簡単に紹介させていただきます！✧٩(•́⌄•́๑)و ✧

左揃え

左揃えは見出しやテキスト内容のスタート位置が同じ位置に揃っているので、分かりやすく自然に読める文字揃えです。
また、書籍やWordの書き方も左から右への横書きなのでユーザーに一番慣れている文字揃えになります。そして、Webサイトのコンテンツを見るユーザーの目線は最初に左上に止まりますので、文字のスタート位置が左に揃っている左揃えは一番読みやすいレイアウトとも言えますね。

中央揃え（センターリング）

中央揃え（センターリング）はコンテンツを強調させる時などに効果的に使えます。
しかし、コンテンツの内容が多い場合中央揃えは避けた方がいいです。改行箇所も多くなり、文字のスタート位置がバラバラになって可読性が落ちてしまうからです。また、モバイルで使う時はデバイスの最小幅を計算して改行させないといけないので、工夫が必要となりますね。

右揃え

右揃えはWebデザインではあまり使っていない文字揃えです。
文字のスタート位置がバラバラになってしまうので、可読性が落ちることが大きな理由です。しかし、代表メッセージの署名の所では特別感を出すなどの理由であえて右揃えにすることがあります。

さいごに

デザインに正解はないと思いますが、ユーザービリティーの高いデザインにはある程度の法則みたいなものがあるので、そのデザインの原理が分かれば、直感的でクォーリティーの高いデザインの実現はもちろん色んな方面で活用できると思います。。！٩(•̤̀ᵕ•̤́๑)૭✧

次回はアイコンのルールやテキストのメリハリ、そして色対比について紹介させていただきます！