ツクロアの事業内容

UIデザイン

FigmaによるUI設計

ツクロアではUIデザイン・プロトタイプツールである Figma を使っています。ブラウザでどこからでも見たり作業をすることができるFigmaで、お客様とはリモートでフィードバックなどのやりとりを行っています。

見た目が美しいのはもちろんのこと、情報が整理されて使いやすいアプリケーションを開発するために、深く考えられた緻密な設計を行います。

デザインシステムの提供

プロダクトの意図がエンドユーザーに伝わりやすくデザイナーが開発に参加しやすいことを目的に、ツクロアではデザインフレームワークJumpu UIを開発しています。検討段階と開発実装されたとき極力乖離が起こらないようにCSSフレームワーク版とFigma版とを提供しています。

CSSフレームワーク版

Githubやnpmといったソースコード提供サービスで公開しています。開発した経緯や特徴については、デザインフレームワークJumpu UIの開発を御覧ください。

Figma版

設計段階で使用するデザインツール、Figmaのコミュニティー上でFigmaファイルとしても公開しています。

お客様とデザインイメージをなるべく迅速に議論・検討するため、特定の雰囲気に寄り過ぎない（クセのない）シンプルでプレーンなデザインツールを目指して提供しています。

ルールのもと整っている画面設計

4pxの倍数で余白を取ることで、安定したレイアウトが実現できるようツクロアでは心がけています。このように一定のルールや制約のなかでデザインされていることで、美しさと伝わりやすさを提供できます。

4pxの倍数で余白を取るルールを採用

Figmaのコンポーネント設計

WebサイトやWebアプリケーションにおけるUIコンポーネントは再利用性、状態変化を設計段階で考慮されていることが好ましいと考えられます。 ボタンのUIについて例を挙げると、通常時、マウスオーバー時、プレスダウン時、非活性時といった状態があります。

また、このようなUIコンポーネントは状態によって見た目や大きさが変わります。ツクロアではこのような状態変化によってユーザーがどのような気持ちをもってUIに接するのか細かく検討を重ねた設計を行っています。

Figmaのプラグイン開発

もしもお客様が持つ大量のエクセルデータをFigmaに反映する場合、手作業で行うべきでしょうか？あまりにも単純で大量かつ手作業を要する場合、Figmaのプラグインを作成し、エクセルデータの内容をFigmaに自動で取り込む、といった業務を行ったことがあります。

「テキストテキスト...」のようなダミーの文字が続くと、プロトタイプやテストが思うようにいかないこともあります。ユーザー視点で緻密に、かつ無駄な労力をかけずに、現実に近いデータで画面設計を何度も検証できます。

これでユーザーさんを交えて、新しく検討された画面を見てもらうとき「ダミーテキスト」は避けられます。

Figmaによるプロトタイプ開発

こちらの意図がエンドユーザーに伝わるか、実際に使ってもらえるか、それらについては作り手の仮説では検証不十分だと言えることが多々あります。

そういった場合、被験者にお願いして検討段階の画面を操作してもらいたいことがあり、有効な手段としてプロトタイプ〜テストがあります。

テストは本物に近い画面でテストするほうがより良いフィードバックや学びを得ることができると言われています。ツクロアではFigmaのプロトタイプ機能を使い、クオリティの高いプロトタイピング〜テストを行うことができると考えています。

ツクロアではユーザビリティテストの実績もあるので、デザインの検討過程で大きな課題に直面したときは客観的なテストを行うことができ、その際にプロトタイプを提供することが可能です。

株式会社ツクロアでは、UIデザインを重視した Web アプリケーション設計・開発のご依頼を受け付けています。
こちらのフォームにてまずはお問い合わせください。
さらに、プロトタイプを用いたユーザビリティテストも行っております。基本的に行うテスト内容のテンプレートを用意しています。無料相談も受け付けておりますのでお気軽にお問い合わせください。