Fireworks入門の動画マニュアル制作しました

いろんな人から「動画マニュアル更新しないのー？」ってリクエスト貰ってたんですが、やっとこさ時間ができまして、Fireworks入門の動画マニュアル作りました。



初心者向けですが、「AdobeCS　持っているけど、Fireworksってどこが使い勝手がいいの？」ってピント来ない方は良かったら見てみてください。
illustratorにはillustratorの得意分野があり、PhotoshopにはPhotoshopでしかできない得意分野がありますが
それほど凝ったことをしないで、手軽に、web素材を作りたい時にとても便利なソフトです。
illustrator、Photoshopそれぞれの機能にはとうていかなわないけど、便利なパーツ類なども揃っているので、「私デザインは苦手なの」っていう人でも、そこそこのパーツが作れてしまうんじゃないかな・・。と。
むしろプロのデザイナーさんというよりは、ネットショップの担当者とか、社内でweb担当になった素人の方とか、そういう方が使いこなすととても便利だと思います。
フォトショップやイラストレーターを使いこなすにはちょっと勉強が必要で、やれることも多いかわりに難易度も高いです。
Fireworksはそれほど勉強しなくても、そこそこのwebパーツができてしまいます。
それなのにFireworksの解説本はあまり出ていないようで、情報を探している人も多いかと思いますので、、、よかったら見てみてくださいね。


＜Fireworksの基礎＞
[1]ドキュメントの新規作成と保存
[2]Fireworksを軽くする環境設定
[3] 画像を開く方法
[4]画像をリサイズする方法
[5]画像の一部をカットする
[6]ウィンドウとパネルの使い方


＜Fireworksの色の操作の基本＞
[1] カラーを選ぶ方法
[2] グラデーションの方法
[3]塗りのテクスチャ
[4]塗りにパターンをつける方法
[5]いろんな線


＜ベクター画像（図形や線）の基本＞
[1]ラインツールで線を引く方法
[2]ペンツールで直線と図形を描く
[3]多角形の描き方
[4]矢印を描く方法
[5]星型を描く
[6]フリーハンドで絵を描く


＜スタイルとフィルタの使い方＞
[1]スタイルを適用してボタンをつくる
[2]スタイルを使ってロゴを作る方法
[3]フィルタを使ってバナー作成


　この後もできれば増やしていきますので、、今後ともご贔屓に・・・・・

画像が表示されないと困ったら（HTML初心者の方へ）

こちらの記事は、アトリエwebの森のブログへ移転しました。

お手数おかけしますが、下記を御覧ください

http://webnomori.net/2016/02/14/post-1252/

オンデマンド名刺印刷の業界先駆けサイト

名刺印刷専門店・レイド様のサイトリニューアルをさせていただきました。オンデマンド名刺印刷では日本で初めてのWEB専門店として７年前に創業したという有名なサイトです。



今でこそネットから名刺印刷をデータ入稿して、オンデマンド印刷＆即日発送のようなサービスはとてもたくさんありますが、このレイドさんがスタートした当時はオンデマンド印刷の初期の頃で、国内にそんなwebサイトはなく、しくみ作りからすべて試行錯誤で作り上げてきたという、業界では老舗のサイトです。
（その後同じ主旨のサイトがたくさんたちあがって、データ入稿の方法などずいぶんマネをされたそうですが。）

というわけで、すでに多くの固定客様をお持ちのサイトなので、まずは旧サイトの問題点を洗い出し、現在の固定のお客様にさくさくと使っていただけるシステムを考えました。
特にフォームメール関係では使いやすいフォームってどんなだろう・・と洗い出すところから始めたので、制作にかなり時間をかけました。
（フォームメール制作協力／フォーエイト様）

そして、新しいサイト訪問者のために、少しでも入稿までの手順を簡単に知って貰えるように、「動画で見る注文までの流れ」を作ってみました。




こういったwebサービスを初めて利用しようとする人に対しては、最初の壁の突破が肝心ですよね。
つまり「なんだか面倒そう」「入稿マニュアルを読む時間がない」「難しそう・・？」と思われてしまったら、新規のお客様を逃してしまいます。
動画では本当にざっくりと最低限これだけわかっておけば、入稿までやらなければいけないことが理解できるだろう・・という範囲にしぼって、画面キャプチャをとりながら解説ムービーを作ってみました。

また、詳しく注意事項を書けば書くほどサイト内がごちゃごちゃして注意書きだらけの読みにくいサイトになってしまいますが、注意事項はちゃんと守ってもらわないと、データの不備が多発したり、クレームの元になってしまうというジレンマがありますよね。

そんなデメリットを解決してくれる、解説動画。これからもどんどんいろんなサイトで採用されていくと思います。

＞解説動画はこちらの「ヒューレットビルダー6」で制作しました。
名刺印刷なら国内トップクラスのご利用実績の「名刺印刷レイド」
　
＞デザイン・企画　webの森

DreamweaverでWordPressのテンプレートを編集する方法

動画マニュアルにてWordPressの使い方やカスタム方法を紹介したところ、一番アクセスの多い動画が、「DreamweaverでWordPressのテンプレートを編集する方法」という動画でした。
前編・後編の２本になってます。


Dreamweaverを便利に使っているデザイナーさんは、「テーマエディタを使って編集」と言われても壁が高いかもしれませんよね。
「WordppressのテンプレートってDreamweaverを使ってローカルで編集できるんですね！？これなら私にもできそうです」という感謝のメールも届きました。


WordPressはPHPで出来ているので、PHPになじみのない方は、ソースを開いただけで「壊したらどうしよう・・」と腰が引けてしまうかもしれませんが、
幸いテーマは複製できるので、フォルダごと複製してバックアップをとっておけば、
いざとなったら
（．．．．．．．．どこかコードを壊してしまうとたいてい真っ白画面になります(^_^;)
管理画面で元の編集前のテーマを選んで適用させればすぐに元に戻ります。


詳しくは、動画の末尾に書いてあるテキストも合わせて読んでいただけると意味が理解できるかと思います。
はまったらリファレンスと首っ引きで作業する日々の始まり～。。。デスヨ
WordPressテンプレートタグ一覧

『WordPress2.5でつくる！最強のブログサイト』
田中広将・志村俊朗 共著／ソーテック社


この本は、これからWordPressを始めるという方にはぜひおすすめです。
初級者から中・上級者にも役に立つ、わかりやすい＆充実した内容。
初歩の初歩、データベースの作り方から、インストール作業、管理画面の使い方、プラグインの使い方などなど、最初にこなす一通りの作業はもちろん網羅してますし、
なによりすごく良かったのが、PHPについての入門的な解説部分。

PHPって何？っていうところから入る人でも、これを読んで、WordPressのカスタマイズをしてるうちに意味がだんだんわかってくるんじゃないでしょうか。
とくに初心者のわたしには、「WordPressのテンプレートタグって実は、PHPの関数だったんだ～～」ということさえ目ウロコで、ほんとにわかりやすい説明でした。

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

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

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

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

（１）金色のシール－ギザギザの円を描く
（２）金色のシール－立体感をつける
（３）金色のシール－箔押ししたような文字
（４）金色のシール－文字を丸く並べる
（５）金色のシール－グループ化して回転

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

FC2 無料ブログのテンプレート変更方法

動画マニュアルで無料ブログの使い方を更新しました。前編はこちら


（４）デザイン（テンプレート）を変更してみる

今回は、テンプレートの変更方法です。
FC2は豊富なテンプレートがあるのが特長で、公式テンプレートと共有テンプレートから選べます。
共有テンプレートは、デザイナーやweb制作の有志の方が、自分で作ったオリジナルテンプレートを公開して、誰でもダウンロードして使えるようになっています。
無料ですが、それぞれ規定があるので（アダルトサイトは禁止とか、作者へのリンクは削除しないとか・・）守りましょう。
素敵なテンプレートを無料で使わせてくれる制作者の方には感謝です(´∇`)

また、テンプレートの中には「SEO対策済み」とされているものもあり、メタタグやタイトルタグの配慮だとか、ソースの記述の順序、自分でキーワードを増やすためのフリースペースをいれてあったり、そんな対策が行われているものもあるので、便利に利用できます。
（もちろんオーソドックスなテンプレートを利用して、自分でSEO対策になるようにカスタムすることもできます）

↓わたしモモンガがお世話になっているSEO対策の先生のサイトです
SEO対策講座・SEOセミナー　ハブネット
ブログを使った集客の方法についても、ここの講座でいろいろ学びました。
ブログを使いこなして、何か自分の目的が達成できたらいいですね♪

「無料ブログ」入門講座

動画マニュアルで、「無料ブログ入門」というシリーズを始めました。
（まだDwの方もやりたい機能あるんだけど〜・・・・移り気なもんで・スンマセン）


初心者対象の「無料ブログ」の使い方講座です。ブログ登録の仕方から、日記を投稿する方法、オリジナルっぽくカスタマイズする方法まで・・。

FC2ブログの使い方

（１）新規登録の方法

無料ブログサービスはいろいろありますが、まずはメジャーなところで、FC2ブログの使い方を紹介してみます。
FC2の良いところは、なんといっても豊富なテンプレートデザイン。おしゃれなテンプレートがたくさん登録されているので、デザインを選び放題。全部無料で使えるなんて素晴らしいですね。

新規ユーザー登録の前に、フリーメールを取得しておくことをおすすめします。
FC2からの重要なお知らせや、もしパスワードを忘れてしまったときなどは、この登録メールに届くので、忘れないように覚えておきましょう。



（（２）記事を書いてみる

（１）で、新規ユーザー登録、ブログの初期登録、初期のテンプレートの選択、ここまでやりました。
次に、とにかく記事を書いてみましょう。
ブログが表示できたら成功です。
ブログの良いところは、あれこれ悩むより先に立ち上げてしまった方が良い・・ということですね。
デザインもカテゴリもパーツも、ブログのタイトルさえ、あとから簡単に変更できるので始めていってやっぱりちがう・・と思ったらどんどん変えていっていいわけです。


動画では、すぐに管理画面に入れましたが、
パスワードを忘れてしまった人は、ログインのボタンの下にある「パスワードを忘れたら」という青い字をクリックして、メールアドレスを入れて送信してください。
そのアドレスにパスワードが届くはずです。


（３）日記に写真をつける方法

（２）では、日記を投稿してみました。
今回は、その記事に写真をつけてみましょう。
ログインして記事を書いたばかりのときは、まだログアウトされていないので、ブログの管理用というボタンから、再度管理画面に入ることができます。

写真は、デジカメから取り込んだままだと大きすぎる場合が多いので、事前に適度な大きさに縮小しておきましょう。（FC2の場合は500KBまで・・と指定があります）
デジカメからとりこんだ写真の上で右クリック＞編集　を押すと（ウィンドウズXPの場合）ペイントが立ち上がるので、メニューの「変形」から「伸縮と傾き」
100％になっているのを、縦30% 横30％　などと指定すれば縮小できます。

もちろん、最初からデジカメのモードを640pxなどにしておけば楽ですが。
今度は写真をプリント出ししたい時などに解像度不足だったら悲しいです。。。

＊＊＊＊＊＊＊＊

パソコンに不慣れな方は「とてもブログなんて〜・・・！難しそうだし書くこともないし・・・」と敷居が高い方もいるかもしれませんが、初めて見ると日常生活の中でも「あ、これブログのネタにしよ」などと思えるようになってくるし、案外簡単だし、面白いですよ。友だちもできるし。。。

ぜひ気軽にチャレンジしてみてください。