編集部からのお知らせ
新着の記事まとめPDF「NTT」
おすすめ記事まとめ「MLOps」
UI/UXで“おもてなし”

UXデザイナーに必要なのはコーディング - (page 2)

大塚雄介(ネクスウェイ)

2014-07-30 07:30

 最近これらの問題を解決するサービスを発見し、利用した結果、非常に有用であったためいくつか紹介したい。

 Macaw.co

 Kickstarterでわずか24時間で7万5000ドルを獲得した。デザイナーが使い慣れたPhotoshopとほぼ同じ操作性で利用できるウェブデザインツールだ。ビジュアルエディタで作ったデザインをhtml、cssでつくれる。

 Macawの特徴は以下という。

  • アニメーションを簡単に作成でき、自動でhtml、css、JavaScriptを書き出すことができる
  • 作成したデザインは自動で可変できる
  • レスポンシブなデザインが作成できる
  • 豊富なテンプレート・スクリプトを使ったインタラクティブなモックアップ作成ができる
  • 簡単にグローバルパーツを作成したり編集できる

 要するにこれまでのPhotoshop操作性でhtml、cssを作ることができるというものだ。

 Macawについての詳細記事はこちら

 UXデザインをする上で、早期にアイデアを実現しユーザーフィードバックを得て改善し続けることは非常に重要だ。もしコーディングに苦手意識のあるデザイナーは、Macawを試してみることをおすすめする。

 2つ目はCSS Hat

 既にPhotoshopで作ってしまった素材も、レイヤスタイルをCSSに変換してくれる。CSS Hatの特徴は以下という。

  • PhotoshopのレイヤスタイルをCSSでリアルタイムに再現
  • LESS、SASSに対応

 CSS Hatを使えば、過去の素材もCSSで表現できるため便利だ。

 3つ目はPageLayers

 HTMLをレイヤ分けしたPhotoshopファイルに変換できるソフト。PageLayersの特徴は以下の通り。

  • HTML、CSSをPhotoshopのレイヤスタイルに変換してくれる
  • div単位でレイヤ分けされるため非常に使い易い

 今後、デザイナーとエンジニアの境界線は重なり、どれだけ早くプロダクト開発、検証サイクルを増させるかが鍵となるだろう。この機会にこれらのツールを使って新しい領域に挑戦してみるのはいかがだろうか。

大塚雄介
2006年、早稲田大学大学院卒理工学修士号取得。同年、ネクスウェイに入社。ネット広告新規法人営業、新事業創出プロジェクトを経て、新規事業(クラウドサービス NEXLINK)のUI責任者に就任。専門はIA/UX/UIデザイン。2013年より、「STORYS.JP」のCMO(最高マーケティング責任者)兼任。Facebookはこちら

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

特集

CIO

モバイル

セキュリティ

スペシャル

ホワイトペーパー

新着

ランキング

  1. セキュリティ

    アンチウイルス ソフトウェア10製品の性能を徹底比較!独立機関による詳細なテスト結果が明らかに

  2. 経営

    10年先を見据えた働き方--Microsoft Teamsを軸に社員の働きやすさと経営メリットを両立

  3. セキュリティ

    6000台強のエンドポイントを保護するために、サッポログループが選定した次世代アンチウイルス

  4. セキュリティ

    ローカルブレイクアウトとセキュリティ-SaaS、Web会議があたりまえになる時代の企業インフラ構築

  5. 運用管理

    マンガでわかるスーパーマーケット改革、店長とIT部門が「AIとDXで トゥギャザー」するための秘策

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]