Web
  メイキングWebデザイン【初級編】Adobe GoLive & Live Motionではじめよう!
page: 1 2 3 4 5 6 7 8 9 10 11 12

Webデザインの潮流

「Webサイト制作」が世の中に広く浸透し、多くのデザイナーがサイト制作手掛けるようになったのは、ここ数年の話である。今でこそデザイン性の高いWebサイトが数多く存在しているが、DTPをはじめとする紙ベースのデザイナーがWebデザインを手掛けるためには、超えなければならない大きな壁があった。それが「HTML」である。「<HTML><HEAD><TITLE>・・・」といったタグを打ち込んでいく作業は、デザイナーにとってはまるで畑違いの作業だったからだ。そして登場したのが、一連の「Web制作ソフト」である。グラフィックソフトやレイアウトソフトのような感覚でWebサイトを作成できる、というものであったが、当時はまだまだHTMLを意識しないですむレベルには達していなかった。だがバージョンアップを重ね洗練されてきたAdobe® GoLive(TM)は、現在、積極的に活用される場面が増加している。

メイキングWebデザイン

ここではGoLiveについてより深く知ってもらうために、またWebデザイン自体にまだ触れていない方のために、ExtraDesignが制作した「Rainbow Graphics」という架空のWebサイトを題材に、GoLiveを使ったWebサイト制作の工程を紹介していく。オープニングアニメーションの制作にはAdobe® LiveMotion(TM)が使用されている。


Webサイト全体の構造

Webサイト制作にとりかかる前に、サイト全体の構造を考えておくのは非常に重要なことだ。今回の題材となっている「Rainbow Graphics」という架空のWebサイトは、その名の通りレインボーをテーマにしたアニメーションからはじまり、個人サイトには欠かせないページで構成されている。

簡単に全体像を紹介すると、まずはWebサイトの「顔」とも言えるトップページ。インパクトを与えたり、楽しんでもらえるような工夫をしよう。Rainbow Graphicsでは、LiveMotionで作成したアニメーションがこのトップページを飾っている。訪れる人に更新情報を知らせる、よく「what's new」と 呼ばれるページや、気軽に更新できるページもつくっておきたい。今回は日記「diary」をそのページに見立てた。さらに自分の趣味や仕事をWebサイトに生かすページ(Rainbow Graphicsではfont)、ほかのWebサイトにリンクをはる「link」、訪問者からメールを受けるための「contact」などのページを用意するのも良いだろう。


トップに戻る


next
メイキングWebデザイン【初級編】
Webデザインの潮流
Webサイト全体の構造
新規Webサイトを製作するための準備
ナビゲーションの製作
画像の配置と整列
コンテンツページのレイアウト
ページを仕上げる
外部URLへのリンクと
  Eメールリンクの設定

各ページにリンクを張って
  Webサイトを完成させる
 
メイキングWebデザイン
【初級編】
【中級編】
【上級編】

ダウンロード
サンプルテンプレート

フリーボタン素材
・印刷用PDF
STEP1〜3 (PDF: 337KB/3 ページ)
- GoLiveによるWebサイト構築
STEP4〜8 (PDF: 530KB/5 ページ)
- Rainbow Graphicsの製作過程
STEP9〜10 (PDF: 272KB/3 ページ)
- LiveMotionでアニメーション製作
STEP11〜12 (PDF: 126KB/1 ページ)
- サイトの完成、公開の準備