UI / HMI デザイン

UI/HMI & Icon Design

高品質なUI・HMI・アイコンなどを提供し
洗礼されたユーザー体験を実現します。

UI / HMIデザイン

技術者の視点から製品を理解し、ユーザーの立場で使いやすさを考える

プロダクトデザインで培ったノウハウは、UIデザインにおいても先進の価値を提供できます。
製品デザインの重要な構成要素であるUIに対しデザイン思考で製品の価値向上に貢献します。

複雑な操作を直感的に
最高の体験をデザインするUI

あなたのサービスやプロダクトは、ユーザーにとって本当に使いやすいですか?複雑な機能をシンプルに、そして直感的に操作できるようデザインすることで、ユーザーは迷うことなく目的を達成できます。私たちは、単なる見た目の美しさだけでなく、徹底的なユーザー視点に基づいたUIデザインで、お客様のサービスが持つ真の価値を引き出します。ユーザビリティの向上は、ユーザー満足度を高め、継続的な利用を促し、結果として事業成長に貢献します。

UIデザインのイメージ1
UIデザインのイメージ2

それぞれの場面に最適な見せ方で
パフォーマンスを底上げします

スマートフォン・タブレット

  • iPhone
  • iPad
  • Android
  • Androidタブレット
UIデザインのイメージ2

スマホ黎明期から蓄積しているノウハウを活かし、マルチデバイス・マルチプラットフォームに対応したデザインを提案します。最新のデザインガイドラインにも対応しています。

PC・Mac

  • Windows
  • MacOS
  • アプリケーション
UIデザインのイメージ2

一般消費者向け・企業業務向けPCソフトウェアのUIデザインにも対応しています。企業内向けシステムに関するデザインは専門的な知識を必要とするケースが多いため、綿密な打ち合わせからの精度の高い設計をし提供します。また、必要に応じてHTML・CSSなどのWEB技術を用いたデモンストレーションの作成も可能です。

タッチパネル表示器

  • HMI表示器
  • プログラマブル表示器
UIデザインのイメージ2

操作するユーザー層のことはもちろん、屋外や照明の乏しい屋内など使用環境に相応しいデザインをご提案します。 実機で使用されるインターフェイス作成ソフトでのデータのご提供も対応しております。画面デザインから実装まで円滑に進められるような柔軟なサポートが可能です。

製品デザインからUIデザインまで一括サポート

工業製品のデザインとUIデザインをトータルでサポート可能ですので、工業デザイナー、グラフィックデザイナーそれぞれ個別の手配が必要なく、円滑なコミュニケーションと合理的なスケジューリングを実現できます。工業デザイナーが製品デザインの過程や意図を細部まで理解しているため、製品デザインとより一体感のあるUIを実現できます。もちろん見た目だけの一体感ではなく、デザイナーが関われば関わるほど操作方法および操作手順などが分かりやすい・心地いいUIをご提供できます。

プロダクトデザインについて
もっと詳しく

アイコンデザイン

  • アプリアイコン
  • ツールアイコン
  • ブランドロゴ

優れたサービスやソフトウェアにふさわしいプロ品質のアイコンを

もし、アプリケーションやサービス、WEBサイトで他者を卓越していたいのであれば、ユーザーインターフェースのデザインはとても重要な要素であることは言うまでもありません。その玄関口となる"アイコン"が、どれほどマーケティングやブランディングを向上させるか、すでに多くの人々に理解されつつあります。私たちはより写実的な質感、わかりやすいモチーフ、テーマに適した色遣いを駆使し、1ランク上のアイコンデザインを提供します。

どこまでも繊細に

アイコンデザインのイメージ2

最新のWindowsやMacでは512ピクセル、1024ピクセルといった、一昔前では考えられなかった大きさのアイコンを利用するようになりました。私たちの技術は高解像度アイコンの情報量を持て余すことなく、そこから始まる世界を魅力的に表現します。さらに洗練かつ合理化されたアイコンデザインで、小さいときでも認識しやすく、大きく表示されればよりリッチなプレゼンテーションを実現します。

デバイスに最適化されたプレゼンテーション

一口にデザインといっても様々な表現があるように、アイコンを表示する端末も急速に多様化しています。PCやMac、スマートフォン、テレビやセットトップボックス、ATM、自動受付機、券売機にいたるまでアイコンが登場する場面は挙げればキリがありません。たとえ同じサービスでもそれが登場するシーンによって最適な表現は個別にあると私たちは考えています。たとえば、公共性の高い物では認知性が最優先されますが、PCアプリケーションでは質感がとても重要でしょう。iPhoneアプリではそれに加えて他アプリとの調和と同時に差別化が必要になってきます。定石的な解決方法はもちろんありますが、それだけではすべての要求を満たすことが出来ません。私達はこれまでの研究と表現力で、それらの問題を解決するプロ品質を追求し続けています。

UIデザインのイメージ1
UIデザインのイメージ2

システム開発会社様との協業で生まれる価値

デザインと開発の力を掛け合わせたUI

弊社はシステム開発会社様との協業体制を整えております。UIデザインの専門知識と開発側の技術力を組み合わせることで、ユーザーにとって直感的で使いやすく、かつ機能性に優れたプロダクトを実現します。

協業のメリット

1.齟齬や手戻りの軽減
企画段階からデザイナーとエンジニアが連携するため、実装時のミスや修正を最小限に抑えられます。
2.スムーズなプロジェクト進行
開発チームのワークフローに合わせたUI設計で、納期を守りつつ高品質を維持します。
3.ユーザー視点の品質向上
技術的な実現性と、使いやすさ・見やすさの両立を可能にします。

こんなシステム会社様に
おすすめです

  • 社内にUIデザイナーがいない
  • ユーザー視点での画面設計に課題がある
  • デザインクオリティを高めたいが、開発のスピードも落としたくない

    私たちが目指す協業のカタチ

    開発チームにとっての「UIパートナー」として、システムの価値を最大化するお手伝いをいたします。
    お気軽にご相談ください。

    お問い合わせ

    協業の流れ

    1

    1ヒアリング
    要件整理

    開発内容・目的・ターゲットを共有し、UIデザインの方向性を決定。

    2

    2UI設計
    デザイン制作

    ユーザー体験を重視した画面設計とデザイン案を作成。

    3

    3デザインレビュー
    調整

    開発チームと連携し、実装に最適な形へブラッシュアップ。

    4

    4実装サポート
    納品

    デザインデータの提供と、必要に応じた実装支援を実施。

    5

    5運用改善
    提案

    リリース後の改善点や追加UI提案で、品質向上を継続サポート。

    提案できるUIデザイン
    ワーク

    製品企画

    • コンセプト策定
    • 画面遷移設計

    デザイン

    • 画面レイアウト設計
    • アイコン制作
    • カラーコーディネート

    プロトタイピング

    • HTMLサンプル制作
    • アニメーションモック

    アウトプット

    • 開発者向け指示書作成
    • デザインリソース書出

    その他

    • イラスト制作
    • グラフィック広告制作
    • 開発リソース調整

    デザインツールは Adobe Photoshop や Figma などを使用し、画面のサンプル画像(主にPNG)などを作成します。ボタンや背景などパーツごとに画像ファイルとして出力する方法の他、デザイン指示資料作成・HTML/CSSで外観のサンプルを作ることも可能です。また、必要に応じてWEB上で確認可能なデモンストレーションの作成も可能です。

    対応可能ファイル形式

    イメージファイル
    JPEG,GIF,PNG,BMP,SVG,ICO
    デザイン作業ファイル
    PSD(Adobe Photoshopデータ)
    AI(Adobe illustratorデータ)
    XD(Adobe XDデータ)
    HTML/CSS
    デザインツール
    (導入ソフトウェア)
    Adobe Creative Cloud(Photoshop,Illustrator,AfterEffects,XD )
    Sketch
    Figma
    タッチパネル表示器
    (プログラマブル表示器)
    画面作成ソフトウェア
    三菱電機 MELSOFT GT Works3(GTX)

    デザイン実績

    スマートフォン
    プロダクティビティ系アプリ 多数
    カレンダー、活動量計、カメラ、SNS など各種アプリ
    タブレット
    プロダクティビティ系アプリ 多数
    医療分野、製造業分野 のプロプライエタリ アプリ
    Windows8 タブレット・ウルトラブック
    ニュース系、プロダクティビティ系 アプリ
    WEBアプリケーション
    BtoB系 ソフトウェア、業務システムUIPC周辺機器の設定画面
    デスクトップ
    PC ソフトウェア
    薬剤管理ソフト、電子カルテ、帳票管理、リハビリテーション支援ソフト、アプリケーションアイコン、業務アプリケーション向けツールアイコン
    家電・産業機械
    コンシューマ製品
    ファクシミリの画面UI、インターホンシステム、
    TV及びセットトップボックス向けのアイコンなど
    研究機関、医療機関、工場・産業機械 向け製品
    医療機器 タッチパネルUI
    分析装置 タッチパネルUI
    電動ラック タッチパネルUI
    産業機械操作 タッチパネルUI
    その他のデザイン分野
    商品シンボルマークデザイン
    ウェブサイトデザイン
    販促物デザイン

    ご依頼の流れ

    1〜3営業日
    10〜15営業日
    10〜15営業日
    1

    1お問い合わせ

    メールフォームまたは電話・メールにてお問い合わせください。

    2

    2ヒアリング

    製品開発に必要な項目についてお伺いいたします。ここでお聞きした内容を元にお見積をご提示します。

    この段階で対象となる情報を整理し、コンセプトワークを進める場合もあります。

    3

    3アイデアワーク

    アイデア検討の末、最もふさわしく、魅力的なビジュアル表現と思われるデザイン案に絞り込み、作成します。

    バリエーション画面は、方向性が決まり次第作成します。その際、パターン化可能な画面のレイアウトデザインを行い、操作上ユーザーの混乱を避けるため、色や配置のルールを決めます。

    4

    4提案

    デザインの方向性を確認するためのご提案をします。必要に応じて複数ご提案する場合もあります。

    方向性が決まり次第、バリエーション画面を提案します。必要な画面やアイコン・ボタンの状態変化などのデザイン案をすべて確認、検討していただきます。

    中間成果物
    5

    5書き出し / 納品

    決定案から、開発に必要な形式に書き出します。それらをリソースの管理表とともに、座標位置やインタラクションの指定も資料化し、開発者にスムーズな引き継ぎが出来るようにします。

    膨大な数になる場合も多いので、後の修正や多言語化など、案件が完了した後でも対応出来るように管理、最終納品となります。

    最終成果物

    フィードバックなどを材料に
    デザイン作業を反復

    フォローワーク

    案件完了後も、不具合のご相談、追加のご要望など随時フォローいたします。

    プロジェクトの課題を
    ディ・フラットと共に
    解決しませんか?

    初回お問合せ時からデザイナーが対応するので、制作についてより深い話ができます。
    概算であってもリアルなお見積もりの話も可能です。

    まずはお気軽に、デザインのお悩みをお聞かせください。

    お問い合わせ