スタイルガイド」で、ブレのないWeb開発を2016年11月30日Web制作スタイルガイドフロントTweetこんにちは、クリエイターのマツコです。今回は、「スタイルガイド」についてご紹介します。スタイルガイドとはライティングやブランドイメージなどのスタイルガイドは以前からありますが、今回はWeb開発の主にフロント部分のスタイルガイドを対象としています。フロント開発におけるスタイルガイドとは、HTMLやCSSと言ったコーディングルールをドキュメント化したものであり、「コンポーネント」と呼ばれる共通パーツ(ボタン、リスト、リンクアイコン)やタイポグラフィー、カラーコードを一覧にしたものです。自由度が高い分、作業者ごとの個性が出やすいフロントコーディングにおいて、スタッフが同じ方向を向くルールの共有に役立ちます。スタイルガイドのメリットルールの共有がしやすく、統一性のあるコードが書ける作業者のレベル差によるコードのゴタゴタが減る担当者じゃなくてもメンテナンスしやすくなるスタイルガイドを作成することでルールの共有がしやすくなり、複数名で作業をする際も、コンポーネントを参照・再利用することで、スムーズで無駄の少ない開発に結びつきます。アイコンがついたリンクが必要な場合、スタイルガイドからコードをコピーしてくることで、統一性のあるコードとなり、CSSの重複と言った、無駄な記述が増えることも無くなります。スタイルガイドがあることにより、多少経験が浅かったり、コーダー以外の作業者であっても、ある程度の修正や構築ができるようになることもメリットの一つです。公開されているスタイルガイドスタイルガイドはネット上に公開されているものもあります。こちらも参考すると、イメージが膨らみやすいかも知れません。JobsMapboxスタイルガイドの作り方デザインがある程度できてきたら、デザインガイドも作り始めます。パーツごとに、各パターンを網羅し、HTMLタグを明示すると分かりやすいし、コピーして使いやすいです。私は、同じ開発環境内にHTML/CSSで、デザインガイド用のページを作ったことがあるのですが、StyleDoccoやKSSと言ったスタイルガイド作成の手助けになるジェネレーターもあるようです。参考スタイルガイドジェネレータを比べてみたStyleDoccoによるCSSスタイルガイドの導入また、ブラウザー上でスタイルガイドを作成する「Frontify」というサービスもあるようで、上記のジェネレーターより導入が気軽にできそうで気になります。ブラウザー上でスタイルガイドが作れるFrontifyを試してみたまとめ限られた制作期限の中で、スタイルガイドを作る時間が惜しい!という意見も理解はできます。実際、シンプルでページ数の少ないサイトであれば、必ずしも作らなくても良いと思いますが、こう言った記録がコードを見直すきっかけとなったり自分自身の備忘録的な役割も担ってくれるなど、メリットも多数あります。開発メンバーが複数名に渡ったり、ページ数が多いなどの場合は、先の一手間でルールの共有をしやすくなり、質の高いコーディングを目指せるようになりますよ。分かりやすい記事があったのでリンクを掲載しますフロントエンドスタイルガイド:定義と要件、コンポーネントチェックリスト今度、共有すべきルールについてもまとめてみたいなあと思ってはいます。次の記事へ株式会社ライズウィル人に、企業に、社会に貢献するサービスを提供するITソリューション企業の株式会社ライズウィルです。ライズウィルブログでは、システム開発、Web制作、デザインなどのITに関するためになる情報や、社内のイベント、お知らせなどを掲載していきます。求める人材Web系、もしくはオープン系の開発実務1年以上の経験をお持ちの方。