CPI x CSS Nite x 優クリエイト 「After Dark」（11）フォローアップ イシジマさん | CSS Nite公式サイト

2014年6月18日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（11） のフォローアップとして、 イシジマ ミキさん（ザ・マーズナレッジ）の『ワイヤーフレーム・プロトタイプ制作に使うSketch』セッションのスライドなどをシェアします。

• スライド

皆さん、ご参加ありがとうございました。

わたしも簡単なワイヤーフレームの設計で最適なツールに悩まされてきたことがあり、いろいろ試していました。AIやFW、Cacoo、OmniGraffleなど。

それらの中で一番シンプルに感じたのがSketchです。基本的な操作概略を見ることで、実際の制作のイメージが想像できたのなら幸いです。ぜひゆとりのあるプロジェクトやプライベートワークなどで試してみる機会を作ってみてください。

いただいた質問にお答えさせていただきますね。

Q1.スライスを切るのにはどうしたら？

A1.スライスツールを使うことで任意のサイズにすることが可能です。また、デモで行ったように右側のパネル、一番下に表示される「Make exportable」をクリックしたのち、「Export」ラベルの右側に表示されるスライスアイコンをクリックすることでも作成することが可能です。

Q2. ビットマップを貼っての@2x書き出しはできるのか？

A2. 可能ですが荒れちゃいますので、ビットマップベースのものは倍のサイズで作ってから縮小する方法をとるのが望ましいです。

*Q3. モックアップ以上のデザインは厳しい？ *A3. パスツールの動作がAIと異るものなので、ロゴや書体を作るために複雑なパスを切ろうとすると慣れが必要になってきます。しかしそれは「デザインが厳しい」というコトではありません。

こちらを見ていただくとさまざまなアプリやインターフェイスが作られていることが分かります。

ダウンロードしてSketchで開いてみることでどのような表現をしているのかが学べますのでいろいろ見てみることをおすすめします。

Q4. 角丸長方形のリサイズはアールが崩れませんか？

A4. 角丸長方形、長方形に角丸設定をして変倍してもアールがおかしくなることはありません。またSketchには9スライス機能もありますよ。

CSSNiteAfiterDark-11-ishijima from CSS Nite on Vimeo.

あとSketchの件で。以下が、こもりがインストールしているプラグインになります。イシジマさんの解説にあったようにダウンロードして、プラグインフォルダにいれてもらえば使えるようになります。Sketch単体はさほど覚えることのないシンプルなアプリケーションなんですよね。なので、その足らない部分を補うのがプラグインだと思っていただければ良いかと。

• こもりが入れてるプラグインリスト - http://www.mkdown.com/ccfa37b1bf412aca28c8

電子書籍「Sketch 3 Book for Beginner（http://theneutrals.io/s3bp/）」でもいくつか紹介していますが、実際にSketchや公開されているプラグインを使いこなしたり、他のアプリケーションと連携させるとこんなこともできるようになるよ、というデモは以下をご覧ください。

• Sketch w/ sketch-measure - http://quick.as/a0vsqoe
• rename & export subfolder - http://quick.as/pr6cvvx
• Sketch artboard to CloudApp - http://quick.as/noju9rn
• demo workflow w/ sketch - http://quick.as/yeacmkj
• Duplicate artboards - http://quick.as/10asgz0
• LINE Stamp Exporter - http://quick.as/yras2dz
• export assets - http://quick.as/gplcoyw

イジジマさんが最後に行ったデモはこんな感じですね。

• Hi-FI WF w/ Sketch 3 on Vimeo - https://vimeo.com/95168228
• Tuts+ Ps tutorial w/ Sketch 3 on Vimeo - https://vimeo.com/95837178