WEBデザインについて学んだ面白いこと

弊社ではパンフレットやポスター、プロダクトなど、
様々な領域でデザインに携わらせていただいております。
今まで私は、チラシなどのグラフィックデザインをメインに制作で関わらせていただくことが多かったのですが、
ホームページの制作にも携わらせていただくことになりました。

グラフィックとWEB、似ているようで違います。
「何を伝えたいか」「どういう印象を持ってもらいたいか」など、デザインの根本的な部分は同じなのですが、
画面のサイズが見ている画面によって変わったり、レイアウトの仕方が違ったり、ボタンを押すとページを移動するなどの機能があったりします。

WEBの一番の特徴といえば、例えば「メニューボタンをクリックするとメニューが出てくる」
「スクロールしていくと画像などが消えていたのにじんわり浮かび上がってくる」などの
「アニメーション」ではないでしょうか。

弊社で以前制作させていただいた「RINDA foundation」様の
トップページは分かりやすくWEBサイトの特徴が出ているかと思います。
こちらのサイトはスクロールしていくと、絵本のように次々イラストが出てきます。
面白いですよね!(このとき携われなかったのが残念です…)

せっかく、今後WEBページの制作に関わらせていただくので、
上記のような「アニメーション」の動きを取り入れたいと考えています。
ただ、「アニメーション」といってもいろんな動きがあります。
そこで、どういう動き方の種類があるのか、少し調べてみました。

調べてみると、とても分かりやすいサイトを見つけました。
動くWebデザインアイディア帳」です。

こちらではアニメーションの一つ一つの動きについて紹介されているだけでなく、
サンプルのサイトも作られていて、サイト上のどの場所でどういうアニメーションが使われているのか
分かりやすく紹介されています。

実際にありそうなサイトのサンプルばかりなのですが、見ていて気づいたことがありました。
例えば、女性向けのエステサロンのサイトの動きは落ち着いて上品な感じを受けるのですが、
子供向けの学習塾のサイトだと小さなイラストなどが常に動いていて、賑やかな印象を受けます。

このことから、アニメーションにも「トンマナ」があるのだと気づきました。
「トンマナ」とは「トーン&マナー」の言葉の略で、
詳しく説明するとややこしくなってしまうので、簡単に言ってしまうと、
その雰囲気にあった「らしさ」のデザインを守ることを「トンマナ」と言います。
「動くWebデザインアイデア帳」のサンプルサイトを例にさせていただくと、
上品な印象のエステサロンのサイトなのに、子供が描いたようなポップなイラストがあると
雰囲気が崩れてしまいます。

その「トンマナ」が「アニメーション」でも同じように言えるのです。
例えば、エステサロンのサイトでポップなイラストが
跳ねているような動きをしていると、「なんか違う…」となってしまいます。

ですので、WEBサイトのデザインに合わせたアニメーションの動きが大切なんだと、今回学びました。
動くWebデザインアイディア帳」のサイトのサンプルのように、
いろんなサイトデザインのアニメーションを見比べてみるのも楽しいですね!
 
 
 

COPYRIGHT © 2021 A.D.GRAPHICA
ALL RIGHTS RESERVED.

CLOSE