FASTMETHOD

HTMLコーディング業務を徹底分析した「ファストメソッド」

FASTCODINGの「ファストメソッド」は、HTMLコーディング業務を最速且つ最高の品質で提供するコーディング業務専用のマニュアルです。私たちはコーディング業務を段階で分け、各工程ごとに最も効率的な業務フローを確立しています。
ここでは「ファストメソッド」の基本的な考え方やメリットをご紹介いたします。

METHOD 1開発環境・チーム設計指針

最適チーム体制

チーム体制 HTMLコーディングを進める上で必要となるのはコーダーだけではありません。コーディング着手前の設計業務を担当する設計者やコーディング中のパーツ管理を行うライブラリアン、品質チェックを行うチェッカーとプロジェクト全体のスケジュール管理を行うコーディングディレクタが、適宜協調しながら進めていくことで最高品質のコーディングが得られます。
弊社では数多くのコーディングプロジェクト経験から、プロジェクト規模や対象サイト、またスケジュールに応じた最適なチーム体制をご提案することができます。

開発環境

開発環境 専用のツールがなくとも制作できるのはHTMLの魅力ですが、各種実装ツールやプラグインを利用することで、より効率的な実装が可能になります。
事前にパーツや機能が定義されたフレームワークの利用や、開発の高速化を図るためのalt系シリーズ、またこれらを読み込んで自動的にプロジェクトファイルを生成するタスクランナーをどのように利用するか、事前に定義することでプロジェクトの効率性は格段に向上します。
弊社ではECTやSASS,Gruntを標準で利用(※)しておりますが、プロジェクトの特性によって、どういったツールが最適であるか、ご提案いたします。
※プロジェクトによっては利用しない場合もあります。詳しくは担当のコーディングディレクタまでお問い合わせください。

METHOD 2コーディング設計

コーディングルール

コーディングルール 制作会社のお客様や、Webシステムをお持ちのお客様であれば、社内のコーディング規約を定義していることもあるかと存じます。また大規模なプロジェクトであれば、プロジェクト専用のルールを決める場合もございます。
コーディングルールではネーミング規則やファイル/フォルダ構成、文字コードやファイルタイプを指定する記述がほとんどですが、弊社ではパーツ設計とCSS設計を含めることをお勧めしております。
コーディングルールはその後の運用コストに大きく影響する重要な制作指針となります。また多数のコーダが同時並行で進める大規模プロジェクトにおいては、コーディング品質そのものを左右するといっても過言ではありません。

パーツ化とユニーク化

パーツ化とユニーク化 一つのWebサイトを作成する過程では、デザインのトーン&マナーを保ち、UXを向上するためにパーツのパターン化が行われるのが当然です。
HTMLコーディングにおいても、パターン化されたパーツを元に、レイアウトに従って組み立てていくことで、コードの独立性やメンテナンス性の向上を図ることができます。
弊社ではコーディング着手前にパーツ確認を行い、コーディング途中に起きる変更にも柔軟に対応できるよう、パーツ定義書を作成しています(※)。
また定義されたパーツをどういったファイルで管理するか、共通ファイルの定義や読み込み方法、変数の定義を柔軟に行うことで、運用しやすいサイト制作を行っております。
※プロジェクトによっては作成しない場合もあります。詳細はお問い合わせください。

CSS設計

【良いCSS=効率的な構築】
良いCSSとは何であるか、見やすさやコードの短さ等、様々な考え方がありますが、弊社は構築時のわかりやすさが最も重要と考えています。
将来の運用を見越してクラス定義を行うことはできますが、実際運用で発生する変更がはっきりしていない場合は、むやみに想定をせず、現状の要件を元に実装をいたします。シンプルに実装を開始するからこそ、プロジェクトの進行中に発生する変更や、次フェーズへの備えも容易にできるというのが、弊社の考え方です。

【既存CSSのコード解析】
HTMLコーディングを行う上では、既存のコーディングを流用したり、CMSが動的に出力するヘッダーやフッター等の共通要素を取り込んで実装する場合があります。 CSSでは要素適応の優先順位があるために、追加するCSSによって既存サイトが崩れたり、予期しないページでバグを引き起こす可能性があります。
弊社では既存コーディングを流用する場合は、主にCSSについて、徹底的にコード解析を行います。 命名規則や構造の把握はもちろん、過去の更新の変遷を見ながら、他に影響を与えない、今後のメンテナンス性も低下させないCSSコーディングをいたします。

【命名規則と構造化】
CSS命名規則 良いCSSを構築するためにも、HTML同様CSSにも設計作業が必要です。特に命名規則と構造化の単位を決めることは重要です。
命名規則とは、クラス名やID名等を用いて要素選択を行うCSSセレクタの書式を決めることを意味します。 CSSにはセレクタの書式によって、要素適応の優先順位が決まるため、なるだけ一つの書式(クラスのみ利用する、状態クラスには接頭辞を付ける 等)のみを利用するよう定義するべきと考えています。 実際にはコーディングルールによって定義が異なるために、各プロジェクトに応じて実装を行います
構造化とは、装飾をどの単位で一つのCSS要素として定義するか、装飾のグルーピングを行うことを意味します。 その名称にもなっているカスケーディング(親子間構造)によって装飾定義が可能なために、命名規則同様になるだけ単純且つ明確な定義を行うべきです。 世の中にはいくつかの構造化(および命名規則)のルールがあり、SMACSS、BEM、OOCSSは有名なルールです。 弊社では主にSMACSSベースの構造化を行いますが、異なる構造化指針を採用される場合は、事前にご相談ください。

【フレームワークの採用】
BootstrapやFoundation、Material-UI等のCSSフレームワークは、プロジェクトによっては利用することで効率化を図ることができます。 弊社では標準的にフレームワークは利用しませんが、プロジェクトの詳細を伺った段階で、導入をご提案する場合もあります。 CSSフレームワークの活用を行いたい場合は、事前にご相談ください。

特殊要件への対応

【JISアクセシビリティ対応】
主に国・地方公共団体が提供するWebサービスや、上場企業のWebサービスでは、ウェブアクセシビリティへ対応するためにJIS基準「JIS X 8341-3」への対応を求められる場合があります。
一方で同規格は対象範囲や達成等級によって実施すべき施策が異なるため、具体的にどういった実装を行うべきか、判断に迷うことも多い規格ではないかと思われます。
弊社ではご指定の対象、等級、また独自ルール等に応じた実装対応が可能であります。導入を検討されている場合は是非ご相談ください。

【特殊ブラウザ対応】
主に組み込み系デバイスで用いられるサブセット版のブラウザソフトウェアは、全てのHTML/CSS要素をサポートしていない場合もございます。 弊社では特殊仕様のブラウザ表示にも対応したHTMLコーディング実績が多数ございます。 組み込み系デバイス向けのコーディング制作、特殊仕様への対応が必要な場合は、事前にご相談ください。

CONTACT US

FASTCODINGのサービスは、「基本料金」・「CSS作成費」、
更には「JavaScript」・「WordPress」のオプション費用について一切料金がかかりません。

サービス料金はページ数×ページ単価のシンプルな料金で提供いたします。

OUR PROJECTS

2015年4月にサービスを開始してから、今までにご依頼を受けたお客様・プロジェクト数の合計です。
実際に制作させていただいたwebサイトをご紹介しますので参考にしてください。
  • アイコン アイコン
    クライアント様
    1037
  • アイコン アイコン
    合計プロジェクト数
    1504
  • アイコン アイコン
    合計コーディング数
    14370