▲即使える！素材の作り方

・ワードで「素材の元」（バナー・ボタンの元デザイン）を作ろう編

　この章では、ワードを使って「バナー」や「ボタン」「アイコン」の元をつくる方法を説明しています。
　この章で作った「素材のもと」は、次章で説明する作業方法により、
　フォトエディターなどを使ってホームページ用の画像ファイルに変換する事ができます。

１）バナー・ボタンの枠を作る。

まずは、素材の土台となる枠を作りましょう。 �@）ワードを立ち上げましょう。（特に説明は必要ないと思います） �A）図を操作しやすいように「図形描画」のツールバーを表示させましょう。 「表示」→「ツールバー」→「図形描画」の順にクリック。 ↓ 図形を操作しやすいようにツールバーが表示されます。 ↓ → ワードの下の方にこの様なツールバーが表示されればOK。 （初めから表示されていればここでの作業は不要です。） �B）オートシェイプから好きな形の枠を選ぼう。 ↓ 図形描写ツールバーの「オートシェイプ」をクリックし、 バナーやボタンの土台にしたい形を選びます。 ここでは、「基本図形」の中から「立方体」を選んでみました。 ＊注意 ワードのバージョンにより、図形をクリックしただけでは図形が挿入されない時もあります。 その際は、ドキュメント内の図形を表示したい場所でもう一度クリック。 　　↓ → この様に、選択した図形が表示されればOK。 �C）図形の形や大きさを調整しましょう。 → 図形の周りに表示される「ハンドル」（白や黄色の小さな点）を使い 図形を希望の形に調整します。 （やり方） ハンドルの上で、マウスを左クリックしたままマウスを移動させ、 希望の場所でマウスボタンを離します。 主に、「白」のハンドルで大きさを調整し、 「黄色」のハンドルで奥行など、図形固有の特徴を調整できます。 「緑」のハンドルは回転ですが、ここでは、これは使わない事をお勧めします。 基本的なこと 図形の上でマウスをクリックすると「ハンドルが表示」されます。 図形の外でマウスをクリックすると「ハンドルは表示されません。」 �D）図形に色を付けましょう。 図形の上で、マウスを右クリックするとメニューが表示されます。 「オートシェイプの書式設定を」クリックします。 → 「オートシェイプの書式設定」画面が表示されるので、 「色と線」のタブの中の 「塗りつぶし」の色（初期値では白）と、 「線」の色（初期値では黒）を指定します。 （やり方） 左図の▼の部分をクリックすると色が選択できます。 ↓ ここでは、 「塗りつぶし」の色を薄いオレンジ 「線」の色を濃いオレンジにしてみました。 ここまでで、「バナー・ボタンの枠をつくる」は完了です。 「塗りつぶし」の色を指定する際に「塗りつぶし効果」からグラデーションや、テクスチャを使うと、 他にも、いろんな枠が作れます。 グラデーション　　テクスチャ

	２）バナー・ボタンの文字をつくる。
	次に、バナーやボタンに表示させる文字を作りましょう。 ワードアートできれいな文字を作る方法を説明します。 �@）ワードアートの挿入画面を起動。 ↓ 　　　　→ （ここでの操作について） ワードアートギャラリーでは、３０種類のデザインから選択することが できますが、ここでは、最も単純な「無色」「原形」のものから加工 してゆく方法を説明しています。 ギャラリーの中から、好きなデザインを選択した場合は、 以下の多くの説明を省略することができます。 「図形描画」ツールバーのワードアート起動ボタンをクリック ↓ ワードアートギャラリーが立ち上がります。 ↓ 以下では、最も左上端の「無色」「原形」のもの を選択して、加工してゆく方法を説明しています。 （左上端を選んでOKをクリック） �A）ワードアートのスタイルを選択し、文字を入力。 ↓ → ワードアートギャラリーを選択し、OKをクリックすると、 ワードアートに入力する文字の編集画面が表示されます。 初期値では「ここに文字を入力」となっているので、 これを好きな文字に書き換えます。 初期値では、フォントが「MS Pゴシック」になっているので これを好きな字体に変更します。 初期値では、サイズが「３６」ポイントになっているので、 これを好きな大きさに変更します。 それらの入力が終わり「OK」をクリックすると、 ワードアートが挿入されます。 ↓ �B）ワードアートを扱いやすい形式に変換。 ワードアートの上でマウスをクリックすると、下の図のように表示されます。 このままでは、サイズ変更や、移動が行いにくいので、 図形として扱いやすい形式に変換しましょう。 ワードアートの上でマウスを右クリックし、 「ワードアートの書式設定」を選択。 ↓ 「ワードアート書式設定」の中の、 「レイアウト」タブをクリックして表示させます。 初期値では、「行内」になっていますので、 これを「前面」にします。 「前面」の画像上でマウスをクリックし、 「OK」でこの画面を閉じます。 これで、マウスでクリックしたときに、下の様に表示されるようになりました。 これは、１）のオートシェイプの時と同じ表示ですね。 この状態にしておくと、サイズ変更や移動が簡単に行えます。
	�B）ワードアートの色、大きさを変更 オートシェイプの時と同じ要領で、大きさや色を自由に変更できます。 上の「１）バナー・ボタンの枠をつくる」の�C）�D）をワードアートに置き換えて、 色、大きさをお好みに変更しましょう。 ここでは、大きさを１）で作った枠の大きさにあわせ、 「塗りつぶし」の色を濃い青に、 「線」を「線なし」にしてみました。 ↓
	�C）ワードアートの形の変更 ワードアートを、面白い形に変更してみましょう。 ワードアートの上で、マウスをクリックし、ハンドルが表示されている状態にしてみてください。 ワードアートのツールバー（下図）が表示されると思います。 表示されていない場合は、 「表示」→「ツールバー」→「ワードアート」 とクリックして表示させます。 Abcと書かれたボタンをクリックして、好きな形を選びましょう。 ここでは、右上がり２をえらんでみました。 形を変更すると、大きさなども元のイメージと変わってきますので、 もう一度、大きさなども編集してみましょう。 ここの例では、 「ワードアートの編集」で斜体表示を選択し直し、 大きさ（縦の高さ）を大きくしました。
	�D）ワードアートに影をつける ↓ 「図形描画」ツールバーの影設定ボタンをクリックし、 「影の設定」を選択してください。 影の詳細まで設定できるツールバーが表示されます。 ↓ → ＊注意 これらの作業（以下の作業も含め）は、ワードアートの上で、 マウスがクリックされた状態（ハンドルが表示されている状態） で行ってください。 ↑ 影ボタンの横の小さな矢印をクリックすると 影の色が選択できます。 希望の色をクリックすると、その色の影がつきます。 また、のボタンを使い、 影の方向の微調整が行えます。 ここでは、「赤」の影をつけて方向調整をしました。 ここまでで、「バナー・ボタンの枠をつくる」は完了です。 「塗りつぶし」の色を指定する際に「塗りつぶし効果」からグラデーションや、テクスチャを使うと、 他にも、いろんな文字が作れます。 グラデーション

３）枠と文字を組み合わせて、バナー・ボタンにする。

１）でバナー・ボタンの枠ができました。 ２）でバナー・ボタンの文字ができました。 これを組み合わせてバナーやボタンを作りましょう。 �@）オートシェイプで作った枠と、ワードアートで作った文字を重ね合わせる。 １）で作った枠 の上に、２）で作った文字 を移動するだけです。 （移動の仕方） 移動させたい図形やワードアートの上でマウスを動かし、カーソルが十字 になる場所を探しましょう。 カーソルが十字になった状態のときにマウスを左クリックしたまま動かすと、図形を移動させる事ができます。 移動させたいところで、マウスボタンを離せば、そこに図形が移動されます。 また、移動させたい図形にハンドルが表示されている状態で、↑→↓←のカーソルボタンを使い 小刻みに移動することもできます。 �A）飾りつけをする。 １）で枠を作ったときと同じ要領で、飾り付け用の小さな画像をいろいろ作って見ましょう。 要領は、１）と同じ。 オートシェイプの形をひし形や三角でつくり、 ワードアートと同じ要領で、影などを付けて飾りらしくしましょう。 ここでは、下のようなひし形の図形を三つ作ってみました。 これらの飾り画像を、上と同じように、バナー・ボタンの枠に重ね合わせます。 ここまでで、ワードでできる作業は完了です。 説明の都合上、あまり凝ったものにはしていませんが、様々な設定を細かく調整することにより、 もっと綺麗なボタンなども作成できます。 　　　　 ← このサンプルの作り方は、応用編に詳しく書きました。 簡単な図解ですが、ココまでの説明が理解できれば、 内容は分かると思います。 - 応用編 -

Q＆A　ワードアートやオートシェイプの重なり方の順番を変えたいときは。
　↓
下にしたい画像のうえで、「右クリック」→「順序」→「最背面へ移動」を選択する。

もしくは、上にしたい画像の上で「右クリック」→「順序」→「最前面へ移動」を選択する。