UI/UX DESIGN

UI/UXデザイン

使いやすさと見た目の美しさを構造的な設計に落とし込む
──体験全体をデザインします。

アプリやWebサービスのデザインでは、視覚的な美しさだけでなく「使いやすさ」「わかりやすさ」が欠かせません。ユーザーリサーチからワイヤーフレーム、プロトタイピングまで、UI/UXに必要な工程を一貫して行います。

UI/UX DESIGN
UI/UX DESIGN
UI/UX DESIGN

UI/UX設計とデザインシステム「伝える」から「続けて使える」へ

UI/UXデザインは「伝える」ための設計であり、個別のアウトプットを導くプロセスです。
一方で、デザインシステムはそれを「続けて使える」状態へと導く、再現性と運用を支えるしくみです。

  UI/UXデザイン デザインシステム
目的 情報伝達/業務効率化 長期運用・一貫性保持
フェーズ 調査〜実装 ガイドライン・仕組み構築
成果物 ワイヤーフレーム、UI、アウトプット デザインシステム、ルール、コンポーネント
対象 プロジェクト単位 プロダクト全体/複数チーム共有
特徴 スピード感、柔軟性 再現性、持続性、品質管理

カニカピラが提供するUI/UXデザインとは

カニカピラのUI/UXデザインは、上流工程から運用設計までを一貫して支援します。ユーザー調査に基づく設計と、運用を見据えた構造化で、使いやすさと再現性を両立。さらに、ビジュアルと体験の調和を図り、プロジェクトに最適なUXを提供します。

UI/UXデザインとは
UI/UXデザインとは
UI/UXデザインとは

Process

プロジェクトの進め方

01

Concept

コンセプト策定

ブランドの核となるメッセージや世界観を定め、表現と構造の軸をつくるために、背景や目的を言語化して共有します。

コンセプト策定
コンセプト策定
コンセプト策定
02

User Story Map

ユーザーストーリーマップ

UIの設計に入る前の、ページ構成や情報の優先順位を確認する工程。情報設計・導線設計を中心に、構造の骨組みを視覚化します。

ユーザーストーリーマップ
ユーザーストーリーマップ
ユーザーストーリーマップ
03

Wireframe

ワイヤーフレーム(情報設計)・画面設計(トーン・ナビゲーション設計)

UIの初期レイアウトやトーンの方向性をラフとして設計します。ここでデザインに入る前の土台を整えます。

ワイヤーフレーム(情報設計)・画面設計(トーン・ナビゲーション設計)
ワイヤーフレーム(情報設計)・画面設計(トーン・ナビゲーション設計)
ワイヤーフレーム(情報設計)・画面設計(トーン・ナビゲーション設計)
04

Visual Design

デザイン

丁寧でわかりやすい情報設計、認知負荷を軽減するデザインを提案します。

デザイン
デザイン
デザイン
05

Design Token

デザイントークン

色、文字、余白など、デザインの表現要素を変数化し、再現性を高め、コミュニケーションコストを下げます。

デザイントークン
デザイントークン
デザイントークン
06

Component

コンポーネント

UIパーツをモジュール化し、再利用しやすい設計を行います。

コンポーネント
コンポーネント
コンポーネント
07

Guideline

レギュレーションにまとめる

デザインの再現と運用のために、ガイドラインやルールを整え、体系化します。

レギュレーションにまとめる
レギュレーションにまとめる
レギュレーションにまとめる
08

To Use

使ってもらう

他メンバーや外部チームでもストレスなく使用できる状態を目指します。
「作って終わり」ではなく、ユーザーが実際に使ってどう感じるかを見届け、必要に応じて調整・改善しながら育てていきます。

Design System

デザインシステム

デザインシステムとは、デザインと開発の効率化、アクセシブルで一貫したプロダクト品質の担保、ナレッジの蓄積とベストプラクティスの波及、コミュニケーションの円滑化などを目的とします。カラーやタイポグラフィなど視覚要素を定めたデザイントークン、再利用性の高いUIコンポーネント、アイコンなどの最低限のビジュアルアセットを提供します。

デザインシステムの構築と運用

デザイナーとエンジニアの橋渡しをスムーズにするため、FigmaやStorybookを活用し、再利用性と保守性に優れた仕組みを整備しています。

  • コンポーネントのルール設計と命名統一
  • 色彩やアクセシビリティへの配慮
  • 実装までを見据えたToken・ガイドライン連携
  • デザイン運用のためのルールづくり
デザインシステムの構築と運用
デザインシステムの構築と運用
デザインシステムの構築と運用

Strength

カニカピラの強み

「見た目」起点、ビジュアルから一気通貫でのUI/UXへ設計が可能です。 ブランドトーン・世界観・デザインコンセプトの一貫性グラフィックのノウハウがあるからこそ、UIに「らしさ」を反映させます。 デザインシステムも”表現のための道具”として、コンポーネントの量産ではなく、「どう世界観を維持するか」視点からのデザインシステムを構築します。 社内システムなど、toBのUIデザインを多数手がけており、デザインの経験値が蓄積されています。

カニカピラの強み
カニカピラの強み
カニカピラの強み

「見た目」と「構造」をつなぎ、使いやすさと世界観を両立するUI/UX

UI/UX設計のみを専門とする会社とは異なり、私たちはグラフィック・Web・アートディレクションを起点に活動してきたチームです。 「見た目の美しさ」と「運用・構造の設計」を両立させた、どちらの考え方にも通じた設計を行います。 ユーザー体験と再現性を支える仕組みを構築し、価値を届けるUI/UXデザインを実現します。