This post is Private. Only a writer or those who know its URL can access this post.

Article information
Show article in Markdown
Report article
Help us understand the problem. What is going on with this article?

Ultimate Coding 概要・前提事項

記事概要

この記事は「Ultimate Coding」の概要や前提事項、語句の解釈などを説明するためのものです。
※限定共有設定で公開しています

Ultimate Codingの概要

Ultimate Codingは、HTML+CSSコーディングの大系的な標準化ノウハウです。
よくあるルールファーストではなく、制作者の脳が求める方向にルールを定めた「制作者ファースト」によって構築しており、概念・手法・ガイド・ルール(レギュレーション)までを通貫して定めることで、業務レベルでの標準化・効率化をおこないます。
これらの情報は、マッチするのであればそのまま実務利用して頂くこともできますし、業務標準化をおこなう時の参考情報にして頂くこともできます。

※一連の情報は一旦のアウトプット先としてQiitaで公開していきますが、先々でひとつのサイトに集約する可能性があります。

対象

もし、業務で取り扱うサイトの種別が、コーポレート・LP・EC・ブログ・管理画面…、と多岐に渡り、「全員が全ての種別を同じ法則でコーディングできるようにしたい」という要望があるなら、対象として完全に適合します。
この仕組みは、まさしくそういった環境を改善すべく作り出したものです。

また、経営・マネージメント軸で見ると、直接的な業務効率化は当然のことながら、人に依存しない仕組みを構築する事によって、属人化による業務破綻リスクを低減する。といった効果もあります。

学習コストと方針

何を覚えるにも学習コストはかかりますが、仕組みを導入した後に、人による解釈の違い、手戻り、手法のカスタマイズ、議論などによって時間を浪費すれば本末転倒です。
全ては制作者や人間の思考に対して素直な方向、より簡単な方向にルールを定め、「覚えてしまえば設計やコーディングが非常に楽になる」ことを重要視します。

フルスタック型の仕組みであるため学習コストの懸念がありますが、要点を絞った研修にて、初学者の速習・即戦力化(*1)の実績があります。
しかし、他の環境(会社や組織など)に最初から導入を指導したことはないので、こちらのデータはありません。

技術導入を主としない

CSSの記述において、JavaScriptを絡めた技術が台頭していますが、これは言及しません。
一定水準以上の技術者が集まり完全分業できるのであれば話は別ですが、今のところまだ、これらの技術は技術者主導になりやすく、一部導入とすると属人化しやすいとも言えます。
デザイナーがコーディングをおこなうといった現場状況を主たる対象と定め、より多くの制作者が認識をもって制御することを想定したものとなっています。

導入効果

以下は、組織内での実際の効果です。
事実しか記載しませんが、次第に積み上げていった仕組みであるため、この情報が基準として良いものになるかどうかは分かりません。あくまで参考程度にお願いします。

  • 雛形利用までの運用で、専業FEで20%前後の業務高速化(※システム時間記録・体感の両側面より)
  • モダンコーディングが難しいと諦めてかけていたスタッフが、この仕組みで理解がすすみ、戦力化した
  • 業界未経験者が、研修10日間で組織内での仕事レベルのHTMLを理解して書けるようになった(※前述通り)
  • 過去に他のスタッフが担当したものでも簡単に修正・改修・拡張できるようになった
  • 原型の仕組みは大手企業や団体のサイトにも導入 → 後の頻繁な更新や改修でも破綻ゼロ
  • 指示出しや認識擦り合わせ・リファクタリングの時間が大幅短縮

技術対象・前提

  • PHPなどのバックエンドに関するものは対象外
  • JSのプログラミングに関するものは対象外
  • CSS-in-JSは言及しない
  • CSSは、Sassなどのプリプロセッサ導入を前提とする

標準化の定義

UltimateCodingが目指す標準化とは何かを記載します。
その前にまず、そもそも一般的な標準化とはどんな意味なのか。についてですが、「日本規格協会グループ(JSA GROUP)」では、標準化について以下のように説明しています。

自由に放置すれば、多様化、複雑化、無秩序化してしまうような「もの」や「事柄」を少数化、単純化、秩序化すること。
標準化の役割(メリット)には主に次のものがあります。

  • 互換性の確保
  • 品質の確保
  • 生産効率の向上
  • 相互理解の促進
  • 技術普及
  • 安心、安全の確保
  • 環境保護

JIS Z 8002(※中略)では「実在の問題又は起こる可能性がある問題に関して、与えられた状況において最適な秩序を得ることを目的として、共通に、かつ、繰り返して使用するための記述事項を確立する活動。」と定義されています。

標準化とは | 日本規格協会 JSA Group Webdesk より抜粋

そして、Web制作の業界では、昔から「予測・再利用・保守・拡張しやすさが大切」という金言があります。
これらを組み合わせたものをUltimate Codingが目指す「標準化」とします。

Ultimate Codingにおける標準化の意味

成果物のコードが一定以上の品質(予測・再利用・保守・拡張しやすいもの)となり、同じ仕組みを知る他の同等熟練度の制作者が書いたコードも同様の品質となる。
この効果をもって、複数の制作者による分業やコミュニケーションを円滑にする環境を整え、生産性向上並びに顧客へのベネフィット向上となるような仕組みを構築すること。

【参考】業界用語の解釈など

Ultimate Codingにおいて、業界で使う用語をどのように捉えているかの説明です。
これらは、各記事の前提事項となるばかりではなく、この仕組みの基礎の考え方を示すものです。

HTMLとCSSの役割

  • HTML → データに意味を持たせるためにマークアップした、情報表示の基礎となるもの
  • CSS → HTMLでマークアップされた情報を、よりよく伝達するために装飾や機能を付与するためのもの

マークアップ

  • 機械にデータの意味を伝える行為
  • HTMLタグでデータをラップするか、レンダリング用のHTMLタグを記述
  • 制作者はタグの意味を理解しているため、制作者同士の意味伝達にもなる
  • マークアップとは意匠を変化させる目的のものではない
    • 「見出しは勝手に太字で大きくなる」のは、ブラウザのデフォルトスタイルによるもの
    • ブラウザが「タグの意味に相応しい最低限の意匠」を忖度して与えるのがデフォルトスタイル

命名とは

  • HTML要素に対し、意匠や機能を与えるための識別子
  • その要素に何の役割を与えたのかを判断・予測しやすくするための語句・ラベル
  • ランダムな文字列でも「機械側」は問題ないが「制作者」はそうではないから命名する
  • 命名は、それそのものが「部品」と考える

前提となる業務フロー

  • コーディングをおこなう以前に、デザインやWFなどを作成する
    • これらの「図」や「絵」は、Webページという納品物をつくるための「完成予想図」と言える
    • 業務上ではコーディングから開始するケースは稀であるため、こういった何らかの「図」や「絵」が先に存在している事を前提とする

完成予想図とは

  • 成果物であるWebページの完成形をあらかじめ予測するための視覚情報。デザインやワイヤーフレームなど
  • 完成予想図は、成果物がプロジェクトの目的を達成できるかどうかを事前に検討・確認するために作成される

コーディングのゴールと目的

  • 何らかの「完成予想図」に求められる視覚情報や動きや働きをコードに変換しつくすこと
  • 完成予想図で予定していた情報や機能などを、Webページとして利用者に提供可能な状態にすること

粒度とは

  • 言葉上は「粒の大きさ」
  • コーディングで使う概念としては、視覚情報だけでもなく、コード量だけでもないあやふやな言葉
    • コーディングでは、コードの両とレンダリング結果の面積は必ずしも比例しない
    • レンダリング上、面積が小さいからといって、コード量が少ないとは限らない
    • コード量が多いからといって、レンダリング結果の面積も大きいとは限らない
  • 面積や規模というと物理的な大きさをイメージしてしまうため粒度という抽象的な言葉が使われている

注釈

*1) Progateにて、HTMLとCSSの初歩的な意味や書き方を覚えた初学者が対象。社内用ドキュメントを支給して研修用の2サイト合計4ページを作成。制作用の独自スターターキット利用。Win環境にて.batファイルでタスクランナーを走らせて環境が立ち上がる状態から開始。壁に当たったタイミングで必要な考え方を教え、実装の質問には何が正しいのかを全て回答。10日間でSass、Gitを含め、実践投入の土俵に上がれた。(本人も進捗を記録済)現在サポートつきでOJT中。

クレジット・その他

Ultimate Coding

この仕組みは、組織所属時に業務効率化のために構築したものであり、許可を得た上で設計者本人が個人活動として公開しています。商用の制作や開発には利用していただけますが、仕組みを販売したり媒体化するなどの、制作以外での利用はご遠慮下さい。質問その他、何かあれば@croco_worksまでお声かけください。

croco_works
Webデザイン/UIデザイン・フロントエンド・システム設計、ディレクター・PMを経験後、現在はWebサイトやサービス開発などの企画・設計人として活動中
https://twitter.com/croco_works
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした