最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends

2019/08/07 508 users Drama プロトタイプ アニメーション Framer X

Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきま... 続きを読む

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 | Stocker.jp / diary

2019/07/01 1040 users Illustrator Stocker.jp diary

私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初... 続きを読む

Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ | Stocker.jp / diary

2018/09/27 253 users Thursday Illustrator Sass web

Webデザイン Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ Thursday, September 27th, 2018 「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSS・Sass・JavaScriptを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講... 続きを読む

開発スピードを上げるため、Sketchを辞めてFigmaに移行した話 - fujiken design blog

2018/07/13 251 users figma プロコン モバイルアプリ ふじけん 経緯

こんにちは、ふじけん (@kenshir0f) です。 普段はモバイルアプリを主としたサービス開発のデザイナーを担当しております。 業務ではSketchを使ってアプリのUIを組んでいるのですが、 先日チームの開発体制を見直すときにFigmaというデザインツールに移行しました。 Figmaに乗り換えるに至った経緯やプロコンなど、ざっ... 続きを読む

開発スピードを上げるため、Sketchを辞めてFigmaに移行した話 - fujiken design blog

2018/07/13 251 users figma プロコン モバイルアプリ ふじけん 経緯

こんにちは、ふじけん (@kenshir0f) です。 普段はモバイルアプリを主としたサービス開発のデザイナーを担当しております。 業務ではSketchを使ってアプリのUIを組んでいるのですが、 先日チームの開発体制を見直すときにFigmaというデザインツールに移行しました。 Figmaに乗り換えるに至った経緯やプロコンなど、ざっ... 続きを読む

簡単すぎて驚いた！ユーザーフローとプロトタイプが短時間で作成できてしまうツール -Overflow | コリス

2018/05/28 104 users コリス Photoshop プロトタイプ Adobe XD

Webサイトやスマホアプリのデザインで重要なのは、単一の画面ではなく、ユーザーがどのように遷移するか全体の流れを通して画面をデザインすること。 しかし、ユーザーフローやプロトタイプを作成するのは、なかなか面倒です。 Sketch（Photoshop, Adobe XDにも対応予定）ファイルからアートボードを自動同期し、ユーザーフローとプロトタイプを簡単に短時間で作成できるツールを紹介します。 現在... 続きを読む

【完全保存版】Sketch(スケッチ)の使い方を徹底解説

2018/05/08 166 users スケッチ ディレクター エンジニア デザイナー UIデザイン

UIデザインツールとしてメインに使用しているデザイナーも多い「Sketch(スケッチ)」。 IllustratorやPhotoshopよりもシンプルで手軽にUIデザインを作成することができるので、Webデザイナーだけでなく、ディレクターやエンジニアなどの非デザイナーにも愛用されています。 このページでは、 「Sketchに興味があるけど使い方がよくわからない」「Sketchってどんなことができるの... 続きを読む

速報！Windowsで、Sketchファイルを開いて、編集・保存できる無料アプリが登場 -Lunacy | コリス

2018/03/22 121 users LUNACY コリス SVG エクスポート PNG

Windowsユーザーの方に朗報です！ Windows 7, 8, 10で、Sketchのファイルを開くことができ、編集も保存もでき、CSSの書き出し、SVGやPNGのエクスポートもできてしまう無料アプリが登場しました。 もちろん、日本語のWindows環境でも利用できます。 Lunacy, Sketch for Windows 前回紹介した時はファイルを開くだけの機能でしたが、ついに編集・保存に... 続きを読む

Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介 | Webクリエイターボックス

2018/03/15 122 users Adobe XD 手順 Webクリエイターボックス 画面作成

2018年3月15日 Webデザイン , XD デザインやプロトタイプを作成できる Adobe XD 。みなさん使っていますか？ 先日アップデート もされ、Photoshopとの連携がより簡単になったり、 Sketch ファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。と... 続きを読む

Sketch はもういらない？ デザインツール Figma の紹介

2017/12/19 159 users figma 議論 デザイナー Adobe XD ご存知

（Figma： https://www.figma.com/ ） はじめに いきなりですが、デザインツールの Figma をご存知でしょうか。 Adobe XDが正式リリースされてから『Sketch vs Adobe XD』のような記事をネットやSNSでしばしば見かけますが、そういった議論ができる最先端のデザイナーでも、ご存知ない方もいらっしゃるかもしれません。試しにSketchとXD、そしてFi... 続きを読む

Sketchでデザインしながらガイドラインを作ろう｜カミソル｜note

2017/12/18 102 users Note 部署 UIデザイナー ガイドライン 受託事業

はじめまして。UIデザイナーの カミソル です。 わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。 今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います！ ※この記事は Sketch Advent Calendar 2017 19日目の記事です。 なぜデザインしながらガイドライン化したいの... 続きを読む

デザイナーこそブログを書くべき3つのメリットと苦手克服法｜macheri｜note

2017/12/18 288 users macheri 一石二鳥 宝庫 Note デザイナー

嫌になるほど苦手だったブログ執筆は、 デザイン制作に欠かせないスキル向上の宝庫だった 会社の技術ブログ執筆に誘われたことがきっかけです。 「ブログ執筆を習慣化すればデザイナーは一石二鳥だ！」と感じたデザイナーにとっての3つのメリットについて。そして、ブログ執筆の苦手意識をどのように克服したかについてお話します。 先日SketchとAdobe XDの比較についての記事を会社ブログに書きました。 【 ... 続きを読む

【sketch】TwitterのUIトレースをして気がついた事｜マサキ｜note

2017/12/07 426 users Twitter まさき UIトレース Note 近道

初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。 UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。 このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽で... 続きを読む

チームの課題から考える、Adobe XDとSketchの導入メリット – PSYENCE:MEDIA

2017/12/07 276 users PSYENCE Media Adobe XD 課題 チーム

この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2017 の投稿記事です。 こんにちは！現在キッズリーのデザインを担当しているデザイナーの町田（ @macheri_me ）です。 今年で中途入社３年目となりました。本日は弊社の制作事例をもとに、AdobeXD・Sketchの活用法についてご紹介します。 【この記事を読んでもらいたい人】 これからAd... 続きを読む

こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材 | コリス

2017/09/27 103 users コリス ダウ フォント フォーマット UI要素

スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウ... 続きを読む

エンジニアがSketchにチャレンジ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ

2017/04/06 126 users インサート サイバーエージェント ディレクション エンジニア

初めまして。サイバーエージェントのメディア部門でディレクションをしていますshono（ @BowyerApp ）です。ついこの前まではAndroidアプリのエンジニアをしていました。 先日、弊社デザイナーの 井上さん にエンジニア向けのSketch勉強会を開いて頂きましたのでその内容をレポートします。 目次 背景 Sketch（スケッチ）のインターフェース説明 デザイナーはインサートを開かない S... 続きを読む

Sketch移行とUIコンポーネント化で、良いことしかなかった話 – VASILY Design – Medium

2017/03/31 227 users medium iQON VASILY 恩恵 ＵＩ制作

アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデー... 続きを読む

デザインデータのバージョン管理ができるAbstractを試してみた✌ | UXデザイン会社Standardのブログ

2017/02/10 145 users Abstract UXデザイン会社Standard データ

複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。 作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください 」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。 そんなデザイナーの悩みを解決してくれるのが、今回紹介する Abstract です。 Abstractとは Abstractはアメ... 続きを読む

Photoshop、Illustrator、Sketchに取って代わるか。グラフィックデザインツール「Affinity Designer」 | DeNA DESIGN BLOG

2016/11/29 210 users アローラ Illustrator Photoshop Mac

アローラ！デザイン戦略室デザイナーの中江です。今日は「 Affinity Designer 」というグラフィックデザインツールをご紹介します。 Affinity Designerとは Affinity Designerは、Serif Ltd,が開発するデザイン用ソフトウェアです。Mac/Windowsの両OSに対応しています。ベクターでグラフィックを描画することが可能で、Adobe Illustr... 続きを読む

デザインのバージョン管理をする世界 – Medium

2016/10/26 532 users medium GitHub てき Dropbox 同僚

デザインのバージョン管理をする世界 僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキ... 続きを読む

これでもうアイコンには困らない！永遠に無料利用できる1,800種類のミニマルにデザインされたアイコン素材 | コリス

2016/09/15 779 users psd コリス Forever SVG ミニマル

FREE for you, forever. 1,800種類ものミニマルにデザインされた、永遠に無料利用できるアイコン素材を紹介します。 PSD, AI, Sketch, SVGも完備されており、ダウンロードしておいて損はないですね。 1,800種類は多すぎるので、ごく一部 カテゴリは16、それぞれ100種類くらいある感じです。 Utilities Arrows Messages, Mails E... 続きを読む

【Sketch】TwitterのUIをトレースしながら研究しよう（初心者向け） - NOGA BLOG

2016/07/04 348 users 秘訣 デザイナー 名刺 かっこいいロゴ UIデザイナー

デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。  １日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。 デザイナーになる秘訣！Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG UIデザイナーで、本当にスキルを身に... 続きを読む

エンジニアのための「Sketch入門！」　1時間コース - Qiita

2016/03/03 322 users Qiita エンジニア Windows版 勉強 動画

※「Sketch」はMac専用アプリです。Windows版はありません。 「演習ファイル＋動画＋演習付き」 で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫し... 続きを読む

珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD

2015/12/28 395 users Bootstrap POSTD 互い プログラミング 原則

ここ何年も、私たちはデザイン理解してもらえるよう、スタイルガイドなどを作成してきました。同じように、開発者もBootstrapなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。それを実現しようとしてるAtomic Designについて解説します。概要：  Sketchを使ったAtomic Designの方法がプロダクトデザイン... 続きを読む

まだ使っていない方にはオススメしたい。Sketchって結局どんな感じなのよ？と思ったので試してみたよ。｜ウェビメモ

2015/12/28 138 users ウェビメモ 遅ればせ 爆速 xxmiz0rexx 感想

こんにちは！霙( @xxmiz0rexx )です！ 2015年ももう終わろうとしている時に、遅ればせながらやっとデザインツールに Sketch を導入してみました。 まだインストールして1週間ほどなんですが、入れて良かったという感想しかないです…。爆速で仕事が終わっていくやんけ、、、。そんなわけで今年最後の記事は、今年最後に手に入れたデザインツール『Sketch』をご紹介させてもらおうと思います。... 続きを読む