いよいよ完成!「BiND for WebLiFE* 4」を使った筆者のWebサイト

筆者のWebサイトを完成させる!

前回トップページのリデザイン作業が終了するところまでお伝えしたが、いよいよ今回でフィニッシュにまで仕上げようと遣る気を奮い立たせる筆者。残るは「自己紹介」、「ポートフォリオ」、「コンタクトフォーム」の計3ページだ。"テンプレートの良さを活かして自分のイメージに近づけていく"という「BiND4」の特徴を存分に発揮して、残りのページをリデザインしていこう。

・HTML5対応!テンプレートでクールなWebサイトを簡単作成「BiND for WebLiFE* 4」
・実際に「BiND4」でHTML5対応のスタイリッシュなWebサイトを作ってみる!

「自己紹介」ページをリデザイン

「自己紹介」ページで伝えたいこと。ライター渡部仁という人間がどのような人となりなのか、どのような経験を積んできたのか、どんなパーソナリティを持っているのか……。伝えたい要素から考え、自己紹介の一文と「BiND4」に用意された［テーブルパーツ］を使って、簡単な年表を作成してみようと思う。

では、早速作業に入ろう。「Style」テンプレートの「News」ページをベースとしてリデザインしていくのだが、まずビルボードを写真のようにカスタマイズしてみた。イラストで描かれた似顔絵の一部分だけを表示させることで目を惹くように工夫してみたのだが如何だろうか。

次に、自己紹介の一文と簡単な"自分史"を盛り込むメインブロックの編集に入る。所持状態では、サイト制作日を表示するパーツ、小見出し、区切り線が入り、写真と文章といった要素が入っている。今回は、小見出しに区切り線、写真と文章でまずはワンブロック作成してみた。「BiND4」では、写真と文章の回り込み処理なども自動で行ってくれ、作業自体が非常にカンタン。そのため、「こんな要素を盛り込んでみようか?」「こんな表現はどうだろう?」といった、制作時に浮かんでくる閃きをスポイルすることなく創作的作業として実践する手助けとなってくれるのだ。

さて、次は［テーブルパーツ］を使った自分史の制作に移るわけだが、何ら難しいことはないので安心して欲しい。メインブロックでマウスをクリックし、［追加］ボタンを押してひとつカラのブロックを用意する。そして、そのブロックを［ブロックエディタ］で編集する際に［パーツ一覧］のなかから［テーブルパーツ］を選択しよう。すると、［テーブルパーツ・エディタ］が起動し、テンプレートの一覧が表示される。そのなかから、自分の用途にあったものを選択すればオーケーだ。ここでは、［会社概要］のテンプレートをカスタマイズして"自分史"を作成してみたが、行や列の追加や背景色の変更など、こだわりを持ってカスタマイズすることも可能だ。

「ポートフォリオ」をリデザイン

さて、お次は「ポートフォリオ」の制作へと移るのだが、「Style」テンプレートに用意されている「Coordinate」をカスタマイズすることにした。この「Coordinate」ページのテンプレートは写真が多く使われており、いくつか作例を見せたい、商品を見せたいといった用途において使い勝手が良い。早速「Coordinate」がら「ポートフォリオ」へとリデザインしていこう。

「自己紹介」ページと同様にビルボードを修正し、不必要なブロックを削除する。そして、メインブロックの編集を行うのだが、一見複雑そうに見えるデザインであっても、そのテンプレートのデザインを保持したまま使用されている写真を差し替えるだけで、あっという間にオリジナルのページとしてリデザインできてしまう。難しさを徹底して排除した「BiND4」ならではの操作感に脱帽だ。