2016.02.27 [土] ホームページ・ビルダー付属の「ウェブアート デザイナー」
前回までで、どんなWebサイトを制作するか決まりました。では、久しぶりにホームページ・ビルダー14を起動したいと思います。
以前、サイト設定したフォルダにWebサイトを構成するフォルダを作っていきましょう。
index.htmlは最初に作ったファイルで、こちらがTOPページのファイルになります。
さらにJavaScriptのファイルを入れておく「js」、写真などを入れる「images」、スタイルシートを入れる「css」とそれぞれフォルダを作ります。
フォルダの構成ができたら、ホームページ・ビルダーを起動します。
あいかわらず、編集スタイルはスタンダードです。
「サイトを開く」ボタンを押して、先ほどのサイトを選択し、index.htmlをダブルクリックしていきます。
まだ、<body></body>内に何も書いていませんので、ページ編集画面では真っ白です。
ウェブアート デザイナーで素材を作る
Webサイトのデザインや素材の作成は、一般的にAdobeのPhotoshop, Illustratorなどを利用します。
ただ、プロの現場でも利用されるアプリケーションですので、操作が複雑だったり、購入費用がかかります。
そこで、ホームページビルダーに付属している「ウェブアート デザイナー」というソフトを利用して、素材を作成します。付属ソフトの割には意外と使えるソフトです。
※ちなみに、トライデントコンピュータ専門学校Webデザイン学科では、Adobe Photoshop, Illustratorを利用してWebサイトの制作をおこなっています。
まずは、メニューのツールから「ウェブアート デザイナーの起動」を選択し、ソフトを起動します。
でもやっぱり、そのままでは使いづらいですので、環境設定で使いやすく設定していきます。
「表示」タブを押して、上記のように変更していきます。グリッド（ガイドライン）を10px×10pxで表示させます。
吸着でもできるように「グリッドに合わせる」のチェックも入れます。あまり濃いグリッドですと、制作の邪魔になりますので、色を薄いグレー、形状を破線に変更して、OKを押します。
キャンバスサイズ（作業画面のサイズ）の横幅を640px、縦幅を1136pxに設定します。
このサイズはiPhone5用のサイズです。昨年までは、日本ではこのサイズで問題なかったのですが、今年に入ってからiPhone6が使用台数で逆転したようです。
ただ、Appleから新しくiPhene5と同じサイズのiPhone5seが販売されるという噂もありますので、今はこのサイズで良いでしょう。
では、ロゴを配置します。上部の「ファイルから貼り付け」ボタンを押して、ロゴファイルを選択するとキャンバスにロゴが配置されます。画像をダブルクリックすると、オブジェクトの編集画面がダイアログで表示されます。
「縦横比の保持」のチェックを確認して、ちょうどいい位置、サイズを設定します。
続けて、メイン画像を配置します。「ファイル貼り付け」からサイズの編集までは一緒です。
画面表示が大きいので小さくしたいのですが、「ウェブアート デザイナー」に準備されているのは、1/2, 1/3, 1/4です。
まぁ、このぐらいでもいいですね。ちなみに拡大は2倍, 3倍, 4倍です。
またメイン画像も、もともとの写真の比率ではなく、Webサイトに合った任意の比率でレイアウトしたいです。しかし「四角形で切り抜き」ツールはあるのですがサイズの設定ができません。
そこでイレギュラーな使い方をします。まずメイン画像を配置し、サイズを少し大きめにしておきます。
「四角形（塗り潰しのみ）で四角形を作ります。ダブルクリックして、オブジェクトの情報で色をわかりやすい色に、サイズをWebサイトに合った任意のサイズ・比率にします。
四角形の透明度を上げると透けて、写真画像が見えるようになりますので、切り抜いた時に丁度いいサイズ・位置に調整します。
このウェブアート デザイナー上でサイズの拡大縮小をしても、画像は著しく劣化していないようですので、元サイズより小さい状態であれば、試行錯誤しても大丈夫です。
さて、ここからが重要です。
右側の「オブジェクト スタック」で四角形のオブジェクトをクリックします。
「オブジェクト スタック」とはAdobe製品などのグラフィックソフトでいうレイヤーのようなもので、重なりを表しています。
「四角形で切り抜き」ツールを選択し、四角形のオブジェクトと同じ大きさの選択範囲を作ります。
最初の環境設定で「グリッドに合わせる」にチェックが入っているため、吸着してちょうど同じ大きさになるかと思います。
ハンドルをドラッグすることで編集も可能です。
そのまま、オブジェクトメニューの非表示（ショートカットのctr + Hでも可）を押して、切り抜きボタンを押します。
こうしないと上に乗ったサイズ確認用の四角形も一緒に切り抜きされますので、非表示にしておきます。
狙ったサイズ、トリミングで切り抜きできた画像を正しい位置にレイアウトして、「四角形」「元の画像」を非表示にして、コピーなど文字を配置します。
文字と写真は「グループ化」などもできますので、一緒に動かしたいものはグループ化しておくといいです。もちろん解除もできます。
Web用に画像を保存する
<header>部分の画像は、このぐらいですのでWebサイト用に書き出します。
その前にウェブアート デザイナーのデータを任意の場所に保存します。拡張子が.mifのファイルです。
続いて、ロゴのオブジェクトを選択して、ファイルメニューから「Web用保存ウィザード」を選択します。
保存対象の選択「選択されたオブジェクトを保存する」→保存形式の選択「JPEG」→JPEG属性の設定「そのまま」→保存方法の選択「ファイルに保存」と進んで、今回サイトに設定した「images」に「logo-sp.jpg」という名前で保存します。
メイン画像も同じようにWeb用に保存していきます。
オブジェクトを選択して、右クリックでも「Web用保存ウィザード」メニューが出てきます。
今回、初めてウェブアート デザイナーを利用したのですが、正直、驚きました。
意外と使えるんじゃないでしょうか。
もちろん、Photoshopのほうが細かい部分や、複雑な形は作りやすいと思いますが、「オブジェクト スタック」や「グループ化」「グリッド機能」「Web用に保存」など必要最低限の機能はありますので、画像のトリミング、記事内の写真を扱う程度であれば十分だと思います。
では、いよいよコーディング作業に入っていきたいと思います。
ホームページ・ビルダー14でWebサイトを作るシリーズ過去記事
- 関連記事
-
- ホームページ・ビルダーでheader周りをコーディング (2016/03/01)
- ホームページ・ビルダー付属の「ウェブアート デザイナー」 (2016/02/27)
- ホームページ・ビルダーで作業する前に (2016/02/15)
- ホームページ・ビルダーで<head>内を記述していく (2016/01/27)
- ホームページ・ビルダーでWebサイト制作 (2016/01/25)
