見出し画像

エリアごとに達成すべき役割を果たす。【#本日のデザインFB】

会社では、後輩デザイナーのデザインチェックをする機会が多くあります。

隣の席のデザイナーにフィードバックを行っていると、さらにその隣の席のデザイナーが、横目でチラチラ見ながらその内容に聞き耳を立てている。
そんないつもの光景を見ていて気が付きました。

「なるほど、誰かに宛てたデザインへのフィードバックって、他の誰かの役にも立つよねー」と。

…というわけで思いつきですが、仕事中に実際に行ったフィードバックを、ゆるーくnoteにまとめてみようかなと思います(ホントに思いつきで何の計画性もないので続かないかもですが)。
さいきん後輩のデザインチェックを担当するようになった先輩デザイナーさんや、初級から中級にレベルアップしたいデザイナーさんなどに、ほんの少しだけお役に立てるとよいなーと思います。2mmくらいとか。


参考画像を見ながら組んだレイアウトが、何かしっくりこない。


構成をデザインに起こす際に、Pinterestで画像を検索。それを参考にレイアウトを組んでみたものの…なんかしっくり来ない!
本日出くわしたのは、そんな場面でした。

Pinterest、便利ですよね。いろんなデザインやアイデアが探せるし。
…では、なぜレイアウトがしっくり来なかったのでしょう。


デザイン全体だけでなく、それぞれのエリアにも達成すべき役割がある。


「このサイトの目的は○○だから、こういうコンセプトのデザインにしよう。」

グランドデザイン着手時に、コンセプトやアートボードを作成する場面も多いと思います。サイトが達成すべき役割を果たすために、必要なデザインを定義している、と言えるかなと思います。

これと同じことが、webサイトを構成するエリアの1つ1つにも存在します。

下記は、さいきん「キレイだなー!」と思ったこちらのサイトさんの構成とデザインを私の方で勝手に分析したものです(制作者本人ではないので、もしかしたら的外れなこと書いてるかもです)。

例えばファーストビューでは、キレイな写真のスライドショーや動画を使用したりしたくなりがちですが、そうはせず、テキストだけで、会社の提供する価値について強く訴求されています。
もし写真や動画の上にコピーが乗っていたら、ユーザーはそちらに目が行ってしまい、コピーはそこまで印象に残らないかもしれません。

前述のPinterestの参考画像を見ながら作っていたレイアウトは、「並べ方」や「見た目」に引っ張られてしまっていました
そのため、重要なボタンの存在感が薄かったり、読んで欲しいテキストがやや読みにくかったりしてしまっていたのです。


そのデザイン、本来の目的を果たせていますか?


webデザインは、小さなコンポーネント、エリア、そしてページの集合体です。アトミックデザインで言うと、原子、分子、生体、テンプレート、ページ、的な。
ページ全体のレイアウトがしっくり来ない。そんなときは、ひとつひとつのエリアごとの役割を振り返り、それをチェックしてみるのも良いかもしれません☺

この記事が気に入ったらサポートをしてみませんか?