得意とする開発

得意とする開発

Webサービス

多くのユーザーが利用するWebアプリケーションの設計は、ピクセルグリッドが得意とする分野の1つです。規模に合わせ、Jamstackをベースにしたアーキテクチャで最適なライブラリを選定し、設計します。新たにAPIを合わせて開発する場合、エッジサーバーレス構成でメンテナンス工数が少なく、フロントエンドから扱いやすいAPI設計をサポートします。

開発事例

致知電子版

月刊『致知』をWebで読めるサービス「致知電子版」の設計と開発を担当。 Jamstack構成により、素早くユーザーにコンテンツを届けられるメディアサイトを、ランニングコストを抑えて実現しました。

  • Svelte
  • Prismic
  • AWS Amplify
  • Amazon Cognito
  • GitHub
  • Eleventy
  • Tailwind CSS
  • Stripe
取引会社
  • エヌ・ティ・ティ・コミュニケーションズ株式会社
  • 株式会社致知出版社

Web管理画面

エンタープライズ向け業務システムや、B2Bで使われる管理画面の要件定義からアーキテクチャ設計、UI設計、フロントエンドの実装まで行います。とくに業務システムでは、使う人のニーズに沿ったUIとメンテブルなコード設計が重要です。ピクセルグリッドでは、Jamstackをベースにした最適なアーキテクチャで、運用や設計に合ったライブラリを選定し、長期に渡る運用を見越したフロントエンドの設計を行います。APIを用意している場合はもちろん、AlgoliaやヘッドレスCMSによる更新システムなど、ニーズに合ったサービスを使った構成で提案もできます。

開発事例

SARF CMS

エイベックス・エンタテインメント株式会社が提供する音声AR体験"SARF"。そのコンテンツを管理する"SARF CMS"の情報設計、画面UI設計、画面デザインとフロントエンド開発を担当しました。

  • Nuxt.js
  • Amazon Cognito
  • Netlify
  • GitHub

あきばれホームページ

HTMLがわからなくても自由にコンテンツ編集できるCMS管理画面を実装しました。開発パートナーとして長期的に開発をお手伝いしています。

    取引会社
    • コマツ（株式会社 小松製作所）
    • 伊藤忠インタラクティブ株式会社
    • 株式会社WEBマーケティング総合研究所
    • エイベックス・デジタル株式会社
    • 株式会社ヤプリ

    グラフィカルUIツール

    画像編集ツールや、ビジュアルで操作して試せるシミュレーターなど、SVG、Canvas、WebGLを使ったグラフィカルなUIを持つWebサービスが多く作られるようになりました。ピクセルグリッドでは、複雑な図形や、3Dの仕組みを使った、独自のWebグラフィカルUIツールの設計、開発を行っています。PCはもちろん、スマートフォンやタブレットでも問題なく動作するWebツールを開発できます。

    開発事例

    VRoid Hub

    3Dモデルデータをアップロードするだけで、キャラクターが動くプロフィールページが作れるpixivのサービス。VRMのWebGL実装とそのビューア部分を担当しました。

      取引会社
      • エヌ・ティ・ティ・コミュニケーションズ株式会社
      • ピクシブ株式会社

      デザインシステム

      近年、効率的に企業のビジョンやブランドを表現するため、デザインシステムとして、デザイン原則などのドキュメントや、実装するためのUIコンポーネントを定義することが増えてきました。デザインシステムを効率よく共有するにはドキュメントのウェブサイト運営や、UIコンポーネントの品質管理が重要になります。Jamstackによる効率的なドキュメントサイトや、フロントエンドの経験による、アクセシビリティやUIコンポーネントのレビューなど、さまざまな観点からお手伝いできます。

      開発事例

      SmartHR Design System

      SmartHRで運営しているデザインシステムのWebサイトのリニューアルを技術面でお手伝いしました。リニューアル前のJamstack構成（Gatsbyを使いNetlifyにデプロイ）を活かしながら調整し、より高速でメンテナンスしやすいサイトに仕上げています。

      • Gatsby
      • React
      • TypeScript
      • Storybook
      • Netlify
      • Cloudinary
      取引会社
      • 株式会社SmartHR

      メディアサイト

      自社でCodeGridを開発、運営するピクセルグリッドには、メディアサイト制作に関する多くの知見があります。Webサイトの性能がユーザーのためにも、SEOのためにも重要になっているメディアサイトでは、Jamstackでの開発が最適です。コンテンツを管理しやすいヘッドレスCMSを選定できます。また、有料でのコンテンツ配信にも対応できます。

      開発事例

      致知電子版

      月刊『致知』をWebで読めるサービス「致知電子版」の設計と開発を担当。 Jamstack構成により、素早くユーザーにコンテンツを届けられるメディアサイトを、ランニングコストを抑えて実現しました。

      • Svelte
      • Prismic
      • AWS Amplify
      • Amazon Cognito
      • GitHub
      • Eleventy
      • Tailwind CSS
      • Stripe

      CodeGrid

      Jamstackで作られていた構成から大きく変えず、Cloudflare + Astro + Svelte + HygraphでSSRを利用してユーザーごとにコンテンツを出し分ける高速なメディアサイトを実現しました。

      • Astro
      • Svelte
      • Algolia
      • Hygraph
      • Cloudflare Pages
      • GitHub
      • CircleCI
      取引会社
      • 株式会社 致知出版社

      大規模Webサイト

      メディアサイトに限らず、WebサイトでもヘッドレスCMSとWebフレームワーク、または静的サイトジェネレーターを利用したJamstackは有効です。コンテンツにあわせたヘッドレスCMSの設計をし、パフォーマンス、セキュリティに配慮したWebサイトの開発が行えます。個別に案件の事情にあわせ、ヘッドレスCMSを使わずに更新しやすい構成にすることもできます。

      開発事例

      セゾンカード

      リニューアル時のフロントエンド開発を担当。 EleventyとmicroCMSによるJamstack構成で、情報を整理し更新しやすく、高速でセキュリティを考慮したWebサイトを実現しました。

      • Eleventy
      • microCMS
      • AWS Amplify
      • Svelte
      • GitHub

      www.pxgrid.com

      株式会社ピクセルグリッドのコーポレートサイト。コンテンツをmdxで管理し、ページの追加や編集をしやすく、またヘッドレスCMSを使わないコンテンツ管理を実現しています。

      • Astro
      • Svelte
      • Cloudflare Pages
      • GitHub
      取引会社
      • 株式会社ユニットベース

      フロントエンドのパフォーマンス調整

      Webアプリケーションのパフォーマンスは、ユーザー体験に多大な影響を与えます。パフォーマンスの悪いアプリケーションは、それ以外の機能の使い勝手やUIがどんなに良いものだったとしても、全体の評価を著しく低下させてしまいます。ピクセルグリッドでは、フロントエンドのパフォーマンス調整を行うことができます。パフォーマンスに問題を抱えるWebサイトやアプリケーションの、ボトルネックとなっている箇所を洗い出し、適切な改善方法をご提案いたします。

      開発事例

      リリースのためのパフォーマンス調整

      パフォーマンスの問題でリリースできない状態のプロジェクトの調査と改善を担当しました。フロントエンドの描画でボトルネックとなっていた箇所を特定し改善、対象の端末において十分なパフォーマンスになり無事リリースできる状態にしました。

        ブラウザ拡張の開発

        いくつかのWebサービスでは他のサイトを閲覧時でも、自社サービスの情報を呼び出したり、機能を呼び出したりできるブラウザ拡張機能を提供しています。ピクセルグリッドでは、ブラウザ拡張機能の作成にも対応しています。Webサービスから通知を受け取るようにしたり、特定のWebサイトやサービスの拡張をしたりもできます。ブラウザ拡張でお困りの場合はご相談ください。

        開発事例

        検索結果に情報を追加する拡張

        10万件のデータを元に、Googleの検索結果に対して情報を追加表示するChrome拡張を開発しました。バックエンドとしてAlgoliaを採用し、高速で利用者が増えてもスケールできる仕組みになっています。

          新しいWeb技術で成功させたいプロジェクトなら、技術選定の前に気軽にお問い合わせよりご相談ください。

          お問い合わせ