WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できる -Akar Icons | コリス

2021/06/27 59 users コリス figma アロー コピペ アイコン

アロー・ホーム・サーチ・カート・メール・ソーシャルメディア・ハートをはじめ、WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できるAkar Iconsを紹介します。 コピーしたSVGコードはHTMLに貼り付けて使用してもよし、Adobe XD, Figma, Sketchなどでも利用できます。 Akar Icons ... 続きを読む

Adobe XDがSketchよりも優れている理由 | コリス

2019/09/19 56 users コリス UIデザイナー 勢い Adobe XD 周り

最近、私の周りでもAdobe XDを使用する人が増えてきました。特に日本では、SketchユーザーよりAdobe XDユーザーの方が勢いがあるように感じます。 SketchとAdobe XDを長きに渡り使用し、その結果Adobe XDを使用することにしたUIデザイナーの比較記事を紹介します。海外だとSketchの方が多く感じてましたが、そういう流れ... 続きを読む

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

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

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

Webサイトやスマホアプリの画面遷移や構造を設計するための無料フローチャート素材 -Greyhound Flowcharts | コリス

2019/07/31 56 users コリス プロトタイプ フローチャート 画面遷移 スマホアプリ

Webサイトやスマホアプリで見かけるレイアウト・コンポーネント200種類以上のフローチャートが揃ったSketch, Figma対応の無料素材を紹介します。 無料とは思えないほど、非常に高品質です。 プロトタイプをデザイン...記事の続きを読む 続きを読む

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のようなプロトタイピングツールを使用しようと考えていました。 最初... 続きを読む

「Sketchを用いたデザインシステム」を作ってチームでのデザイン作業を効率化した話 - BASE開発チームブログ

2018/12/21 58 users base 小山 devblog.thebase.in チーム

この記事は、「BASE Advent Calendar 2018」の21日目の記事です。 devblog.thebase.in はじめまして。2018年2月にBASE株式会社へデザイナーとして入社した小山です。 技術ブログを書くのは初めてなのですが、今回は私が2月に入社してから今日までネットショップ作成サービス「BASE」で「Sketchを用いたデザインシステム... 続きを読む

iOS 12に使用されている全てのUI要素・スクリーンが収録されたAdobe XD, Sketch, Figma用の無料デザイン素材 | コリス

2018/11/28 70 users コリス 商用 クライアント Figma用 スクリーン

iOS 12のパブリックリリース版で使用されている全てのUI要素・スクリーンが収録された、Adobe XD, Sketch, Figma用の無料デザイン素材を紹介します。 iOS 12 GUI ダウンロードできる素材は、3種類です。 Adobe XD用 Sketch用 Figma用 利用にあたっては個人でも商用でも、クライアントのプロジェクトでもOKです。 詳しく... 続きを読む

SketchからFigmaに移行してチーム間でのコミュニケーションがしやすくなりました - クックパッド開発者ブログ

2018/10/31 72 users figma puzzeljp CookpadTV クッキング

こんにちは、メディアプロダクト開発部のデザイナ若月 ( id:puzzeljp ) です。 現在関わっている、一緒につくれるクックパッド | cookpadTV のアプリ開発上のチーム間のやりとりについて今回は書きたいと思います。 cookpadTV は料理上手な有名人や料理家がクッキング LIVE を生配信しているサービスです。クッキング LI... 続きを読む

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講... 続きを読む

デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits For Web & Mobile App Designers」 | DesignDevelop

2018/07/28 82 users 頭角 DesignDevelop Photoshop web

デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits for Web & Mobile App Designers」 数年前まで、UIデザインはPhotoshopとSketchを中心に行われていましたが、2017年に正式リリースをしたAdode XDが着実にアップデートを重ね、新たなUIデザインツールとして頭角を表してきています。今回は... 続きを読む

開発スピードを上げるため、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に乗り換えるに至った経緯やプロコンなど、ざっ... 続きを読む

【Sketch無料リソースの2018年決定版！】Sketch用UIキット、ワイヤーフレームキット55選【Sketchユーザーダウンロード必須！】 - Web Design Facts

2018/05/28 61 users Web Design Facts モックアップ リソース

2018 - 05 - 28 【Sketch無料リソースの2018年決定版！】Sketch用UIキット、ワイヤーフレームキット55選【Sketchユーザーダウンロード必須！】 Sketch ワイヤーフレーム モックアップ 素材 素材-無料 参考サイト UIデザインといえば最近はSketch。 ただやはりPhotoshopと比べて歴史が浅いため、オススメのリソースがまとまっている最適なサイトが少ない... 続きを読む

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

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

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

次世代デザインツールはどこへ向かうのか　前編 : could

2018/05/14 57 users could プロトタイプツール Ado 次世代デザインツール

ツール デザイン 次世代デザインツールはどこへ向かうのか　前編 デザインツールの進化によって、周りとコミュニケーションをとりながらデザインをするという本来あるべきデザイナーの仕事の仕方になってきたと思います。 プロトタイプツールからデザインツールへ 私は前線で制作していませんが、 Sketch 講座 をはじめデザインツールについて話すことがあります。Sketch を長く使っているのものの、 Ado... 続きを読む

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

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

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

基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選 | Goodpatch Blog

2018/04/17 82 users プロトタイプ制作 Goodpatch Blog Sket

ナレッジ・ノウハウ共有 2018-04-17 UIデザイン おすすめツール・サービス 基礎シリーズ 基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選 こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのは Sketch です。UIデザインに特化した機能のほか、便利なプラグインがあることもSket... 続きを読む

デザイン界からITに移動してきたデザイナーが思う「IT企業のデザイナー採用。両者が気をつけたいこと」 ｜ Developers.IO

2018/03/30 74 users Developers.IO 両者 デザイナー デザイナー採用

デザイナーの たなか ゆきこ です。 学校をでて、早何年。印刷、WEB、DTP・WEBの講師、アプリの会社、現在クラスメソッドでデザイン作業してます。 ずっとAdobeとお友達ですが、最近Sketch、InVisionとかいう新しいお友達が増えてます。 なんで書こうとおもったのか はじめて、IT企業に入った時に、「私はバカになったのだろうか」と思ったという鮮明な記憶があるからです。 大袈裟でもなん... 続きを読む

速報！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にインストールしておくと便利なプラグインのまとめ | コリス

2018/02/14 68 users コリス padding プラグイン レイアウト スマホアプリ

Sketchはそのままでも利用できますが、プラグインをいれると更に便利になります。 Webページやスマホアプリの制作に便利なSketchのプラグインを紹介します。 Paddy 文字数を変更したり、子要素のサイズを変更すると、親要素のレイアウトが崩れてしまうことがあります。そんな時は、このプラグインが便利です。 要素にpaddingを指定したら、それを保ったままレイアウトを変更できます。機能は他にも... 続きを読む

Sketchから学ぶコンポーネントデザイン : could

2018/01/24 57 users figma could コンポーネントデザイン シンボル 部品

UI デザイン Sketchから学ぶコンポーネントデザイン コンポーネントを積み上げて設計をする能力を身につけなければ、デザインシステムどころではありません。コンポーネントの作り方を学ぶという視点から Sketch に触れてみるのはいかがでしょうか。 部品から設計することに慣れる デザインツールとして Sketch や Figma を推している理由のひとつにシンボルがあります。 Adobe CC ... 続きを読む

Sketchの命名ルールなどをまとめたGuidelineをつくりました - itachoco Sketch Guideline v0.1｜wataame｜note

2017/12/30 68 users guideline カウル レイヤー Note メルカリ

Sketchの命名ルールなどをまとめたGuidelineをつくりました - itachoco Sketch Guideline v0.1 note初投稿です！株式会社ソウゾウで メルカリ カウル というプロダクトのデザイナーをしている @wataame といいます。 突然ですが、Sketchを使ってアプリのUIなどを作る時に、「このレイヤーの名前どうしよう。。Table View？」と悩んだり、レ... 続きを読む

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日目の記事です。 なぜデザインしながらガイドライン化したいの... 続きを読む