2010-09-30
無料で使えるSEOツールまとめ
seo |
yahooとgoogle検索エンジンに提携？ニュースもあり、今後のSEOが注目されている。
ウェブコーダーにとってもSEOを意識したコーディングは必須となるので、
そんなときに役立つSEOツールをいろいろ探してみた。
ホームページのURLとキーワードを入力すればその順位がわかる。
キーワードを入力するとその言葉で現在上位表示されているホームページが表示され、
内部のキーワード出現頻度やドメイン取得日時、被リンク数などのデータを閲覧でき、分析に使える。
すでにまとめられている方を発見。
かなり便利そうだが、海外サイトなのでちょっとわかりにくいかも。
無料なので複数のホームページの検索順位を一気に調べるとまではいかなくても
FC2さんのはけっこう助かると思う。
あと、ピタゴラスはすごいね。
これあればライバルサイトの分析もできる。
2010-09-19
フォトショップを極める
主に代表的なホームページ制作に使用するソフト（デザイン面）は３つあり、
フォトショップ（photoshop）、イラストレータ（illustrator）、ファイアワークス（fireworks）である。
当然「ウェブデザイナーはすべて使用できて当然！！」なわけではなく、
どれか一つを極めればホームページのデザインは作成できてしまう。
一般的にはフォトショップをメインで使うデザイナーさんが多いのかな。
もしくはファイアワークス。
fireworksは、photoshop、と、illustrator、を足して２で割ったソフトと言われている。
ドリームウィーバーとの相性も良い。
ソフトの勉強をすると、
「なんかこのソフトは自分に合ってるな。」
とか、
「このソフトは感覚がつかめない。。」
といった得意不得意が出てくる。
すべて完璧にこなせる人ってなかなかいないと思う。
何か一つ得意なデザイン系ソフトを持ち、
バリバリに使えるようにすることが得策だ。
ただホームページ制作会社によっては、
「うちはフォトショップで統一してます。」
といったように制約がある所もあるらしいので要注意。
2010-06-29
HTML5の普及とネットのめまぐるしい進化
まだＩＥ６やＩＥ７のシェアを無視できないため、
早いかもしれないがHTML5についての情報がしばしばホームページで目にするようになってきている。
HTMLで図まで描ける！進化した「HTML5」ってどんなもの？ - はてなブックマークニュース
ネット業界は急速に進化していくため、
一生勉強し続けなければならない。
今回のHTML5にしてもこれから専門学校などで学ぶという学生は良いが、
すでにホームページ製作会社に就職しているウェブデザイナーさんやHTMLコーダーさんは
自力で学ばなければならない。
もちろん、基本的には今までとそれほど変わらないが、
そういう学ぶ意欲がなければやっていけない業界なのだろう。
一昔前はテーブルレイアウトが主流だったのに、
今では検索エンジンに優しいＣＳＳでのレイアウトが当たり前になっている。
年をとってから変化についていけるかが心配だ。
2010-06-09
コーディングもデザインもウェブデザイナーが担当！？
ウェブデザイナー |
ウェブ（html）コーダーは、ホームページのhtmlやcssのマークアップに特化した仕事。
ウェブデザイナーは表面的なデザインをフォトショップやイラストレータで制作する仕事。
といったように、役割を分担するホームページ制作会社はやはり少ないように思う。
人件費の事もあるし、「マークアップ専門スタッフによるコーディングが高品質なのが強み！！」
という会社を除いてはウェブデザイナーがすべて一人でやらなければならない場合が多い。
となると、やっぱりウェブコーダーという専門職に就くのは厳しいだろう。
もちろん、ＳＥＯに強い、レベルの高いコーディング能力を身につけ、
ＣＭＳやＰＨＰも扱えるという付加価値も合わせもてば社員として雇ってもらえるところも見つかるだろうが、かなり苦しいだろう。
結論的には、フォトショップなど使った表面的なデザイン技術も習得する必要があるだろう。
さらに言えば、フラッシュやマーケティングの知識、ＳＥＯやＳＭＯを学ぶといった、
売り上げアップや集客方法についてもある程度勉強する必要がある。
このように考えると、ウェブデザイナーとは様々な分野に携わらなければならない仕事であり、
ＩＴの変化に遅れずついていくため常日頃から向上心を持つ必要もあるため、
かなりハードな職種といえるかもしれない。
2010-04-20
左メニューに縦へ繰り返し背景をつける場合
CSS |
一般的に、floatを使ったレイアウトの場合、浮いた状態となるため、
レフト部分のみに背景を敷きたいときにはレフトとライトを取り囲む
＜Div>の背景として表示させることが多い。
つまり、レフトの部分に色をつけ、
ライトは白（背景が白の場合）で塗りつぶしたような画像を作り、
これを背景画像としてrepeat-yで繰り返すことになる。
ただ、ttp://www.baikal.jp/shop/
こちらのホームページは少し変わっている。
なんとコンテンツ部分だけでなく、
ヘッダーも含んだページ全体を囲んでいる＜div>に背景を表示させているのだ。
一般的に、＜div id＝"container">や＜div id＝"wrapper">といわれる所に
背景画像をrepeat-yで繰り返しているということだ。
ちなみにここのホームページの場合、
レフトの赤い色に加え、左右のドロップシャドウも合わせて背景画像を作っている。
このような場合、
当然ロゴなどがあるヘッダーやグローバルナビの一番下には
レフトの赤い背景が表示されることになる。
ですが、ヘッダーにはヘッダー用の背景、
メインビジュアルにはその背景が別で適応されているため、
コンテンツ部分のみ赤い帯が表示されているように見せている。
「あれ、じゃあグローバルナビの下の白い余白はどうやって作っているの！？」
これは、グローバルナビのbackground-colorを白にして、
さらに余白をつけたいだけpaddeing-bottomを適応させることで白く見せているのである。
つまり、レフトの赤い帯の上に、
グローバルナビのbackground-color：白をかぶせている状態といえる。
これを利用すれば、レフトとライトといった複数の部分に左右非対称な！？背景画像をつけたい場合、
背景コンテンツを取り囲むDivと、全体を囲むdivのそれぞれに背景画像を適応して見せることも可能になるだろう。