スクロールでページ内を移動するインターフェイス - WEBデザインアイデアラボVol.20




飽きさせないレイアウトやちょっとした一工夫で、デザインをよくするテクニックをビジュアル重視で紹介。実践的なWebデザインを通して、デザインを構成していくための考え方を学ぼう。
制作・文=佐藤好彦


Vol.20

スクロールでページ内を移動するインターフェイス


印刷物に存在する「ページ」という概念は、Webでも残ることになった。しかし、紙というメディアもはじめからページという概念を持っていたわけではない。束ねられ、本という形に製本される以前には、巻物のようにひとつながりの空間が存在していた。また、Webページには、もともとサイズという概念がなく、いくらでも大きくできる。今回は撮影した写真を使って、ウインドウの大きさを超える大きな画面をデザインし、その中にいくつかの領域を設定して、スクロールして移動するというインターフェイスを作成してみる。この方法を応用すれば、地図のようなビジュアルをつくって、ひとつの画面の中で動き回るといったデザインも可能だ。昨今のようにビジネスが優先され、ユーザビリティばかりが求められるのではなく、Webのデザインはもっともっと自由であってよいと思う。もっと刺激に満ちた、楽しいWebの世界をつくっていきたいものだ。

「WEBレイアウトのネタ帖」から引き続いて、7年もの間続けてきたこの「WEBデザイン アイデアラボ」での連載も今回でひと区切りということになります。ご愛読ありがとうございました。


CREATIVE POINT A 窓辺で花をぼかして撮影する

CREATIVE POINT B ひとつの背景画像から複数の画面を想定する

CREATIVE POINT C トップ画面を作成する

CREATIVE POINT D 「Music」のパートの画面を作成する

CREATIVE POINT E 「Movie」のパートの画面を作成する

CREATIVE POINT F クリックで目的のコンテンツに移動するスクリプトを作成する


Profile
佐藤好彦(さとう・よしひこ)
Webデザイナー、グラフィックデザイナー。Webなどのデザイン・プランニングを中心に、デザイン関連の書籍や雑誌の執筆も手がけている。ムック『WEBレイアウトのネタ帖』(小社刊)が発売中です。東京造形大学非常勤講師。
http://yoshihiko.com/


本記事は『web creators』2010 vol.99からの転載です。本特集全記事は誌面で読むことができます。

twitter facebook このエントリーをはてなブックマークに追加 RSS

▷こんな記事も読まれています

Recommended by