"フルCSSプロフェッショナルテンプレート"搭載! 新生「ホームページ・ビルダー15」

ジャストシステムは、定番ホームページ作成ソフトである「ホームページ・ビルダー15」を12月3日より販売開始した。ホームページ・ビルダーは当初IBMからリリースされていたが、今回のバージョン15では、すべての開発をジャストシステムで行った"ホームページ・ビルダー"となり、さまざまな機能拡張、CSSやデザインテンプレートをフル活用できる"新生ホームページ・ビルダー"となる。

開発にあたり、ジャストシステムでは、これまでのユーザーからの要望や実際の利用形態を綿密に調査、ホームページ・ビルダーに求められる機能として何が必要かを再検討。PCから携帯ホームページ、個人の趣味でのWeb作成から商用利用まで、拡がり続けるWebを作成するツールとして幅広く対応する。たとえば、iPhoneやiPadなどでの閲覧利用を考えてjQueryスライドショー作成など、動的なWebサイトを驚くほど簡単に作成する機能。

また、ホームページ・ビルダーは、商用ユーザーも多く、ネットショップ作成などでの利用も多い。アクセス解析機能を追加し、集客に有効な手ががりを得ることができるような仕組みなど新機能を数多く搭載している。同社Webサイトではこれらについて一望できるが、本稿では、新機能の目玉ともいえるフルCSSプロフェッショナルテンプレートを中心にとりあげてみよう。ホームページ・ビルダー15のシステム要件であるが、以下の通りである。

1. OS：Windows 7(64bit版ではWOW64で動作)、Vista(SP1)32bit版、XP(SP3)32bit版の日本語版
2. メモリ：使用するOSが推奨する環境以上(aDesigner2を利用するには、1GBytes以上)
3. HDD：1GB以上の空き領域

となる。ホームページ・ビルダーは、多くの製品ラインナップを用意している。詳細は、ジャストシステムのWebページ、もしくは、こちらの記事を参照してほしい。

フルCSSプロフェッショナルテンプレートとは

ホームページ・ビルダー15の新機能であるフルCSSプロフェッショナルテンプレートは、CSSでレイアウト、デザインされたテンプレートである。これまでのホームページ・ビルダーは、テーブル組と指摘されることも多く、ジャストシステムでもこの点を今回のバージョンアップで大きく改善している。CSSは正式名称をCascading Style Sheetsといい、HTML文書などの構造と装丁(デザイン)を分離するものである。CSSを利用することでデザイン性の向上、デザイン変更などが容易になる。ホームページ・ビルダー15では、これらCSSテンプレートを新搭載しており、業種目的などに応じたテンプレートやプロが作成した高品質なテンプレートが収録されている。

企業、店舗、クリニック、飲食店、美容室、不動産、宿泊施設、ネット販売、団体チーム、保育学習、趣味といったテーマが用意されている。さらにテーマごとに、2～3のデザインの異なるテンプレートも用意。実際に、企業のテンプレートを見てみよう。[ファイル]→[フルCSSプロフェッショナルテンプレートから新規作成]を選択する(図3)。

[1ページ]と[複数ページ]があるが、[1ページ]はいわゆるトップページのみとなる。[複数ページ]では、トップページ以外にも、会社方針、採用情報といった一般的な企業のホームページとして必要となるページがあらかじめ作り込まれている。さらにレイアウトも複数用意されている。

メニューバーの[全体の確認]をクリックすると、構成されるページがわかる(図5)。

図6は、よくある「お問い合わせ」ページである。

入力フォームも作られており、ほとんどそのままで使うことができる。

フルCSSプロフェッショナルテンプレートからの変更

フルCSSプロフェッショナルテンプレートを利用するには、テンプレートで「○○○○」なっている文章部分を本来のページに合わせて変更していく作業を行う。実際、やってみよう。ここでは、店舗テーマからインテリア雑貨デザインを選び、修正してみたい。まずは、ショップ名をマイコミショップ(MAIKOMI SHOP)に変更する。文字のある部分にカーソルを移動し、そのまま文字を入力するだけである。

個々に修正してもよいが、あらかじめテキストを作成しておき、コピー&ペーストをすると早いかもしれない。商品紹介の写真び変更は、元の写真をクリックで選択する(図8)。

メニューバーの[デジカメ写真の編集]を選択する。写真挿入ウィザードが起動するので、写真を選択する(図9)。

途中で、簡単な画像補正なども可能である。実際に変更したものが、図10である。

さて、ページ上部(ヘッダ)の文字の修正を行ったのであるが、この部分は共通部分となる。他のページをプレビューすると、直っていない(図11)。

編集ページに戻り、メニューバーの[共通部分の同期]を選択する。同期すべきページなどが表示されるので適切に選択し、[完了]をクリックする。

背景画像など変更した場合は、スタイルシートの変更(つまりすべてのページを変更するか)、そのページのみ変更するかの確認が行われる(図13)。

瞬間デザインチェンジ

フルCSSを採用したことにより、スタイルシートを変更するだけで、瞬時にサイトのデザインを大きく変更することができる。[編集]→[瞬間デザインチェンジ]を選択する。瞬間デザインチェンジのダイアログが表示されるので、変更するデザインを選択する。

HTMLの内容はそのままデザインのみが変更される(図15)。

このように、Webデザインの知識がほとんどなくとも、テンプレートを修正するだけで、デザイン性の高いサイトを構築できる。フルCSSプロフェッショナルテンプレートは、バリューパックでは28セット収録されている。デザインにこだわりたいのであれば、こちらも検討に値する。ホームページ・ビルダー15には、フルCSSプロフェッショナルテンプレート以外にも便利な新機能が多数追加されている。本稿では紹介できなかったが、ジャストシステムのホームページにも紹介されているので、興味があればぜひ参照していただきたい。