味気ないウェブデザインに動きを加えて魅力的にする5つのデザインテクニック
Post on:2013年1月9日
sponsors
デザインの基本的なテクニックを使って、ウェブデザインに動きを加えて魅力的にする方法を紹介します。
Techniques for Creating Motion in Web Design
下記は各ポイントを意訳したものです。
魅力的なウェブページをつくるポイントはモーション
誰もが魅力的なウェブページを作ることを望みます、そのゴールを達成する最も効果的な手段は「Motion: 動き」を加えることです。これはビデオやアニメーションだけのことではありません、素晴らしいデザイナーはビデオやアニメーション無しで「Motion: 動き」を生み出すことができます。もちろん、ビデオやアニメーションが効果的な手段ではない、ということではありません。
ここでは、ビデオやアニメーションを使用しないで、ウェブページを魅力的にする「Motion: 動き」を加えるテクニックを紹介します。
モーションを生み出す4つの方法
- Direction: 方向
- モーションは方向によって暗示されることがあります。例えば、矢印はその方向を見ていたり移動を暗示し、ユーザーに適切なアクションを提示することができます。
- Gravity: 重力
- 重力は自然が生み出す垂直方向の動きを作るために使います。同時に異なる垂直方向の動きを加えると上下に移動しているように見せることができます。ジャンプした際に人の髪の毛が重力にどのように影響を受けるか思い出してみてください。
- Balance: バランス
- オブジェクトがグループからはずれているようにすると、落下しているイメージを与えます。これはモーションの中でも非常に特別なタイプです。
- Depth: 奥行き
- エレメントにシャドウやハイライトを加えることで、奥行きを与えることができます。これは紙がめくれた、スプーンを持ち上げた、ジャケットをジッパーでしめるなどの単純な動きを暗示することができます。
1. 構成
効果的なモーションを作る最も簡単な方法は、何かが動いている写真を撮ることです。その動いている方向やオブジェクトの重力などが簡単に利用できます。ですが、写真だけが動きを暗示することができる方法ではありません。
グラフィックの単純な形だけでも、動きを表現することができます。矢印や指など、ナビゲーションの要素からデザインの機能的なピースまで豊富に揃っています。
Lorenzo Verziniの大きな鉛筆は素晴らしい例です、これはイラストですが、下にスクロールすることも暗示されています。このサイトでは他にも鉛筆を使って、方向を示します。
カラーとシャドウも同じように、どれくらいアクティブであるように見えるか影響を与えることができます。濃淡と色合いで写真に風のような動きを見せることができます。モノクロからカラーイメージに変化することで、風の動きのモーションを与えています。
2. フレームと配置
方向を暗示する写真が必ずしも必要ではありません。フレームの積み重ねやオブジェクトの配置によって、モーションを引き起こすことができます。例えば、オブジェクトをある程度まとめればバランスと調和が生み出され、このバランスをなくすと自由や無秩序になります。また、不安のモーションを生み出すには、オブジェクトを傾けたり、わざとランダムに配置したりします。
アンバランスさというのは、フレームをさまざまなサイズにしたり、ばらばらに配置したり、劇的なカラーを組み合わせることで作りだすことができます。
大きいオブジェクト一つを小さいオブジェクトで枠のようにサークルに囲み、楕円軌道のようなエフェクトなど試してみてください。
3. 編集
モーションを決定づける最も重要なプロセスは時々、編集のプロセスでおきます。大胆にクロップしたり、変わった形をつかうことはモーションに大きな影響を与えます、
例えば写真を1/3ルールで使うことは、イメージに多くの流れを加えることができます。イメージの主題を極端に左右に配置することは目の動きをコントールし、モーションへと繋がります。また、イメージを編集中に特定の箇所のみを目立たせることもできます。
Fatumではサーファーの後ろの水しぶきがスピード感を表現し、力強さを表現しています。写真をどのようにフレームにはめるかによって、デザイナーはユーザーがどこをみるべきかコントロールすることができます。主題は何ですか？ 左ですか右ですか？
イメージはスライドショーでスクロール表示する際にも、それがどのようになるかを考慮してください。動きはフレームのどこですか？ その動きはそれぞれのイメージの異なる場所に動かすことで、同様にモーションを作り出すことができます。
4. エフェクト
3つのシンプルなエフェクトが普通のオブジェクトにモーションを与えることができます。シャドウとブラーと奥行きの3つで、方向を暗示できます。よく利用される例としては、アクションとの併用でしょう。
シャドウは弱まりつつある太陽、あるいはオブジェクトをほんの少し浮き上がらせる影みたく自然に見えるように繊細に使います。シャドウを使うポイントは、ナチュラルです。濃すぎるシャドウだと、それはひどい効果を引き起こしてしまいます。
ブラーも同様に少しぼやけたくらいが、いい感じに見えます。人が走っている写真や動画のような感じです。そして、アイテムはブラーを通じて、はっきり見えるようにします。
最後は、奥行きです。動きは一次元では起きません。オブジェクトが最も影響を与える方向に向かう、あるいは離れるように動いているエフェクトにします。オブジェクトあるいはフレームを作る時は、角度を十分に考えて、必要に応じてシャドウを加えます。
5. テキスト
モーションを暗示する最も簡単方法の一つは、それを言葉で書くことです。その言葉は同じ動きを伴うイメージと対にします。ユーザーがかかわることができるアクションについて、たくさんのアクティブな動詞を含むテキストを書いてください。
目に見えるイメージとのコンビネーションで、それに関連した効果的なテキストを使い、はっきりとしたアクションの呼びかけを作ることができます。
sponsors
