みんなのウェディングエンジニアリングブログみんなのウェディングエンジニアリングブログ記事の一覧みんなのウェディングのCSS事情こんにちは。みんなのウェディングの平岡です。みんなのウェディングでは自社開発したCSSフレームワーク「Esthe(エステ)」を利用して開発をしています。今回はそのEstheの簡単な説明と導入までの流れを紹介したいと思います。コンテンツの拡充に比例して日々メンテナンスコストが上がっている状態でした。運用しながら細かい仕様変更を行いたかったので、よりカスタムしやすいほうが開発速度が早いということで自身で開発することにしました。サイトとして共通化されたデザインパーツがほしいデザインを含めたサイトリニューアルの案件がちょうど走っていたため、サイトカラーなどの基本的なことからデザイナーさんと決めていきました。その後、設定するパーツのピックアップを行い、派生するパターンへのデザイン的な意味付けを行いました。デザインガイドラインがほしい上記で策定していったものをwebページとしてまとめていきました。PDFなどで管理するのではなくEstheをincludeしたwebページとして管理することで、ガイドライン運用でありがちな、知らず知らずのうちに実際の運用とズレが発生してしまう問題を防ぎました。それによりバージョン管理もしやすくなりました。webページでは上記で述べた色だけではなく、フォントサイズやradius、アイコンフォントなども記述しています。SassCSSからSassに移行したことによってMixin、placeholderが利用可能になりました。パーツを設定するEstheで利用するパーツのデザインはclassをつけることで設定&変更が可能です。post-review">ボタン</a>Estheのパーツとコンテンツごとのパーツとの住み分け汎用的なclass名はEstheが独占します。各コンテンツでそれぞれ設定されるパーツは以下のルールで運用します。class="place-button">ボタン</a>のように命名します。上記のようにしたことで、htmlファイルを見ればパーツにどのCSSが当たっているのかパッと見ればわかるようになりました。独自のパーツも1から書く必要はなく、Estheのパーツをextendして拡張することも可能です。形が出来上がるスピードが早くなったスクラッチで1から作る必要がなくなった為、手を動かす作業が格段に減りました。デザインガイドラインができたことにより案件の都度パーツのデザインを行う作業も減りました。CSS・デザイン知識のあまりないエンジニアでもEstheの使い方がなんとなくわかればそれなりに見栄えのよいページを作ることができるようになりました。共通言語化カラー・文字サイズ・radiusなど全て変数として設定することにより、対応するデザイナーによってぶれることがなくなりました。共通化したUIサイト全体の統一感ができることにより同一のユーザ体験を提供することが可能になりました。レンダリングスピードのアップパーツの共通化・placeholderの利用によりレンダリングスピードが劇的に向上しました。まとめ今回、Estheを導入した最大の成果としては、「本来はしなくてよいこと」を省くことができるようになった点です。そのため、エンジニア・デザイナーは今まで以上にユーザーに届ける価値や施策のアイデアのことを考える時間を増やすことができるようになりました。みんなのウェディングはエンジニア・デザイナーを積極的に募集中です。興味のある方は是非ご連絡をお願いします。Wantedlyから連絡:エンジニアWantedlyから連絡:デザイナー(2016年12月15日)twitterfacebookhatenabookmark最新の記事みんなのウェディングはEKSで動いていますタイポグラフィとCSSのスタイル宣言2019年新卒エンジニア研修もそろそろ終盤です。