usブログやSNSを通じて、Webに関する最新技術や情報を定期的に更新しています。Niteセミナーレポート2014.06.25こんにちは!梅雨明けが待ち遠しいデザイナーの飯山です。今回はプロトタイピングツールの実践についてご紹介します。開発の早い段階で動作するモデルを制作していく手法であるプロトタイピング。高解像度化するディスプレイへSVG画像活用のアプローチ。Web制作においてこれらの動きが起きている中、デザインフェーズでも常に変化に対応していくことが求められます。私は普段Photoshopを使ってページデザインやUI制作をする事が多いのですが、他の有用なデザインツール検討もその1つではないかと思います。Niteセミナー「プロトタイプ制作に使うSketch/Framerで動くモックアップ」について学んだ内容を元にお届けします!SketchSketchは以前より一部の制作者の間では使われていたデザインツールですが、AdobeからFireworksの開発終了アナウンスのあった2013年5月を期に、これに変わるツールとして制作者の中で注目を集めています。3がリリースされています。Sketchhttp://www.bohemiancoding.com/sketch/特長ピクセルスナップMacのプレゼンテーション用アプリケーションソフトKeynoteに似た使用感で、オブジェクト同士の均等配置や端揃えがガイドと共にピタッとできます。pixels」またはcontrol+pでベクターベースとピクセルベースでの表示切り替えが簡単にできるので、ベクターベースで制作していてもブラウザ表示時のチェックをしながら作業できます。美しいテキストベクターベースの強みもあってテキスト表示がキレイです。Mirrorが用意されています。1クリックで選択、複数表示が可能なアートボードデバイス別にプリセットされており、複数表示もできるので同画面でデバイスごとの違いを確認しながらのモックアップ制作が可能です。アートボードごとの書き出しも可能で、書き出し時の簡易プレビューも表示されます。プラグインで機能拡張コミュニティサイトのsketchappsources.comのプラグインページでは様々なプラグインがダウンロード可能です。Folder」からプラグインフォルダを表示してファイルを格納すればプラグインを使用できます。メリット安い2014年6月25日現在の価格は7,800円。Cloudの月額費用に比べると、パッケージ版のSketchは比較的安価に使用できます。動作が軽快ベクターベースだからでしょうか、起動から描画処理まで軽くてサクサク動きます。ちなみに動作環境OSは、windowsは非対応でMacのみとなります。trial版で使用感を試すこともできます。ちなみに今回のTOP画像はこのSketchを使用して作成してみました。FramerFramerは静的なモックアップ画像を、JavaScriptフレームワークによってアニメーションとインタラクションを加えたモックアップへと変えるプロトタイピングツールです。簡単な動きならプリセットの機能で作れる画像やテキストをJaveScriptのフレームワークで動きをつけやすくできています。Examplesが参考になります。NowのUIプロトタイプデモhttp://examples.framerjs.com/#google-now-overview.framer数種のデモが用意されていて、JavaScriptファイル等もダウンロードできるので、カスタマイズして使用することもできます。試しにドラッグアニメーションのファイルをダウンロードして、簡単なデモを作成してみました。Generator.appを使えば、PhotoshopやSketchのレイヤーからアニメーションの追加などができるので、Photoshopを開きながらFramerで作業が可能です。最新ベータ版ではSketchファイルも対応していますが、以下の注意が必要です。10.9のMarvericks以降でないと動作しません。書き出すパーツは単一レイヤーであってもレイヤーグループにしておかなければいけません。見極めて使い分けを!ツールの利点を中心にご紹介してきましたが、「実案件で使ってみよう!」と思っても気をつけるべき点があります。これまでのPhotoshopによる制作フローからSketchに変える場合、デザインフェーズが複数人関わる案件よりも一人が担当している場合から試してみるのが良さそうです。Sketchはバージョンが異なるとファイルの互換性が失われる事があるためで、複数人でデザインデータを共有する場合はアプリケーションのバージョンも全員で統一する必要があります。ページレイアウトやフラットUIのデザイン制作には本領を発揮しますが、ビットマップ画像編集にはまだまだ弱いところがあります。画像で細部の作り込みをする際はまだまだPhotoshopに分がありそうです。いかがでしたでしょうか。TPOに応じて適切な手段を選ぶことは言うまでもありませんが、その手段が増える事で解決策にもバリエーションが出てくるのではと思います。新プロフィールカバー画像制作のまとめアーカイブ一覧へ戻る必見!『W杯2014』見逃せない厳選CMベスト8私たちシナップは、クライアントのビジネスと顧客を深く理解し、インターネットとつながるユーザー接点すべてをデザインすることで、ビジネスの継続的な発展を作り出すことを得意としています。IOQ(アクセス)利用規約プライバシーポリシーこのサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。同意するCookieを。