WEB設計図を読む力

僕は専門学校でWEBデザイナーコースの授業を週19コマ受け持っているのですが、２年生のこの時期には毎年決まって出す課題があります。

それは、既存サイトをXHTMLとCSSで組み直すというもので、自分で選んだサイトを見て、見出しのアウトラインを見つけ、デザインのパターンからclassを作り、出来る限りシンプルなXHTMLで文書で、可能な限りCSSでビジュアルを実物と近づけるというものです。

本当、この時期就職活動のための作品も残さなくてはいけないから、時間も貴重なのだけど、出来るだけ多くのサイトを、習ったとおりに作り直して欲しい。これは本当にスキルアップする課題だと思うから。

他人がレイアウトしたものを再現する過程では、自分が考えたものを再現するのとは、逆の順序を辿って考えなければいけない。

まず、見出しのLVを読み取り、アウトラインを作るには、そのページの文章を読み取って理解しなければいけない。見出しの大きさや装飾だけでLVを決めてしまうとXHTMLの構造にも無理が出てくる事が多い。

似通っているデザインがあれば、なぜそれが似通っているのかを考えなくてはいけない。同じような機能を持っているものは同じような形だったり、色であったり、場所によってグループになっていて、それらの機能的な共通点を見つける事が出来れば、少ないclassによってCSSの記述(編集)を楽にする事が出来る。これは、１つのページだけでなく、サイト全体を見回さないとわからないような場合もあるけれど、idによる唯一のデザインなのか、サイト全体で、ある機能を表すためのclassによるパターンなのかを見極める力って、自分が何か製作するうえでもとても大事なものだ。これは言い換えれば、他人の書いた設計図を読む力をつけていると言える。

設計図を読める(理解する)力がつけば、自分の描く設計図は他人にとって読みやすい(理解しやすい)ものにできる。理解しやすい設計図は、優れた設計図だ!!

そしてそのうち、「(X)HTMLもCSSも、制作者が楽するために出来ているのではないか？」と、フワっと思うはず。