北から南や西を見て思うこと: WebプログラマのためのHTMLデザイン(その2)

前回からの続き。先に前の記事を見ておいた方が理解が早いよ、きっと。

HTMLタグ周辺知識の覚え方

昔はとほほで逝けたんだけど、さすがにちょっと内容が古いようで、最近はTAG<index>さんが人気あるのかなぁ。

他にはHTMLクイックリファレンスさんとかHTMLタグボードさんあたりなのかな?

重要なのは、全タグをさらっと把握することと、ここのように「テキストの意味」に関するタグを集中的に覚えること。

あまり時間をかけなくてもいいと思う。(目標1時間)

headタグとかimgタグといった一般的なタグを理解できているのであれば、HTMLとしての意味付けやグルーピングの仕方なんぞ、CreativeCommonsモノを使う/参考にするか、もっと言えばYahoo!などの大手のサイトのHTMLを参考にすれば、全然問題ない。先にも書いたが、まるパク出来るほどデータ構造が同じケースなんてほとんどあり得ないから、どっちみちそこそこ修正が入る(もしくはそこに意匠権が存在するほどいろんな表現方法があるわけでもない)ので、どんどん参考にすべし。プログラミングもそうだけど、HTMLデザインも他人のコードを読むのが上達の秘訣な気がする。

それより、サーチエンジンがコンテンツの意味を解析する上で、短中期的にはタグによるコンテンツのマークアップから意味を解釈することが多いだろうから、意味づけに用いるタグを把握しておき、積極的に使う事が重要。(ただし、長期的には日本語や英語や中国語といった言語ごとに自然言語解析技術が進歩し、これが浸透することで、対照的にマークアップの意味は薄れていく気がする。まぁ、少なくとも今後5年間はマークアップ優勢だと思う)

SEO周辺知識の覚え方

あ、そうそう。日頃使わないHTMLタグのフォローアップはSEOを絡めた方が学習効果が高いと思う。

まったく知らない人でも、

検索エンジン最適化 - Wikipediaで概念を把握して
SEO重要要因ランキング（Google版）―日米SEOプロ60人が評価した重要度 | Web担当者Forum を眺めて
SEO基本技術のチートシート（トラの巻）を作ってみた | Web担当者Forum で実務を押さえる

で十分だと思う。(目標1時間)

まー、本格的にやるならSEO業者に任せたり、Yahoo!ビジネスエクスプレスを通したりと、色々お金がかかるけど、基本部分であるSEOチューニングは、プログラマの方が考え方や将来像を読みやすい(検索エンジンのエンジニアの思考を読み易い)んじゃないかと思う。実際問題、動的コンテンツのSEOチューニングはプログラマじゃないと手を出せないしね。

CSSやデザインの基本概念の覚え方

まー本を買うのが一番詳しいんだろうけど、デザイナ向けの1ページ1項目的なリファレンスって、どーも好きになれない(主観)ので、おいらのおすすめ的にはエンジニアのためのWebデザイン教室になる。色使いなどデザインの基本的な説明もあるしね。

まぁ、ソースまでちゃんと読むと結構時間かかるし、正直どうよって思う記事もあるけど、おおよそは把握できるんじゃないかな。

CSSのリファレンスとしては、上記TAG<index>さん、HTMLクイックリファレンスさん、HTMLタグボードさんあたりで十分なきがする。

あと、重要なのはドリとかAptenaとかで、タグ補完と互換性のチェックができる環境を使うことかな。

連載読んでリファレンスに目を通して環境揃えるまで10時間強ぐらいはかかるかもねぇ。

注目すべきAjaxライブラリ

ぽん付けで、見た目がキレイという意味で、ExtJSかjQueryがいいと思う。

ExtJSをちゃんと使うにはライセンス料が必要なので、jQueryの方が注目されていてWeb上に情報も見つかると思う。

ExtJSはフルセットで揃っていて組み合わせテストも大丈夫だけど、jQueryは一つ一つ気に入ったモノを揃えていく感じかな。

興味があるなら、

ExtJSならmojalog labs ExtJS まとめ
jQueryならjQuery入門

から辿るのがいいと思う。

「なんとか集」とか「なんとかツール」類のまとめ

まずはこの記事と同じ視点のまとめサイト

これらまとめサイトから、おいらが使えそうと思ったモノ+自分で調べたモノのうち

色を決めるときのアシストツール

[ws] Color Scheme Generator 2 (1色を指定すれば色相環から合わせの色を教えてくれるツール)
Color Palette Generator (写真から合わせの色を教えてくれるツール)

各種チートシート類(これで全部足りる)

以下探せばいくらでも出てくる。中には商用利用が可能なモノもあるので、リンク先のリンク先などもチェックしてみては?

てか、gigazineさんかcolissさんで、サイト内検索かけた方が早いかも。

素材検索

HTMLテンプレート集(リンク先は基本英語。ただ方向性の違いからそのまま日本で使うには合わないかもしれない)

CSSサンプル集

アイコン集(基本英語)

挿絵or背景用写真集

商用・非商用で使用できるフリーの写真素材サイト集 | コリス
無料じゃないけどデザイン界隈では定番な写真素材、素材辞典のsozaijiten.com

開発用ツール(無料で使える系)

FireFox使え(使ってるんだろうけど)
FireBug使え(使ってるんだろうけど)
Aptena使え(フリーモノとしては異常に良い)
あとカラーピッカーとか?
画像サイズを計るものとか?Mozilla Re-Mix: 閲覧ページの各部サイズを計測する「MeasureIt」
あーもーたくさんあるから、「Firefox + デザイン」でググった方がいいよ

常時チェックすべきサイト

その場でググったものが多いので、定番も結構外れている気がする。

「これは入れないと」ってのがあったらフォローお願いします。

クリエイティブコモンズの要点

まー、日頃からオープンソースモノを使ってるプログラマなら、ある程度ライセンスに詳しいと思うんだけど、企業の下で働いている限り、クリエティブコモンズを日頃から使っているってのはごく少数だと思う。

プロプライエタリ分野ではクレジットが重要だからね。

まったく知らなくても、

クリエイティブ・コモンズ - Wikipedia で概要を把握して
Creative Commons Japan - クリエイティブ・コモンズ・ジャパン - learn でもやもやしたものを吹き飛ばし
creative commons 日本語情報から詳細を追えば

実務は問題ないんじゃないかな。

あと、プロプライエタリ分野で使いたいときにクレジットが邪魔で、かつライセンサーが1人だけの場合は、外してもいいかどうか直接交渉するという手もあるかも。まぁ、普通対価は要求されるんだろうけども。

デュアルライセンス - Wikipedia モデルだね。説明としてあまり適切ではないけど、Web2.0のビジネスモデルその3「オープンソース」 - GIGAZINE が参考になるかな?

超重要な事

現役デザイナで腕のいい人と友達になろう。

色々面白い話を聞けるし、考え方の参考になったり、モチベーションアップに繋がる。相手もプログラムのことを知りたがってたりね。

友達を作るにはデザイナ向け勉強会とかに参加するのもいいかもね。(あまり面白くないかもしれないけど、刺激にはなると思う)　打ち上げが重要。飲めなくても参加すべし。

CSS Nite公式ブログとかチェックしてれば、興味のあるイベントもあるんじゃないかな?

北から南や西を見て思うこと

2008年8月5日火曜日

WebプログラマのためのHTMLデザイン(その2)