生成AIでコンテンツを制作するAdobe Fireflyで、想像力の赴くままにクリエイティブを創造できます。

はじめまして。UIデザイナーのカミソルです。 わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。 今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います！ ※この記事はSketch Advent Calendar 2017 19日目の記事です。 なぜデザインしながらガイドライン化したいのかガイドラインを作る目的は2つあります。 1.  エンジニアとの連携のため "カラーの種類"、"テキストスタイルの種類"、"画像として書き出すもの"、"コンポーネント"の4つがはっきり伝わるSketchデータにしたい。 2.  デザイン運用のため デザインを運用をするとき、誰でも追加や変更がしやすいようにしたい。「デザインしながら」とつけた理由は、デザインしていたら自然にガイドラインが出来ていた。という

ツールを移行する時にネックになるのが、既存のファイルです。 Photoshopで作成したPSDファイルをSketchファイルに変換するオンラインサービスを紹介します。レイヤー、シェイプ、スマートオブジェクト、マスクなどにも対応しており、PSDで作成したファイルがSketchで利用できるようになります。 日本語フォントや日本語のレイヤー・ファイル名でも問題なく、またかなりのファイルサイズでも問題なく利用できました。 PSD to Sketch Design Converter PSD to Sketchでは、PSD上のさまざまなエフェクト・機能をそのままSketchファイルに変換できます。 シェイプ レイヤー 結合されたレイヤー グループ化されたレイヤー テキスト レイヤー ビットマップ レイヤー スマート オブジェクト グラデーション 調整レイヤー ガイド マスク レイヤー スタイル 詳し

エコシステムかプラットフォームか たまに「Adobe XD と Sketch はどちらが良いですか？」という質問をいただくことがあります。Sketch 関連のコンテンツ を発信しているので、『Sketch 派』と思っている方もいるかもしれませんが、個人的に勝ち負けをつけるような比較はできないと考えています。いずれも UI デザインが得意なアプリケーションと分類できますが、コンセプトも違えば向かっている方向も違います。機能が多い方を選んだら良いというほど単純な話ではないわけです。 私のなかで、Adobe XD はエコシステムで、Sketch はプラットフォームと捉えています。 Adobe は製品同士の連携が最大の強みなので、XD もその特徴を最大限に活かしたアプリケーションへ成長するはずです。つまり Adobe のエコシステムにどっぷり浸かれば、それだけ恩恵を受けることができます。一方 Sk

Sketch Runner とは? こんにちは UI Designerの清田です。 今回は、 Sketchプラグインでお気に入りの Sketch Runnerをご紹介します。 Macユーザーではおなじみのランチャーアプリ「Alfred」はご存知かと思いますが、そのランチャー機能をSketch内で使用できるツールです。 Sketch 内のアートボードへのフォーカス出来たりと痒いところに手が届く機能を提供してくれているので、お試しあれっす。 インストール 必要環境 Sketch バージョン 3.7以上 それでは、インストールのご紹介。 公式サイトへアクセスし、プラグインをダウンロードします。 Runner.zipがダウンロードと解答し、Runner.sketchpluginを実行すると以下のSketchが起動され、 以下のアラートが表示されますがOKするとインストールされます。 正常にインスト

タイトル通りですが、Sketch JapanっていうSlack Teamを１ヶ月前くらいにつくって仲間内でほそぼそとSketchについて話したりしています。 最初からあまりおおっぴらにせずに運用してきたので、今のところは知り合いばかりの少人数コミュニティですが、もう少し増やしていっても良いかなと思えてきたので、ブログにも書いておこうと思った次第です。 経緯 sketch系のコミュニティはいくつかすでにあって、人が集まっているのは同じくslack teamのTeam Sketchとか、FacebookのSketch Groupとか、小島さんが作ったFacebook GroupのSketchJapanとかがあります。 私はすべてに所属していて、updateがあればだいたい目を通しているのですがFacebook Groupは情報というよりも質問的なことが多かったり、あとわりと宣伝っぽいものが多か

It’s been just over two years since we released Sketch 3.0, and much has happened in that time. We’ve shipped a total of 30 updates and are incredibly proud of the work we have done. Not only that, our fantastic community of Sketch users has increased tenfold, sharing a wealth of resources, tutorials, and Plugins. For that, we thank you! 🙏 As we’ve recently shipped Sketch 3.8, many people have be

みなさんこんにちは！デザイナーのよこやまです。 今回は UIデザインの作業効率に大きく影響するナッジの設定が簡単にできる「Nudg.it」をご紹介します。 ナッジ (Nudge) とは キーボードの [arrow key] を使ってオブジェクト等を移動させる機能のことです。 Sketch のデフォルト設定は [arrow Key] で 1px、[shift + arrow key] で 10px となっています。 Sketch 3.3 で追加されたナッジ調整機能 You can now customize the arrow nudge distance (used for moving and keyboard-resizing) by using two hidden default keys, nudgeDistanceSmall and nudgeDistanceBig (Sket

Sketch 3.7 is an important update for Sketch. It introduces an all new version of Symbols and we can’t wait to hear what you think of them. In short, much requested features like nesting and image exclusions are now possible. We’ve worked long and hard on this, and so we’d like to share a bit of the story behind it. This update to Symbols is the first of many to come in the near future. We loved o

ついにUIデザインツールの大本命とされていたAdobeのProject CometがAdobe Xdとしてリリースされた。 学生時代から10年近くAdobe製品を使い続けていたが、UIデザインでの使い勝手の悪さにウンザリし、ようやく重い腰をあげてSketchに移行したところだった。 そんな中、Adobe XdはSketchのシンプルさとプロトタイピングツールのエッセンスがうまく統合されていて「またAdobeに戻ってもいいかも」と思えるぐらい心が動かされるプロダクトだ。 まだプレビュー版で機能などは限定的なので、正確に評価することは難しいが、Adobeが持つ他ツールとの親和性やマーケティング力を考えると、Sketchや既存サービスにとって大きな脅威となるのではないだろうか。 Adobeが強力なツールを出してきた中で、それでもSketchを使い続ける理由はあるのか。 UIデザインに携わる人にと

これからはじめる Gulp シリーズこれからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し はじめに この記事はGulp.js（全俺） Advent Calendar 2014とSketch 3 Advent Calendar 2014の19日目です。前日のSketch 3 Advent Calendar 2014は@soutaroさんのヒラギノの縦位置を揃えるちょうべんりなSketchプラグインの紹介でした。2つのAdvent Calendarを掛け持ちしている記事でややこしくなってごめんなさい。Gulp.js（全俺） Advent Calendar 2014の方はnodebrewを使ったGulp.js環境の構築や使い方について一から紹介しているので興味があれば1日目から読んでみてください。 前回のGulp.js（

Sketchを本格的に使い始める、またプラグインを作成する前にどんな機能があるのかを把握するため１から調べてみました。 おそらくAdobeからの乗り換えユーザーが多いと思うので、Adobe製品で似たような機能があればその用語を使って機能の概要を説明しようと思います。 イラストレーターを比較対象として説明とする。 Fireworksが持っている機能の方が近しい場合は、(Fw)・・・と記載して説明する。 Photoshopは考慮しない。（私自身が詳しくないので） Mac OS Xが持っている機能の場合は、(OS X)・・・と記載して説明する。 調べたSketchのバージョンは3.5.2（一部3.6で調査） また、この記事では四角形や画像などをオブジェクトと呼んでいますが、Sketchでは「オブジェクト=レイヤー」という概念なのでその点はPhotoshopに似ていると思います。 併せてチートシー

Recently while using Craft I discovered a secret feature. Actually, before we get to that, let me talk a bit about how Craft works. Craft is a Sketch plugin that makes working with real data a breeze. Instead of lorem ipsum and gray boxes, it lets you insert all sorts of real copy and real photos, from a number of sources. The Photos panel in Craft lets you pluck images from a local folder, Dropbo

For the past few weeks, we’ve been brainstorming on how to generate CSS from the design data we have in Zeplin. There are apps/plugins for this out there, but most of them just don’t feel, or work right in real world scenarios. Let’s face it: No one will just copy and paste the generated CSS and be done with it. Every developer cherishes their own way of implementing things. More importantly, ther

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の両方で同じように利用できます。 かなり急ぎ足のアニメーション