HOME > 開発者向けBLOG > Ext JS >  Ext JS Stencils でワイヤーフレームが簡単に

Technology Note 開発者向けBLOG

Ext JS

Ext JS Stencils でワイヤーフレームが簡単に

こんにちは、ゼノフィseoです。

この記事は、US Sencha社ブログWireframing Made Easy with Ext JS Stencils (2015年7月23日 | Amulya Aradhyula, Andrew Hemans, Grace Noh) を翻訳したものです。

Adobe Illustrator 向けUIアセットキットである Ext JS Stencils を発表でき非常に興奮しています。我々は最近 Sencha Ext JS 6 をリリースしましたが、この契機に、デザイナーが簡単にアプリケーションをモックアップできる要素を取り込みたかったのです。Ext JS Stencils には Ext JS クラシックツールキットに含まれている全てのコンポーネントとスタイルが含まれています。製品開発のワークフローにおいて Stencils を使用することで、デザイナーは開発者やその他ステークホルダーとより良いコミュニケーションをとることができるようになります。Stencils は 3つの Adobe Illustrator ファイル (Triton、Crisp、Neputne 向け)で構成されており、それらを使えば素早く簡単に、見た目の素晴らしいアプリケーションをデザインすることができるでしょう。

今すぐにダウンロード

我々が Stencils を生み出すに至った一番のモチベーションは、デザイナーと開発者の間のコミュニケーションがより良くなるよう手助けしたかったということです。アプリケーション開発サイクルの中でデザイナーが一番苦戦しているのが、Ext JS で実現可能な UIコンポーネントとスタイルの幅広さを理解すること、とお客様の声からわかりました。フレームワークで利用できるものに適合するデザイン資産を用意することで我々はこの問題に取り組むことにし、一番幅広い層から支持されているデザインツールである Illustrator でそれらのデザイン資産を制作することにしました。

Ext JS Stencils を作る上で心がけたことは、Ext JS 6 で達成できることを正確に(ピクセルの1つ1つまで)体現させるということでした。全ての Ext JS コンポーネントをベクター形式で作り、シンボルに変換することで、素早く簡単にアプリケーションのモックアップを作ることができるようになりました。9スライスを使用しているため Illustrator のシンボルは歪みなくスケールされます。Illustrator ではシンボルはシンボルパネルで見つけることができ、そしてExt JS Stencils で導入したシンボルは標準的な命名規則に従っています。さらに全てのテキストスタイルを予めキャラクタースタイルパネルに設定し、各テーマにフルカラーパレットを持たせました。

最後になりますが、我々は Ext JS Stencils を使ってサンプルアプリケーションのワイヤーフレームを作りました。これは Illustrator ドキュメントで見つけることができます。これらの例で、Ext JS をどのようにカスタマイズできるかをデモンストレーションしています。1つの例ではビデオライブラリーアプリケーションのモックアップを作りました。ヘッダー部分は Ext JS コンポーネントではありませんが、我々のエンジニアに相談したところ、こういったカスタムヘッダーは XTemplates を利用すれば簡単に実装することがわかりました。その他の部分については最初から含まれている Ext JS コンポーネント シンボルだけを使用しました: サイドナビゲーションタブ、ボタン、グリッド、グリッドウィジェットなどです。

Ext JS Stencils Example

別の例には、人気の広告ウェブサイト Craigslist からインスパイアされて作ったウェブサイトがあります。我々の目的は「一般的に知られているウェブサイトが Ext JS を使って簡単にデザインできる」ということを視覚化するということでした。そこで我々はホームページを Ext JS Accordion Layout で構成することにしました。このレイアウトによりユーザーは簡単に無数のカテゴリー間をナビゲートすることができます。

Ext JS Stencils Example

これらの実例がわかりやすく皆さんの役に立ち、そしてExt JS Stencils を使ってアプリケーションのモックアップを楽しみながら素晴らしいものにしていただけたらと思います。

Ext JS Stencils の基本をチュートリアルビデオでご覧ください。そして試していただき、フォーラムでそのフィードバックを頂けましたら幸いです。

PAGETOP