これでもうモックアップ素材に困らない！スマホ、タブレット、デスクトップほとんどすべてのデバイスが揃ってる -Devicesスマホ、スマートウォッチ、タブレット、コンピュータ、ディスプレイなど、ほとんどすべてのデバイスが網羅されたモックアップ素材を紹介します。 iPhone 11 Pro, Google Pixel 3などの最新機種をはじめ、古い機種のモックアップ素材も揃っています。
エンジニアが最高のUIをつくるためのプロトタイピング方法まとめ（2017年版） - Qiita
こんにちは、 UXデザイナーの @yuh_iw です。 この記事は NTTコミュニケーションズ Advent Calendar 2017 の23日目です。 すべては最高の体験のために 弊社では、ようやく社内にUXデザインという言葉が浸透し始めていますが、 実態はUIと共に語られることが多いです。（実際は違うよ） とはいえ今回はUIを作るために私達がいつも行っていることについて記載します。 どうやってUIを作っていくのがよいか とにもかくにも、ユーザーに対する検証と学習をくり返すことです。 最高のUI=カッコイイUIではありません。アーティスティックなUIでもありません。 UIにはユーザーがいるので、ユーザーが使いやすいと思わなければならないのです。 そのために、使ってくれそうな人に、検証していく必要があります。 検証するためにはいくつか方法がありますが、 本稿ではUIプロトタイピングを行う
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で作ったUIはコードに変換！デザイナーはもう@2xとか気にしなくていい!?
スマホアプリのUIの実装ってどうしていますか？PaintCode Plugin for Sketchを使えば、Sketchで作ったUIを@1x、@2x…と書き出す必要がなくなり、デザイナーもエンジニアも幸せになれそうです。 次の3つのポイントに間違いはありませんね？ 自分はデザイナーだ デザイナーは素敵なUI要素を作る iOSアプリには質の良いUI要素が「必要」だ しかし、制作したグラフィックやUI要素を「iOS対応」にするにはどうすれば良いのでしょうか。 デザイナーにとって、このあたりはほぼグレーゾーンです。ブラウザー上での作業には詳しくても、iOSに最適な画像フォーマットがなにか答えられるでしょうか。また、解像度はどれくらい必要でしょうか。ベクターやピクセルについてはどうすればよいのでしょうか。 PaintCodeを使ってみよう PaintCode 2は、ベクター画像をObjectiv
プログラマーだってSketchでUIデザインしたっていいじゃない - Qiita
About プログラマーの皆さんだってたまにはUIをデザインしてみたくですか。 デザインまではいかなくても、もらったデザインをちょっといじったりしたいときありませんか？ 最近人気のSketchについてプログラマーがどう覚えていけばよいのか、自分の事例をもとに紹介します。 この記事でやること Sketchをインストールしてまずは動かしてみる Sketchってこんなものなんだあ、というのを知ってもらう この記事でやらないこと Sketchの使い方についての説明 例えばシンボルについての説明 そういうのを書くとキリがないので よいUIデザインのやり方 Sketchとは SketchとはオランダのBohemian Codingという会社がつくっている主にUIやロゴをデザインするためのツールです。 以下の様な特徴があります。 ベクター形式なのでファイルサイズが軽くて拡大縮小してもきれい アートボード
【Sketch】楽して綺麗なデザインデータを作るための5つのTips - NOGA BLOG
意識しているつもりが、気を抜くとすぐ汚くなってしまうSketchのデザインデータ…。ちょっとした工夫で散らからなくなりました。しかも、左のレイヤーズリストをほとんど触ることなく！楽して綺麗なデザインデータを作るTipsを５つご紹介します。 1.複製時にCopyとついてしまう設定を外す Sketch > Preferences にある Rename duplicated layers のチェックを外すと、オブジェクトを複製したとき、名前に Copy とついてしまうのを防げます。 2.グループ化とリネームはワンセットで ⌘G（グループ化）した直後、グループが選択されたままの状態で⌘R（リネーム）するのを必ずワンセットにします。後から名前をつけるのは面倒なので… 3.レイヤーで一個下にしたいオブジェクトを選択して描画する これが一番重要。 ⌘を押しながら選択すると、グループを通りぬけて直接オブジ
【Sketch】TwitterのUIをトレースしながら研究しよう！（初心者向け） - NOGA BLOG
UIデザイナーの、のがちゃんです！ デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。 １日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。 デザイナーになる秘訣！Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG UIデザイナーで、本当にスキルを身に着けたい人は、新規事業とかのキラキラした仕事を求めるのではなく、TwitterとFacebookアプリをSketch3で完コピして、何故このUIなのか背景を理解して、Prottで動かして触って、iOSのガイドラインを読み込むと早いと思うよ。 — Tomo Tsubota (@tsubotax) 2016年6月12日 とはいえ、これからUIを学ぼうという方には、どう
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
[Sketch 3] ナッジの設定を変えるなら 「Nudg.it」 がオススメ！ | DevelopersIO
みなさんこんにちは！デザイナーのよこやまです。 今回は 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] ナッジの設定を変えるなら 「Nudg.it」 がオススメ！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ba5931eb59fad75ed3e9d66f5af338c3bf381a3b/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F12%2Fsketch.png)
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
国内でも注目されつつあるデザインツール「Sketch3」がよく分かる良記事15選
今、海外デザイナーを中心に広まっている「Sketch3」をご存知でしょうか。 国内では、Photoshopなどと比較するとまだまだ利用者が少なくマイナーなイメージがありますが、多数のUIデザイナーが活用している優秀なドローイングツールです。 今回は、Sketch3の使い方を分かりやすく紹介している記事をまとめてご紹介します。 Sketch3の魅力や他ツールと比較した記事もありますので、Sketch3が気になる、購入したけど使えていないという方はぜひご覧ください。 Sketch3の使い方が分かる解説記事まとめ 1.Sketch 3を使う3つの理由と10の魅力｜グッドパッチのUIデザイナーに聞く Sketch 3の使い方 http://ascii.jp/elem/000/001/023/1023681/ 国内トップレベルのUIデザイン集団グッドパッチのデザイナーが、Sketch3の魅力と使う理
デザイナーとエンジニア間のコミュニケーションコストを下げる試み - Wantedly Engineer Blog
デザイナーの宇佐美 @Ui_Pb です。 速習会とは 2015年10月1日に、 Wantedly のオフィスにてSketch速習会を開催しました！ 実は、過去にも何度か社外の方を数名招待する形で速習会を行っております。 なぜ数名のみ紹介する形をとっているかというと、以前から定期的に行っていた社内勉強会に社外の人も数名招待しよう！という流れから速習会を定期開催するようになったからです。そのため、社外の方々だけでなく社内のエンジニアやデザイナーも毎回参加しています。 過去に行った速習会 JSONScheme速習会 きれいなCSS速習会 UML速習会 データ解析ツール速習会 TreasuData/DOMO編 Docker速習会 今回やったこと 今回の速習会では、Sketchファイルの基本的な編集方法とSketchファイルを貰った時に意識して見て欲しいポイントを伝えることを目的に行いました。 Wa
方眼紙・罫線・ウェブデザイン用など全12種類の使い方が可能なマルチノート「SketchyNotebook」
アプリ開発・ウェブデザイン・スケッチ・日記帳など、これまでのノートは用途によって別々の冊子を使い分ける必要がありましたが、全12種類の用途を1冊のノートにまとめることが可能なのが「SketchyNotebook」です。グラフィックデザイナー用の方眼紙、ジャーナリスト用の罫線(けい線)、アプリ開発者・デザイナー用、フィルムメーカー用、インテリアデザイナー・建築士用のテンプレートがそれぞれ2種類・全12種類セットとなっており、物作りを行うのに非常に便利そうだったので、実際に使ってみました。 SketchyNotebook - The Revolutionary New Way to Sketch http://sketchynotebook.com/ これがSketchyNotebook。今回Kickstarterで出資してゲットしたノートは白と黒の2色です。 デザインはシンプルで、見た目は市
iOSアプリのスクリーンショットとテキストを用意するだけでAppStoreに申請する画像を作成できるSketch用フレームワーク「Sketch to AppStore」が公開。
iOSアプリを作成し、iTunes Connectで申請する際にiOSデバイスに合わせた多数のスクリーンショットが必要ですが、「Sketch to App Store」はこのスクリーンショットを数分で作成してくれるSketch 3用ワークフローです。詳細は以下から。 このワークフローはClusterの開発を行っているCluster Labsが作成したもので、GitHubで公開されておりSketch 3（v3.1以上）を購入しているユーザーなら誰でも使うことができます。 Brenden Mulligan@mulligan I’ll be posting a @sketchapp template to quickly create @AppStore assets for all iPhones in the morning. Sneak peek: http://t.co/YM46CVmN
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2017年は何を使う？ プロトタイプ＆UIデザインツール選びに役立つ記事まとめ
Sketchで変わるワークフロー