Yoshipan Blog - webdesign -

書籍『Web制作者のためのCSS設計の教科書』と出版記念イベント『CSSオジサン #0』のお話。

公開日: 最終更新日:2017-01-20

書籍「CSS設計の教科書」

先週の土曜日、2014年11月10日に谷 拓樹(@hiloki)さんの著書『Web制作者のためのCSS設計の教科書』出版記念イベント『CSSオジサン #0』に行ってきました!

2週間程前にUPした記事「今秋はWeb系セミナー(in関西)がいっぱいあるよ!」で「この日までに読了するぞー!」って高らかに宣言しましたが、5章までしか読めていないまま参加しました。有言不実行@よしぱんです。

メンテナブルでありつづけるためのCSS設計

まずは著者のhilokiさんのセッションです。セッション内容はスライドと、あと森和恵さんのブログ記事「『CSSオジサン #0』で、CSS設計を学んできました」を読んで頂いた方が絶対良いので、私は読了ほやほやの書籍+セッションで自分が考えたことを書きます。

[slideshare id=41284104&doc=maintainable-css-141108001958-conversion-gate01]

書籍「Web制作者のためのCSS設計の教科書」を読みながら考えていたのは、私の実務でこの内容がどれだけ活かせるかってことでした。

会社やチームで制作している場合はCSS設計ってめちゃくちゃ大事だし、ルールをメンバーが共有することも必須だし、絶対この本読むべきだ!って断言できるんです。

弱小フリーランスでも活かせるか

私は個人で制作していて、案件は大体下記2パターンです。

  • 既に完成している大規模プロジェクトのコンテンツ追加(特集ページ、LP等)
  • 中小企業や店舗などの小規模サイト(5〜20ページ程度+新着情報)
大規模プロジェクトのコンテンツ追加の場合

前者の場合、大元のCSSは既に破綻しまくり、いろんな人が追加するので都度CSSファイルは増え、同じようなスタイルを付けるのにも別ファイルからコピペして別クラス名をつけて使うなど、無駄まみれになっています。

また、他ファイルに汚染されてしまわぬよう、わざとIDをつけて詳細度をあげるなど、本書に書かれていることと真逆のことを意図的にやったりもします。

良くないって分かっていても、既に完成された他社のプロジェクトをメンテナンスする権限も予算も優しさも無くて、見て見ぬふりをしています。

これに関しては、折を見てPMさんに「これでお互いハッピーになりませんか?」と本書を薦めてみることにします。

小規模サイトの場合

後者の場合は、自分でイチからコントロールできます。詳細度を上げない書き方など、すぐに出来ることは早速取り入れました。

ただ、大規模案件では無いのに、メンテナンスのしやすさや再利用性を考えてclassをいっぱい付けることは、「htmlファイルにあまり余計な記述をしたくない」という今までの癖との葛藤もあったりします。

やっぱり予算も無いし、これまでに蓄積してきたスニペット倉庫からポンポン出していった方が早いし…という甘えもありました。

自分の書き方を見直す良いきっかけになった

だけど書籍を読み進め、本セッションを聞き、懇親会でhilokiさんにも直接お聞きして、出来るところから見直していこうと思いました。

例えば1枚もののLPを作る時。作りきりで更新もほとんど無いので、メンテナンスとか必要ないしって思ってたけど、しっかり設計しておけば、他の案件にコードを使い回すのが今まで以上に楽になると思います。

チームで制作していなくても、半年後の自分が見て分かりやすい、手を入れやすい記述の仕方を考えなおそう。

可能なら、ルールをまとめたドキュメントも作っておけば、私が万が一倒れて他の方に助けてもらうことになった時にもスムーズに引き継げるかもしれない。

案外、フリーランスの身を守るものになるかもしれないな、と、大げさだけど思いました。

この書籍では、世界のすごい人たちが模索し提唱している設計方法をまとめて紹介してくれています。それらを踏まえてhilokiさんが作らはったガイドラインも掲載されています。(すごい人達が時間をかけて作らはったガイドラインをまとめて読んで、いいとこどりで拝借できるのでお得ですね!)

この本は読んで終わり!ではなく、読んでヒントをもらって考えて、自分のプロジェクトにあった設計ルールを作っていくための指南書だと思います。

今後もCSSをゴリゴリ書き続けるために、出会えて良かった1冊でした。サインももらえたし!

CSSコードレビューの仕方教えます

続いて斉藤 祐也(@cssradar)さんのセッションです。

恥ずかしながら、HTMLのチェックや表示速度テストは行っていてもCSSコードレビューってほとんどしていなかったので、このセッションは一から十までめちゃくちゃ勉強になりました。

今まで私は「いかに完成度の高い、後から修正不要なコードを書けるか」って考え方だったのかもなぁと反省。

hilokiさんのセッションや書籍とも重なりますが、大事なのは「いかにメンテナンスしやすい、修正しやすいCSSを書くか」であって、後から手を加えやすいコードを書くことなのですね。「コードは書く機会より読む機会の方が多い」って、確かにそうだなと。

斎藤さんのセッションでは、一度書き上げたコードの見直し方を、様々なツールの紹介とともに、具体的に教えてくださいました。

「重複している、必要ない、使っていないものは無いか」等を調べるのは、スライドで紹介されているサービスを使ってすぐにでも実行できるので早速試してみます。

いざ修正するとなるとちょっと腰が引けるけど、「少しずつでもいいから、着実に」という言葉がまた励みになりました。

CSSオジサン、この先生きのこるためには

最後は石本 光司(@t32k)さんのキャリアパスのお話。大企業をすっぱり辞めて5ヶ月間語学留学に行かはったお話をt32kさんのブログ(Webエンジニアからみたフィリピン語学留学)で読んでいたので、今セッションをとても楽しみにしていました。

デザイナー時代の、デザイナーの仕事を数値化したかったという内容がとても面白かったです。デザインの価値を数値化して、それを自分を評価してお給料をくれる人に見せる…なかなか出来ないことだなぁ、凄いなぁ…と。

教育や共有による効率化のこと、StyleStatsMapleを公開された経緯や、世界に目を向け英語の必要性を感じて語学留学に行かれたお話など、どの内容もめちゃくちゃ面白く、その行動力にただただ感服。

t32kさんのような凄い人でも、きっと取捨選択する時には色々悩んだのだろうし、勇気も必要だったと思います。それでも前を向いて未来を見て、現在進行形で着実に実現実行してはる姿に、感動しました。

同じようには出来ないけれど、私も色々諦めずに変化し続けよう。

関西でCSSに特化したイベント…?

『CSSオジサン #0』はCSSに特化したイベントということでとっても楽しみにしていましたが、CSSだけでなく自分の仕事に対する姿勢から人生設計までもを考え直す機会となった、とんでもないイベントでした。

参加できて良かったです!

Webデザイン > セミナー・イベント タグ: ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Back to top