WEBデザインを勉強中 - デザイナーを目指して -

脳内メーカーで悪100%と診断されたトモちゃんヌです！正直ショックです！！

さて、当ブログを公開して、もうそろそろ3ヶ月になりますが、今日（昨日かな？）googleのページランクがつきました。ついたランクは、1です。でも、1でもついてよかったです。中々ランクつかなかったので、このままつかないのでは？と、思っておりました。

待ち望んだマウスが届きました！いやー快適、快適。でも、7,000円は、やっぱり高いですわ。無線ということを除けば、多機能というわけでもないですからねぇ。

ところで家では、長らく無線マウスを使っているのですが、会社では、有線マウスを使っています。これが、また肩が凝るんですよね。

今、仕事で悩んでいることがあります。今、DOCTYPE宣言が入っていないサイトがあって、それにDOCTYPE宣言を入れるか入れないかを考えているのです。

DOCTYPE宣言を入れることは、SEO的にも良いことには、間違いないのですが、DOCTYPE宣言を入れる=SEOに良いわけではなく、DOCTYPE宣言を入れて、それに従った適切なマークアップをする=SEOに良いになるわけです。

サイトのアクセスアップの基本は、サイトの登録からだと思います。ぶっちゃけ登録しなければ、SEOに取り組んでも中々、効果がでないと思います。

僕は、この本でサイトの登録の仕方を知ったのですが、この本に書かれていることを実践してからアクセスが、上昇しました。このことから、サイトの登録の大切さを学びました。

そこで今回は、三大検索エンジンに登録（推奨）できるページを紹介していこうと思います。ただし、ここでのサイトの登録で、すぐに検索に反映されるときもあれば時間が、かかる場合もあります。どちらにせよ、すぐに効果がでるわけではないので、のんびり待ちましょう♪

なんか急に寒くなってきましたね。地元だけなんでしょうか？季節の変わり目ですね。

季節の変わり目は、体調が崩しやすいので、皆さんも風邪とかには、気をつけてくださいね。僕は、すでに体調を崩しています。

体調を崩していても仕事は休めないので、会社には行ってました。最近はコーディングの仕事をしていたのですが、楽天ショップやYahoo!ショップのセールページにも対応できるコーディングをしなければならなかったのでテーブルレイアウトでコーディングです。、しかもいっさいCSSは無しなので、HTMLのみのベタ打ちで仕事をしなければならなかったのですが、結構ひさしぶりだったので、できるのか心配でした。でも意外と忘れてないもので、できるもんですね。

積み重ねたものは何かしら、覚えてるもんです。

• メニュー1
• |
• メニュー2
• |
• メニュー3

上のようなメニューをよく、フッターメニューとかで見かけることはありませんか？これ見た目もよく、手軽に作成できて便利ですよね。

でも、ユーザビリティの面で見ると、このやり方は、問題があります。音声ブラウザで、上のメニューを読んでもらうと、「メニュー1、棒、メニュー2、棒、メニュー3」と｜を棒と読むのです。これでは、音声ブラウザを利用しているユーザーには、不便です。

このことからメニューとメニューの間に｜を使用することは、できません。でもCSSを利用すれば、この問題も解決できます。

• メニュー1
• メニュー2
• メニュー3

上のメニューは一例ですが、最初のメニューと、あまり変わりはないと思います。もちろんドットの仕切りではなく、｜の様にもできます。

これは、背景画像を使っています。背景画像ならalt要素もないので、音声ブラウザに余計な情報を読まれる心配がありません。

1×1pxの黒の画像を用意してCSSのbackgroundプロパティでY軸にリピートさせれば、このように見せることができます。

詳しい記述は、以下を参考にしてみてください。この、やり方は、僕の独自のやり方です。もっと良い記述があるかも知れません。いろいろ試してみてください。

…風邪引きました…

マジで、しんどいです。でも会社は休めないので、頑張っていってきました。しんどかたよ。

WEBデザインの仕事をしていると、パソコンをずっと見てないといけないので、のぼせてくるんですよね。

<ul>タグをつかったメニューの作成方法の続きをしたかったのですが、今日は、サンプルを作る元気がないので、次回にさせていただきます。ユーザビリティに、とても良いメニューの作成方法を公開しようと思います。

<ul>タグを使用した横並びメニューを作成方法を、紹介していますが今回も更にカスタマイズしていこうと思います。

前回のサンプルに、罫線をいれて、フォントのカラーを白に背景色を青に変更して、更にメニューっぽくしてみました。オンマウスされると、フォントカラーが黒、背景色が黄色になるように設定してます。

• メニュー1
• メニュー2
• メニュー3

<li>タグに1pxずつの罫線をひく指定をするのですが、単純にborder指定をすると罫線が重複してしまうところがあるので、少しだけ工夫が必要です。

まず<li>タグに上、右、下の3箇所にbrderを指定します。するとメニューの一番、左以外は、罫線がひかれます。そして、メニューの一番左に当たる<li>タグにclass指定をして、border-leftに罫線を指定します。CSSの記述は、以下のような感じです。

ul#sample-02 li {
margin: 0;
padding: 0;
float: left;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
}
ul#sample-02 li.bolder-left {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #333;
}

これで、重複することもなく罫線がひかれるので、よりメニューらしく見えます。

少し記述を変えれば、下のように縦型のメニューにも使えます。

• メニュー1
• メニュー2
• メニュー3

これらの記述は、以下のようにします。

• メニュー1
• メニュー2
• メニュー3

前回、上のように<ul>タグの横並びメニューの作成方法を紹介させていただきました。
しかし、このままでは、ちょっと寂しいので、下のようにしてみました。

• メニュー1
• メニュー2
• メニュー3

こうしてみると、メニューにオンマウスされればテキストリンクの色と背景色が変わるので、ユーザーが
今どのメニューを選択しているのか、分かりやすいですよね。

こんな、表現もCSSで簡単にできちゃいます。<a>タグと擬似クラスである:hoverをCSSで表現を指定することで、このようにみせることができます。

記述は、以下のようにします。これは、一例です。

• メニュー1
• メニュー2
• メニュー3

CSSでWEBデザインをしていると、上記のように、よくメニューに使われるのが、<ul>タグです。
なんで、<ul>タグを使用するのかというと、理由の一つに、アクセシビリティがあります。

<p>タグで、メニューを作成するのも、見た目的には問題ないのですが、音声ブラウザによっては、例えば、「ホーム最新情報会社概要商品紹介採用情報」と区切りなく連続で読まれる場合があります。
<ul>タグでメニューを作成すれば、音声ブラウザは、「ホーム、最新情報、会社概要、商品紹介、採用情報」と区切って読んでもらえます。

また、CSSを適用しないときの見た目もあります。下記のように、<p>タグよりも

メニュー

メニュー1

メニュー2

メニュー3

<ul>タグのほうが、メニューらしく見えませんか？

メニュー

• メニュー1
• メニュー2
• メニュー3

こういう事情により、以前からCSSでレイアウトを組む場合は、メニューは、<ul>タグで組むということが一般的になりました。

では<ul>タグで、上記のようなメニューを作成するには、以下のように記述します。これは、一例です。

以前からMacのsafariで、このブログサイトは正常に表示されるのか気になっていました。

そして、たまたま電気屋でネットに接続しているMacbookがあったので、良い機会だったので自分のブログサイトを見てみました。結果は、問題なく表示されておりました。

以前にも、ブログで書いたことがあると思うのですが、WINDOWSで画面の色を16ビットにすると、このブログのヘッダー部分が非常に見づらいものになるのです。

そのことに気づいてから、一度は、このヘッダーを撤去しようかなと思っていたのですが、アクセス解析で調べてみると16ビットでブログを閲覧している方は、非常に少なかったので、このままで良いかなと思っていたのですが、そこでMacでの表示が気になったのです。

今回Macで、表示を確認できて表示に問題もなくレイアウトも崩れていなかったのでヘッダーは、しばらくは、このままにしておこうと思います。

そろそろ、このブログも大幅にリニューアルしようかなと思うのですが、他にもしたいことがあるので中々、実行に移せません。

バナー作りも、いそいそとしています。フォントがほしーなー

WEBデザイナーになるなら、作成できるようにならなければならない一つが、バナーです。

今の会社でもバナー作成をしなければならないときがくるので、今のうちからバナー作成の勉強をしているのですが、

全然上手くいきませ～ん

なんか、安っぽいというか、しょぼいというか。納得できるバナーが全然できません。うーん…自分で運営しているこのブログとサイトで、自主的にバナーを作成して貼り付けて、練習しようと思うのですが、見せるのが恥ずかしいですな。

とりあえず、いっぱいバナーを見て、作成しなければ上達なんて、しないんでしょうね。

明日から、見られると恥ずかしいバナーが表示されていくと思うのですが、「あー、こいつも、いろいろとあがいとんねんなぁ」と、長い目で見てください。

オイラも努力しとるんですよ。つくづく凡才なんだと、思い知らされとりますよ。

XHTML+CSSでサイトを構築する機会が増えてきていると思いますが、少し困るのが、XML宣言の記述。XHTML+CSSでサイトを構築する勉強をすると、よく目にすると思うのですが、

IE6は、XML宣言に限らずコメントをはじめとする何らかのテキストがDOCTYPE宣言の前にあると、強制的にブラウザの表示モードが「互換モード」になる。

というのが、あります。この表示モードの「互換モード」というのは、ブラウザ独自の解釈でサイトを表示するので、自分の思ったとおりにサイトが表示されない可能性があります。なので表示モードは、「標準モード」の方が望ましいので、XML宣言を記述しないようにすることが、一般的になりました。

これは、IE6が世界で最も使用されているブラウザだったからです。しかし、まだ問題があります。

このブログは、MTで組んでいますが、ブログのカスタマイズって、普通にサイトを組むより、ちょっと難しいですよね。

ブログには、モジュールなどのテンプレートプログラムがあるので、それを理解しながら、組むのは時間が、かかります。

そこで、少しだけ、カスタマイズがやりやすくなる方法を、公開します。僕なりの、やり方なので必ずしも、やりやすくなるとは、限りませんが。たいそうな方法でもありません。

やり方は、簡単です。自分のブログをブラウザで開いて、ソースを表示して、DWとかにコピーします。それから、自分の使用しているブログのCSSファイルをDWにコピーします。

スタイルシートのリンクをローカルフォルダの中のコピーしたCSSファイルに設定します。これで、ローカル上で、自分のブログのカスタマイズができ、完成したら作成したCSSファイルをブログにアップロードして上書きします。

このほうが、テンプレートプログラムが表示されないので、自分がカスタマイズしたい箇所を見つけやすくなります。

WEBデザインやホームページの知識の勉強は、もちろん。最近は、SEOやSEMの知識、アフィリエイトの知識など、色んなことを勉強しなければなりません。付け足せば、会社の仕事も、覚えなければなりません。

でも、SEOやSEMなどの知識を得るには、いい職場です。今は、自分の仕事を、こなすのに精一杯、それと会社で扱うノウハウを覚えるのに、必死です。いつか、余裕ができれば、集客の仕事にも絡んでみたいですね。

本当に勉強、勉強の日々ですが、今の会社で盗みたい技術や知識は沢山あるので、入社できて、良かったと思います。

さぁ、勉強、勉強。いつまでも勉強っす。

久々に、色んなホームページを回って個人的に気に入っているサイトの紹介をしたいと思います。

シンプルでトップのFlashが印象的なサイト
株式会社ファジィウェイ

企業サイトですごく印象に残ったサイトです。トップページのFlashの作り方を勉強したいなぁ。こういうFlashの作り方、好きなんです。

この車、個人的に好きです
DAIHATSUコペン　スペシャルサイト

車のFlashサイトって多いですよね。いつかは、この車を買いたいと思っているので、このサイトを選びました。車の色を変えれるのは、普通なんですが、背景写真を変えたりできるのがちょっとおもしろいな。

勤め先の仕事が、今日になってド～ンと一気に増えましたよ。

いや、いっぱい仕事をさせてもらえるのは、いいことです。デザインの仕事は、当分させてもらえないですけど、色々と新しい発見や自分のサイトでもやってみたいことを学んでいます。

最近、<iframe>タグってよく使われてるんですかね？amazonでもアソシエイトで<iframe>タグ使ってるし。
フレームは、あんまり使用しないほうが良いと聞いていたのですが、<iframe>タグは、使い方によっては、面白いことができるので、ちょっと研究してみようかなと思います。

明日も仕事がいっぱいだ。

XHTML+CSSを勉強すると、覚えなければいけないことの1つにインライン要素は、ブロックレベル要素で囲わなければいけないというのがあります。

XHTMLはDOCTYPE宣言にもよりますが、<body>～</body>の範囲内に入れられるのは、ブロックレベル要素だけというルールがあるので、インライン要素をブロックレベル要素で囲う必要があるのです。（del要素、ins要素、script要素などの例外的要素は、入れても良い）

このブロックレベル要素とインライン要素というのは、覚えるのが、結構面倒なのですが、ブロックレベル要素は、DOCTYPE要素がTransitionalやFramesetの場合のみ使える古い要素除けば、13種類だけになります。

求人を見ているとWEBデザイナーの応募要項にXHTML+CSSの知識がある方というのが、増えてきてますね。

僕も、WEBデザインの勉強をしはじめのとき、これからのデザインはCSSレイアウトが主流になるという情報を得たので、重点的にXHTML+CSSを勉強しました。

しかし、後から、嫌って程思い知らされましたが、XHTML+CSSが主流になるからといってテーブルレイアウトを勉強しなくても良いというわけではありません。

まだまだ、テーブルレイアウトでサイトを作ることは、多いのです。

今の会社で、初めての仕事が、FAQサイトのコーディングでした。と、いってもそのサイトのベースは、ブログなので、コーディングというよりカスタマイズというほうが正しいですかね。

ブログのカスタマイズは、このブログでも、やったことがあるので、どうすればいいのか、わかっているのですがブログも作り方が、いろいろとあるから組み方を把握するのに手間取っちゃって迷惑を、かけたもんです。

そんな、初めての仕事が昨日、公の日を迎えましてね。いや～自分が携ったサイトがいろんな人に見てもらえるのかと思うと、感無量ですね。何回も観にいったりしては、おぉ～公開されてるとか思います。

やっぱり、WEB業界の仕事に入って良かった～と思います。

しかし、今、規模の大きいWEBサイトにも携っているので、ミスだけは、絶対できません。

ミス=即万単位で売上に損失発生。超プレッシャー

WEB関連の書籍、約1年間で買ったのを積み上げてみました。軽く20～30冊位、これに月刊誌を積み上げたら、自分の身長を超えました。

ハマると読みたくてしょうがなくなるんですよね～。で、立ち読みじゃ、ゆっくりできないから買って家で読む。むろん全てが、頭に入っているわけがない。

特にCGI（PHP）系の本は、腰をすえて勉強しないと物にならない（若干カスタマイズはできるようになりましたが）

気がついたらこんなにもいっぱい

WEBデザイナーになりたいなら、自分で考えたサイトを作成したほうがいいです。

やっぱり制作会社は、サンプルサイトがある方が評価してくれるし有利です。最近はサンプルサイトがないと書類選考で落とされることが多いので最低でも2つか3つは制作したほうが良いと思います。

真剣にWEBデザイナー目指している人ってサンプルサイトを10作品作る人って結構いてます。なので、色々なサイトを見にいって、サンプルサイトを作ってみましょう。

作ることによって分かることもあります。がんばろ～。オイラもがんばってますよ。

WEBについて勉強できる本というサイトを作って公開してみました。

このサイトは、僕がWEBデザインやWEBに関する知識を勉強すときに実際に読んだ本を紹介していると同時にamazonアソシエイトにリンクしているので、このサイトは、レビュー型のアフィリエイトサイトということになります。利益でるのかこのサイト

こういうサイトってブクログ -WEB本棚サービス-で作成すれば、簡単にできそうだったんですけど、楽して作っちゃ勉強にならないので、自分でXHTML+CSSで制作しました。

今日も、色んなホームページを回って個人的に気に入っているサイトの紹介をしたいと思います。

見た目も良くソースも綺麗。お手本にしたいサイト
MG　STYLE

Flashも使われていて見た目も良くソースもすごく綺麗です。まずは、こういうサイトをサクサク作れるようになりたいですね。ただ、残念なところは、フォントが小さすぎて尚且つIEではフォントの大きさを変更できないところ。このせいで訪問者を逃がしているのは、もったいないと思う。

有名なIT企業。でもシンプルで見やすいサイト
株式会社サイバーエージェント

有名な企業ですね～。でもサイトは、シンプルな作りで見やすく、探したい情報も見つけやすいですね。個人的な意見ですけど大企業ほど、シンプルで、求める情報が探しやすいサイトが多い気がします。サイバーエージェントもその一つ。

小物の使い方が個人的に好きなサイト
Panache

サイト下部の背景画像とか、見た目が好みのサイト。こういうの結構好き。サイトの作り方を研究したいです。

今日は、色んなホームページを回って個人的に気に入ったサイトの紹介をしたいと思います。

曲線が綺麗に使われているサイト
日本メナード化粧品株式会社

曲線が上手く使われているなぁと本当に思います。
こんなサイト自分でも作れるようになりたい。javascriptで文字の大きさを変えれるのも良心的で良いですね。

アイディア満載のサイト
韓国語教室（兵庫県伊丹市）ホームページ
ノートと教室を組み合わせているアイディアがとてもマッチしているサイト。作り方によっては、本当に楽しいページができるもんだなと、つくづく思う。

他にもいろいろあったけど、それは、また後日。

ホームページ制作会社に入社したり、フリーで仕事をしていたら、おそらく1番多く制作することになるのが企業サイトだと思います。

この企業サイトには一般的によく使われる、レイアウトがあります。というか、一番見慣れているレイアウトじゃないかと思います。

逆L字型ナビゲーションと呼ばれるレイアウトです。

逆L字型ナビゲーションのレイアウトとは、ヘッダーにナビゲーション、コンテンツ左側にサイドナビ、右側にメインコンテンツがある形をこう呼びます。

このレイアウトは、膨大なコンテンツの中からでも目的の情報が探しやすくなるのが理由でよく企業が採用します。

昨日は、自分のWEBサイトまたは、ホームページの主要なキーワードを調べられるサイトを紹介しました。

しかし、そもそも自分のホームページにどういうキーワードがあるのかが分からないという人もいると思います。

そんな人のために今日は、自分のサイトに関連するキーワードを調べられる有名なサイトを紹介します。知っている方も多いと思います。

自分のホームページのキーワードを知ることで、昨日、紹介したサイトで、その順位を知ることができるので一度試してみてください。

さて、そのサイトとは

WEBサイトまたは、ホームページやブログを運営していると、Googleなどの検索エンジンにどのようなキーワードで何位くらいで、表示されるか気になると思います。

ただ、GoogleやYahoo!で、検索キーワードを打って自分のサイトの検索結果が表示されるまで調べるのは、大変なときもあります。

そんなときは、便利なこのサイトを使いましょう。

昨日CSSが全く適応されない話をしましたが、今日も相変わらず原因が分からず悩まされることに。

xml宣言を入れているのが悪いのかとも思いましたが、firefoxでレイアウトが大幅に崩れているので関係なさそう。

文字コードをUTF-8にしているから駄目なのかと思い一度Shift-JISに変更してみても駄目。

3カラムのサイトを構築しているので、その3カラムの一時的に2カラムにしてみても駄目。

駄目、駄目、駄目…

そこで、ふと思いました。

「構文チェックサイトで確認してみたら何か分かるかも…」と。

そこで、まずは、XHTML構文のチェックをしてみる。問題なし。次にCSSの構文をチェック…

エラー!が2つ!

hackを使用したときは、いつも1つエラーが出るのですが、それは、CSS2.1で定義されている文法を使っているので問題ではありません。

しかし2つ目があるということは、何かおかしいところがあるのです。そして解りました…

CSSが適応されない、その原因は!

先日から、勉強する為に新規サイトを作成しているのですが、何が原因か今の所、全く分からないのですがheader部分以外にCSSが解釈されない（適応されない）事態に陥ってしまい手付かず状態です。

う～ん、これは、1から組み直しかな？

こういうとき、スクールとかに通っていると講師とかに原因とか聞けるのですが、今はネットで検索しかできない。しかし検索しても該当事項が見つからない…

う～ん悪循環。

昨日はPhotoshopのペンツールを使えると便利といいました。それと、自分なりの練習方法を公開させていただきました。

今日は、ペンツールが使えると、どんなことができるのかを一部お見せできたらと思います。まず下のように車の画像を用意しました。

昨日の練習方法で、空き缶が切り抜けるようになれば車も切り抜けるといいましたので、まずは切り抜いてみます。

WEBデザインの勉強しているとPhotoshopを使う機会が多いと思います。その中で特にペンツールの機能を使うことが多いと思います。

このペンツールの機能ですが、最初は苦戦すると思います。ですが使えるようになると、かなり便利です。

使いこなせるようになるには、練習一筋です。しかし一概に練習と言っても、どう練習すれば良いのか分からないという方もいると思います。ここで一つ身近な物を使って練習する方法があります。

僕は、ＷＥＢデザインの勉強をし始めてから、重点的にやっているのがＸＨＴＭＬ+CSSでのサイトの構築です。もう最近は、<table>タグでホームページを作成するほうが難しく感じるくらいです。

それでも、未だにブラウザの解釈の仕方には、頭を抱えてしまうときもあります。

各ブラウザの表示の違いは、仕方のないことですが融通が利かない現象が毎回現れます。…

WEBデザインのレイアウトは、訪問者が使用していると思われるディスプレイの表示解像度と同じか、より小さいサイズを基準に領域を決めています。現在普及している表示解像度の最小値は幅800×高さ600pxです。

この最小値をターゲットディスプレイサイズとした場合、レイアウトのサイズは幅780×高さ450px程度になります。

ターゲットディスプレイより、レイアウトのサイズのほうが小さくすることには理由があり、ホームページを閲覧するときは、ブラウザを介して閲覧しますよね。このため、ディスプレイ内にはWEBページのほか、各種ブラウザのインターフェイスを表示するスペースが必要になります。

その占有領域をターゲットディスプレイサイズより引くことによりレイアウトのサイズが決まります。

情報社会の現在、一般人が求めているのは情報でありデザインを見ているのでは、ありません。これは、確実です。どんなにデザインに優れたサイトであっても、訪問者が求めている情報が見つかりにくければ、そのサイトに訪れてくれる人は減少していくでしょう。

今のサイト制作で大切にしなければ、いけないことは訪問者が求める情報を見つけやすくするこです。

WEBサイト（ホームページ）のわかりやすいレイアウトとは、訪問者が求めている情報を直感的に伝えられるレイアウトです。シンプルですっきりとしたレイアウトにすることを心がけ、訪問者にとって見やすいページにすることが大切です。見やすいことや的確に情報を伝えることを心がけることはアクセシビリティやユーザビリティにもつながっていくことになります。

また、レイアウトを考えるときに注目したいのは人の目の動きです。人間の視点は、左から右、上から下に動くと言われるZの法則と、Fの字を描きながら視点を動かすFの法則があります。これらの動きを意識してコンテンツを配置するようにします。例えば、更新履歴やメインコンテンツは訪問者が最初に読みたい情報です。このような重要な情報は、なるべく左、なるべく上から並べていくようすることが大切です。

基本を抑えることが、素晴らしいWEBデザインの一歩に繋がると思うので、僕もこれらのことを頭に叩き込んでおきます。

webレイアウトと配色は奥が深く特に配色は難しく感じます。中々サイトに適した配色ができないです。

色のことを学ぶには、基礎知識として色の三属性と色の持つイメージを知っておくことが大切みたいです。

webデザインを勉強していると、SEOという言葉を聞きますよね。というかWEBとは切っても切れない存在それがSEO。自分でホームページを作成したことがある人は、ネットでアクセスアップの知識を知ったり学んだりするので、耳にすることが多いと思います。

ここで、いきなり質問：SEO対策ってどうすればいいの？

…

A：…どうするんでしょう。分からないですね～。簡単に分かれば苦労しないですよね。

WEBデザインするときに使うソフトは、おそらくPhotoshopかIllustratorかFireworksの3つだと思うのですが、皆さんは、どのソフトでデザインをしますか？

僕は始めの頃は、メインはIllustratorで補助的にPhotoshopを使用してでデザインしていました。Illustrator でデザインするときのメリットは配置のしやすさかな？デメリットはスライス機能が、いまいち使いづらい所。この頃は、Fireworks嫌いでした。ペンツールがPhotoshopとIllustrator に比べると使い辛かったので…

でも、以前務めていた制作会社はFireworksでWEBデザインを作成していたので、Fireworksも勉強しました。今では、デザインはメインはFireworksで補助的にPhotoshopを使用しています。Fireworksも、きちんと使用してみると扱いやすかったですね。スライスツールは特に扱いやすくコレを覚えたときには、Illustrator をメインに使わなくなりました。

皆さんは、どのソフトでどうデザインしていますか？

WEBデザインを勉強してますが、ロゴデザインにも興味があります。

ロゴデザインって色々あって面白いと思いません？よく思いつくなぁーっていうのも結構ありますし。

それに面白いとか憧れとは別にロゴデザインって、できるようになればホームページやブログのトップバナー(ヘッダーデザイン)とかも締まりのあるデザインになるし幅が広がると考えてます。

自分が作成したロゴで納得できるロゴデザインができたっていうのは一つもありません。オリジナルになるとアイディアが浮かばないんです…まだまだ、それだけロゴデザインも作り足りないんでしょうね…WEBデザインで活躍している方も尊敬していますが、ロゴデザインで活躍している方も尊敬します。

余談ですが、Photoshopのレイヤースタイルのべベルとエンボスを使用したロゴって綺麗で結構好きです。下のバナーは元の大きさより少し小さく縮小していますが、これもベベルとエンボスを使用して作成しました。

WEBデザインを勉強していくと、WEBデザインだけに専念する人か、コーディングだけに専念する人になることがあります。これは、駄目というわけではありません。WEBデザインに専念する人って多いらしいですし。

ただ、僕個人の意見になりますが、まったくコーディングの知識がなくWEBデザインに専念する人は問題があると思います。絶対駄目と言うわけではありませんが、コーディングの知識がないが故にコーディングするには無理があるデザインを作成する可能性がでてきたり、コーダーに無理を強いる可能性がでてくると思います。最悪デザインから、やり直しになる可能性もあり最終的には作業効率も低下します。

作業効率を考えれば、デザイナーもコーディングの知識を知っておくべきだと思うんですよ。逆にコーダーがデザインの知識を知れば、自分の幅が広がりディレクターへの道も見えてくるかもしれませんね。

コーディングもできて、デザインもできるようになる方が良いというか楽しいと思うんですけどね～。
僕はデザインもコーディングの技術も、まだまだ未熟だけど、自分でデザインして最終的にコーディングしていく工程が好きなんですよ。完成した充実感が大きいからです。

…最近は、WEBデザインもコーディングもできるように勉強していかないとホームページ制作会社に入社したり転職したりするのは、難しいとも思うしね…

WEBデザインは、まず何の色のついていないデザインレイアウトを先につくり、全体のバランスを見ながら、色をつける部分を考えると配色はスムーズになると書かれている本がありました。

その理由は配色より先にレイアウトが決まっていれば、重要な部分や目を引きたい場所などを明確にすることができます。そして、そのレイアウトに合わせて、用いる色を決められます。

デザインレイアウトをしながら配色をすると、全体のバランスが頭の中で、はっきりしていないと効率が悪くなったり、修正工程が多くなりやすくなるそうです。

人によってデザインの仕方は人それぞれだと思いますが僕は、この本に書かれている通りの仕方が効率がいいと思いました。

WEBデザイナーになるためには当然学ぶことが必要になりますが、どうやって学ぼうかと最初は考えると思います。

だいたいマルチメディアスクールや専門学校で学ぶか、自分でネットで調べたり本を買ったりして独学で学ぶか、この二つに分かれます。

どちらの学習方法で学ぶ方が正しいとは言えません。どちらにもメリットがあるし、デメリットもあるからです。スクールで学べば、分からないことは講師に聞くことができますし同じ志を持った仲間とも巡り合えることもできます。独学で学べば、最低限の費用で知識を学ぶことができます。

インターネットエクスプローラー、通称IE。世界で一番使われているブラウザだというのはWEBのことを学んでいたら、必ず知ることですよね。現在Ver7がマイクロソフトよりリリースされていますが、使用されているのはVer6の方が、まだまだ多いです。

これまた有名ですがIE6は、XHTML+CSSでサイトを構築すると独自の解釈でサイトが崩れることがあります。もちろん僕もIE6に泣かされたことが多々あります。

今では、それなりにですが対処方法も分かってきたので悩まされることは少なくなりつつありますが、たまにとんでもない現象を見せてくれて唖然となります。

思うにIE6って頑固なんですよ。周りと同じじゃ面白くないから周りと違う個性で我が道を行くみたいな感じで。

こんな頑固者とは付き合ってらんねぇ!…と、言いたいところですが突き放せないのも事実だし、そんな頑固なところが憎めないと思えたりします。

もうしばらくお世話になりますIE6。