パソコン教室・パソコンスクールISA船橋校 店長ブログ

こんにちは。

いまやすっかり有名になったネット上の地図サービス【Googleマップ】

Googleのコンテンツの１つですが
本当にすばらしい機能です。

皆さんも使ったことはありますか？？

使ったことがない方、ぜひ下記からお試しください。
http://maps.google.co.jp/maps

Googleマップのページにアクセスすると
検索ボックスが表示されていますので
試しに自分の住所を入れてみてください。

自宅近くの地図がしばらく待っていると表示されます。

ただ表示されるだけであれば
他の地図サービスと同じなのですが
Googleマップはさらにすごい機能が搭載されています。

なんと地図中でマウスをドラッグすると
その場で地図の表示位置を変更することができるんです。

試しに以下の地図でやってみましょう。

これは私がパソコンスクールISA船橋校の地図を表示して
それをこのブログに設置したものです。 

いかがでしょうか？

地図上でドラッグすると、地図を移動できましたよね！！

私が初めてこのGoogleマップに出遭ったときは
楽しくて世界中旅をしました（笑）

Googleアカウントを持っていれば、こんな風に自分のWEBページに
マップを導入することもできますよ！

パソコン教室で学習されている方で興味がある方は
私並木にお声をかけてくださいね♪

パソコンスクールISA　船橋校　並木

こんにちは。

WEB制作をするときに迷うのが
ボタンやバナー、メニュー等のデザイン。

色々凝りたくはなるのですが
「Simple is Best」という言葉があるように
意外とシンプルな方が、サイトがまとまりやすいということがあります。

今回は、あえてシンプルなデザインのメニューを作ってみたので
参考にしてみてくださいね♪

画像をクリックすると全体を見ることができます。

例えばこのようなメニュー。

まだまだ改善の余地はたくさんあるのですが
背景に単純にグレーと白のグラデーションをかけ
その上に角丸の薄い白いラインが入っているだけです。
テキストは、灰色で縁取りしています。

次はこちらです。

基本的には同じような感じなのですが、今回はグラデーションをかなり薄めにかけています。

背景に淡いブルーと白のグラデーションをかけ
そのグラデーションをちょうど半分で区切るように白いオブジェクトを重ねています。

テキストは白で縁取りをしています。

最後はこちらです。

これこそ究極のシンプルさです。

背景は白、下にラインを入れて、テキストを入力しただけです。

手抜きと言われてしまえばそこまでなのですが（笑）

どれも確かに手はかかっていません。
制作時間は１つ5分程度です。

実はサイトの雰囲気を壊さずにボタンやバナーを制作するコツというのがあります。

上記の3つのバナーもすべて共通しているのですが
下記がうまくまとめるコツです。
というよりは、個人的に意識して作っているポイントと言った方がよいですね♪

・色は全体的に薄めに
・一つのバナーやボタンの中で利用する色は多様せず、同系色でまとめる

これだけです。

意外と「色を薄めに」というのが重要だったりします。

初めて制作すると、どうしても色々な色を使ってしまいます。

そうすると一見華やかにはななりますが
出来上がったものを見ると、まとまりがなく、色が多すぎてどこが大切な情報なのかが
わからなくなってしまうことがあります。

ですので、色を決めるときは「薄めに」という意識をもつと
サイト全体をうまくまとめることができますよ。

ぜひ参考になさってくださいね★

 パソコンスクールISA　船橋校　並木

こんにちは。

今日はIllustratorを利用して
立体的な地図を作成する方法をご紹介したいと思います。

地図制作は、DTPでもWEBでも共通して利用することが多いです。

やはりWEBサイトでもお店のチラシでも
そのお店の場所をわかりやすく伝えるためには
地図が必要ですよね♪

【完成例】
まずは完成例です。

本当はもっとディティールをこだわりたいところですが
今回はこのくらいとします（＾－＾）

１．まずは平面的に地図を作成します。
地図の作成方法は好みでよいですが、今回は
道路については角丸の長方形で作成し、ビルについては四角形で作ってあります。

２．シアーツールを利用して作成した地図全体を傾けます（角度は好みです）。
傾けた後に、目的地の建物を表す四角形を選択しておきます。

３．目的地の建物を表す四角形をコピーし、前面にペーストをします。
ペーストができたらそのまま真上に移動して、下図の状態にします。
真上に移動した四角形がこの建物の屋根部分になります。

４．目印としてわかるようにとりあえず塗りを設定しておきます。

５．今度は建物の側面の壁部分を作成していきます。
壁の元となる四角形を任意の場所にまず作成しておきます。

６．ダイレクト選択ツールを利用して、それぞれのアンカーポイントを移動し
壁を形成するように変形していきます。
※このとき、【画面】メニュー＞【ポイントにスナップ】をONにしておくと
各アンカーポイントに吸い付くようになりますので作業しやすいですよ。

７．正面の壁が作成できたら、右側の壁も同様に四角形のアンカーポイントを
移動しながら壁になるように変形していきます。
下図が壁が完成した状態です。

８．立体的に見えるように、壁や屋根にそれぞれ陰影をつけるように
塗りの設定をします。

９．立体的な地図作成はここでほぼ完成です。
次に吹き出し部分を作成していきます。
適当な大きさの四角形を作成し、下側のセグメントにアンカーポイントを3つ追加します。

10.３つ追加したアンカーポイントの真ん中のポイントを
ダイレクト選択ツールで引き出すことで吹き出しの形になります。

11.吹き出しの大きさと、吹き出しの中に文字を入れて完成です♪

いかがでしょうか。

・・・結構手間がかかります（＾－＾；）

こんな地図一つでも、手間をかけるとわが子のようにかわいく見える

かどうかはわかりませんが、やってみる価値はあると思いますよ！！

ぜひお試し下さいね☆

パソコンスクールISA船橋校　並木

こんにちは。

今日は、前回のブログで少しお話をした画像を
Photoshopを使って簡単に明るくする方法をご紹介します。

Photoshopにはもともと様々な画像補正機能がありますので
画像を明るくする方法はすでに知っている方もいると思います。

ただ今回は、画像補正機能は使わずに
一瞬で画像を明るく補正する方法です！

一瞬でできますので、とりあえず色合いだけでも明るくしたい！
というときには使えると思います。

では手順を画像付でご紹介します。

１、まずこれが元の画像です。

２、【レイヤー】パレットを表示して、元の画像のレイヤーを選択し、右クリックをします。
　　右クリックして表示されたメニューで、【レイヤーを複製】を選びます。

３、複製が完了すると、【レイヤー】パレットはこのような状態になります。

４、コピーされたレイヤーが選択されている状態で、【レイヤー】パレット内の
レイヤーの描画モードを【スクリーン】に変更します。

５、これで完成です♪

いかがでしょうか？
非常に簡単にできますよね！？

わかりやすいように、元の画像と完成した状態を並べて表示しますね。

【元の画像】

【完成例】

いかがでしょうか。
画像を補正するテクニックはWEBでもDTPでも
使用する機会が多いので、ぜひ覚えて使ってみてくださいね。

パソコンスクールISA　船橋校　並木

こんにちは。

今日はWEBのお話です。

CSSを利用してWEB制作をしていると
たびたびその設定に頭を悩ませることがあります。

例えば今回のブログのタイトルように
画像を入れてレイアウトを組んだときにその画像の下に
なぜか隙間が生じる、というものです。

実際に隙間が生じている状態が下記の図です。

このように微妙に隙間があいてしまって
見た目上少し気になります。

調べてみるとよくIE（Internet Explorer）で見られる現象とのことです。

では実際の解決方法です。

IEで画像の下に隙間が生じてしまうのは

アルファベットの小文字のgやyなど
実際のベースラインより下にはみ出るこれらの文字を
表示するための隙間が
もともとIEで設定されているからです。

ですので画像の下にその隙間がでないようにするためには
次のようなCSSを組むことで解消されるはずです。

Img{
        vertical-align:top;
}

実際にこのようにCSSを組むと、先ほどあった隙間がなくなり
下の図のようになります。

隙間がなくなりましたね。

もしご自身でWEB制作をする際に同じ現象になった場合は
参考になさってください♪

パソコンスクールISA　船橋校　並木孝輔