【ハウツー】

見る人のハートをつかむ"スペシャルWebサイト"を作ろう(前編)

1 情報を得るためのWebサイトから「感動や驚き」を伝えるWebサイトへ

栗原亮  [2013/12/19]
  • <<
  • <

1/3

1枚の写真、わずか数分の短編映像に心奪われる体験をしたことはありませんか?シンプルで印象的なビジュアルイメージは、時として大量の情報よりも的確に伝えるべきメッセージを相手に届ける効果があります。そして、雑多な情報にあふれるインターネットの世界でも同様に、人々の印象に残る特別なWebサイト表現が求められており、先進的なWebデザインの典型的な試みのひとつが、スクロール駆動型のWebサイトです。これは写真やイラスト、映像などのコンテンツを1ページにまとめ、スクロール操作によって画面全体の表示内容を切り替えるWebサイトを指します。

手法としては2010年頃に登場し、2013年末現在では、企業のプロモーションサイトや海外アーティストのイベント特設サイトなどの「スペシャルWebサイト」を中心に普及し始めています。例として、アップルの「Mac Pro」の製品ページ(2013年12月13日現在)を見ると、どのようなものか具体的にイメージできるでしょう。テキストがアニメーションで動いたり背景画像がスクロール操作にあわせて変化したりと、訪問者を驚かせるような演出により、新商品で伝えたい内容を余すことなく表現しています。

「スペシャル」なWebサイトの一例である、「Mac Pro」の製品ページ。製品発売前の段階から特徴的な外観のイメージを公開しています。画面を上から下にスクロールすることで内部構造と特徴的な機能が次第と明らかになる仕組みで、見る人の気分を高揚させ、期待感をアップする効果が期待されます

「スペシャルWebサイト」を自分で作るには、HTML5やCSS3、JavaScriptなど高度な制作技術が必要で、プロのWebクリエイターではない多くの人にとっては非常にハードルが高いものです。しかし、今では専門知識がなくてもスペシャルWebサイトを手軽に作れるデジタルステージの「LiVE for WebLiFE* 2(以下LiVE2)」というソフトが登場しているため、一番重要な「見てくれる人に伝えたいあなたのメッセージや、感動を与えるビジュアルイメージ」を伝える素材作りに専念できます。今回はこのソフトを使った「スペシャルWebサイト」の作り方を見ていきましょう。

LiVE2体験版で全体的なイメージをつかむ

まずは、お使いのMacまたはWindowsにLiVE2の体験版をダウンロードしてインストールし、どのようなWebサイトが作成できるのか、全体的なイメージをつかみましょう。白紙の状態からいきなりWebサイトを作るのではなく、あらかじめ用意された「スライドテンプレート」からイメージに近いレイアウトを選び、そこに掲載したいテキストや写真、映像などの素材を当てはめていくというのが大きな流れです。

今回Webサイト制作に使用したLiVE for WebLiFE* 2にはMac版とWindows版(各1万9,800円)のほか、両方が利用できるクロスプラットフォーム版(2万9,800円)があります。パッケージ販売のほか、ダウンロード提供もされています

LiVE2の基本コンセプトは、ひとつのページに複数の「スライド」を並べていくというものです。サイト管理画面である「サイトシアター」で右上の[サイトの新規作成]をクリックし、「スライドテンプレート」から最初のスライドを選択します(画面は体験版です。製品版では90種類以上のスライドテンプレートが用意されています)

次ページからは、具体的なテクニックを紹介します。

  • <<
  • <

1/3

インデックス

目次
(1) 情報を得るためのWebサイトから「感動や驚き」を伝えるWebサイトへ
(2) 動くテキストで「メッセージ」を相手に届ける
(3) スクロールの動きを「パララックス」で演出する


IT製品 "比較/検討" 情報

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

特別企画 PR

人気記事

一覧

イチオシ記事

新着記事

【コラム】軍事とIT 第141回 X-2と将来戦闘機(7)データリンク
[11:00 5/28] 企業IT
焼肉のタレ派VSしお派。回答1,000人のうち7割以上が好む味は!?
[11:00 5/28] 趣味
舞台「インフェルノ」植田圭輔&平野良のビジュアル解禁、山内圭輔も出演
[10:00 5/28] ホビー
【ハウツー】メモ・ノートとして使える「ページ」の入力方法とは- イチからはじめるOneNote
[10:00 5/28] 携帯
[関根勤]「まさか自分が…」 心臓の緊急手術を振り返る
[09:26 5/28] エンタメ

特別企画 PR

求人情報