はじめに

エンジニアとして新しいプロダクトに携わる際に一つの障壁となる中にHTMLやCSSの設計がありますよね。
多くのプロダクトに携わって来られた方こそ柔軟に対応しプロダクトに適応していくかもしれないのですが、初めのうちは１つの機能を追加するのにも、どのようにHTMLを設計して、デザインを適応させるためにどのようなCSSを書けば良いのか分からないという人も少なからずいると思います。

そんなデザインに対する苦手意識を抱えているエンジニアの方に対して、意識することで少しだけマークアップに対するハードルが緩和されるようなtipsをまとめました。
CSSやHTMLについて説明するというよりも、その周囲の思想や設計手法に比重を置いて文字と参考リンク多めで説明を書かせていただいています。
普段開発をしている中で以下の様な考えがある方に見ていただけると幸いです。

1つ機能を増やすだけなのにどのような構造でhtmlを書けば良いか分からない
プロダクトで用いられているclassの命名規則が理解できない
どのスタイルシートに記述すれば良いか分からない

本題: 5つのTIPS

1. HTMLの基本要素を理解する

HTMLを設計するにあたってインライン要素やブロック要素といった考え方は多分馴染みがあると思います。もし無い場合もこちらの説明を見ていただければすぐに理解できると思います。

このブロック要素とインライン要素という概念はHTML5の登場とともに廃止されたわけですが、その理由はそれまで実現しようと思ったら実装が煩雑になりがちだったことが、HTML5から新しく登場したタグのおかげで簡単にできるようになったからです。
つまり、そんな概念良いからもっとシンプルにできることはよりシンプルに実装しようぜとなったわけですね。

どんな機能を実装しようと思っても、まず最初に最もシンプルに実現が可能そうな要素を知っていることが重要です。知らないのに実装を行うとすると僕の場合そうだったのですが、ブロック要素の始まりはまあdivでしょ！みたいになってしまいがちです。
その実装でもシンプルに表現できる自信があるのであれば別に悪くは無いのですが、恐らく、よりシンプルで分かりやすく実装可能な方法は他にもあるはずですよね？
なので、まずはHTML5の基本的なタグを用いてどういったことが可能なのかセオリーを理解しましょう。

HTML5リファレンスで目的別にタグを探すことが可能なので、慣れ無いうちは目を通し実装が行いやすそうなタグを見つけるところから始めましょう。
何度か実装を行ったり同じような構成をしているサイトを調べているうちに、ある程度パターンが見えてくるようになります。

2. CSSの設計パターンを理解し、何ができるかを理解する

一般的にCSSは、class名からデザインの予測が可能で、再利用性に優れ、保守がしやすいながらも拡張性に優れたものを目指し設計が行われます。
その目的を満たすために様々な設計パターンが存在しますが、こちらのサイトに分かりやすくまとめてあります。

世の中で一般的に受け入れられている、bemやsmacsといった設計思想はもちろんのこと、最近ではatomicデザインという設計思想も提唱されています。
ここにないオリジナルな設計思想含め、恐らくプロダクトのCSSのディレクトリ構造やファイル名、CSSの命名規則には必ず意味があって成り立っているので、最低でも自分のプロダクトのルールは理解しておくようにしましょう。
そこを意識し、他の人の真似をすることで少なくともどのファイルに記述すれば良いのか分からないという状況は避けることができるようになると思います。

3. デザインとは何たるかを理解する

エンジニアがデザインを理解するにあたって必要な事です。
以下のサイトのまとめが素晴らしく分かりやすかったです。

こちらのまとめサイトでは、ノンデザイナーズデザインブックの中で提唱されているデザインの基本となる4つの原則についてや、デザイナとの接し方などがまとめられています。
エンジニアがWebデザインを学び始めるときに、参考にしたいスライド13選｜#mayonez [マヨネーズ]

このスライド集はある程度実装が慣れてくる頃に見るとより理解が深まるような良質なスライドが多かったです。ここのまとめで記載されているような考えを理解しアウトプットできるように重要な部分は抑えておきたいですね！

4. 仲間の書いているコードを理解する

恐らくWEBサービスを運用している場合、githubなどでバージョン管理が行われ、仲間が出したプルリクエストなどは見れる状態にあると思います。
実際にどういった機能をリリースしようとしているのか、その機能を実現するためにどのような構造でマークアップを行っているのか、レビューする習慣をつけましょう。
また、その一方でレビューをしてもらう事は新たな発見を与えてくれます。なので、他の人がレビューしやすいようにプルリクエストのコメント欄やissueなどをフル活用してレビューしやすいようなプルリクエストを作成するようにしましょう。

とにかく知らないうちはどのような事が実現可能なのか知る事がとても大切です。
初めてみるstyle要素などは、わかるようになるまで調べ、何故その要素がそのclassで用いられているのか理解できるようにしましょう。
レビューで、疑問に思った箇所は何故そのように実装しているのか質問し、それでもおかしいと思えば指摘のコメントまで出来るようになればベターですね！

参考: GitHub「完璧なプルリクの書き方を教えるぜ」

5. プロダクトの設計思想を理解する

何だかんだ言ってもここが一番の根本なのでここを理解する事が大切です。
WEBサービスを立ち上げる際には、必ず対象となるユーザが居て、そのユーザに正しくコンテンツを届けられるように適した形でサイトが作られます。

一般的にはWEBサービスを立ちあげる工程の中にワイヤーフレームの作成と、技術や設計思想の選定、フレームワークの選定などが行われています。

ただし、フレームワークは便利ですが、意図した使われ方をしていない事もあります。
何となく知った気になり、それっぽい構造でスタイルが記述され、それでもうまくいかない場合には各所でスタイルが上書きされる。この暗黙知が蔓延している状態はプロダクトからしても避けたい状態ですよね。

立ち上げから携わっている人は何故その技術や設計手法が用いられているかなどを知っています。
そしてその設計方法とプロダクトの相性なども恐らくチームの中で誰よりも理解していると思います。
どのようなフレームワークや設計手法を使っていたとしても、各ページで共通のユーザ体験を与えるために、ある程度設計パターンというものは絞って実装していると思います。
なので、プロダクトの設計思想をしっかりと理解し、その人が積み上げてきたコードを積極的に拾い、理解し、まずは同様にアウトプットできるようにしましょう。

6. おまけ

開発にあたってとても大事なのが、開発したものを確認するためのブラウザ。
ブラウザには凄く丁寧に開発者向けの機能があります。例えば、googleが提供しているchromeには、「検証」という機能があります。

※上の画像のように、chromeで右クリックした時一番下に出てくる"検証"

この"検証機能"は、ページのJSのロードスピードから、特定の要素のclass、そのclassにあたっているstyleまで細かに確認する事ができます。
詳しくは以下の記事でykykさんがまとめてくださっていますので、興味がある方は是非ご覧ください。
知っていると少し幸せになれる、Chrome検証機能の小技まとめ

この検証機能を用いる事でリアルタイムにデザインを反映させてブラウザ確認ができるので、今までいちいち書き換えて確認していた人は圧倒的に実装スピードをあげることができ、それが結果的に成長スピードをあげることにつながってくると思います。

最後に

凄くざっくりと文字多めのまとめになってしまいましたが、何だかんだ言ってもやはり"知らない事を知る"というのが、一番の処方箋なのでは無いでしょうか。

新しい考え方や設計思想や手法が生まれるのには必ず理由があります。
日々新しい技術や設計思想が生まれる中で、常にアンテナを張り巡らせ、知識を網羅しようとすることはとても難しいことですが、少なくとも自分が携わっているプロダクトの理解はしていたいですよね！

どういう人達に見てもらうためにこのプロダクトは存在しているのか。
ユーザに対してコンテンツや想いを届けるためにはどのようなデザインが適切なのか。
引いてはその思いを実現するためには、どのような設計が適切なのか。

恐らくプロダクトが立ち上がる際に、ワイヤフレームを設計し、その際にデザインの思想なども決められていると思います。なので、そのルールを徹底的に守っていくとこから始めて見てはいかがでしょうか？

似たようなUIで実装されているページをみつけたらgrepコマンド等を用いてファイル箇所を探り当てて、同じように実装してみる。
どのような要素を用いてブロックが構成されているのか、要素に対してどのようにclassが割り当てられているか、そのclassに対するcssはどのファイルに、どのような命名規則で設計が行われているのか、それぞれを確認し、まずは徹底的に真似をしてみましょう。
そこから視野を広げて設計パターンを知り、変化を取り入れてみるという事を繰り返し行ってみる。
するといつの間にか、HTMLやCSSの設計に対するハードルは下がっているかもしれないですね！(そうであってほしい)