ADDGRIDお問い合わせ

事業内容

企画から設計、実装、運用まで。すべてワンストップで、いっしょにかたちにしていきます。

WEBサービス開発

WEBサービス開発のイメージ。ダッシュボード、スタッフ管理、求人管理などの管理画面が奥行きをもって並んでいる

新規WEBサービスの立ち上げをお手伝いします。企画・要件定義から設計、開発、リリースまで。「まず小さく作って、早く試す」MVP開発のアプローチで、アイデアの検証サイクルを速く回します。

リリース後も、ユーザーの反応を見ながら機能追加や改善を続けるグロースフェーズまで伴走。事業としてサービスを育てていく視点で、長くお付き合いします。

新規事業MVP開発SaaSグロース支援

アプリ開発

開発事例。献立共有アプリ「うちめしノート」の画面3点

WEBアプリ・モバイルアプリの企画から開発、ストア公開まで一貫して対応します。使う人の毎日に、すっとなじむプロダクトをつくることを大切にしています。

公開後の保守・運用、OSアップデートへの追従、機能改善まで継続的にサポート。「作ったあと」まで見据えた開発体制でお応えします。

WEBアプリiOS / Androidストア申請保守運用

システム開発

システム開発のイメージ。エディタ上でTypeScriptのコードを編集しながら、AIとの対話とターミナルを並べて作業している画面

業務システムや社内ツールの構築、既存サービスの機能拡張まで、要件定義から設計・開発・運用まで一貫して対応します。「現場の仕事がどう楽になるか」を起点に、使われ続けるシステムを設計します。

フロントエンドはパフォーマンスとアクセシビリティに配慮した、堅牢で美しい実装を。既存プロダクトの改善・リファクタリングも承ります。「動くけれど手を入れづらい」コードを、育てやすい状態に整えます。

業務システムAPI設計React / Next.jsパフォーマンス改善リファクタリング

UI/UXデザイン

デザイン事例。Figmaのデザインファイル上に、ログインから問い合わせまでの画面が一覧で並んでいる

WEBサービスやアプリのUI/UXデザインを行います。「迷わず目的にたどり着けるか」を軸に、画面遷移の設計やボタン配置の一つひとつまで、UXを考慮して丁寧に設計。デザインカンプではなく「実際に動くもの」でデザインを確認しながら進めるのが、私たちのスタイルです(重要な画面はFigmaでのご確認にも対応します)。

デザインデータを渡して終わり、ではなく、プロジェクトに入り込んでGitHubにブランチを切り、実装コードのUIを直接調整していくことも可能です。Claude Codeを活用したデザイン調整にも対応しており、デザインと実装のあいだで起きがちな「伝言ゲーム」をなくします。

WEBデザインUX設計画面遷移設計デザインシステムGitHubClaude CodeFigma

WEB制作・LP制作

制作事例。みんなの給食株式会社オフィシャルサイトのトップページ

まず「このサイトは誰に、何を届けるためのものか」という目的を明確にするところから始めます。競合サイトの調査や掲載コンテンツの検討をしっかり行い、伝わる構成と心地よいデザインに落とし込みます。制作段階からSEOを意識した設計・実装を行うので、公開後の検索流入にもしっかり効きます。

公開して終わり、にはしません。Google AnalyticsやJuicer、Google Tag Managerなどの設定を行い、アクセス解析をもとに「どこが読まれているか」「どこで離脱しているか」を可視化。データに基づいた改善・更新まで伴走します。

コーポレートサイトサービスサイトLPSEO対策Google AnalyticsJuicerアクセス解析

AI駆動デザイン

AI駆動デザインのイメージ。デザインシステムの定義画面と、それを反映したサイト画面が奥行きをもって重なっている

AIを活用したデザイン・開発プロセスで、スピードと品質を両立します。従来なら数日かかっていたデザイン案の作成を、AIとの協働で大幅に短縮。多数の案を素早くかたちにして、比較・検証しながら精度を高めていきます。

プロトタイプの段階から「実際に触れるもの」をお見せできるので、認識のズレが起きにくく、意思決定も速くなります。AIの活用ノウハウそのものについてのご相談も歓迎です。

AI活用ラピッドプロトタイピングデザイン検証Claude Code

ロゴ・ブランディング

ロゴマークの作図と仕上がり。左は構成グリッドと補助円、右はブルーと黒の2色で仕上げたマーク

会社やサービスの顔になるロゴマークをデザインします。「誰に、どんな印象を持ってほしいか」を整理するところから始め、名前に込めた意味やこれから向かう方向を汲み取って、かたちに落とし込みます。

複数の案をご提示し、比較しながら方向性を決めていきます。決定後は、サイトや名刺、アプリのアイコンなど実際に使われる場面での見え方まで確認し、使い方のルールを添えてお渡しします。

ロゴマークブランディングロゴ規定ツール展開

進め方

WEBサイトもアプリもシステムも、この4つのステップで進めます。つくるものによって中身は変わりますが、流れは変わりません。

1

ヒアリング

目的や課題、理想の姿をじっくり伺うところから始めます。新規の立ち上げか、既存のつくり直しかで見るべきものが変わるため、前提の整理に時間をかけます。

与件整理
事業内容・目的、業界や競合の状況を詳しく伺います。既存のサイトやシステムがある場合は、その課題や利用状況もあわせて整理します。
ターゲットの明確化
誰に、どんな場面で使われるのかを具体化します。想定する相手が変われば、見せ方も情報の優先順位も変わります。
ベンチマーク調査
参考にすべき企業・サービスを選定し、構成や機能、見せ方を抽出して比較・分析します。業界のスタンダードと、その先を見極めます。
体制・スケジュールの確認
公開したい時期、社内の運用体制、更新の頻度を確認します。無理のない進め方を、はじめに決めておきます。
2

企画・設計

調査でわかったことを、つくるものの形に落とし込みます。「誰に、何を、どう伝えるか」をこの段階で決めきります。

差別化ポイントの抽出
競合との差分から、貴社ならではの優位性や、業界としてアピールしておきたいポイントを洗い出します。
コンセプトの決定
調査でわかったことをふまえ、「一番に伝えるべきことは何か」を一つに絞ります。以降の判断は、すべてここを基準にします。
構成・情報設計
業界・競合・時代にマッチした構成に落とし込みます。WEBサイトなら検索キーワードを踏まえたSEOに強い情報設計を、アプリやシステムなら画面遷移と操作の流れを設計します。
要件の整理と優先順位づけ
必要な機能やコンテンツを洗い出し、最初につくるものと後から足すものを分けます。小さく出して育てる前提で線を引きます。
3

制作・開発

ワイヤーフレームやデザインカンプを介さず、最初から本番同等のものを構築します。実際に触れる状態で磨き込みます。

デザイン × 実装(同時進行)
静止画ではなく「実際に動くもの」で確認しながら進めます。重要な画面はFigmaでのご確認にも対応します。
プレビュー環境の共有
更新のたびに、最新の状態をURLでご確認いただけます。社内での共有もリンク1本で済みます。
確認・ブラッシュアップ
実物をご確認いただき、フィードバックを反映しながら仕上げます。ご要望に応じて、デザインガイドラインやデザインシステムの構築にも対応します。
品質チェック
表示速度、アクセシビリティ、スマートフォンや各ブラウザでの見え方を確認し、公開できる状態に整えます。
4

公開・運用

公開して終わり、にはしません。数字を見ながら、育て続けます。

公開前の最終確認
タイトルや説明文などのSEO設定、SNSでシェアされたときの見え方、フォームの動作をひととおり確認します。
公開・計測環境の整備
公開にあわせて、Google AnalyticsやGoogle Tag Managerなどの計測環境を整えます。
更新方法のお引き渡し
CMSを導入した場合は管理画面の使い方をご案内し、社内で更新を続けられる状態にしてお渡しします。
改善・保守運用
「どこが読まれているか」「どこで離脱しているか」を可視化し、データに基づいた改善・更新まで伴走します。アプリやシステムでは、保守運用やOSアップデートへの追従にも対応します。

AI時代の、新しいつくり方

ワイヤーフレームやデザインカンプの工程を基本的に省略し、最初から実物のサイトを構築します。静止画ではなく「実際に動くもの」で確認しながら進めるので、認識のズレが起きにくく、スピードも大幅に上がります。

ADDGRIDの進め方
ヒアリング・調査本番サイトを直接構築実物を見ながらブラッシュアップ本番公開

構築する内容やご要望により、ステップを増やす場合もあります。

早い段階で実物に触れられます

静止画ではなく動くサイトでご確認いただくので、完成イメージのすり合わせが前倒しになります。

中身の検討に時間を使えます

ワイヤーフレームやカンプを作り直す工程が減るぶん、「何を、誰に、どう伝えるか」を練る時間に回せます。

公開後の手戻りが減ります

公開前に実物で詰めきるため、公開してから何度も直すことが少なくなります。

従来の進め方
ヒアリングワイヤーフレームデザインカンプ修正の往復実装公開

技術スタック

プレーンなHTMLからWordPressなどのCMSまで幅広く対応しています。おすすめは、表示速度・SEO・更新のしやすさのバランスに優れた下記のモダン構成です。

FRAMEWORK

Next.js

Reactベースのフルスタックフレームワーク。表示速度に優れ、SEOにも強いサイトを構築できます。

React / Vue.js / Nuxt / Astro など、他のフレームワーク・SPAにも対応します。

STYLING

Tailwind CSS v4

ユーティリティファーストのCSSフレームワーク。デザインの一貫性を保ちながら、スピーディにスタイリングできます。

CSS Modules / Sass など、ご希望のスタイリング手法に合わせられます。

UI LIBRARY

shadcn/ui

コードとして手元に置けるUIコンポーネント集。プロジェクトに合わせて自由にカスタマイズできます。

Vuetify / MUI / Radix UI などのUIライブラリにも対応します。

HOSTING

Vercel

Next.jsと相性の良いホスティングプラットフォーム。プレビュー環境の共有やデプロイの自動化で、確認から公開までがスムーズです。

AWS / Cloudflare / レンタルサーバーなどにも対応します。

CMS

microCMS

国産のヘッドレスCMS。お知らせや実績などのコンテンツを、管理画面からかんたんに更新できます。

WordPress / Newt / Contentful などにも対応します。

BACKEND

Supabase

認証・データベース・ストレージをまとめて提供するBaaS。会員機能やお問い合わせデータの管理などに活用できます。

Firebase / 自前のAPIサーバー構築にも対応します。

まずは、気軽にご相談ください。

「こんなことできる?」の段階で大丈夫です。2営業日以内にご返信します。