なぜスタジオパプリカは
コストパフォーマンスに優れているのか。
その答えは、効率化を目指した社内開発環境にあります。

デザイン作りには”Adobe XD”を使用

Adobe社のデザインツールに関しては言うまでもなくデザイナーの必須ツールになります。 その中でも当社がWebデザインに使用しているツールが「Adobe XD」です。 同じAdobe製品である「PhotoShop」や「Ilustrator」「DreamWeaver」でなく、当社が「Adobe XD」と使う理由は大きく以下の2点です。

(1) ワイヤーフレームやデザインカンプの作成が簡単
(2) プロトタイプ作成やデザインスペックを公開できるため、クライアントに本物に近い形でデザインを共有できる

その他にも画像の書き出しの面でもRetinaディスプレイに対応した2x画像の出力ができたりと非常に助かります。
デザインの作成・修正などを行い、ゴールにたどり着くまでには非常に多くの時間とコストがかかります。
それらに関する手間やすれ違いを軽減することで、より良いWebデザインをなるべく費用を抑えて作れるようにしております。

HTML、PHPの記述にはテンプレートエンジン「Pug」を採用

スタジオパプリカのWebマークアップには、2019年より一部を除きテンプレートエンジン「Pug」を採用しております。 採用理由の大きくポイントとして、コードの見やすさが上げられます。
コードが見やすいということは、そこにバグが入り込む余地が少なくなり、バグフィックスに取られる時間を削減することができます。
閉じタグを記述する必要がないことや、ミックスインの作成で再利用性の高いコンテンツのコンポーネント化ができ、物理的な必要タイピング数も減少するためコード入力に関わる時間も削減することができました。

Gitによるリソース管理

各案件ごとにリポジトリを作成し、各種作成・修正毎にブランチの作成コミットを繰り返すため、万が一に途中で何か不具合がおきた場合に原因の特定にかかる時間が大幅に削減できます。同時に複数人が作業しても修正を上書きしてしまったり誤って削除してしまうようなことも防げるため、安心してコーディングに専念でき効率を上げることができます。

CSS NextによるCSSの記述

CSSの管理は非常に厄介です。どこかに記述したスタイルが別のどこかのスタイルを打ち消してしまったりするからです。
また、CSSはブラウザ毎に解釈が違っていたり独自仕様を持っていたりで、各ブラウザ毎にプレフィックスを記述するのは非常に手間が大きく、また記述漏れによるバグとも言える表示崩れに悩まされることは少なくありません。
当社では”CSS Next”や”Auto Prefix”などを採用しており、スタイルの記述を管理しやすく、そしてプレフィックスを自動生成することでミスの削減や効率の向上を行なっております。
以前はSCSSを使用しておりましたが、現在では主にCSS Nextを使用しております。明確な理由があるわけではないですがどことなく当社に合っているのがCSS Nextだと思っております。

GulpやWebpackによる自動化

当社では主にWebpackを使用し、PugからHTMLへの変換やPOST CSSによるcssの出力、javascriptのモジュール化などを行なっております。
その他にも要所でGulpも併用し、jpegやpngからWebPへの変換なども一括で行えるようにしております。
人の手では時間がかかることを自動化することにより、ミスを減らし、本来の業務であるクリエイティブな作業に多くの時間を割くことができます。