業務案内

ピクセルグリッドではJavaScriptを利用した
Webサイト・Webアプリの制作事業と、
CodeGridの執筆・開発・運営を行っています。

制作事業

フロントエンドの最新技術を利用したい企業やプロジェクトチームと一緒に、
高品質のWebサイト、快適に動作するWebサービスを制作致します。

業務システムのフロントエンド開発

エンタープライズ業務システムの、UI設計からフロントエンドの実装まで行います。

特に業務システムでは、使う人のニーズに沿ったUIとメンテブルなコード設計が重要です。ピクセルグリッドでは、AngularJSやReactなど、運用や設計に合ったライブラリを選定し、長期に渡る運用を見越したフロントエンドの設計を行います。

取引会社

コマツ(株式会社 小松製作所)

Webサービスのフロントエンド開発

多くのユーザーが利用する動的なWebアプリのフロントエンド設計は、ピクセルグリッドの得意とする分野の一つです。規模に合わせ、Backbone.jsやVue.js、Reactなど最適なライブラリを選定します。

既存のAPIと連携することはもちろん、新たにAPIを合わせて制作する場合には、Node.jsを利用したAPIモックの作成を含めたAPI設計をサポートします。WebSocketを利用したリアルタイムで動作するフロントエンド実装にも対応できます。

開発事例

あきばれホームページ

HTMLがわからない人でも自由にコンテンツを制御できる、CMS管理画面のGUI実装を担当。データ管理はすべてAPIを通して行うSingle Page Application。CoffeeScriptとBackbone.jsで複数人開発をスムーズにできるように設計した。

ローソン店舗検索

「いつもNAVI API」(ゼンリンデータコム)を利用した、ローソン店舗の地図検索ページを担当。検索部分は履歴を持たせたSingle Page Applicationとして実装した。

大規模Webサイトの設計

数十万〜数百万ページ規模のWebサイトでは、それに耐えうるHTMLとCSSの設計が必要になります。また、表示パフォーマンス、多様なモバイル環境を考慮したレスポンシブ設計、Retinaディスプレイのような高解像度端末対応といったことも重要です。ピクセルグリッドでは、大規模サイトの特有の事情を考慮し、長い寿命を意識したメンテナンス性の高いHTMLとCSSのテンプレートを設計します。合わせて長期運用には欠かせないスタイルガイドも制作します。

中・小規模なWebサイトでも、高度なHTMLとCSSの設計を必要とする場合もあります。現状のHTMLとCSSの設計の問題整理や今後の方針など、お困りの点がございましたらご相談ください。

制作事例

NIKON Imaging Products

マルチデバイス対応/リニューアル時のフロントエンド開発を担当。汎用性の高いテンプレートを設計と実装を行った。1テンプレートによるマルチデバイスに対応したことにより、運用コストの削減、および更新性の向上を図った。

大手音響・映像系メーカー

数十万ページ規模の大規模サイトの、レスポンシブウェブ対応したテンプレートの設計を行った。また、ガイドライン策定して長期間に渡る運用時にもメンテナンスしやすい体制を整えた。

非公開案件

リッチコンテンツ制作

近年、Flashに代わり、SVG、Canvas、WebGLを使ったリッチコンテンツが多く作られるようになりました。また、閲覧するデバイスも、PCだけではなくなってきています。

ピクセルグリッドでは、スマートフォンやタブレットに対応したVideoやAudioを利用するコンテンツや、WebGLを利用した3Dコンテンツなどの制作を行っています。モバイル環境で、FlashやSilverlightのコンテンツが表示できずに困っている場合や、PC環境にも対応したスペシャルサイトといったリッチコンテンツを検討中の場合も、ご相談ください。

WebRTCやWebSocketを利用したリアルタイムコンテンツにも対応できます。

制作事例

Interactive Film いつも可愛い

Internet Explorer 10のプロモーションの一貫として、リリースに合わせて作成されたスペシャルサイト。Internet Explorer 10が新しく対応した標準技術(video、audio、canvas、CSS 3)を多く用いたインタラクティブコンテンツとなっている。フロントエンドの実装を担当。

東京Node学園祭2015

Node.jsカンファレンス「東京Node学園祭」の公式サイト。2015年は閲覧者がサイの体をリアルタイムに塗る、ナワバリバトルのギミックを実装した。サイト自体をPolymerを使ったコンポーネント指向で設計し、クリックによるサイの体の色変更にSVGを、サーバーとの通信にWebSocketを利用。

ブラウザ拡張機能の開発

いくつかのWebサービスでは他のサイトを閲覧時でも、自社サービスの情報を呼び出したり、機能を呼び出せるブラウザ拡張機能を提供しています。ピクセルグリッドではブラウザ拡張機能の作成にも対応しています。

Webサービスから通知を受け取るようにしたり、特定のWebサイトやサービスの拡張するといったことも可能です。ブラウザ拡張でお困りの場合はご相談ください。

デスクトップアプリが必要であれば、既存WebサービスのAPIを利用したElectronベースのアプリケーション開発にも対応しています。

フロントエンド開発に関するコンサルティング

フロントエンド開発を新規に設計・実装する場合はもちろん、設計を見直すときもピクセルグリッドがお手伝いします。運用中サービスでのCSS設計の相談や、CSSのリファクタリング方法、UI/UXの見直し、技術選定など、お困りのことがありましたらご相談ください。GitHubやSlackを利用し、より具体的なコードへのアドバイスまでサポートいたします。

また、一般的にはまだ使われていない新しい技術を使ったサービスや、新しいデバイスへの対応などのプロトタイプ制作も承ります。

コンサルティング事例

esa.io

esa.ioで使われているCSSのリファクタリングを担当。GitHubを利用してCSSに関するコードレビューを行った。またSlackを通して技術的な相談や、よりメンテナブルなCSSにするための改善策を提案した。

全国道路情報@ATIS

情報設計、デザイン、HTMLテンプレート作成、マップJavaScript実装を担当。地図に関するAPIやシステムが既に存在しており、デザインや実装の制限が多い中、ユーザーが求める情報を整理し、改善方法の提案から実装までを行った。

こんまり片づけレッスン

情報設計、デザイン、HTMLテンプレート作成を担当。このプロジェクトは、docomoスゴ得コンテンツの品質向上の一貫として行われた。他のプロジェクトでも流用可能なコンポーネント(汎用HTMLモジュール、JavaScriptライブラリ、アイコンのセット等)を切り出し、再利用可能にした。

お引き受けしないこと

どのような制作を行っているのか、わかりやすく理解していただくために
お引き受けしていないことを説明させていただきます。

デザインのみの依頼

ピクセルグリッドのデザイナーは、JavaScriptと連携する高度なUIなどの場合に担当致します。その場合もフロントエンドの開発と併せてとなりますので、デザインのみの依頼はお引き受けしておりません。

通常はデザインを支給いただくか、そうでない場合はパートナーのデザイン会社をご紹介致します。

iOS、Androidのネイティブアプリ

HTML、CSS、JavaScriptなどを利用したWeb技術に特化していますので、これらの技術を利用しないスマートフォンやタブレット向けネイティブアプリの開発は行っておりません。

ただし、Apache Cordovaを利用したアプリなどについては対応できますので、ご相談ください。

CMSの設計、組み込み

Movable TypeやWordPressといった、CMSを利用したサイト制作は行っておりません。これらは独自の経験や常に最新バージョンへのアップデートを追っておく必要があるためです。

HTML/CSSの品質やメンテナンス性を高めたいなど、元となるテンプレートのHTMLの設計、制作であればお引き受けできます。

ゲームの制作

ソーシャルゲームを含め、ゲームの制作には、専門的な知識と特殊なノウハウが必要です。

ピクセルグリッドでは制作経験がなく、面白いゲーム制作へのご期待に応えるのが難しいため、ゲームの制作依頼はお断りさせていただいております。

サーバーサイドの設計・実装

フロントエンド開発に特化していますので、サーバーサイドの設計や実装は行いません。

ただし、WebSocketを利用するなど、フロントエンドとサーバーサイドの高度な連携が必要な場合や、Node.jsを利用したAPI設計などは対応致します。

客先への常駐

ピクセルグリッドのスタッフの客先への常駐は、期間に関わらず行っておりません。

必要に応じた週1の定例ミーティングなどは対応可能です。アジャイルプロジェクトへの参加など、期間内でのリソースの確保もできますのでご相談ください。

CodeGridの執筆・開発・運営

インターネットに広く新しい技術が使われるようになることを願って、
技術研究や実際の制作で得たノウハウを配信するサービスを運営しています。

CodeGrid