UIの可読性検証をSketchプラグイン "Camilo" ＋ "Anima" で時短する - ¯\_(ツ)_/¯
こちらは「Design Tools Advent Calendar 2018」の3日目の記事です。 はじめまして。プロダクトデザイナーの田村(@wowr_t)です。 UIにおける可読性を高めるポイントはたくさんあると思います。使用するフォントやサイズ、行間、見出しと本文のバランス...etc。 これらは何が最適であるかはサービスによって異なるため、最終的な意思決定までにかかるタスク量と時間が読みづらい部分です。 しかしながら、時間もリソースも限られている状況下では最短で意思決定をしなければなりません。検証をより短く行うための工夫はとても大事です。 この記事では、私がUIの可読性検証を効率化できた手法をご紹介します。 今回のサンプルファイルはこちらになります。 (Animaの設定が引き継げないかも。。) www.dropbox.com 背景 SketchでUIを組んでいて、 想定されるor実
基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選｜Goodpatch Blog グッドパッチブログ
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基本機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
Q&A おすすめSketchプラグイン
使用されているSketchのPluginを教えてほしいです！ しゅんさん どんなUIデザイナーかで決まります Sketch は UI デザインツールとして優秀なアプリです。日本ではまだまだ Photoshop が有力な現場が少なくないですが、欧米では Sketch が過半数以上を占めている状態です。およそ 2000 人のデザイナーを対象にしたデザインツールの調査によると、UIデザイン、ワイヤーフレームの定番は Sketch になっています（2018年1月現在）。 私の仕事でも欠かせないツールではあるものの、プラグインの組み合わせ次第でまったく違う使い方になる場合があります。定番と呼べるプラグインはありますが、それ以外は自分の役割や仕事現場によって大きく変わります。Airbnb のようにオリジナルのプラグインを開発して、自分たちのワークフローを最適化しているところもあります。 よって、自分が
エンジニアのための「Sketch入門！」 1時間コース - Qiita
※「Sketch」はMac専用アプリです。Windows版はありません。 「演習ファイル＋動画＋演習付き」で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 ハンズオン用などにご利用ください。 Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在） 有料です。 ちなみにApp Storeでは買えなくなりました。ショバ代かかるか
Sketch移行とUIコンポーネント化で、良いことしかなかった話
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
Sketchを使う上で知っておくと地味に便利なtips | tipsBear
この記事はSketch Advent Calendar 2016 21日目のエントリーに入る予定だったんですが、21日目の記事を見ての通り、長くなっちゃったので分割した片割れの記事となります。 Sketchを使っていると、こんなとこが不便だなーとか、こんな機能デフォルトでないのかな？ などの疑問が浮かんできます。本記事ではそんな痒いところに手が届くかもしれないtipsをご紹介します。プラグインを入れるともっと便利になったりしますが、それはまた次の機会にでも。 Sketchの知っておくと便利なtips グループ化したあと、グループの中のレイヤーを簡単に選択出来るようにしたい レイヤーを選択する際に、Photoshopだと移動ツールを選択した際にクリックした先がレイヤーかグループか選べるセレクトボックスがありますが、Sketchにはありません。そしてSketchの選択ツールのデフォルトはフォル
デザインのバージョン管理をする世界
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ
SketchとCraftとGoogleスプレッドシートを組み合わせてコーディングなしでAPI叩いてデザインに内容を表示する方法
SketchとCraftとGoogleスプレッドシートを組み合わせてコーディングなしでAPI叩いてデザインに内容を表示する方法 うわ…タイトルが長い…。そして寝坊してしまったので手抜き記事です。ご勘弁を。 以前、Sketch上でAPIを叩いてデザインを表示するプラグイン「Craft」の使い方を紹介しました。 Sketch上でAPIを叩いてデザインに内容を表示する方法【1/2】 Sketch上でAPIを叩いてデザインに内容を表示する方法【2/2】 ではAPIがない場合はどうすればいいのでしょう？そんなときに役に立つのがスプレッドシートです。 ①まずはスプレッドシートでデータを作ります。 ②SheetsuというスプレッドシートをREST API化してくれるサービスがあります。ここに作ったスプレッドシートのURLを貼り付けるだけ。 さくっとAPIを作って何か試してみたいとき、オススメのサービスで
Sketchで作ったUIはコードに変換！デザイナーはもう@2xとか気にしなくていい!?
スマホアプリのUIの実装ってどうしていますか？PaintCode Plugin for Sketchを使えば、Sketchで作ったUIを@1x、@2x…と書き出す必要がなくなり、デザイナーもエンジニアも幸せになれそうです。 次の3つのポイントに間違いはありませんね？ 自分はデザイナーだ デザイナーは素敵なUI要素を作る iOSアプリには質の良いUI要素が「必要」だ しかし、制作したグラフィックやUI要素を「iOS対応」にするにはどうすれば良いのでしょうか。 デザイナーにとって、このあたりはほぼグレーゾーンです。ブラウザー上での作業には詳しくても、iOSに最適な画像フォーマットがなにか答えられるでしょうか。また、解像度はどれくらい必要でしょうか。ベクターやピクセルについてはどうすればよいのでしょうか。 PaintCodeを使ってみよう PaintCode 2は、ベクター画像をObjectiv
Sketch 3対応ですぐに使える無料アプリUIキット8選
アプリをデザインしたり、モックアップを作るとき、毎回ゼロからデザインを作るのは大変です。 最近ではPhotoshopやSketch 3で使えるUIのテンプレートキットなどが幅広く出回っており、しかも多くが無料で使用可能です。 そんなお手軽にUIを作ることのできるキットですが、今回は中でもSketch 3に対応している無料のものを集めてみました。 Avital Mobile UI Kit Avital Mobile UI Kit ※ダウンロードにはメールアドレス登録が必要です Phoenix UI Phoenix UI: Vol 1 by Adrian Chiran Carbon: Material UI kit for eCommerce apps Carbon: Material UI kit for ecommerce apps ※ダウンロードにはTwitterでのシェアが必要です F
Sketch.app Plugin の開発メモ - Qiita
Sketch Plugin CookBook (ver.51まで) Sketch 52でAPIが変更になっているため、動かない記述があります。 忘れやすい自分のための、Sketch.app向けプラグイン開発メモ。 ツギハギで書いてきたため、内容をあまり精査できていません。ところどころ書き換えできずに間違ってます。さらにClass自体が非推奨になった（リファレンスからなくなった）ようで、この書き方は使えなくなる可能性が高いです。「使えなくなる」ではなく、JavaScript API経由で使えってことになりそうです。 Sketchのプラグインは、CocoaScirptで開発する。とてもざっくり言うと、Objective-CをJavaScriptライクに扱う言語（キモイ）。記述はJavaScriptスタイルとObjective-Cスタイルがあり、混在もOK。 ドキュメントとか参考情報 Hello
Sketch買ったばかりのプログラマがアイコンデザインに挑戦してみたメモ #tryswiftconf - その後のその後
「try! Swift」2日目のセッション "Live Design:🎙🎨" （日本語タイトル：ライブデザイニング）で、Sketchを使ってサクサクとアイコンをつくっていく過程を見て、 Sketch使いやすそう。買おう。 #tryswiftconf— Tsutsumi Shuichi (@shu223) 2016年3月3日 と思い *1、さっそくダウンロードして同じ手順をなぞってみることにしました。 Sketch - Professional Digital Design for Mac ちなみに購入する気満々だったのでこういうタイトルにしたものの、Free Trialで30日間は無料で使えるようです。 @niwatako さんの聞き起こし記事を参考に手順をなぞっていきます。 try! Swift ライブデザイニング:🎙🎨 #tryswiftconf Day2-10 - niwat
エンジニアのための「Sketch入門！」 1時間コース - Qiita
※「Sketch」はMac専用アプリです。Windows版はありません。 「演習ファイル＋動画＋演習付き」で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 ハンズオン用などにご利用ください。 Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在） 有料です。 ちなみにApp Storeでは買えなくなりました。ショバ代かかるか
SketchとProttを使ってUIデザインをしてみました。作ってみて気づいたUIデザインにおける大切なことの自分なりのまとめ。
SketchとProttを使ってUIデザインをしてみました。作ってみて気づいたUIデザインにおける大切なことの自分なりのまとめ。 UIデザインがしたいなら実際に作ってみないと！ということで、 練習がてらに一つ作ってみました。 デザインしたアプリの簡単な説明 今回は “留学生向けの就活スケジュール管理アプリ” を想定してみました。 それは私自身が、日本の企業の方とSkypeを通してお話をさせていただく際に、 時差を考慮した日程調整がすごい面倒だ！！！ と感じたからです笑 慣れていれば時差を自分の頭で計算することもできると思いますが、やはり就活の面談や面接で日程を間違えてしまうと大変なのでいちいちネットなどで時差を調べる羽目に・・・ これが意外と手間なんですよね。 なので、そんなことをしなくてもスケジュール帳の上でチャチャっと確認できる、そんなアプリを目指しました。 一番のポイン
PhotoshopにもSketchにも対応の優れもの！UIデザインの面倒な作業を自動化する無料プラグイン -Craft | コリス
Photoshop CC2014+(Win&OS X)、Sketch 3+(OS X)対応のUIデザインの面倒な作業を自動化する無料プラグインを紹介します。 Craft Craftの特徴 Craftの3つのパネル Craftのダウンロードとインストール Craftの特徴 CraftはUIデザインでの退屈で面倒な作業を自動化し、デザインワークフローを時短化するPhotoshop CC2014+(Win&OS X)、Sketch 3+(OS X)対応の無料のプラグインです。 リアルなデータでデザイン作業 さまざまなタイプのテキストデータや画像を簡単に利用できます。 ワークフローの効率化 データのインポート、デザイン要素の複製など、今までより素早くできます。 シームレスなインテグレーション CraftはPhotoshopとSketchの両方で同じように利用できます。 かなり急ぎ足のアニメーション
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Sketch」の記事一覧
GitHub - usagimaru/Sketch-AppleSystemFont-Plugin: A Sketch plugin for applying Apple system font to text layers. (For Japanese designers.)
Amazon.co.jp: UIデザイナーのための Sketch入門&実践ガイド: 吉竹 遼: Book
Anima Toolkit
IllustratorとSketch対応のiOS 9.3のUI Kit:phpspot開発日誌