ごあいさつ

はじめまして、オークファンでデザイナーをしている @nagat と言います。
デザイナー歴は、前職を併せると10年程度です。

また、プライベートな話ですが今年7月に子供が誕生し、パパになりました。
最近、娘の夜泣きはパワーアップし、枕元でホイッスルボイスを強烈に奏でてくるので連日寝不足と戦いながら出勤しています。

前置きはこの辺で。オークファン AdventCalendar 22日目です。
今回は、私がオークファンに入社してから今日までの4年間、社内デザイナーとして問題の解決に取り組んできたことをまとめてみたいと思います。
主にプロダクトの品質保守にフォーカスした内容です。

入社後に直面した問題

実は今のオークファンが私にとっての初めての転職。
前職は受託系のWeb制作会社だったので、以前から夢だった自社サービスの運営に携われるとあって期待に胸を膨らませながらの入社でした。

当時のデザイン業務は、使用ツールやデザインの配色、コードの書き方など、自分流がある程度許されており、どうデザインするかという点についても個人の裁量に任せられていたので、制作は自由でストレス無く楽しいものばかりでした。

－－入社から１年まではな（^ω^；

いろいろと自由な分、いくつか問題も出てきました。
デザイナーが各々自由奔放に制作をすればするほど、サイト全体のクオリティ、主にUXの品質低下と制作環境悪化のスパイラルに突入していきました。
問題となってきたのは以下とおり。

問題1： サイトのトンマナが崩壊している

まず、トンマナって何？て方のために。

トンマナとは「トーン&マナー」の略で、簡単に言うと配色や要素の形状等にルールを設けることで、コンテンツに統一感や法則性を出すことです。
コンテンツの統一感や法則性は、サービス全体のUXに対して大きな影響を与えるため、徹底したルール作りと設計が必要です。

では、具体的にどうトンマナが崩壊していたかを説明します。

• header/footerのレイアウト

  • サイト内のheader/footerが複数のページでレイアウトが違う。
    急にheaderのレイアウトが変わるから別サイトに飛ばされたように見える…（；´Д｀）

• 共通パーツ

  • ボタンやinput要素などのパーツが完全に共通化されていない。
    同じ検索結果ページでも、cssファイルがバラバラに作られてる…（；´Д｀）

• カラー

  • オークファンのキーカラーはサービスロゴにも使われている 緑 なのに至る所で複数の色が使われている。
    えと、キーカラーてなんだっけ…？（；´Д｀）

• 余白

  • 余白の取り方が人によってバラバラ。
    5の倍数で余白とる人。段落間の余白を広くとる人、狭くとる人。様々いるよね…（；´Д｀）

問題2：コーディング設計が崩壊してる

• コードの管理が煩雑

  • そもそもコードがバージョン管理されていない
    毎回、開発の方にモックを共有するときは、zipファイルに圧縮して共有してました…（；´Д｀）
  • バージョン管理されてないから常にデグレの危険
    同時並行して進む2つのプロジェクトで、1つのcssファイルを2人のデザイナーが同時に修正を加える。 先にリリースしたコードは宇宙の彼方に吹き飛ぶのであった…（；´Д｀）

• ファイル命名規則と格納ルールが無い

  • どこにどんなファイルが格納されているか分からない。法則性もない。
    ちょ、cssフォルダの中に画像ファイル入ってんぞ…（；´Д｀）

• HTML/CSS/JavaScriptのコーディング規約が無い

  • インデント戦争勃発
    2スペ派、4スペ派、Tab派の争い。ファイッッ（；´Д｀）
  • CLASS名の付け方で、スネークケース、キャメルケース、ケバブケースが混在している
    ど、どっちに揃えたらいいの…？（；´Д｀）
  • 設計思想が曖昧だから、どこに何を書いたらいいか分からない
    このボタン、共通化したいけど何処のcssファイルに書けばいいんだ…？（；´Д｀）

• JavaScriptファイルのインクルード位置やコードの位置

  • コードを書く位置によっては、処理の途中で変数がundefinedになってて、以降の処理が止まって機能が使えなくなる。

    exanple.1

    <script>
        $(function(){
            // 〜〜処理〜〜
        });
    </script>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    

    $が未定義です…（；´Д｀）

    exanple.2

    <script src="js/a.js"></script>
    <script src="js/b.js"></script>
    

    /* a.js */
    let animals = ['Pig', 'Cow', 'Sheep'];
    animals.push(guests.ssr);
    

    /* b.js */
    let guests = {
        r:'Panda',
        sr:'Kapibara',
        ssr:'Tsuchinoko'
    };
    

    guestsが未定義です…（；´Д｀）

そして解決のために問題と向き合う

トンマナ崩壊と、コーディング設計崩壊の「解決策」と「結果」を書いていきます。

解決策：ヘッダー/フッター含めサイトデザインを再定義

• 共通エリアを含めたサイトデザインを再設計し、刷新した。
• メンバー全員の意識を統一するために、定期的に新ルールの共有会や勉強会を開催した。
• メインコンテンツ全てにデザインが統一されねば意味がないので、デザイナー全員で大掛かりなUI改修の時に新デザインのルールで制作を進めた。

結果：成功

• 共通エリア自体の定義も行ったので、デザイナー全員が共通認識を持つようになった。
• 時間はかかったが、メインコンテンツのほぼ全てに新デザインを適用することができた。

解決策：デザイン/コーディング規約をPowerPointで作成

• PowerPointでサイトのデザイン/コーディング規約を作って、デザイナーやエンジニアに浸透させようとした。
• ページ数が50ページにも及ぶ超力作！ 合間を見つけながら1ヶ月かけて頑張って作りました＾＾

結果：失敗

• PDCAにより画面仕様が変わることが多いので、PowerPointだとメンテナンスが追いつかない。そして風化へ。
• そもそも誰も読んでくれない。浸透しない。悲しい。辛い。でも生きる。

失敗から学んだ事

• PDFやPowerPointでは情報が風化しやすいので、弊社で採用しているコミュニケーションツール 「Kibela」にマークダウン形式で投稿することにしました。
• いつも目に留まるフィールドにドキュメントを配置することによって、デザイナーやエンジニアも読んでくれるようになり、命名規則やディレクトリルールが浸透してきました。
• 細かなルールまで記載しない。命名規則やディレクトリ構成など最低限の情報のみを掲載する。ページ数が50ページにも及ぶドキュメントなんて読む気すら起きなかったようです。

解決策：SCSSを導入

• タスクランナーはgulpを採用
• 設計思想はSMACSSをベースに設計
  • base/layout/module/stateで、SCSSを分類してコードを管理する。
• よく使うカラーコードは変数として定義
• マージン設定値の法則性を統一するため、マージンの値は関数として定義
  • 引数として渡す数値を調整することで原則8の倍数で設定される
    • ex: margin: mgn(0); → margin: 8px;
• mixinは予め用意されたものだけを使用する。

結果：成功

• 格納ディレクトリにルールが設けられることにより、コードをどこに書けばいいのかある程度明確になった。
• 変数やmixinの利用により、コードの書き方に個人差が出にくくなった。
• ボタンやinput要素など共通要素のstyle重複が無くなった。
• 共通エリアのstyleが明確に管理できるようになったので、ページ毎にデザインの差異が無くなった。

解決策：デザイナーもGitでコードを管理する

• エンジニアと同じリポジトリでコードを管理するようにした。
• メンテナンス頻度の高いSketchデータをGitで管理するようにした。

結果：成功

• デザイナーからの開発連携もスムーズに行うことができ、何よりもデグレが激減した。
• コードレビューが効率化した。
• SketchデータをGit管理しているので、デグレが無くなった。

解決策：乱立していたJavaScriptファイルを統合

• Webpackを使用したビルド方式を採用。
• 機能ごとにモジュール管理する。
• ページ内で読み込むJavaScriptファイルは1つだけにする。

結果：成功

• モジュール管理されているので、重複コードも無くなりコードの判読も容易になりました。
• 現在も対応中。

まとめ

大掛かりなサービスを、一人でデザイン、開発、運用している会社は少ないはずです。
誰が関わっても高品質のプロダクトをユーザさんに安定して提供するには、どうすれば良いのかを考えることが重要なのかなと思っています。
その為には規約や方針、そして環境の統一が必要になってきますが、その先にある全体にどう浸透させるか？というのが一番大変で、常に課題でもありますね。
個人的には、いちいちドキュメントなんか読まなくても分かりやすいコードや構造で、統一されたデザインになってるのが理想であり願望（^ω^）