スキップしてメイン コンテンツに移動

投稿

なぜモバイルアプリのUIデザインにSketchが向いているのか・その2

Q: 長い間使ってきたPhotoshopやIllustratorをアプリのデザインでも使った方が早くないですか? いろんなツールと連携できるとか、プラグインで自分仕様にカスタマイズとか、何を言っているのかよくわかりません。

A:
モバイルアプリのデザインって、各画面の見た目をデザインしたらあとはエンジニアさんはいよろしく!じゃないんです。

それぞれの工程や目的に応じて必要な機能やツールは変わります。
UIデザインの工程で必要な様々なツールはSketchと連携できるものがとても多い、
というところもSketchの大きな魅力です。

一部、Photoshopに対応しているツールもありますが、
Sketchほど豊かに連携できるツールが様々に揃っているわけではありません。
「今の所はまだ」と言いたいですが、これだけ豊富に様々なツールが揃うのは何年もかかるでしょうし、すでにSketchの周辺ツールがとても充実してきているので、他のデザインツールがこれを覆すのはなかなか難しいのではないかと感じます。




掘り下げるとキリがないので、基本的なものだけ紹介します。
ダミーのデータを入力する CRAFT
※Style Guideの自動作成や、Webページのテキストを簡単に挿入するなど、Sketchを購入したら真っ先にインストールしたいプラグイン。Content Generator
Sketchで作業中のデザインをスマートフォンにリアルタイムプレビューするSketch MirrorCrystal
プラグインSketch Palettes - 作成したカラーパレットを書き出したり、読み込んだりする。Symbol Organizer - 増えまくりぐちゃぐちゃになったSymbolをスッキリ整列。 ※そのほかにもたくさん便利なプラグインがあるので、SketchAppSourcesのプラグインページでご自分に必要なものを探してみてください。
プラグインの管理はRunnerを使うと大変便利です。(できるのはプラグインの管理だけじゃないですけれど)

Pluginを使ってプロトタイピングツールに直接SyncできるInvisionProttMarvelFramerFlinto for Mac
エンジニアにSpec(レイアウトの実装に必要な情報)を共有するZeplin - 初心者でも使いやすい。InVision
最近の投稿

なぜモバイルアプリのUIデザインにSketchが向いているのか・その1

Q: 先日はじめてSketchを使ってみた。こんな字詰めもまともにできないツールをなぜ若い人たちはもてはやしているんだ。Sketchってクソだね。

A:
それは、比較する視点がそもそも間違っているように思います。
Sketchの最大の特徴は「Symbolによるコンポーネントのデザインができる」点にあるということを何よりも先に理解していないと、その便利さがわからなくなってしまいます。

ベクター図形を描く、テキストの字詰めや行間調整、余白を思い通りに設定したいのであればIllustratorの方がはるかに優秀です。

また、Symbolとは何ができるのかを簡単に説明すると、
「NavigationBarやTabbarのバリエーションなんてコピペでいいよ。作業は慣れている。」
という答えが返ってくることも多いですが、何百枚もあるスクリーンの一部をすべて差し替える作業時間はただの無駄です。
それよりもより使い勝手の良いUIを考えることに時間を使った方がよくないでしょうか。

例えばこんなデザインのアプリを作るとします。
カードをひとまとめに作成するのではなく、要素ごとにバラバラにSymbolとして作成すると、作業時間を大幅に短縮できます。




カードのパターンがいくつかある場合、すべてのカードを修正するのは時間がかかります。
しかし、このように要素ごとにSymbolを作成しておけば、修正がとてもしやすくなります。
ほんの少しの手間で、そのSymbolを使っているすべてのスクリーンに修正を反映させることができるからです。



このように、ただNavigationBarやTabBarの別パターンを作るためだけにSymbolがあるわけではありません。
「コンポーネントのデザインができるツール」それがSketchの最大の特徴だと思います。

SymbolのOverrides(入れ子)で1つのSymbolから別パターンを作る

Q: SymbolのOverrides(入れ子)ができるようになったので、それを活用してNavigationBarの別パターンを作りたいのですがSymbolとして作成したアイコンが表示されません。




A:
iOSアプリのデザインをする際、画面ごとにNavigationBarのパターンが異なるケースがよくあります。
Ver.41以前のSketchは、そのパターン全てをSymbolとして作成する必要がありましたが、
現在はSymbolの入れ子ができるようになっています。
これにより、1つのSymbolから画面ごとに異なるパターンを表示させることがとても簡単になりました。


チェックマークのアイコンがSymbol作成されているのにも関わらず、
作業中のArtbord上で表示されない!ストレスMAXになりますよね。わかります。





Symbolのサイズがどうなっているかよく確認してみて下さい。
他の歯車アイコン、その他アイコン、ペンアイコンはアートボードサイズが24px四方なのですが、チェックマークのアイコンだけ22px四方になっています。
これを24px四方に修正して他と同じアートボードサイズに統一して下さい。





それでもできないという場合は、更によく確認して欲しいことがあります。
アートボード上のグループのサイズを24px四方に修正したのではありませんか?
アートボードのサイズが修正されていないとOverrides欄の候補リストに表示されません。


Overrides欄で入れ子にしたSymbolを変更するには、候補に表示させたいSymbolのアートボードのサイズを全て同じサイズに統一しておく必要があります。

ZeplinアップデートでiOSプロジェクトのasset名どうにでもなるようになったよ!

ZeplinにImportするとasset名が変換される
をつい先日書いたばかりですが、Zeplinがver. 1.16にupdateされ、もう涙を流しながらiOSプロジェクト用にSketchでスライス名をチクチク変更しなくて良いことになりました!





よかったね!!

Illustratorから書き出したsvgをAndroid StudioにImportすると色情報が反映されないことの解決法

Q: Illustratorで作成したアイコンをsvgに書き出してAndroid StudioにImportすると、色情報が反映されず、なんでもかんでも黒になるので改めて色の指定をしなければならずめんどくさい。

A:
SketchからExportしたsvgは赤いものは赤いまま、青いものは青いままでAndroid StudioにImportできます。
Illustratorから書き出したsvgは色情報が読み込まれず黒くなってしまうことがあります。これはIllustratorからの書き出し方法を変更することで解決できます。




IllustratorのSVGオプションで、スタイルの欄を「内部CSS」から「インラインスタイル」に変更して書き出しをしてください。
IllustratorのSVGオプションのデフォルト設定は「内部CSS」です。これは色情報をCSSで参照するようになっています。

「内部CSS」から「インラインスタイル」に変更してsvgを書き出すことで、Android StudioにImportしても色情報を読み込めるようになります。
(グラデーションは試していません)




※エンジニアの櫻庭祐一氏にSketchとIllustratorから書き出したsvgの違いを検証していただきました。

SketchのPathを自在に操るはじめの一歩

Q: Sketchで図形を描いて「Open Path」を押すと意図しない部分が欠けてハラがたちます。



A: 「Scissors」を使ってみてはどうでしょう。
Layer > Path > Scissors を選択して、削除したいところにカーソルを合わせると、カーソルがハサミの形に変わります。



Scissorsは、ポイントとポイントの間の辺に対して適用されます。もっと細かく切り取りたい場合は、パス上にポイントを作成しておいて、

Layer > Path > Scissors でチョキン!


Sketchでアイコンを描くのが難しく時間がかかるようなら、 無理にSketchで描こうとせずIllustratorを使えば良いと思います。


Android端末にプレビューできるCrystalをUSB接続で使うには

Q: SketchをAndroid端末にリアルタイムでプレビューしたくてCrystalをインストールしたのですが、MacにUSB接続してもプレビューできません!!

A:
確認してほしいことがふたつあります。

1) USB接続でCrystalを利用するには、Mac側にもCrystalのCompanion Appをインストールする必要があります。

Smithy ProductionのWebサイトの、Crystalのところにある鎖のiconをクリック、



Crystalのページが開きますので、一番下にある「Download Companion App」をダウンロード、インストールします。



Android端末でCrystalを起動するとこんな画面が出てきます。


Sketch側のMirrorアイコンをクリックして、「Crystal」を選択すればプレビューされます。(USBケーブルでAndroid端末とMacを繋いでおいてください)
WiFi経由で利用する場合はCompanion Appのインストールは不要です。



2) USBケーブルは通信できるタイプのものですか。充電だけで通信ができないケーブルがありますので確認してください。

ググっていただきますと、詳しいことが色々わかります。

Sketchを快適に使いこなすには、色々英語力が必要なので、英語が苦手だと辛いですよね、わかります。