こんにちは。みんなのウェディングの平岡です。
みんなのウェディングでは自社開発したCSSフレームワーク「Esthe（エステ）」を利用して開発をしています。
今回はそのEstheの簡単な説明と導入までの流れを紹介したいと思います。
導入前までに抱えていた問題
- 案件が発生する都度すべてのデザインを作成していたため、デザイナーの作業が増えていく
- デザインガイドラインがないため、コンテンツ作成毎にトンマナがずれていく
- CSSのルールがないため、どこから読まれているのかわからず解読＆確認に時間がかかる
サービスの急激な伸びによる影響でCSS周りの整備まで手が回らず、 コンテンツの拡充に比例して日々メンテナンスコストが上がっている状態でした。
なんとかしたい
- サイトとして共通化されたデザインパーツがほしい
- デザインガイドラインがほしい
- 管理されたCSS環境がほしい
bootstrap？
bootstrap適用も考えたのですが、汎用的なものよりもサービスに合わせたフレームワークを作り、CSSファイルサイズの最適化を目指したかったことと、
運用しながら細かい仕様変更を行いたかったので、よりカスタムしやすいほうが開発速度が早いということで自身で開発することにしました。
サイトとして共通化されたデザインパーツがほしい
デザインを含めたサイトリニューアルの案件がちょうど走っていたため、サイトカラーなどの基本的なことからデザイナーさんと決めていきました。
その後、設定するパーツのピックアップを行い、派生するパターンへのデザイン的な意味付けを行いました。
デザインガイドラインがほしい
上記で策定していったものをwebページとしてまとめていきました。
PDFなどで管理するのではなくEstheをincludeしたwebページとして管理することで、ガイドライン運用でありがちな、知らず知らずのうちに実際の運用とズレが発生してしまう問題を防ぎました。
また、それによりバージョン管理もしやすくなりました。
webページでは上記で述べた色だけではなく、フォントサイズやradius、アイコンフォントなども記述しています。
管理されたCSS環境がほしい
CSS → Sass
CSSからSassに移行したことによってMixin、placeholderが利用可能になりました。
パーツを設定する
Estheで利用するパーツのデザインはclassをつけることで設定&変更が可能です。
// 基本のボタン
<a href="" class="button">ボタン</a>
// 投稿用のボタン
<a href="" class="button post-review">ボタン</a>
Estheのパーツとコンテンツごとのパーツとの住み分け
汎用的なclass名はEstheが独占します。
各コンテンツでそれぞれ設定されるパーツは以下のルールで運用します。
- Sassファイルを設置するディレクトリ名を接頭語につける
- BEMを利用
例えば、式場ページで利用する独自のボタンに関しては
// 式場ページ独自のボタン
<a href="" class="place-button">ボタン</a>
のように命名します。
上記のようにしたことで、htmlファイルを見ればパーツにどのCSSが当たっているのかパッと見ればわかるようになりました。
また、独自のパーツも１から書く必要はなく、Estheのパーツをextendして拡張することも可能です。
.place-button {
@extend .button;
text-align: left;
...
}
結果
形が出来上がるスピードが早くなった
スクラッチで１から作る必要がなくなった為、手を動かす作業が格段に減りました。
また、デザインガイドラインができたことにより案件の都度パーツのデザインを行う作業も減りました。
さらに、CSS・デザイン知識のあまりないエンジニアでもEstheの使い方がなんとなくわかればそれなりに見栄えのよいページを作ることができるようになりました。
共通言語化
カラー・文字サイズ・radiusなど全て変数として設定することにより、対応するデザイナーによってぶれることがなくなりました。
共通化したUI
サイト全体の統一感ができることにより同一のユーザ体験を提供することが可能になりました。
レンダリングスピードのアップ
パーツの共通化・placeholderの利用によりレンダリングスピードが劇的に向上しました。
まとめ
今回、Estheを導入した最大の成果としては、「本来はしなくてよいこと」を省くことができるようになった点です。
そのため、エンジニア・デザイナーは今まで以上にユーザーに届ける価値や施策のアイデアのことを考える時間を増やすことができるようになりました。
みんなのウェディングはエンジニア・デザイナーを積極的に募集中です。 興味のある方は是非ご連絡をお願いします。