echo.cssとは?

制作の背景

echo.cssは、北海道札幌市のフロントエンドエンジニア、ウェビングスタジオが個人で制作、公開しています。

ウェビングスタジオでは、CMSの組み込みを前提としたコーポレートサイトの制作を中心に受注しています。
発注元の大半はウェブ制作会社で、以下の流れで制作を行うことが多くなっていますが、常にいくつかの課題がありました。

  1. 基本要件の確認
  2. ワイヤーを元にCMSでプロトタイプサイトを作成
  3. 正式なデザインカンプの受け取り
  4. プロトタイプサイトに正式なデザインを反映
  5. 制作会社へ引き渡し

課題1: デザイン反映の際の工数

プロトタイプの段階でコーディングに不備があると、デザイナーの細かい意匠を反映できず、大きな手戻りにつながっていました。
Bootstrap等の既存フレームワークを利用することで改善できないかと考えたこともありました(実際、Bootstrapを採用したCMSテーマは多数あります)。
しかし、どのフレームワークも「スタートアップ等ですぐ使えること」を優先しており、UIなどの外観デザインがしっかりと作られています。そのため、デザインを変更しなければならないときの工数が、一から作成するときよりも多くなってしまう状況でした。

課題2: 納品後の改修

CMSはその特性上、納品後にほぼ必ずコンテンツの改修が行われます。その際、まったく想定外(文字数、色、サイズ等)のコンテンツが追加されることがよくあります。CSS側が変更に対応できず、テーマの修正となったりします。

課題3: CMS独自のマークアップ

CMSによっては、システム側がナビゲーション・ウィジェット等のHTMLを自動的に生成することがあります。しかも、同じ機能でもシステムごとにマークアップが異なります。クラス名などはある程度変更可能ですが、CMS側のHTMLをそのまま使用できた方が制作はスムーズです。

このような背景から、いかにこれらの課題を改善するかを考えて制作したのが、echo.cssです。

"echo"プロジェクトについて

echo.cssは、ウェビングスタジオのCMS関連の個人制作プロジェクトの一環です。
このプロジェクトで制作したものにはすべて、名前に"echo"が付けられています。

https://cms-skill.com/echo/

命名の由来

この単語が好きだから、というのが第一の理由ですが(笑)

  • 多くのCMSは、PHPで動作します。必ず使用されるメソッドが、コードを出力する「echo」です。
  • 「echo」は日本語で「響く」という意味があります。日本には「打てば響く」ということわざがあります。打てば響くプロダクトにしたいという意味があります。