きる で に 軽 気 、 く 楽し ピ ブ ック シ レ ン イ ザ デ ウェブ E * 2 で作る B iN D fo r W e b L iF ブサイト ウェ アイデアいっぱいの 編 ー・プロジェクト ウェブコンポーザ 監修 デジタルステージ
＋ちょっとしたアイデアで、
あなたのサイトは きっとずっと 楽しくステキな デ ザインに 変 身します ! 2.5
対応
本を見ながら学 べる
C D -ROM
fo r M ac in to sh & W in do w s
B iN D fo
r W eb Li FE * 2 トライアル 版 ＆本 書だけの 特 典プラグイ ン収 録
マネしてみたい B iND 2 のウェブデザインレシピを一挙掲載 !
Recette
1
画 面 を 左 右 に 分 割 して 、 写 真を 背 景 に 大 きく使 ったレイアウト
音楽のバンドのサイトをデザインしてみます。 情報量は多くはないですが、ビジュアル的なインパクトを強くしたいので、 バンド名と、ビジュアルを大きく扱うことにします。 両者を活かすために、ページを２つに分割してレイアウトしてみました。
ヘッダ
サ ン プ ル サ イト
ビルボード
使わない
使わない
http://book.mycom.co.jp/support/pc/bind 2 / 4 - 1 / 上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。
材料
サイド A
メイン
サイトロゴ
コンテンツとナビゲーション
フッタ 使わない
SiGN（見出しパーツ） ●左タイトル…テンプレートを選択＞タイトル＞ 795_150_01 ●メニューボタン…テンプレートを選択＞タイトル＞185_35_01 ●バナー…テンプレートを選択＞バナー＞200_50_01 写真 ●ウッドベースの写真、サックスの写真は、オリジナルを使用しています。
ここで作成するレイアウトの構造です。 ［B-1 横可変型 ビルボード＋サイド＋メイ ン］をサイトの基本の枠組みとして選択し て、レイアウトしていきます。ただし、ヘ ッダ、ビルボード、フッタは使用しません。
手 順 とコ ツ
画面を分割し、役割を割り当てる
116
レイアウトの基本は、画面をどのように分割するかを考
ート」のアルバムジャケットでよく使われるように、大
えることです。We b ページのなかには、タイトルや文
きな写真の領域と、細い白地の領域を作り、白地の領域
章、写真、ナビゲーションなどが混在することになるの
をサイトタイトルのスペースとして使っています。横書
で、画面をいくつかの領域に分割して、ここはタイトル
きの文字を縦にすることは、B i N D 2 の機能では不可能
の領域、ここは写真の領域というように機能を割り当て
ですが、いったん画像として保存して、それを回転させ
ると、それぞれの役割や位置づけが明確になって、わか
ることで実現しています。また、主要な要素を右寄せに
りやすいレイアウトになります。ここでは、バンドのサ
していますが、角から配置していくというのは、レイア
イトを制作していますが、ジャズのレーベル「ブルーノ
ウトをまとめやすい手法のひとつと言えます。
Pa r t 4 R ecet t es d e M i s e e n P a g e
完成図
ポ イ ント
いったん画像にして横書きの文字を回転させる
ヘッダとビルボードを消して左右２段組みにする
横書きの文字を回転させて配置するには、S i G N m i n i で見出し パーツとして作成し、ブラウザでプレビューして、画像として保 存します。これを画像として読み込むと回転できます。
ブロックに何も入れなくても、初期状態ではブロック自体に余白が設定され ているので、隙間ができてしまいます。 ［サイトエディタ］の［ページデザイ ン］と［ブロックエディタ］の［設定］の 2箇所で、余白をなくします。
117
Recette
2
余 白を 意 識してレイアウトした 趣 味 のサイト
趣味のサイトとして、陶芸の作品を紹介するサイトを作成します。 趣味のサイトなので、多くの情報を盛り込むというよりは、 シンプルで、余白を活かしたレイアウトで ゆったりとした雰囲気を演出したいと思います。
ヘッダ
サ ン プ ル サ イト
ビルボード
http://book.mycom.co.jp/support/pc/bind 2 / 4 - 2 /
サイトロゴとナビゲーション
ごあいさつの文章
メイン
上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。
写真
材料
フッタ
SiGN（見出しパーツ） ●ビルボード…テンプレートを選択＞ビルボード＞825_300_01 ●タイトル…テンプレートを選択＞タイトル＞795_150_01
クレジット
ここで作成するレイアウトの構造です。 「A-1 I型 ビルボード＋メイン」をサイトの 基本の枠組みとして選択して、レイアウト していきます。メインの幅が広いので、そ のなかでさらに３段組みにします。
写真 ●陶芸の写真は、オリジナルを使用しています。 ウェブサイトデザイン ●ブロックテンプレートに、標準12：ヘッダ／フッタ：グローバルメニューAを使っています。 ●メインのブロックレイアウトに、アルバム 3段を使っています。
手 順 とコ ツ
密度の対比で、余白を活かす
122
趣味のサイトとして陶芸のサイトを作成しているので、余
すると、文章のなかにも余白が生まれますし、それぞれの
白を活かしたゆとりのあるレイアウトにしたいと思いま
行で長さが異なることで、無機質なレイアウトにならずに
す。日本語の文章は、基本的に箱型にレイアウトします。
すみます。また、行間を広めにとることで、文章の密度を
しかし、箱形の文章に対して、同じように四角い写真をレ
下げることもできます。そして、余白と対比させるために、
イアウトしていくと、スペースが埋まってしまって、余裕
タイトルやメニューをコンパクトにまとめてみました。余
の感じられないデザインになってしまいます。詩をはじめ
白というのは、単にスペースをあけることではなく、密度
として、メールやブログなどでも、文章を意味の単位で改
の高い部分と低い部分の対比を作り出すことで、余白が明
行する方法が使われますが、このように文章をレイアウト
確に意識され、活きてくるのです。
Pa r t 4 R ecet t es d e M i s e e n P a g e
完成図
ポ イ ント
デジカメで撮影した写真をトリミング
文章を３段組みでレイアウト
S i G N m i n i では写真を配置することができますが、決まったサイ ズにあわせて、写真を拡大縮小したり、回転させたりして配置でき るので、トリミングをするためのツールとしても利用できます。
ブロックエディタの［設定］で、ブロックレイアウトを［目次］ 、オ プションを［３段］に設定し、ブロックエディタのなかで［分割］を ２箇所挿入すれば、３段組みのレイアウトが実現できます。
123
Recette
3
シンプルでクー ルなイメージの I T 系 企 業 のサイト
クールなイメージのIT系企業のサイトデザインを、 サイトのテンプレートやブロックテンプレートは使わずに制作してみます。 デザインを構成する素材は文字や区切り線などシンプルなので、 全体のバランスと細部のコントロールを重視して作成します。
ヘッダ
サ ン プ ル サ イト
ビルボード
サイトロゴ
使わない
http://book.mycom.co.jp/support/pc/bind 2 / 4 - 3 / サイド A
上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。
ナビゲーション
ヘッダ
メイン コンテンツ
ビルボード
サイド A サイトロゴ
材料 SiGN（見出しパーツ） ●サイトタイトル…バナー＞200_120_01 ●サイトキャッチ（We b B u s i n e s s C o n s u l t i n g ）…ビルボード＞545_80_01 画像 ●リンクアイコン… My Sources＞ Link_Arrow＞Square_wht_Right.png ●白い画像ファイル
フッタ
クレジット
ここで作成するレイアウトの構造です。 「C-1 左寄せ型 ビルボード＋サイド＋メイ ン」をサイトの基本の枠組みとして選択し て、レイアウトしていきます。ただし、ビ ルボードのブロックは使用しません。
手 順 とコ ツ
白い背景に白い画像を使って、区切り線の位置を調整する
128
I T 系企業のサイトは、シンプルですっきりしたイメー
ンが凝っているわけではないので、全体のバランスとそ
ジのデザインが多いようです。作り込まれた素材ばかり
れを実現する細部のコントロールが重要です。白い背景
を配置していくと、ひとつひとつのデザインはよくて
のデザインなので、白い画像のサイズを調整して配置す
も、全体としては、濃厚な印象になってしまうことがあ
ることで、罫線がきちんと揃うようにしています。画像
ります。そこで、サイトのテンプレートやブロックテン
を使って位置を調整する方法は、ウェブデザインの初期
プレートは使わずに、文字と罫線と余白で、クールな印
にも、多く使われていた手法です。こうした方法を利用
象のデザインを考えてみます。
することで、CSS を編集しなくても BiND2 で緻密な位
このようなデザインでは、ひとつひとつの素材のデザイ
置揃えが可能になります。
Pa r t 4 R ecet t es d e M i s e e n P a g e
完成図
ポ イ ント
位置を調整するために、白い画像を使用する
ブロックのなかに段組みを作成して余白を作る
1 × 8 0 ピクセルの画像を使って、位置を揃えます。画像の大きさ は、 ［画像エディタ］で 1 ピクセル単位で調整できます。これによっ て、左右の罫線の位置を揃えることができます。
ブロックのなかに段組みを作ると、段の設定によって内容を左右に 寄せることができます。これを利用すると、余白の調整が簡単にで きます。
129
Recette
4
配 色 の テ クニ ッ ク
シックなイメージの、バーのサイトデザインを使って、カラーの設定を紹介します。 効果的に色を使いたいとき、文字に色を付けるよりも、ブロックの背景色や見出しパーツを 使うと有利です。また、BiND2では、 「ブロックスキン」を使うことでカラーが
CSS上でまとめて置き換わることも覚えておくと便利です。
サ ン プ ル サ イト
http://book.mycom.co.jp/support/pc/bind 2 / 4 - 4 / 上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。
ここでは、BiND2 と SiGN mini でカラーリングを実践し てみます。左が、ここで最初に紹介するダーク目のカラー リング。右はバリエーションです。
材料 写真・画像 ●ビルボード…オリジナルを使用しています。サンプルデータに収録。 「sai_billboard.jpg」 ●メニュー用マーク…オリジナルを使用しています。サンプルデータに収録。 ウェブサイトデザイン ●オリジナルデータは、BiNDサイトの「BiND Cafe」をベースにデザインしています。 ●ページデザインは、A-3 I型ビルボード＋サイド＋メイン ●フォントは、Arno Pro（メニューボタン英字） 、MS ゴシック（メニューボタン部）を使用
手 順 とコ ツ
オリジナルなカラー設計について
134
書籍では、真っ黒な紙に白い文字で刷られた本や、白い
黒やグレー、ブラウン、ダークレッドといった暗めの中
紙にグレーで刷られた本というのはごく稀です。こうい
間色を上手に使うのは、読みやすく、個性的なサイトに
った表現があまり見られないのは、特に、インクを多く
するコツでもあります。 「システムカラー」のように彩
使って手が汚れやすくなったり、カスレが起こること、
度が高いものより、彩度が低い落ち着いた色を選んでみ
文字が細くなって読みづらいためです。
ると雰囲気が変わります。
ところが、印刷と違ってパソコン上の画面では黒字に緑
また一方、黄色、青、緑、オレンジなどの彩度の高い色
／白の文字という取り合わせもよくあります。コンピュ
は、モニターでは出せて紙では出せない色です。部分カ
ータの画面は、自らが発光していることもあって、真っ
ラー（アイコンやマーク、反転カラーなど）に使ってみ
白い画面を長時間見ると、逆に目が疲れます。そこで、
ると、よい結果が得られるかもしれません。
Pa r t 4 R ecet t es d e M i s e e n P a g e
完成図
ポ イ ント
ブロックの背景色 「ブロックエディタ」で［設定］タブを開くと、ブロックのスキン、 ブロックフレーム、背景色、背景画像が設定できます。背景色／背 景画像がチェックできます。
エリアの背景色 「エリア」は、 ［ページ設定］−［ページデザイン］タブで設定できる、 ブロックのひとつ上の枠組みです。背景色、背景画像、背景スキン がそれぞれ設定できます。
135
Recette
2
SiGN miniで サイトロゴを 作 ろう
ポイント的なイラストと文字を組み合わせて、印象的なサイトロゴを制作します。見出しパーツ制作の 専用ツールSiGN miniを利用して、文字にエフェクトを設定したり画像と組み合わせて仕上げます。
サ ン プ ル サ イト
http://book.mycom.co.jp/support/pc/bind 2 / 2 - 2 / 上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。
ここで作るのは、イラストと組み合わせたサイトロゴで す。ロゴをレイアウトする領域全体を同系色でまとめ、一 体感を出しています。
材料 写真画像 ●イラスト素材…（オリジナル素材）> candy.gif ●ペーパークリップのイラストアイコン… My Sources > SiGN_Icon > icon_bl_06.png ウェブサイトデザイン ●オリジナルデータは、BiNDサイトの「PET LiFE Pink」をベースにデザインを行っています。 ●デザインはA-1 I型ビルボード＋メイン ●フォントはVanDijkD、MittelschriftDinDに設定 ●ページ背景画像… My Sources > Background08 > pet_bg_02.gif
手 順 とコ ツ
同系色でまとめてイメージを統一する 背景色やロゴタイプ、イラストマークなどいろいろな要
054
を同系色でまとめると良いでしょう。オレンジ∼赤など
素を組み合わせたサイトロゴでは、それぞれの要素の差
の暖色系、青∼緑の寒色系など、背景色を含めたサイト
別化を図るために多数のカラーを設定しがちです。でも
ロゴ領域を同系のカラーだけで構成すると、統一感を出
サイトロゴを制作するときに重要なことは、個別の要素
すことができます。
を主張させることではなく、 「サイトロゴ領域」全体を
このとき、暖色系なら黄色や濃いエンジ、寒色系なら明
ひとつのまとまりとして認識させて印象を強めることな
るい黄緑や紫など、同じ系統で明度・彩度の異なるカラ
のです。
ーをポイント的に使用することで、領域全体の単調さを
最も簡単にイメージの統一感を出すには、カラーリング
避けることができます。
Pa r t 2 R ecet t es d u Te x te
完成図
ポ イ ント
イメージに合わせてフォントを選択する
イラストと文字を重ね合わせてデザイン
サイトのロゴを作成する場合、どのフォントを使用するかはとても 重要なポイントです。サイトのイメージに合わせて、親しみやすい もの、かっちりとした印象のものなどサイトに適したフォントを選 びましょう。 「*」や「@」 「!」などの記号をポイント的に使用すると、 面白い効果を出すことができます。
S i G N m i n i でテキストとイメージ画像を組み合わせることができ るテンプレートを選んで、ロゴをレイアウトします。背景画像領域 にイラストを読み込んでテキストと重ね合わせ、サイトロゴとして まとめます。
055
Reccete
4
バ ッ クグラウンド 写 真 の 上 に テキストデ ー タを 表 示 させる
「レイヤー」機能があるウェブソフトでは、画像と文字、文字と文字などを重ねて ウェブページをデザインできます。これは、基本的にはCSSを使用して実現しています。 ここでは、背景（バックグラウンド）と簡単なタグだけで同じような見た目にしてみましょう。
サ ン プ ル サ イト
http://book.mycom.co.jp/support/pc/bind 2 / 2 - 4 / 上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。 ※このサンプルは、写真データのダウンロードはできません。
写真は背景画像として設定することで写真の上にテキスト をレイアウトできます。
材料 ウェブサイトデザイン ●カートリッジは、空白ページを使用 ●ページレイアウトは、A-3 I型 ビルボード＋サイド＋メインを選択 ●フォントは標準のフォントを使用
手 順 とコ ツ
テキストを使いたい場合、背景画像を活かす手も
064
B i N D 2 ではページ全体や各エリアに、バックグラウン
貼り、画像全体を見せたい場合はどうすればいいのでし
ド画像を様々な指定で貼ることが可能です。
ょうか。
ただし、この指定のみの場合は、バックグラウンドを指
ここでは、バックグラウンドの画像を B i N D 2 で指定し
定したエリアに、画像サイズ以上の記事や画像などが入
つつも、タグを書き加えることで、バックグラウンドに
っていない限りは、バックグラウンドに貼った画像全体
貼った画像全体を表示させる方法を説明したいと思いま
の表示をしてくれません。
す。ここでもカスタムタグを使うので、トラブルに備え、
では、バックグラウンドに折り返しなしで、1 枚画像を
バックアップをしてからはじめましょう。
Pa r t 2 R ecet t es d e Te x te
完成図
ポ イ ント
ここに入力
［ページデザイン］で背景を設定
写真に合わせてブロックのサイズを広げる
［ページ設定］−［ページデザイン］タブで［背景画像］を設定します。 リピートを設定すると、写真が繰り返し表示になってしまうので、 「左中央」に設定します。
ブロックのサイズは、入力されたテキストや画像の分量に合わせて そのサイズが決まります。なにも配置せずにいると写真がすべて表 示できないので、サイズを広げるためタグを入力します。
065
Recette
1
背 景 画 像 を 使 い こな す
BiND2 にはページを彩るためのさまざまなテイストの背景画像が、あらかじめ多数用意されています。 これらの画像を効果的に組み合わせることで、手軽にスタイリッシュなイメージでサイトを構築すること ができます。よりオリジナリティを出したいときには、独自の画像素材を使用してもよいでしょう。コピ ー用紙や段ボールなどの身近なテクスチャを利用して、オリジナル背景のページをデザインしましょう。
サ ン プ ル サ イト
http://book.mycom.co.jp/support/pc/bind 2 / 3 - 1 / 上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。
ここで作るのは、オリジナルの背景素材を使用したサイトの トップページです。段ボールなどの紙素材をスキャンして、 ページ全体の背景とやサイトロゴ領域の背景として利用しま す。
材料 ウェブサイトデザイン ●オリジナルデータは、BiNDサイトの「Journal Gray」をベースにデザインを行っています。 ●デザインはA-1 I型ビルボード＋メイン ●フォントはStencilに設定 ●ページ背景画像… オリジナル素材 > bg_top.png オリジナル素材 > paper.jpg オリジナル素材 > bg_footer.jpg
手 順 とコ ツ
2 種類のページ背景画像を設定する B i N D 2 ではページ全体の背景として 2 種類の画像を指
数の画像を選択しましょう。
定することが可能です。画像に合わせてタイリングの方
この作例では「紙」を素材にした 2 種類の写真画像を利
法を変えることで、上部だけなど領域を指定して背景を
用しました。何の変哲もないコピー用紙をくしゃくしゃ
適用できます。複数の背景画像を使用するときは、それ
にしたものと段ボールを切り取ったものをそれぞれスキ
ぞれの素材が同じイメージを持つものを選択すると、ペ
ャナーで読み込み、背景素材として活用しています。身
ージ全体がちぐはぐな印象になりません。異なるパター
近なアイテムも画面上で表現することで、新鮮な印象に
ンの画像なら同系色にする、 「布」 「紙」など素材感が同
なります。
じ画像を使用するなど、背景同士が反発しないような複
080
Pa r t 3 R ecet t es d e Gr a phi que s
完成図
ポ イ ント
オリジナルの背景素材を用意する くしゃくしゃにしたコピー用紙を伸ばしたものと、切り取った段ボ ールそれぞれをスキャンして、背景素材を作成します。ページ全 体の背景として使用するくしゃくしゃの皺が入ったコピー用紙は、 幅・高さとも 1000ピクセル程度の大きな画像として用意しました。 ヘッダ・フッタ部分の背景として利用する画像は、Fireworksなど でシャドウが追加されるようにアレンジしておきます。ヘッダは幅 900 ×高さ 190 ピクセル程度、フッタは幅 830 ×高さ 75 ピクセル 程度としました。
背景素材のタイリングを指定する ［ページ設定］で、用意しておいた画像ファイルを読み込んで背景 画像に指定します。タイリングのポップアップから、画像を配置す る方法を設定します。
081
Recette
3
本 の かたちが 飛 び 出 た イン デ ッ クス ・ ボタン
特に強調したいコンテンツへの誘導は、ページ内で目を引くような構成が重要になります。 イラスト的なアイコンや写真画像と組み合わせると、視覚的なポイントを作ることができます。 ボタン領域の背景からアイコンなどを少し飛び出したように配置すると、 よりポイントが強調されて、目を引くボタンになります。
サ ン プ ル サ イト
http://book.mycom.co.jp/support/pc/bind 2 / 3 - 3 / 上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。
ここで作るのは、こんな印象的な形のボタンです。ボタン 領域の背景からアイコンなどを少し飛び出したように配置 すると、目を引くことができます。
材料 SiGN miniアイコン ●本アイコンのイラスト…オリジナル素材 > 80_004_1_RE.png ●「i」マークのイラスト…オリジナル素材 > 80_005_1_RE.png ●ボタン背景画像… My Sources > SiGN_Photo > 250_80_wht.png ウェブサイトデザイン ●オリジナルデータは、BiNDサイトの「Milk Grid」をベースにデザインを行っています。 ●デザインはA-1 I型ビルボード＋メインレイアウト ●フォントはFranklin Gothic Book、Franklin Gothic Medium、ヒラギノ角ゴ Pro W3に設定 ●ページ背景画像… My Sources > Background08 > 001_middlebg_blu.jpg
手 順 とコ ツ
「透明」を活かして 「飛び出し」を表現する
088
ボタン画像のファイル形式を「P N G」に指定し、背景
んありません。重要なことはそのパーツごとの配置では
透明度を「0」に設定することで、背景画像を配置して
なく、ボタン全体のレイアウトを整えることです。
いない領域を透明にすることができます。この透明な領
また、部分的に飛び出して見えるボタンを作成すると
域とアイコンを重ね合わせることで、イラストが「飛び
き、イラストアイコン自体も立体的に表現されているも
出して」見えるような画像を作成します。
のを使用すると、より効果が高まります。イラストでは
S i G N m i n i のテンプレートでは、画像やテキストがレ
なくデジカメなどで撮影したステイショナリーやノート
イアウトできる領域があらかじめ固定されていますが、
P C などの写真を、背景を削除した「切り抜き」画像と
その領域全体を使用しなければいけない決まりはもちろ
して用意して利用しても良いでしょう。
Pa r t 3 R ecet t es d e Gr a phi que s
完成図
ポ イ ント
テンプレートのバリエーションを選ぶ
透明を活かすデザインに必要な設定
テンプレートにはいくつかのバリエーションが用意されています。 作成したいイメージにあった構成のテンプレートを選択しましょ う。この作例では背景とアイコン領域それぞれに画像をレイアウト できるテンプレートを選びました。
ファイル形式を「 PNG」に設定し「背景透明度」を「0」に設定するこ とで、画像がレイアウトされていない領域を透明な状態にできま す。ボタン領域の一部に空きができるように背景画像をレイアウト します。
089
Recette
4
S i G N m i n i で アイコンを 組 み 合 わ せたメニュ ー を 作 る
背景、イメージアイコン、ポイント的な矢印の3種類の画像を組み合わせたメニューを作成します。背景 画像は上半分をパターン、下半分をベタ塗りにして、立体感のある地を表現しましょう。
サ ン プ ル サ イト
http://book.mycom.co.jp/support/pc/bind 2 / 3 - 4 / 上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。
材料 写真画像 ●ボタン背景素材… My Sources > Background > Bias05.gif ●アイコン素材… My Sources > Big_Icon > World.png My Sources > Big_Icon > About.png My Sources > Big_Icon > Attention.png My Sources > Big_Icon > Chart.png My Sources > Big_Icon > Dl.png My Sources > Link_Arrow > shadow_gry_Right.png
ここで作るのは、アイコン画像を使用したメニ ュー画像です。背景、アイコン、矢印の 3 種類 の画像を組み合わせて、1 つのメニュー画像を 作成しています。
ウェブサイトデザイン ●オリジナルデータは、BiNDサイトの「Cafe Blue」をベースにデザインを行っています。 ●デザインはA-1 I型ビルボード＋メイン ●フォントはSnv D Regに設定 ●ページ背景画像… My Sources > Background 08 > cafebar_bg2_BU.jpg My Sources > Background 08 > 001_middlebg_blu.jpg
手 順 とコ ツ
背景の質感に変化を出す B i N D 2 には背景に使用するための画像が、さまざまな サイズ設定・カラーリングで用意されています。これら
濃色ベタ塗りとしました。メニューボタンの背景が、上
の画像はそのままメニューボタン背景としても利用でき
半分にハイライトがあたっているような立体感のある表
ますが、画像の一部だけを使用することもできます。メ
現になります。
ニューボタンに立体感を出すために、この作例では上半
094
分にストライプパターンの背景画像を指定し、下半分は
Pa r t 3 R ecet t es d e Gr a phi que s
完成図
ポ イ ント
3 つの画像がレイアウトできるテンプレートを選ぶ
パターンの背景画像を上半分だけにレイアウトする
テンプレートを選択するときは、作成したい画像のサイズに合わせ たものを選ぶことはもちろんですが、画像のレイアウト位置や種 類、テキスト要素の挿入位置なども吟味して選ぶことが大切です。
読み込んだ背景用のストライプパターンは、IMAGE 領域の上半分 だけに表示されるようにトリミングします。
095
Recette
5
S i G N m i n i で印 象 的な ビ ル ボ ードを 演 出 する
長方形ブロックごとの領域を組み合わせてページを構築することが基本になるウェブサイトのレイアウ ト性質上、ページ内では水平垂直の区切りが多くなります。ビルボードの画像を回転させて配置するこ とで、単調になりがちなレイアウトに視覚的な変化を出すことができます。
サ ン プ ル サ イト
http://book.mycom.co.jp/support/pc/bind 2 / 3 - 5 / 上記 URL で実物のサイトが閲覧できます。また、このサンプルは BiND2 で開 けるサイトデータも本書サポートサイトでまるごとダウンロード可能です。 ここで作るのは、写真画像を回転させたレイアウトのビル ボードです。ペーパークリップのアイコンと組み合わせて、 写真が机の上に置かれているようなイメージを表現します。
材料 写真画像 ●工場の写真素材…（オリジナル素材）> pg_factory.jpg ●ペーパークリップのイラストアイコン… My Sources > SiGN_Icon > icon_bl_06.png ウェブサイトデザイン ●オリジナルデータは、BiNDサイトの「Camera Wall」をベースにデザインを行っています。 ●デザインはA-2 I型ビルボード＋メイン+サイド ●フォントはヒラギノ明朝 Pro W6に設定 ●ページ背景画像…（オリジナル素材）> whitepaper.jpg
手 順 とコ ツ
リアルな事物で現実感を演出する
098
クリップや鉛筆、万年筆などのステイショナリーや、紙・
S i G N m i n i では、メインの写真画像のほかにポイント
木目の質感など実際に存在するものをリアルなイラスト
的に画像をレイアウトできるテンプレートを選択して、
や画像でウェブページ内に表現すると、現実感が生まれ
2 種類の画像を重ね合わせたビルボードを作成します。
印象が強くなります。この際、ウェブページレイアウト
また背景の［S H A P E］領域は、写真画像の輪郭が映え
の基準になる水平・垂直の方向線を崩すような位置にレ
るような色に設定します。この作例では写真画像内の背
イアウトすると、より現実感を強く出すことができます。
景の明るい色が引き立つように、黒色に設定しました。
Pa r t 3 R ecet t es d e Gr a phi que s
完成図
ポ イ ント
文字のアンダーラインを罫線に利用する
画像を回転させて画面に変化を
文字の装飾「アンダーライン」をスペースを入力した行に設定する と、罫線だけを領域内に追加することができます。アンダーライン を適用した複数の行を入力すると、画像と罫線を組み合わせたビル ボードが作成できます。
S i G N m i n i では、読み込んだ画像を回転させることも可能です。 部分的に画像を回転させてレイアウトすると、画面に変化を出すこ とができます。
099