ピンデザイナーのWebサイト構築技法

社会人からWebデザイナーへ

異業種からの転職は、どの業種でも難しいと思います。とにかく独学では人脈もできないし、腕も「井の中の蛙」になってしまいます。
「無料」の学校へ通うのもいいかも知れませんが、やはり「タダ」のものはそれなりのレベルになってしまいます。周りの人間は、自分と同じ道を歩むわけでもありませんので、雰囲気がいまいちだと思います。

Webデザイナーになるための学校

自分のスキルを上げるためには、やはり「有料講座」。でもしかし…。お金が…。なんて自分への投資できないならそれは、無理なこと。日本にはあまり考え方がありませんが、外国では５年働いたら、スキルアップの為に、会社を辞めて学校へ通ってまた再就職というように常に自分を高めることをしている人がいるそうだ。

でも有料講座学費が高い。

しかし、しかし。。。ある条件が満たされていれば、学費割引に！！

厚生労働省「教育訓練給付制度」

○会社が雇用保険を自分にかけてあり３年以上５年未満
講座の20％の代金（上限10万円）

○上記５年以上
４０％（上限20万）

ただし、受講終了後（卒業しないとだめ）書類を提出するとキャッシュバックされる。おススメの学校は⇒
ヒューマン・アカデミーのWebデザイナー養成講座。

ヒューマン・アカデミーWebデザイナー養成講座では、HTMLの基本、DreamWeaver、Flash、Photoshop、Illustratorとアプリ操作だけに終わらず、作品制作・個人指導まであります。
詳しくはこちらから無料資料請求できます。

FC2ブログランキング今何位？
⇒ここをクリックm(__)m
ランキング投票お願いしますね！

DreamWeaverのサイトの定義

DreamWeaverにおけるサイトの定義がまず１番最初にしなければならない作業です。そしていちばん理解に時間がかかるところです。
ここが理解できないと新規サイトを作成することが出来ません。ということで操作を動画で紹介してみます。
この操作はサイトを新規に作成するとき１回だけ行います。
たとえば、花屋の紹介サイト、中華料理屋のサイトを作ろうとするならば別にフォルダーを作成して、各フォルダーにサイトの定義を行うということです。（Dreamweaverにサイトを作成するフォルダーを教えると言う意味です。）
なおバージョンによっては、ルートに日本語が入ると、挿入した画像がブラウザでプレビューすると表示されないと言う現象が起こります。いずれにしても、フォルダー名、ファイル名は英数半角文字で入力してください。

動画解説は⇒こちらです。

FC2ブログランキング今日は何位？⇒ここをクリックm(__)m

Webサイト作成に役立つ本

この２冊の本はWeb作成時にとても役に立ちます。どちらかと言えば実務的なレベルではないかな？と思います。特にプロフェッショナルＷｅｂプロデュースは（古い本ですが）絶対に購入し一度は読む必要があると思います。

標準Ｗｅｂデザイン講座基礎編 第２版

	セブンアンドワイで購入 boopleで購入 アマゾンで購入
おススメ★★★★★ Web制作のワークフローWebサイト制作の概念に加え、XHTMLやCSS、さらにCMSなど技術の話題まで、わかりやすく紹介しています。第１版 よりも見やすく読みやすくなっています。来年教科書にしようか？と考えています。

プロフェッショナルＷｅｂプロデュース
プロとしてのＷｅｂサイト制作の基礎

	セブンアンドワイで購入 boopleで購入 アマゾンで購入
おススメ★★★★★ ただWebサイト制作について概論を記述するのではなく、実際のクライアントとのやりとりをどうするのか？企画書にはどんなことを記述するのか？実例で解説しています。少しレベルが高いですが、サイト制作をしていると意味がだんだん分かってくると思います。

FC2ブログランキングに参加しています。ご覧になったら⇒ここをクリック
今日は何位でしたか？派手なFLASHでもやらないとだめなのかな〜

colspanの復習練習問題

またまたこの表を作成してください。

1	2	3	4
5	6	7	8

そして6と7のセルを結合してください。

1	2	3	4
5	6		8

さてだいぶ時間が経ってしまったのでお忘れになってしまいましたか？
まずは手順の確認です。

1. 指定のテーブルを作成し、<td>〜</td>の間に順番に番号を入力しておく。

2. 結合するセル番号を把握する。

3. colspanを入れるセル番号を考える。例題で考えると「６番のセルが先頭になるので６番のセルのtdにcolspanを指定する。

4. 結合する数を考える。いくつのセルを1つにするのか？のいくつのの数を入れる。）0や列数以上の数字は入らない。
ポイントはいくつのセル？そう今回は「２」個のセルなので２です。

5.表示に必要がなくなった<td></td>をコメントする。

上記の方法はもちろんWebクリエイター能力試験上級対策の合格技の一つですよ！

ところで…ランキング投票していただきましたか？

まだのあなたは⇒ここをクリック

なぜ追いつけない？管理人かなり落ち込み中

このブログでも使用している文字装飾を少し解説してみたいと思います。このやり方はFC2ブログだけではなく他のブログやご自分のWebサイトにももちろん使うことが出来ます。

手っ取り早く↓を作ってみましょう。

CSSによる表現その１

私の場合こういった見出しを作成する際は、HTML見出しタグを必ず使用します。これは最近騒がれて？いる常識？のSEOと言う概念に基づいているからです。

定義方法	.midashi { color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; border-left:10px solid #254A00; border-bottom:1px solid #254A00; width:300px; margin: 2px 0px 5px 0px; padding:2px; }

使用方法	<h5 class="midashi">CSSによる表現その１</h5>

定義方法のところは、FC2ブログで言うと「ツール」⇒「環境設定」⇒テンプレートの設定で画面を開きCSSを記述してある、一番最後のところに上記の様に定義してください。

次に使用方法…これはいつも文章を打つ画面に同じ様に入力してください。

とりあえずコピペでやってみましょう〜

ランキング投票していただきましたか？
まだのあなたは ⇒ここをクリック
ランキング今日も…↓(T_T)/~~~なのでm(__)m

今日はちょっと暇？いつもか！なので時間制限100分で、どのくらいアイデアが浮かぶのか挑戦してみました。先日リンク先のWebサイト見ていたら面白い企画があり作成してみようと思ったのです。
課題の規定内容はこちらのサイトです。
課題は９月に募集していたけれど…いまさらなので、応募はやめておきます。なんて自信がないと言うのが、一番の理由ですかね（笑）

アイデアを導くために

制限時間を自発的に設けたのは、「きり」がないからです。ちょうど100分位集中して考えられる時間が取れたからです。まして売り物にはならないのですから。
まず最初に…。右脳を使いましょう。イマジネーションです。
お題のキーワード？
「大地や自然の美しさを盛り込んだ風景写真の販売サイト」
さて、ここで
「大地、自然」と言ったら何を思い出しますか？
１つや２つでは駄目です。多少関係なくても言葉を考えるのです。
目標1分で20個です。

空、雲、新緑、雨、霧、露、川、海、虹、蝶、山、森、竹林、木、昆虫、石、サンゴ礁、花、島、葉、青、太陽
などと考えます。そしてさらにもっと細かく考えます。
たとえば、「昆虫」⇒蝶、カブトムシ、トンボ、てんとう虫
この「連想ゲーム」からヒントを導いていくのです。

次に、フリーハンドでイメージを描きます。もちろん「絵」は適当でもいいし、「〜の絵」と描いておくのも一つです。
多少雑ですけど…。（画像をクリックすると実物大画像をご覧になれます。）



⇒次の作品を見る前に今日のランキングは？今日も…↓(T_T)/~~~
応援よろしくおねがいします。読んだらクリック↑ね！m(__)m

いきなりリニューアルしてしまいました。（*^_^*）

さて今回はツールの選択？です。
結構このネタは論議になるのです。
私の知っているWeb会社では、個人に任されています。
だからAさんはPhotoshopでBさんはFireworks使っています。
結局最後はWebページにレイアウトするために、書き出しまたは、Web用に保存すれば同じことですから…。

Fireworksに思うこと

私の感覚でFireworksは、IllustratorとPhotoshopを足して割ったような感じがします。ソフト１本で済んでしまうってのがお気に入り。しかもお値段が安い。
でも複雑な図形描くのはやりたくないです。（笑）小回りが利かないように思います。バージョン８では少し改善されたけど、たとえば６角形を変形させて…と言う作業した時ものすごくやりづらかった記憶がある。（習熟度によりますけど。）
ライブラリ機能これいいですよね！

Photoshopに思うこと

やはり印刷⇒Webと言う流れがあります。広告で使ったグラフィックを流用するということが多いのでは…。なのでPhotoshop。
値段は高いけど、ユーザーが多いのでグラフィックの参考書が多い。山ほどあります。フィルターのプラグインも多い。（有料が多いけど）
しかし、アニーメーションGIFが作れない。ImageReadyで作成しなければならないので面倒。

結論（Pinの個人的）

どちらを使ってもあり。なんでもあり。
事実私は、Fireworksで四角形を描き、塗りのパターンに木目を指定し、PhotoShopファイルに貼り付け、フローリングを再現したことがある。
もしPhotoShopだけで作ろうと思うならば、白黒グラデーションを描き、極座標フィルターで木目のように変形し、色調補正で色をつけ…とかなりの工程を必要とする。
なので、使うツールは自分が使いやすい方を選択するべきであると思う。もしラッキーにも両ソフトを所持しているならば、両方のおいしいところをいただいて、生産性をあげるほうが良い！と思います。大切なのは「お客様」の要望にどう答えるか？だと思います。

⇒今日のランキングは？ついに２週間連続が…↓(T_T)/~~~
応援よろしくおねがいします。読んだらクリック↑ね！m(__)m