Pocket

ぼくにはまだ直属の後輩はいませんが、作業内容について教えることがある後輩はいます。

その後輩に、口を酸っぱくなるほど伝えてきたこと。

それをぜひ後輩に後輩ができたら教えてほしいと思っています。

今はもうスクリプト書いたりしていますが、やはり入った当初は、修正や更新ばかり指示されます。

まぁ、未経験で入ったり、実務経験が浅いとしょうがないのですが。

おそらく、直属の上司じゃないぼくが振った案件が、初めての

0からマークアップしてCSS構築をする。

仕事でした。最悪、納期に間に合わなければぼくがすべて組み直すつもりでしたけどｗｗｗ

その案件は、後輩にHTMLとCSSコーディングしてもらったあとにぼくがWordrepssのテンプレート化するという内容。

動きのスクリプトもできるだけ考えさせました。

構築する上でお願いしたのはたった2つのこと。

まず一つ目。

「もしもこうなったら」を常に考える事

コーダーは入社当初、（ぼくもそうでした）デザインをいかに忠実に再現するかということにしか重きを置かれません。

会社にもよるとは思いますが、まずは見た目から入ることが多いと思います。

だからこそ、コーダーは、文字サイズや余白、マージンやパディングに最大限の努力をします。

実際のところ、デザイナーがデザインしている段階では、いい感じに文字が入ってます。

いい感じとは具体的には、改行や文字サイズ、文字間が調整されてかなり美しい状態。

それを、忠実に再現するとだいたい本番運用が始まってから修正が入ります。

項目がデザインより増えた。

文字サイズがクライントの環境では違う。

OSによってアンチエイリアスがかかったりかからなかったりする。

デザインと同じ色なはずなのになんか見づらい。（特にグレー）

デザインは1行だったものが実は3行になった。

とかとか。静的なHTMLサイトだとまだいいですが、CMSで構築されていると後からの修正は厄介です。

自分でCMSまで触れるなら文句は言いませんが。

だからこそ、

「もしもこうなったら」を常に考えることが大事です。

HTMLやCSSにはif文はありませんが、頭の中でもしもこうなったら、もしもこれがこうなったらを考えて欲しい。

その２

「文章構造を意識すること」

独学だったり、デザインがメインの専門学校だとなかなか意識しない部分だと思います。

実際後輩のマークアップもほとんど修正させました。

たとえば、このような文章が合ったとします。

最後がちょっとやっつけですねｗ

こういう文章をどうマークアップするか、人それぞれやり方はありますが、まずはdivもspanも使わないこと。

divやspanには文章的な意味は一切ありません。

文章の内容を考えると、マークアップ例として

以下のようになるのではないでしょうか。

ぼくはあまりdl、ol、tableは使いません。もちろん、文章構造的に合っていれば使いますけど。

まとめ

以上がぼくが繰り返し教えた２つのことです。２つ目はSEOの意味も含んでいるので、タグの意味を考えたマークアップをすること。そこからCSSでレイアウト、装飾をすること。

１つ目のもしもを考えることは、ぼくが開発のプログラマと仕事した時にかなり苦労した経験からです。（プログラマはテンプレートの修正を嫌がるし、繰り返しを多用するのではじめに考えておかないまま作業をしてよく喧嘩しましたｗ）

それに、この考え方はJavascriptやphpなどで繰り返し文やif文を作るときの基礎的な考え方になると思っています。

以下に汎用性をもたせるかという部分で。

こんなことを教えて教えた後輩が、途中で心折れずにこれからもがんばってくれることを期待して終わります。

Pocket