レッスンで使用します各講座の完成サンプルと解説

「パソコン入門講座」の1場面です。

「Google マップ」というインターネット上の地図を開いて、その画面にマウスでマーキングをしているところです。

この画面をメールで送ったり、印刷することが簡単にできます。

「図形描画ツールバー」の使用例で作成するサンプルです。

テンプレートをもとに「ワードアート」や「クリップアート」 を挿入すれば簡単に文書の表現力を高めることができます。

講座では表と罫線の編集操作や段区切りなどの文章レイアウト、長文を想定した目次項目の作成など全般に渉って学びます。

応用サンプルの作例。

野菜の栄養素の比較データを「集合縦棒グラフ」にしました。

ビタミンＡの数値が他のデータよりも桁数が多いので、この項目のみ折れ線グラフに変更しました。

どんなに複雑な数値データでも、グラフ化することで簡単に比較分析できます。また、データリストの変更も即座にグラフに反映させることができます。

テンプレートを使った例。

テンプレートから作成すればフォトアルバムも簡単に作成することができます。

PowerPointにはデザイン性にすぐれたテンプレートが多数用意されており、これらをもとにカラー・フォント・効果といったテーマを組み合わせると短時間でプロ使用のプレゼンテーションが出来上がります。

Webフォトギャラリー
ポストカード

Photoshop Elements の「写真整理モード」は、単に画像の整理だけではなく、「作品」コマンドを利用すれば「スライドショー」「テレビで再生できるVCD」「アルバムページ」「グリーティングカード」「年賀状などのポストカード」「カレンダー」「Webに公開できるWebフォトギャラリー」などの作品が簡単に作成できます。

画像の管理方法ととも作品作成機能を使ってさまざまな作品を作成します。

「写真編集モード」では、ツールを使った写真のレタッチ術はもちろん、特に、選択ツールの扱い方やレイヤーパレットでのレイヤー操作に慣れていただけるように十分な時間をとっています。

ツールの扱い方に慣れてこられた頃、皆さんが撮影された写真を題材にしてオリジナルな作品に仕上げていっていただきます。

ご自分で撮影された写真であればツール操作も丁寧になり、なによりも楽しんで作業できるのではないでしょうか。

※ 当サイトの「ギャラリー」には大きなサイズの写真を展示しておりますので、これらを自由にダウンロードして写真編集の練習にご利用ください。

レイヤーの仕組み
ブラシツール

Photoshop Elements の「作成モード」には、背景に使うサンプルや、小物のグラフィック、イラスト、テキストなどがたくさん用意されています。その中から「帽子」を使ってみました。

「編集モード」に戻って、帽子のレイヤーに「レンズフィルター」をかけると、レイヤーパネルには専用のレイヤーが作成され、麦藁帽子がファッショナブルな帽子に変身します。

パソコンで絵を描く場合は、レイヤー機能を頻繁に使いますのでしっかりマスターしておくことが必要です。

また、この講座では、ブラシツールや消しゴムツールをよく使います。水彩画の特徴を出すためには、塗り重ねの表現ができるブラシを使うことと、ツールの不透明度を利用することです。

ツールや機能の調整にショートカットキーを使えば作業がスムーズに進みます。

※ 当サイトの「ギャラリー」には大きなサイズの写真を展示しておりますので、これらを自由にダウンロードして風景画作成の練習にご利用ください。

背景デザインを変更
選択ツール

背景をグラデーションカラーで埋めてみました。そうするには、人物と背景を別々のレイヤーに分けます。

このとき、選択ツールのぼかし具合を調節しておくと、背景と違和感なくなじませることができます。

モデルさんですから修正する部分はあまりないのですが、表情が少し硬いので口角を上げて、目尻を少し下げてみました。元の画像と比較するとよくわかります。

(下の画像)
人物の修正や加工でもっともよく使うツールは選択ツールです。

Photoshop Elementsには、オブジェクトを選択するためのツールが複数用意されています。
又、選択した範囲の境界をさらに丁寧にする詳細機能も充実しています。

しかし、なんといっても重要なことは、時間を掛けてじっくり選択領域を作り上げていくことに尽きるでしょう。

プレビュー画面
ソースファイル

「立体テーブルとメールフォーム」の項で作成するサンプルです。

アンケートフォームのように長期に渉って使用するページではレイアウトもあまり複雑にならないようにする必要がありますが、ここでは他のHTML5要素の機能も知っていただくためにiframe要素やCSSのoverflowプロパティも組み込まれています。

最初に、インラインフレーム( 入力ボックスなどが表示されている領域はiframe要素というタグで定義し、これをインラインフレームといいます ) に表示するためのファイルを作成します。

その後このファイルを親ファイルのiframe要素で関連付けるとプレビュー画面のようになります。

親ファイルではテーブルの周囲に画像をはめ込んで角丸の立体テーブルを表現していますが、このテーブルも実際に授業で組み立ててゆきます。

画像などの素材は用意されていますので完成までそれほど時間はかからないでしょう。

左下の画像はプレビュー画面のソースファイルです。

この講座ではホームページ作成ソフトは使用せず、ソース編集専用のエディタを利用します。

フリーのツールですがHTML5モードでの編集からC言語・JAVA言語などスクリプト・プログラミングまでのコーディングに特化したエディタで、ボタンやコマンドを使えばHTML5タグやCSS3プロパティの挿入も簡単に行うことができます。

プレビュー画面
CSSファイル

最初に、一般的なブログやニュース系のサイトで見られる2段組みのデザインにするため、5つの基本ボックスを作ります。
このとき、大まかなレスポンシブWebデザインの設定も行います。

次に、それぞれのボックスに文章や画像・ナビゲーション機能・サイドバー・コピーライトなどの内容を入れます。

挿入したパーツ同士の縦横の間隔を調整します。

最後に、レスポンシブWebデザイン用の細かい調整をします。

下の画像はプレビュー画面のスタイルシートファイルです。

「@media{ }」というメディアクエリのルールを使い、端末やスクリーンサイズの幅に合わせてスタイルシートを振り分ける処理をします。

最後の部分では細かい調整が要求されますが、これがレスポンシブWebデザインのの醍醐味でもあります。

プレビュー画面
ソースファイル

「オーダーフォームの作成」の項で作成するサンプルです。

オーダーフォームは商品項目の追加や単価・税率変更など、のちのち修正することを考慮して汎用性とメンテナンスに重点を置いたスクリプトを組む必要があります。

このサンプルでは数値結果を効率的に計算処理するスクリプトを考えます。

また、「お買い上げ明細」ボタンをクリックしてユーザーの入力結果を表示し直します。

画面にはありませんが結果を送信する際、記入漏れなど送信内容に不備な点がないかどうかのチェック機能も考えます。

下のソースファイルの画像をご覧になって複雑に感じられるかもしれませんが、基礎をしっかり理解してソース画面そのものに慣れてくればスクリプトコードも自然に読めるようになってくるものです。

Dreamweaver
Fireworks

テキストボックスやチェックボックスなどのフォーム部品は簡単に挿入できますが、ユーザーの入力ミスや入力制限などのエラー処理にはJavaScriptの知識がなければできません。

知識を持っていても、完成させるまでには、相当な時間が必要です。

Dreamweaverには、「spry検証」と呼ばれる機能があり、JavaScriptの知識がなくてもフォーム部品を個々に検証し、エラーメッセージを表示するなど完璧なエラー処理を作り上げてくれます。

下の画像は「ロールオーバーボタン」の作成画面です。

ロールオーバーボタンは、初期状態・マウスをのせたときの状態・クリックしたときの状態・ボタンがへこんでいるときにマウスをのせたときの状態のそれぞれの状態で変化するボタンです。

作成したボタンは、JavaScript込みのHTMLファイルとともに書き出すこともでき、また、画像のみを書き出して、Dreamweaverでロールオーバーボタンとして作成することもできます。

FireworksはWebページに必要な部品を作成することに特化したツールですが、写真の補正もでき、WebページのレイアウトのみをHTMLとして作成することもできます。Dreamweaverを下で支える頼もしいツールです。

「メッシュ効果とスライドショー」の項で作成するサンプルです。

画像のロールオーバー機能のことをホームページ・ビルダーでは「メッシュ効果」と呼んでいます。

ロールオーバーとはボタンや画像にマウスが乗ると画像の入れ替えや説明文などを表示する機能のことを言います。
この機能の実現はJavaScriptによるものですがホームページ・ビルダーではスクリプトのことをまったく意識することなくページを作ることができます。

入れ替え画像( ロールオーバー画像 )の作成は「ウェブアートデザイナー」を使い、元画像を編集して作ります。

中の画像はリンク先のファイルで、Flashで作成されたスライドショーのイメージです。

Flashにもスライドショーを作成できるコマンドがありますので別ファイルとして作成し、別のロールオーバーでリンクさせます。

下の画像は「地図の作成」の項で作成するサンプルです。

複雑で緻密な地図でもない限り「ウェブアートデザイナー」のツールで十分でしょう。むしろアニメーション素材やアイコン素材が豊富に揃っていますので短時間でわかりやすい地図に仕上げることができます。

Image
Image

「ムービークリップのネストと制御」の項で作成します。

Flashでムービーを作るのは、舞台( Flashではステージといいます )で役者( ムービークリップ )に振り付けをすることに似ています。
ここではクルマが主役でホイールそれぞれも役割は違うものの独立した役者です。

車の中ではタイヤという役者が演技( 回転すること )しています。
これがムービークリップのネストでFlashではムービークリップの中にムービークリップを入れ子にするということは頻繁に行われます。

（下のサンプル）
「ビデオを元にフレームアニメーションを作成」の項で作成します。

タイトルどおりでビデオのフレームをトレースすることでこのようなリアルなムービーに仕上がります。

比較的単純な作業で作れるムービーですが、ツールボックスのそれぞれのツールの機能と限界、あるいはツールのクセといったことを知っていなければ思い通りの結果にはならないものです。

また、上のサンプルも同じですが、ムービークリップを制御するためには「stop(), start()」といったある程度の基礎的なActionScriptは知らなければなりません。

日本人なら「スタート」「ストップ」という意味であることぐらいは知っているでしょう。基礎的なスクリプトしか使いませんし、「ビヘイビア」という機能を使って自動的に入力されますので何の心配もありません。

Image
Image

「アナログ時計」の項で作成するサンプルです。

ActionScriptには「日付や時間」を管理するクラスがあります。

このクラスからオブジェクトを作成してそれを元にデジタル表示とアナログ表示両方を兼ねた時計を作ります。

このサンプルのポイントは時間というデータを使って三本の時計の針をどのような考え方で回転させるかにあります。

柔軟な発想で数種類のスクリプトを編んでみましょう。

（下の画像）
「ムービークリップの深度( 重なり順 )の制御」の項で作成するサンプルです。

難しい表現ですが、Flashではムービーに奥行き感や移動に変化を持たせる機能としてムービークリップの重なり方を制御することができます。
四枚のプレートをクリックしたりドラッグして確認してみてください。

深度の入れ替えや透明度の変更はスクリプトで実現していますが、これらは四枚に共通する動作です。

効率的なスクリプトにするためにはどこにスクリプトを打てばいいのかを考えながらサンプルを作成してゆきます。