ウェブサイトに磨きをかける!
まずは順調にサイトの作成とアップロードまで終えたミキ。すると、もっとウェブサイトを充実させたいという欲が出てきたようだ。BiNDなら写真のスライドショーやマウスオーバーで変化するバナーなども簡単に設定できるので、さっそく挑戦だ。
ミキ ねぇマキ、ちょっと教えてほしいんだけど……。
マキ サイトの更新ね。どうしたいの?
ミキ マキの会社のサイトってBiNDで作ってるんでしょ。このトップページにある、写真が順番に切り替わってるのって、どうやっているの?
マキ ああ、あれはBiNDの「SHiFT for WebLiFE*」って機能を使っているのよ。
ミキ 「ブロックエディタ」にある「SHiFTスライドショーパーツ」のこと?
マキ そうそう。お姉ちゃんにしては勉強してるじゃない(笑)。これを使うと、スライドショーを配置できるの。SHiFTのいいところは、ウェブブラウザーの標準機能を使って実現しているってことね。Flashが見られなくても表示できるから、iPhoneやiPadの対策もバッチリなのよ。
SHiFT
【1】スライドショーを作成するにはまず、「ブロックエディタ」の画面右側にある「パーツ一覧」から「SHiFTスライドショーパーツ」を選択する
【2】SHiFTの画面が開くので、テンプレート一覧からスライドショーのスタイルを選ぶ。一般的なフェードやスライスのほか、写真をページの背景に切り替えながら表示する、ポラロイド風のフレームに表示するといったテンプレートもある
【3】スライドショーで表示する写真を、SHiFTウィンドウ左側のエリアにドラッグ＆ドロップして登録する。画面下部にある「新規画像」ボタンをクリックして選択してもOK。写真の削除は隣の「削除」ボタンで実行する
【4】登録した各画像に対し、画像下部に表示するコメントやリンクの有無、リンク先などを設定する。自動再生やループといったオプションのオン／オフを選択したら、あとは「保存」ボタンをクリックすればスライドショーの完成だ
【5】その後、忘れずに「ブロックエディタ」で「適用」を実行すること。ウェブブラウザーでプレビューし、設定したコメントの表示やリンクの効果を確認しよう。画面下に小さな丸印が写真の枚数ぶん表示される
ミキ へえー。最近はiPhoneを使っている人が周りにも多いからうれしいわ。ほかにも、マキの会社をまねしたいところがあるんだけど。この地図とか、このお問い合わせのページとか……。
マキ それはほら、「ウェブサービス系パーツ」を見てみて。
ミキ あ、ほんとだ。「Yahoo!地図」もあるし、「フォーム」もある。
Yahoo! 地図
「SYNC」の「Yahoo! 地図」を使えば、ほんの1分ほどでページに地図を埋め込める。マーカーには、あらかじめ用意したオリジナル画像も利用可能だ
フォーム
「フォーム」パーツを利用すれば、問い合わせ用フォームの作成も簡単だ。テンプレートを選び、表示されるガイドに従って項目を設定していこう
マキ そこをクリックすると「SYNC for Web LiFE* 3」が起動するでしょ。このSYNCに表示されるガイドに従って設定していけば、地図やフォーム、動画をページの中に組み込めるのよ。ちょっと地図を作ってみるね。まず住所で検索。この地図でお店の場所をクリック──と。
ミキ マーカーが付いた! これだけ!?
マキ あとは「次へ」で進めて、「適用」ボタンを押せばいいの。お問い合わせフォームのほかにも、アンケートフォームなんかも作れるわよ。
ミキ 本当に簡単ね! じゃあ、ついでに、ほらここ、マウスを重ねるとバナー画像が変わるけどこれはどうやっているの?
マキ ロールオーバーっていうのよ。2枚の画像を切り替える効果だから、まずSiGNでバナー用の画像を作っておくの。SiGNは普通の画像編集ソフトみたいに、作った画像をJPEGやPNG形式で書き出せるのもポイントなのよ。
ミキ あー、SiGNってロゴを作るときに使ったソフトね。バナーも作れるの?
マキ ロゴもバナーも、結局は画像編集なのよね。SiGNでバナーを用意してJPEGに書き出すでしょ。そしたら画像パーツとして読み込めば、リンク付きのバナーにロールオーバー効果を設定できるわ。
ロールオーバー
【1】ロールオーバーするバナーもSiGNで作る。ブロックテンプレートの一覧から、「バナー」カテゴリーを選び、作成したいバナーのサイズを選んで、ページに配置する
【2】SiGNでバナーを開いてテンプレートのテキストや文字の配置などを変更。完了したら「ファイル」メニューから「別ファイルとして保存」を選んで保存する
【3】ロールオーバー効果は、SiGNで書き出した画像をページに配置し、「画像パーツ設定」の「クリック設定」で付ける
【4】適用したら、ウェブブラウザーでプレビューしてみよう。1枚の画像があれば色の濃淡でロールオーバー効果を付けられる。もちろん違う画像の挿入もOKだ
ミキ 何でもできるのね! すごいすごい! じゃあ次はセール品の表の作り方を……。
マキ ちょっとお姉ちゃん! 少しは自分でやろうとしなさい!!
BiNDテーブルパーツ
【1】表の作成には、「ブロックエディタ」のパーツ一覧にある「テーブルパーツ」を利用する。「テーブルパーツ・エディタ」に並ぶテンプレートから、作りたい表に近いものを選択して「作成」ボタンを押そう
【2】右上の「行や列の増減」で行／列の追加や削除をクリック操作で繰り返し、項目数を調整する。セル内をクリックすると、直接セル内のテキスト編集が可能だ。ツールバーにある「プレビュー」を実行すれば、表の仕上がりを確認できる
【3】表の編集が終わったら「テーブルパーツ・エディタ」の「適用」を選択し、「ブロックエディタ」でも「適用」をクリック。セル内のテキストやバーの色なども自由に変えられるので、ウェブブラウザーでチェックしながら調整しよう
「山形まなび館」（MONO SCHOOL）は、旧山形市立第一小学校の校舎を再活用したものづくり支援学校のウェブサイト。BiND 4購入の決め手はトップページのメインとして利用できるアニメーション表示という
BiND 4ユーザーの声
ウェブの苦手意識がなくなりました
最初にBiNDを購入した理由は、ウェブの専門知識がなくても制作できることでした。以前は他社のウェブ制作ソフトを使っていましたが、わからないことが多すぎて、解説本と長い間にらめっこ状態。一方BiNDは、テンプレートを利用すればウェブサイトが作れてしまう。もちろんBiNDも使い始めたころは、なかなかイメージに近い状態にすることができずに戸惑いました。しかし現在は、テンプレートを使用しなくても一から作れるようになりました。
まずは、作ってみる。そして運用しながら改善していく。知識を増やす感覚で、少しずつウェブに対するの知識を深めることができます。難しく考えずにBiNDを使ってみてください。
「山形まなび館」（株式会社コロン 萩原尚季）
(次ページに続く)
