Sketch はもういらない？ デザインツール Figma の紹介
Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本記事
“最も早くプロトタイプが作れる”と噂のプロトタイピングツール「ProtoPie」を使ってみた | CyberAgent Developers Blog
こんにちは、コンテンツメディアスタジオ所属デザイナーの大脇です。 先日2016年11月21日、社内で “ProtPieワークショップ” が開かれました。今回は、ワークショップの内容とProtoPieについて、わたしなりの見解も交えつつお伝えできればと思います。 ProtoPieってなに？ ProtoPieとはデザイナー向けに開発されたプロトタイピングツールのことです。 デバイスの進化に伴う表現の高度化は開発現場を大きく変えつつあります。特にデザイナーは静的デザインで表現を完結させるには厳しい昨今となりました。UX・インタラクション・アニメーションすべてを組み込んだ動的デザインが求められる流れに伴い、数々のプロトタイピングツールが登場しました。ProtoPieもその中の一つです。 ワークショップの様子 さっそく当日の様子をレポートしていきます。 会場入口にはPritoPieのみなさまより素敵
既存のSketchファイルから外部Libraryを作成する
Q: SketchのLibrary機能、とても便利そうなんですけど、既存ファイルから外部Library作るのできなくないですか？ A: できます。Sketchをある程度使い慣れている人は、以下の1)〜3) でわかると思います。 1) 既存ファイルをSave as で別名保存し、それをLibraryとする。 2) SketchにそのLibraryを追加する。 3) プラグイン Library Symbol Replacerを使って一気に置き換える。 SketchのWebサイトを読んでもなんだかよくわからないという声がいくつも寄せられましたので、Sketchを使い始めたばかりの人のために手順を以下に載せます。 1) 既存ファイルをSave as で別名保存し、それをLibraryとする。 File > Save as... でLibraryとして別名保存します。 ※ここでは元のファイル名を"U
動画で学ぶ！Sketchのおすすめチュートリアルまとめ | Web Design Trends
Sketchといえば、IT業界ではもはやスタンダードとなっているUIデザインツールです。使い方がシンプルなので、初心者の方でもある程度のデザインを作成することはできますが、様々な機能やテクニックを使いこなすことによって、レベルの高いデザインを作成することができたり、効率よくデザイン制作を行うことができるようになります。 今回は、Sketchの使い方を動画で学べるチュートリアルの中から、特におすすめのものをまとめてみました。シンボルやライブラリを使いこなせていないような人は、ぜひチュートリアルを見て使い方をマスターしてみてください。 Sketchとは Sketchとは、アプリやWebのUIデザインに特化した、UIデザインツールです。2018年2月現在、多くのプロダクトにおいてSketchを使ってデザインが作成されており、Sketchを使いこなすことができれば様々なプロダクトのUIデザインに活
次世代デザインツールはどこへ向かうのか 前編
プロトタイプツールからデザインツールへ 私は前線で制作していませんが、Sketch 講座 をはじめデザインツールについて話すことがあります。Sketch を長く使っているのものの、Adobe XD、Figma 、 inVision Studio など他のツールも検証しながら、合いそうな現場にツールを提案するようにしています。 なぜ今デザインツールなのでしょうか。数年前からある プロトタイプツールと何が違うのでしょうか。閉じていたデザインプロセスを開くという意味では当時も今も変わりないと思います。ただ、Sketch、Figma などを代表するデザインツールはスコープが少し広いのが大きな違いです。 Proto.io に代表される 2013 年前後のプロトタイプツールは、インタラクティブな紙芝居に近いものでした。大まかな画面遷移と操作感を実機で体験できるものの、それ以上でもそれ以下でもないような
次世代デザインツールはどこへ向かうのか 中編
実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界であると説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも 1 年おきに OS と周りの開発環境がアップグレードしています。 開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代はデザインツールの革命期と呼んでも良いくらい様々なデザインツールが出てきていますが、今まで遅れていた分を取り戻そうと
Sketchファイルのリファクタリングをしたのでシンボル周りでやったことを書きます - Feedforce Developer Blog
こんにちは、"マークダウンの申し子"こと Yangです。 この記事もマークダウンで書いてます。 わたくしfeedforceでUX/UIデザイナーをやってまして、 現在は弊社プロダクト ”dfplus.io” のUX/UI周りを担当しております。 早速ですが、feedforceではUIデザインにSketch を利用してます。 先日dfplus.ioのUIデザインをまとめているSketchファイルのリファクタリングを行いました。 昨年初め頃、dfplus.ioのデザインリニューアルを行ったのですが、今ほどUI周りが固まりきっていない段階からSketchファイル上で様々な試行錯誤をしてきたため、設計に以下のような問題を抱えておりました。 設計ルール（制限）が曖昧 シンボルの構造に無駄が多い わかりづらい 複雑になっているためか重い テキストスタイルの定義がバラバラ 古いバーションで作ったファイル
Sketch公式のUI Kit「Elements」を解剖してみる | よりデザイン
今やUIデザインの定番となったSketchの使い方や便利なプラグインについてhttps://www.sketchapp.com/Facebookグループ「Sketch Japan」もぜひ。https://www.facebook.com/groups/1403075229952941/ 公式のサンプルデータということで、これを紐解くことによりSketchを作っている会社がSketchをどのように使っているのかの一端が見えてくるのではと思い、中身を覗いてみることにしました。 全体像 DLした.sketchファイルを開くとApps Pageに各テーマの画面が並んでいます。 解像度のベースはiPhone Xです。5種類のテーマ x 7画面 = 35画面が並んでおり、ある程度のシチュエーションに耐えられるように作られたことが伺えます。 それでは手始めに最上段の「Food」アプリのレイヤー構造を眺め
Sketch v44 betaで新しくなったResizingを試してみる - よりぶろ
思ったよりも早くSketchのv44 betaが公開されました。 Sketch - Beta 主なアップデート内容はResizingの刷新です。設定方法などに若干の癖があるので、自分の勉強も兼ねてメモとして書き残しておきます。 なお、β版で作成・編集したファイルは現バージョンでは開けなくなりますのでご注意ください。 Resizingとは まず始めに、改めてResizingについておさらい。 Resizingは、v39で追加された「グループもしくはシンボル内のレイヤーに対し、親がリサイズされた時の挙動を設定できる」機能です。 もう少し具体的に書くと、例えばグループレイヤー内のあるオブジェクトにResizingの設定を付与することで 親のリサイズされた割合と同じリサイズが掛かるStretch サイズはそのまま、近い辺(上下左右)に位置固定されるPin to corner 親とのマージンを保った
Sketch移行とUIコンポーネント化で、良いことしかなかった話
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
Sketchを使ったWebサイトの模写のやり方の一例 - しゃけさんのメモ
Webサイトの模写を継続的にやっているので、自分のやり方を紹介する。 本記事では模写を行なったときに得られる気づきではなく、どのように作業しているのか、を説明する。 利用環境 macOS Sierra 10.12.6 Sketch3 ver46.2 Sketchの模写用のテンプレートを用意する 僕は模写するためのテンプレートを用意している。 アートボードサイズは常に同じサイズで模写をしており、1440pxをデフォルトとしている。 フォントサイズは5種類用意。太字や中央揃えなども用意している。 2px違いずつで揃えていて、サイトによって基準のサイズを変更することもある。 サイズ名 フォントサイズ extra-large 18px (20px) large 16px (18px) middle 14px (16px) small 12px (14px) extra-small 10px (12
Sketchから学ぶコンポーネントデザイン : could
部品から設計することに慣れる デザインツールとして Sketch や Figma を推している理由のひとつにシンボルがあります。Adobe CC ライブラリのアセット管理とは異なり、デザインした部品（コンポーネント）を拡張したり組み合わせることができるのが魅力。様々なスクリーンサイズに耐えられるように作るのはもちろん、デザインを運用していくには、部品からしっかりデザインできるのはこれからのツールでは必須です。 コードが書ける人、コードを書く思考が分かる人であれば、部品から作ってレゴブロックのように積み上げるという Atomic Design 的な考え方は当然と思えるでしょう。なので、デザインシステムを作りましょうという考えに至りますが、画面の全体像から徐々にディテールを作るやり方でデザインしていた人には難しかったりします。いきなり部品から作ることに慣れていないですし、マクロ（画面全体）とミ
【神】Photoshopより、ずっとはやーい！Sketchの素晴らしさを動画で学びながら体験してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、カクシンのアートディレクターのまきこです。アイドル集団「ハロー！プロジェクト」では賛否両論の新体制がはじまりましたが、わたしは変わらず大好きです！ さて、みなさんは、 「Sketch」というデザインツール を使ったことがありますか？ 今回、オンライン動画学習サービス “Udemy” で人気の「Webやアプリの最新デザインツール Sketch3」という動画講座をPRするため、初めてSketchを使うことになったのです。しかし、SketchってWebデザインの現場だとちょっとマイナー。Photoshopと何が違うのかもよくわからない……。 だけど実際に使ってみると、作業がものすごーく早くなったし、 だったんですよ！ 実際に受講した動画講座の内容に沿って、その魅力を紹介しますね！ そもそも「Sketch」って？ Sketchは、アプリやWebサイトのUIデザインに特化したツール。ペー
SketchAppで地味によく使うコマンド - くらげだらけ
2016年もSketch Appが活躍しました。Adobeはというとほとんど使いませんでした。使ったのはDTP関係のときだけでしたね。 まだまだ不満なところはありますが、十分にSketchを業務で使えるレベルにはなっていると思います。 業務で使うに当たっては、速さも重要ですからショートカットをよく多用するわけですが、今回は私がよく使っているSketch Appのショートカットを紹介してみようと思います。と言っても非公式な自分勝手ショートカットも多いので、そのあたりは踏まえて読んでください。 【非公式】開いたレイヤーを全てたたむ「⌘ Esc」 いきなり非公式ですが、私がもっとも使っているであろうショートカットです。 Sketchで作業しているとレイヤーやオブジェクトがどんどんと多くなっていって、いくらグループにまとめてちゃんと名前をつけて管理していたからと言って、一画面に収まらずにレイヤーリ
エンジニアがSketchにチャレンジ | CyberAgent Developers Blog
初めまして。サイバーエージェントのメディア部門でディレクションをしていますshono（@BowyerApp）です。ついこの前まではAndroidアプリのエンジニアをしていました。 先日、弊社デザイナーの井上さんにエンジニア向けのSketch勉強会を開いて頂きましたのでその内容をレポートします。 目次 背景 Sketch（スケッチ）のインターフェース説明 デザイナーはインサートを開かない Sketch（スケッチ）で実際にUIを作ってみる Sketch（スケッチ）のTips 画像の書き出し シンボルを作る シンボルのネーミングを工夫すると更に便利に マージンのシンボル化 まとめ 勉強会の資料 背景 エンジニアとの共通言語を持つことで、「最終的なプロダクトの品質を上げること」 これをきっかけに各々が自分に必要な領域へと技術の幅を広げていくこと Technical Creatorとは？ ー 求めら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketchたまご
Sketch.appで最近できること (with image, tweets) · yhassy · Storify