アップルの新しい製品のページを開くと、画面を下へ読み進めるにつれて、製品がゆっくりと回り、近づき、細部が浮かび上がってきます。ティファニーのような高級ブランドのWebサイトでは、たっぷりとした余白の中に大きな写真が置かれ、動きはあくまで静かで控えめです。
どちらも、見る人の目を、製品そのものへ自然に導くように作られています。この考え方は、作家のホームページにもそのまま生かすことができます。主役が製品から作品に変わるだけです。
この記事では、Webサイトの「動き」を使って作品を際立たせる考え方と、その具体的な方法をお伝えします。
動きは、作品のためにある
まず大切なのは、動きそのものを見せようとしないことです。
アップルやティファニーのWebサイトの動きが印象に残るのは、動きが派手だからではありません。動きが、製品の美しさや細部に目を向けさせるために使われているからです。動きが終わったとき、見る人の記憶に残っているのは、動きではなく製品です。
作家のホームページでも同じです。動きは、作品に目を向けてもらうための手段です。動きが作品より目立ってしまったら、それは使い方を見直す合図です。
大きなブランドのWebサイトに共通すること
余白と静けさ
高級ブランドのWebサイトには、何も置かれていない空間がたっぷりあります。余白があるからこそ、置かれたものが際立ちます。作品の周りに余白を取り、背景を控えめな色にするだけで、作品の印象は大きく変わります。
一つの画面に、一つの見せ場
一つの画面にたくさんの情報を詰め込まず、見せたいものを一つに絞っています。作家のホームページでも、最初の画面では、代表作を一点だけ大きく見せるほうが、何点も並べるより強く印象に残ります。
読み進めるにつれて、物語が進む
画面を下へ読み進めるにつれて、製品の特徴が一つずつ現れる作りは、一冊の本をめくるような体験です。作家のホームページでも、作品の全体から細部へ、あるいは若い頃の作品から近年の作品へと、読み進めるにつれて物語が進むように構成できます。
動きは、ゆっくり、短く
ブランドのWebサイトの動きは、意外なほどゆっくりで、短く終わります。速い動きや、いつまでも続く動きは、落ち着いて見ることの妨げになります。
作品を際立たせる動きの例
ゆっくり現れる作品
ページを開くと、作品が静かに浮かび上がるように現れます。いきなり表示されるより、作品と向き合う心の準備ができます。
ゆっくり寄っていく作品
作品の全体から、筆の跡や摺りの細部へと、時間をかけて少しずつ近づいていきます。展覧会で作品に一歩近づいて見るときの体験に近いものです。
ルーペで細部を見る
作品の上で指やマウスを動かすと、その部分が拡大されます。細密な表現や、素材の質感が持ち味の作品に向いています。
絵巻のように流れる
横に読み進めると、作品が絵巻物のように続いていきます。シリーズの作品や、作家の歩みを見せるのに向いています。
作品だけを見る
背景を暗くし、文字を消して、作品だけを画面いっぱいに見せる表示に切り替えられるようにします。展示室で作品と一対一で向き合うような見せ方です。
前後を見比べる
つまみを左右に動かすと、2枚の画像を見比べられます。下絵と完成作、修復の前と後など、作品の背景にある物語を伝えることができます。
これらの動きは、このサイトのアートアーカイブの作品を使って、実際に触って試せるようにしています。作品を引き立てる、動きの見本
やりすぎに気をつける
動きは、加えすぎると逆効果になります。次のような点に気をつけています。
- 動きを詰め込まない：一つのページで使う動きは、一つか二つに絞ります
- 待たせない：動きが終わるまで作品が見られない、という作りにはしません
- 表示を重くしない：動きのために表示が遅くなっては、本末転倒です
- スマートフォンでも心地よく：指で触ったときにも、自然に動くようにします
- 動きが苦手な人に配慮する：画面の動きで気分が悪くなる人もいます。端末で「動きを減らす」設定をしている人には、動きを止めて表示します
作家らしさに合った動きを選ぶ
どの動きがふさわしいかは、作品によって違います。静けさを大切にする作品には、ゆっくり現れるだけの動きが似合います。細部に見どころのある作品には、ルーペが向いています。物語性のあるシリーズには、絵巻のような流れが合います。
アップルやティファニーのWebサイトが、それぞれのブランドらしさを動きでも表しているように、作家のホームページの動きも、作家らしさを表すものであってほしいと考えています。
今のホームページに、動きを一部だけ取り入れることもできます。全部は作り直さないリニューアル