実際に「BiND4」でHTML5対応のスタイリッシュなWebサイトを作ってみる!

ウェブコンポーザーへの道 その1「まずは設計図を作ろう!」

前回の最後で「BiND4のテンプレート「Style」をベースに、オリジナルのWebサイトを作ろう」と宣言した筆者。せっかくの機会なので、フリーライター渡部仁のコーポレートサイト(個人事業主なので厳密に言えば会社ではないのですが)を作ってみよう!と決意したのである。

そうと決まれば、後は作業を進めるのみ。気に入ったテンプレートを選び、自分のメッセージに文言を書き換え、使用したい写真に差し替えを行い、看板となるタイトルを命名し、サーバーへアップロードする、とわずか5ステップでスタイリッシュかつオリジナリティ溢れるWebサイトを構築することが可能な「BiND4」。いきなり作業を開始しても構わないのだが、まずはオーソドックスに紙と鉛筆を用意してWebサイトで伝えたいことを整理する意味も込めて簡単な設計図を作ることにした。

Webディレクターとして活動している筆者にしては、ちょっとこの設計図は手を抜きすぎな感も否めないが……お客さまへ納品する品物であっても、最初は手描きの"ラフ"を書くところからスタートし、徐々にイメージを膨らませながら体裁を整えていくというスタイルを採るワタシ。まあ、今回は自分自身のWebサイトということ、「BiND4」でどれだけワクワクしながら作業ができるかがポイントなので、これで良しとしよう。

• Webサイトのタイトルは屋号の「Bella Luna」にしよう
• 「自己紹介」でライター渡部ってどんな人なのかを伝えよう
• どんな仕事をしてきたのかわかるように「ポートフォリオ」を作ろう
• あわよくば……を狙って「コンタクトフォーム」を作ろう
• マイクロブログTwitterの「Twitterパーツ」を使って今風にしよう

ざっくりとだが盛り込む内容が決まったところで、今度はもう一段進み「Webサイトのトーン＆マナー」を決め込んでいく。トーン＆マナーは業界人っぽく表現すると"トンマナ"などと呼んだりもするが、要は"デザインや文章、写真などの味付け、テイストをどうするか？"というお話。この作業を厳密に行っておかないと、後々破綻のきっかけと成り得るだけに重要なものなのだ。が、これも今回はサクッと最低限の決まり事だけ考えることにした。

• カラーはブラックを基調とする
• 写真は試しにすべてiPhone4で撮影したものを使う

これだけ? と疑問の嵐が巻き起こりそうだが、ボリュームも僅かなので今回はこれで十分。あとは必要に応じて作業工程内で試行錯誤していくことにしよう。

ウェブコンポーザーへの道 その1「レッツ"BiND4"で作業開始!」

事前準備が終わったところで、いざ「BiND4」を駆使して制作に入ろう。まずは「BiND4」を起動して、［サイトシアター］から今回使用するテンプレート「Style」を選択。何故今回この「Style」をチョイスしたのかというと、「SHiFT」を使った動的なビルボードなど「BiND4」で盛り込まれた特徴をバランス良く活用することができるから。また個人的に「このテンプレートの背景色を黒にして引き締めたら格好良いんじゃないの!?」という直感的に惹かれるものを感じたのも大きな理由。こういった具合に、まるでウインドウショッピングのように［サイトシアター］を眺めながら"ピンッ!"とくるテンプレートと出会えるのも「BiND4」の魅力といえよう。

各種設定編

さて、ここから実際に制作に入る訳だが、まずはページの編集を行う前にサイト名やアップロード先等を入力する［プロパティ設定］から手を付けることにした。［サイトエディタ］画面下部のメニューにある［設定］をクリックし、［プロパティ設定］ウィンドウが表示されたらまずは［サイト設定］からスタートしていこう。

この［サイト設定］では、サイト名やサーバー設定、アクセス解析設定などを司っている。早速、サイト名や各種設定情報を入力。これらの作業はWebサイトを自分で構築したことがある人であれば何ら躓くことなく行えるだろう。

次に［コーナー設定］だが、こちらは初期状態で表示されるフォントの大きさや種類を設定したり、検索エンジンの検索対象とするかどうかを設定することができる。他にも、［ラベル］によって作業の進捗状況を示すことが可能だ。

最後に［ページ設定］へと移るわけだが、ここではページ全体やブロックごとに背景色・背景画像・背景スキン・余白の設定が行える［ページデザイン］、各ブロックをどのように配置するかを決める［ページレイアウト］、必要に応じてスクリプトが書き込め文字コードなどを設定する［スクリプトと詳細設定］、さらに［検索ロボット巡回設定］が用意されている。

［コーナー設定］でも同様に検索ロボットの巡回を設定する項目があったが、基本的にコーナーの設定はそのコーナーに含まれるすべてのページに反映され、［ページ設定］は設定を行っている対象となるページにのみ反映されるので覚えておこう。ちなみに、［コーナー設定］で"検索対象としない"と設定し、［ページ設定］で"検索対象とする"と設定した場合は、［ページ設定］が優先されるぞ。

この設定を行う際のワンポイントアドバイス! 各種設定で［セット］を積極的に利用していくことで作業時間が大幅に短縮することができる。例えば、トップページで入念にデザインを練り、他のページでも基本デザインとして設定を継承させたい。そうなったときに、また一から設定をし直すのは面倒この上ない。そこで、トップページの［ページデザイン］や［ページレイアウト］を［セット］で保存しておくことによって、他のページでも［セット］に保存された設定を簡単に反映させることができるのだ。

ヘッダをリデザイン

お待たせしました。いよいよ、ページの編集へとステップを進めよう。［サイトエディタ］下部中央にある［このページを編集する］ボタンをクリックすると、ヘッダやコンテンツ、メインといった各ブロックにラベルが表示され、写真のようにハーフトーンでそのブロックが内包する要素がわかりやすく表示される。"視覚"で直感的に理解できるよう工夫されているからこそ、誰でも簡単にWebサイトが作れるのだろう。

早速、上から順番にカスタマイズしていくことにしよう。まず、ヘッダのエリアにカーソルを合わせてクリック。するとエリア右側にメニューが表示されるので［BLOCK編集］をクリックしたら新たに［ブロックエディタ］ウィンドウが表示される。格好良いテンプレートを活かしてリデザインするので、設定などについては初期状態のものを活かし、文言や「SiGN」で作られたサイトロゴをカスタマイズしてみた。

文言の修正はテキストエディタを使用している感覚で行える手軽さ。また、サイトロゴのカスタマイズに至っては「SiGN」上でサクッと作成することが可能だ。「Bella Luna」と屋号のテキストを入力して「BiND4」に用意されたフォントもしくはOSで使用しているフォントからイメージに合ったものを選んでいくだけ。非常に簡単なのが嬉しい。

サイトロゴのカスタマイズも非常にカンタンで、サイトロゴの画像パーツをクリックすると写真のように右メニューに［SiGNを起動する］というボタンが表示される