2008年5月16日金曜日

Flashで手描きイラスト


動画講座で、無謀にもFlashを初めてしまいました。自己流で、FlashMXを使っていた頃から技術的にはなんも進歩してないので、とてもFlashのマニュアルを作るほどのテクはないんだけど、
わたしのよく使っている機能くらいなら紹介できるので・・。
初回はとりあえず、イラストを描く方法・・ということで基本機能を紹介しました。
イラストに興味がない方も、この基本機能を知っておかないと、ナビを作ったり、動かすためのパーツを作ったりするのに、かなり戸惑うと思うので、面倒でも一度各ツールの使い方に慣れておいたほうが効率良いと思います。

ちなみに左のマンガは、Flashで描いてみました。


(1)新規Flashドキュメントの作成

フラッシュで新規にドキュメントを作成し、画面の大きさを設定、
鉛筆ツールを使って、フリーハンドで線を描いてみる方法です。
消しゴムツールの使い方も一部紹介します。

(2)Flashでの線の修正方法

Flashでの線の修正方法にはいくつかあります。
選択ツールで、角度やなめらかさを調整する方法、
選択ツールで選択しておいて削除したり移動したりする方法、
ダイレクト選択ツールでアンカーポイントの移動もできます。
今回は、選択ツールでなめらかにする方法をやってみます。
こういう感覚的な操作は、illustratorやFireworksにはできない、Flash独自の動きですね。

(3)Flashのブラシで色を塗る

Flashでのブラシの使い方は、独特です。
イラストレーターでブラシで絵を描くと、全部に細かいアンカーポイントが付き、けっこうな容量にもなるし、修正方法も楽とは言えません。
逆にフォトショップでブラシで絵を描くと、消しゴムで消したり、色を変えたり・・などはできますが、ビットマップ画像(写真のようなドットの集まり)なので、拡大することはできないし、変形など繰り返せば劣化します。
ところが、フラッシュのブラシは、ブラシで描いた直後に、ビットマップのように合体され、一つの塗りとして認識されるので、容量は食いません。
しかも、イラストレーターのベクターデータのようにアンカーポイントがついて、拡大縮小、変形自由。
同じ階層で上にブラシで塗り重ねると下の色は消えるというのもびっくり。(下の色を消さないで、色の下の空間だけに色を入れることもできます)
とても独特な性質をもったブラシ機能です。
最終的にムービーとして動かすことを目的としたソフトなので、容量を自動的に減らしてくれるというありがたい機能です。

(4)塗り色の修正

1~3までで描いたイラストの色を修正してみます。
線が上にのると、自動的にカットされるあたりが、これまたFlash独自の操作感ですが。
慣れるといろんな処理が早くできてかなり便利です。

(5)イメージのillustratorデータへの書き出し

とっても便利な機能、フラッシュで描いたイラストのaiデータへの書き出しを紹介します。
ちゃんと線の情報と、面の情報が保たれているので、
拡大縮小、線の太さや色など、自由に再加工できとても便利です。
わたしはこの方法で、Flashでイラストを描いて、illustratorデータに書き出しして、仕上げをすることが多いです。

モモンガの描いたイラストはこちら

2008年5月15日木曜日

大阪・カタログハウスの学校で環境セミナーがあります 5月17日(土)



通販生活・・わたしも愛用しているカタログ通販の会社ですが、このカタログハウスで年間通していろんな興味深いセミナーを開催してます。
今回、宮崎学が講師になって環境セミナーを開きますので、ご案内します。
関西圏の皆様、興味があるかたはぜひお越しください。

カタログハウスのホームページ
http://www.cataloghouse.co.jp/
講演案内のページ(地図などもこちら)
http://www.cataloghouse.co.jp/study/index.html

-------------------------------------------
自然と人間の共存をテーマに40年以上にわたり
「自然界の報道写真家」として活躍中の宮崎学さんは、「黙して語らない」自然界を知るためにその懐へ自ら入っていきます。
人間とあらゆる生物をおなじ土俵において、人間中心でなく動物たちからの視線で自然界を見つめつづけ、そのメッセージに耳を傾けています。
「どうしてクマは人里に出現するようになったのか。」
「工場の轟音や車の騒音も恐れない野生動物が増えている。」
「人間が持ち込んだ生物が原因で 天然記念物の野鳥が絶滅の危機に瀕している。」
都市化、飽食、ゴミ問題、国際化、過疎化…人間の生活が豊かになると共に日々変化し続ける自然環境の中で、野生動物は新しい環境に適応し、強かに生きているのです。
野生動物たちをつぶさに観察してきた宮崎さんとたいせつな自然のいまを見つめ直してみませんか。
日本中を巡った冒険談もお話いただけます。

2008年5月17日(土)
午後1時30分〜3時
講師:宮崎学さん(写真家)
●定員:80人
●参加費:1000円
●場所:〒556-0011大阪市浪速区難波中2-10-70 なんばパークスタワー3階

お申し込みお問い合わせ

-------------------------------------------
宮崎学の講演案内 (環境問題セミナー講師)

gakuの今日のヒトコマ

公式サイト・森の365日

2008年5月5日月曜日

Fireworksで金色のシールを作ってみる



Fireworksのチュートリアルリンクに載っていた「ゴールドシール」を作る方法を試してみたので、それを動画マニュアルにしてみました。
↓参考サイトはこちら
http://www.designwalker.com/2008/04/fireworks-tutorial.html

チュートリアルの公開元は英語のサイトなので、よくわからなかったところは自己流にアレンジしちゃってます。
ありがたいチュートリアルを公開してくれた元サイト様には感謝です。

Fireworksで金色のシールを作る方法

(1)金色のシール-ギザギザの円を描く
(2)金色のシール-立体感をつける
(3)金色のシール-箔押ししたような文字
(4)金色のシール-文字を丸く並べる
(5)金色のシール-グループ化して回転

1〜5まで順番に見ていただければできるようになっています。

2008年4月30日水曜日

webデザイン・初心者のためのテーブルレイアウトのコツ



ホームページを作る上での基本形に、ヘッダー+フッター+2カラムの形がありますね。
よくブログでみかけるこの形です。

ブログはCSSデザインで構築してある場合がほとんどですが、初心者にとってCSSデザインを覚えるのは壁が高い・・・かも??
というわけで、初心者さんにオススメなのがテーブルを使って作る方法。
今回はテーブルデザインのポイントと初心者さんが間違いやすい部分のお話です。

(1)基本形はこれになります



ソース


<table width="500" border="1">
<tr>
<td height="22" colspan="2">ヘッダー</td>
</tr>
<tr>
<td width="129">サイドナビ</td>
<td width="355">メイン</td>
</tr>
<tr>
<td colspan="2">フッター</td>
</tr>
</table>



(2)1を改良するコツとしては、すべてのセルに valign="top"を入れて上にくるようにすること




<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="132" height="113" valign="top">サイドナビ</td>
<td width="352" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>



(3)で、サイドナビを入れたいですよね・・・。基本枠の中にさらに枠を作りたいときの基本は、こんなふうにするのではなく





(これは悪い例です)
<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="145" valign="top">メイン</td>

<td width="339" rowspan="5" valign="top">メニュー1</td>
</tr>
<tr>
<td valign="top">メニュー2</td>
</tr>
<tr>
<td valign="top">メニュー3</td>
</tr>
<tr>
<td valign="top">メニュー4</td>
</tr>
<tr>
<td valign="top">メニュー5</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>



(4)このように、さらに中にテーブルを入れると制御しやすくなります





<table width="500" border="1">

<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="203" height="113" valign="top"><table width="200" border="1">
<tr>
<td>メニュー1</td>
</tr>
<tr>
<td>メニュー2</td>
</tr>
<tr>
<td>メニュー3</td>
</tr>
<tr>
<td>メニュー4</td>
</tr>
<tr>
<td>メニュー5</td>
</tr>
</table></td>
<td width="281" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>



制御しやすいからと、テーブルの入れ子入れ子入れ子・・・をどんどん繰り返していると、
複雑なソースになって、あとで修正したいときなどに混乱する場合もあるので
入れ子は最低限に使うようにしましょう。

この方法の応用編を動画マニュアルにて解説しています。
ドリームウィーバーを使ったテーブルデザインの方法
(1)から(6)まで順番で見ていただくと、どんな手順でやったら効率が良いかわかっていただけると思います。

2008年4月6日日曜日

ビジネスブログとは・・・



ビジネスブログ(企業向けブログ)の基本を考えてみました。

* ブログの主催者が明確である
* 本サイトの更新情報や、読者へのお知らせを掲載する
* 本サイトを読む読者にとって、役に立つ情報を発信する
* 本サイトへのリンクを入れ、本サイトの案内の役目も担う
* 本サイトのイメージアップになるようなデザイン
* 読者(お客様)からの問い合わせ窓口がついている

基本を想定して、それにあったカスタマイズを行ってみましょう。

<参考 動画で学べるビジネスブログの作り方>

* seesaaを使ったビジネスブログの作り方
私が作っている動画マニュアルのサイトですが、ここではseesaaブログを使って、企業ブログ風にカスタマイズする方法を動画にしてみました。初心者向けになっていますので、参考にしてください。見本はseesaaブログですが、動画を見て貰えれば、他のブログのカスタム方法の参考になるかと思います。
何故、seesaaにしたかというと、いくつか理由があるんですが、わたしがいくつか無料ブログをためした中ではピカイチで、カスタムのしやすさ、SEOに強い作り、広告を非表示にできる、2Gまでの大容量・・などなど、良い点がたくさんありました。

seesaaで始めるビジネスブログ

(1)新規登録の方法
(2)カテゴリ登録と記事投稿
(3)デザインを変更する方法
(4)サイドメニューの広告表示を削除す...
(5)サイドメニューに企業のロゴを入れ...
(6)自由形式コンテンツの編集

テンプレートをカスタムする方法
(1)ヘッダーの背景画像を変更する
(2)文字色を変える方法
(3)本サイトへのリンクを追加する
(4)フッターに企業情報を追加する
(5)フッターの文字スタイルを調整する...

<参考 SEO対策に有利なビジネスブログの作り方>

 こちらでSEO対策に有利なビジネスブログの作り方 という記事を書いたので、興味のある方は参考にどうぞ・・・・・

 以前は、被リンクを貰う方法と言えば、「相互リンク集」の作成が主流でした。ところが、SEO対策のために無節操に相互リンクを増やすサイトが増えてきたために、最近は関係ないサイトとの相互リンクがいくらあっても、検索エンジンが評価してくれない傾向にあるようです。

 もちろん、関係サイトのリンク集を作るのは、読者のためにもなるので、読者のためのコンテンツは充実させましょう。それとはべつに、有効な被リンクを増やす方法のひとつとして自分で対策できるのが、ブログを使ったSEO対策です。
無料ブログはたくさんあるので、手軽にブログの立ちあげができますが、中にはカスタマイズの自由がほとんど利かず、ビジネスブログには不向きなブログサービスもあるので、吟味してブログサイトは選びましょう。

2008年4月4日金曜日

XHTLM+CSSサイトはSEO対策に有利か?



「XHTM+CSS、いわゆるweb標準で作られたサイトは、SEO対策に有効である」
スタイルシートでのサイトの構築方法が紹介されたとき、こんな説が一般的でした。
つまり
「検索エンジンクローラーがやってきて、情報を収集するときに、クローラーが読みやすいサイト、
ソースが簡潔でクローラーにも理解でき、重要事項が前の方に書いてある」などの理由から、従来のテーブルデザインより、テーブルを使わないweb標準サイトの方が検索に有利だということです。

そこでさっそくCSSの勉強をして、今までのサイトを出来る範囲でリニューアルしました。

と・こ・ろ・が・・・・・・・・・・
苦労してリニューアルしたはいいけど、ほとんどアクセス数にも、ましてや成約率に変化なし・・・(-_-:)
焦りましたよ〜〜〜。「CSSサイトって検索に有利っていうけど全然話がちがう〜〜」なんて・・・・
それもそのはず、基本の基本を知らなかったわけで、自分の勉強不足だったんですけどね。。。

というわけで壁にぶつかった時に、大阪のとあるSEOセミナーを受講しました。

大阪 SEOセミナーの山下先生です。
この先生の教えてくれる方法は、難しい概念や専門用語は登場しません。
自分のサイトの身の丈にあったやり方で、初心者向けに、サイトオーナーが自分でできる方法を教えてくれます。

現に山下先生に教わった方法で、サイトを最適化したところ、着実に順位が安定して上位に表示されるようになりました。
また、この方法は、Yahoo!アルゴリズムの変動に比較的強いという特徴があって、Yahoo!順位が落ちたとたくさんのサイトオーナーさんが泣いているような激動の時期でも、ほぼ順位に変動がありません。
実際、20を超えるサイトで試していて、2年ほど経過を観測してますが、今でも実感しています。

もし、
「自社でやってる余裕がないけどSEO対策をどこかに外注したい。だけど魑魅魍魎の世界みたいだし、どこに頼めば良いかわからない」という方は、
山下先生のSEOセミナーを受講してみるといいと思います。

サイト作成は自分でできないが、専任のデザイナーに任せているという方は、担当デザイナーさんがうまくリニューアルできるように個別指導をしてくれます。(巷の有料のSEO対策サービスからしたら破格の安さなので不思議なんですが、この先生の対策の基本は「自分でコツコツ改良しましょう」なので、安いのです)でも基本を教えてもらってコツコツと改良していくとほんとに地道に効果が出てくるのでびっくりです。

業者に依頼したり広告を増やすのもひとつの方法ですが、その前にやっておかなければいけない基本の基本、これを知っているだけで財産になりますね。
あくまで、検索エンジン(クローラー)を欺く裏ワザではなく、公正で地道なSEO対策を。
クローラーのためのみならず読者にもわかりやすい優しいホームページを作ること。そんなSEO対策を教えてくれています。

さてはて・・・わたしのサイトでも、SEO診断してますので、お近くの方は(近くじゃなくてもできますが)気軽にお問い合わせください。>SEO対策リニューアル/SEO診断/SEO対策個別指導

2008年4月1日火曜日

ブログでの上手な記事タイトルの付け方

前回の続きです。

動画マニュアルでseesaaで作るビジネスブログというのを更新しています。
それに合わせて、わたしのサイトで、SEO対策に有利なビジネスブログの作り方・・というコンテンツを作ったので紹介します。



●上手な記事タイトルの付け方

ロングテールを利用したブログのSEO対策で必須といっていいテクニックが、上手なタイトルの付け方です。

「春がきました」では誰も検索してくれません。でも「遠山郷に春が来た」だと、遠山郷というキーワードが増えます。「遠山郷の小嵐神社・春の例祭」というさらに具体的な記事タイトルだと、小嵐神社の情報を探している人に親切です。しかも、小嵐神社についての情報が載っているホームページは少ないと思われるので、検索したときに1〜3位などの上位に表示される可能性が高く、それだけ来訪者も増えます。

そして、ありがたいことに、過去に書いた記事が、1年後の春に小嵐神社の春のお祭りの情報を探している人の役に立つこともある・・・今投稿した記事は未来に渡って営業してくれるようなものですね。
今まで、読者が集まる掲示板にこのような情報を書いていた主催者さんも、ぜひブログを活用してこまめに情報発信してみてください。
昔の掲示板の記事はなかなか検索エンジンにもヒットしませんでしたが、ブログの記事は、上手な記事の作り方をすればヒットしやすいのです。



遠山郷観光協会のホームページを紹介します。



 遠山郷は長野県の最南端、南信濃・上村地方の山深い谷。日本三大秘境のひとつと言われてます。
国の重要無形民俗文化財に指定されている遠山霜月祭、神様の湯治場の伝説がある秘境の谷に湧いた天然温泉「かぐらの湯」
日本の原風景が残る場所下栗の里、南アルプスの雄大なパノラマを望むしらびそ高原。
南アルプスの恵みをたっぷり含んだ名水・観音霊水・・・・山と渓谷に囲まれた里山です。
心安らぎ、人情味溢れる遠山郷へぜひ訪れてみてください。

このサイトは、信毎ホームページ大賞2004 特別賞を受賞しました。
村人と村の外の遠山郷ファンで育てているホームページです。

webの森のFBページへも来て下さい