UXデザイナーのKatsukiです。 以前、ストーリーテリングの重要性、及びストーリーボードとしてストーリーを可視化する利点を記事にしました。 なぜビジネスモデルの図解に挑戦したか UXデザイナーである私が第一に期待されているのは、もちろんユーザーにとっての良い体験をデザインすることです。 そしてそのデザインがビジネスにインパクトを与えることもUXデザイナーの重要な役割です。 もはやその時点でUXデザイナーではなく、デザインストラテジストや、ビジネスデザイナーと呼べるのではないか？とも捉えられますが、それらの役割の呼称の議論は今回は割愛します。 更に具体的に言うと、新規事業を立ち上げるプロジェクトに携わるすべてのビジネスパーソンは、そのビジネスを伸ばすキモがどこであるのかを明確に定義し、説明できる必要があります。ビジネスとして注力すべきポイントを明らかにすることは、チームの士気を上げること

この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2017 の投稿記事です。 こんにちは！現在キッズリーのデザインを担当しているデザイナーの町田（@macheri_me）です。 今年で中途入社３年目となりました。本日は弊社の制作事例をもとに、AdobeXD・Sketchの活用法についてご紹介します。 【この記事を読んでもらいたい人】 これからAdobe XD、Sketchどちらを導入しようか悩んでいる人 デザイン制作フローの中で課題を抱えており、解決したい人 Adobe XDとSketch。自分のチームにはどちらが最適か サービスのデザインを制作する際、何のツールを使っていますか？少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。しかしながら、これらはUIデ

ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 要件を伝え、画面設計に落とし込むときの溝 画面設計から適切だと考えられるビジュアル言語を作るときの溝 ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。

Sketchおじさんこと@maki_saki さんが教えてくれたSketchプラグイン「Protoship Teleport」がめちゃくちゃ便利なのでざっくり紹介します。 Protoship Teleport 「Protoship Teleport」は、Chrome機能拡張+Sketchプラグインで、表示されているWebページをSketchファイルにしてくれる便利アプリです。百聞は一見にしかずです、このブログの一記事をSketchファイルに変換してみました。 用意するもの Protoship Teleportから、次の3つを用意します。 Chromeの機能拡張 Sketchプラグイン（公式ページからダウンロード） 会員登録 準備が終われば、Chromeでファイル化したいURLを開いて、Protoship Teleportのアイコンを押します。表示されたURLをコピーして、Sketchのメニ

突然ですが、あなたの好きなUIデザインツールは何ですか？ わたしは、ここ２年ほど変わらずSketchを愛用し続けています。 先月のAdobe MAXでは、Adobe XDもついに「CC」が付いて正式リリースされました。 デザインとプロトタイピングが１つのアプリケーション上で完結するという利便性から、SketchからAdobe XDへ乗り換えたという人も少なくないかもしれませんね。 しかし、Sketchの強みは１つのアプリケーション上で完結するものではなく、周辺ツールやプラグインを組み合わせて使える拡張性にあるのではないでしょうか。 そこで今回は、Sketchと合わせて使うのにオススメなツールを４つほどご紹介したいと思います。 もしSketch単体でしか使用したことがないという方は、ぜひこれらのツールも試していただき、Sketchエコシステムの快適さを知っていただきたいと思います。 1. Z

新規案件でSketch.appを採用。担当デザイナーが習熟の時間取れないため、簡単にレクチャーしたときのメモ。ウェブサイト制作を念頭に置いた使い方を想定。 （2017.8.9追記） ざっくり特徴 Sketch.app ＝ イケてるPowerPoint／Keynote Illustrator → ドローイング・作図 Photoshop → 画像加工 InDesign → レイアウト・割付 Sketch → CSSベースのデザイン・レイアウト よいところ： 基本、CSSでできることしかできない 軽い 効率化しやすいのでデザイン検討に集中できる ウェブ・アプリ前提なので、最適化されている アップデートが頻繁でどんどん進化している 安くて買い切り 悪いところ： 基本、CSSでできることしかできない Mac版しかない ウェブ・アプリ（オンスクリーン）にしか使えない アップデートが頻繁で下位互換性がな

こんにちは、カクシンのアートディレクターのまきこです。アイドル集団「ハロー！プロジェクト」では賛否両論の新体制がはじまりましたが、わたしは変わらず大好きです！ さて、みなさんは、 「Sketch」というデザインツール を使ったことがありますか？ 今回、オンライン動画学習サービス “Udemy” で人気の「Webやアプリの最新デザインツール Sketch3」という動画講座をPRするため、初めてSketchを使うことになったのです。しかし、SketchってWebデザインの現場だとちょっとマイナー。Photoshopと何が違うのかもよくわからない……。 だけど実際に使ってみると、作業がものすごーく早くなったし、 だったんですよ！ 実際に受講した動画講座の内容に沿って、その魅力を紹介しますね！ そもそも「Sketch」って？ Sketchは、アプリやWebサイトのUIデザインに特化したツール。ペー

Screen Design. Supercharged. Craft is a plugin for Sketch that revolutionizes your design process. Manage the plugins via Craft for incredibly easy updating.

ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」 本制作をする前にワイヤーフレームで制作して、UIやUXなどをクライアントと確認するというのはWEB業界では慣習的になっていますが、今回紹介するのは、そんなワイヤーフレームづくりに便利なキットを集めたエントリー「40 Free Wireframe Templates for Mobile App, Web and UX Design」です。 Carbon Material Design eCommerce Wireframe Kit (PSD & Sketch) WEBからiOS、AppleWatchまで様々なタイプのワイヤーフレームが紹介されています。今日はその中から特に気になったワイヤーフレームをピックアップして紹介したい

I wanted to share my Sketch workflow designing on an 8 point soft grid. If you are not familiar with this concept please read Bryn Jackson’s great article on 8pt Grids first. http://spec.fm/specifics/8-pt-grid I have a fairly unique workflow, adding color coded guides right inside my artwork. This process was heavily inspired by the Material Design Guidelines Defining the MetricsI have a set of Sh

Sketch3でWebデザインするために最低限知っておきたいこと Fireworksの移行先としてSketchを買ったのですが、ずっと封印状態でした。 最近になってちょっと使ったりしているので基本的なことを書いてみました。 投稿日2016年02月16日 更新日2016年02月16日 アートボードの作成 いろいろ配置する前に最初はアートボードを作成します。 ちょっと違いますけどFireworksでいうところのキャンバスのようなものです。Photoshopでは最近実装されましたね。 一番左上の Insert ボタンから Artboard を選択します。して適当にドラッグします。

去年の年度末頃に、「Figma」というコラボレーションツールを知りました。 GitHubのように、バージョン管理やデザインの同時編集が可能ということで、「デザイン版GitHubがついに出るか！？」とネットのニュースでも取り上げられていました。 ここ数年、デザインの方でもコラボレーションツールが続々と登場してきており、とても便利になっていっているのを感じますね。 Sketch周りは最近特に熱い InVision Zeplin 他職種とも連携を取りながらデザインすることが可能に 今後もデザインのコラボレーションツールに要注目！ BrushUp Sketch周りは最近特に熱い わたしは会社のデザインワークで「Sketch」を使用しているのですが、Sketchの場合「InVision」や「Zeplin」といったサービスをよく利用しています。 InVision 「InVision」はプロトタイピング

概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に

ロケーションで選ぶ ロケーションごとに撮影スポットを紹介しています。それぞれ多数の写真が投稿されていますので、スポット探しだけではなく、撮り方の参考にもお役立てください。 植物園 GANREFにメンバー登録している写真愛好家を対象としたアンケートで回答のあった、日本全国のおすすめの植物園を紹介しています。 被写体で選ぶ 被写体ごとに撮影スポットを紹介しています。それぞれ多数の写真が投稿されていますので、スポット探しだけではなく、撮り方の参考にもお役立てください。 桜写真撮影スポット GANREFに投稿されている桜の写真を撮影地ごとに紹介しています。 飛行機写真撮影スポット GANREFに投稿されている飛行機の写真を、日本全国の空港ごとに紹介しています。 航空祭写真撮影スポット GANREFに投稿されている航空祭の写真を、航空祭が開催されている基地ごとに紹介しています。 SL（蒸気機関車）写

こんにちは！霙(@xxmiz0rexx)です！ 2015年ももう終わろうとしている時に、遅ればせながらやっとデザインツールにSketchを導入してみました。 まだインストールして1週間ほどなんですが、入れて良かったという感想しかないです…。爆速で仕事が終わっていくやんけ、、、。そんなわけで今年最後の記事は、今年最後に手に入れたデザインツール『Sketch』をご紹介させてもらおうと思います。もしアプリをデザインする人でまだ使っていない人がいたら参考にしてみてください。Webデザインにも使えますが、やはりアプリデザインにこそ真価を発揮すると思います。 目次 Sketchを使って感動したこと 取り急ぎ入れたSketchプラグイン 気になっているプラグイン（未使用） これだけは覚えておきたいSketchのショートカットキー さいごに Sketchを使って感動したこと まだ使っていない人からしたら、

ハロー、エブリデイハロー。 ドワンゴデザイナーのジェイだ。 今日もハイテンションなジェイタイムがやってきた。 寒くなってきたが、みんなは元気かい？ そうか。元気そうでよかったよ。 トゥデイは「Bracketsというコードエディタを使ったpsdファイルから効率よくコーディングする方法」をエブリワンに伝えたい。ちなみにBracketsは「ブラケッツ」と読むんだぜ。今日からブラケッツ・ジェイと呼んでくれ。 よく使っていたデザインツール 今回はpsdファイルを使って、Bracketsでコーディングするテクニックを伝えるわけだが、これまではSketchとSublime Textを使っていたんだ。そもそもなぜこれらのツールを利用していたのに、Bracketsを導入することになったのかをお話したい。 Sketchを利用しているわけ 軽い、すごく軽い UIが直感的でわかりやすい Webでの画像表現が減った

弊社では数年前にWebのデザインツールをFireworksからPhotoshopにしました。Photoshopには非常に多くの機能が搭載されていながら、一方でWebに最適化されているかというとそうではない側面も多々あります。 そんな中、最近気になっているのが、新たなデザインツールとして徐々に広まりつつあるSketch。海外ではPhotoshop並みに使われているという調査もありします。そこでPhotoshop歴10年（途中3年ほどFireworks）の弊社アートディレクター兼デザイナーの荒砂が、PhotoshopとSketchの機能を比較し、最終的にどう判断すればいいか、スライドにまとめてくれました。 詳細はスライドを見ていただくとして、特に異なっている点だけを表にまとめて比較すると、以下のような感じになります。 ○：機能として存在し、優れている △：機能として存在するが、やや劣っている

最近、Adobe製品を全部消してしまって仕事しています。Adobe製品ではない、次世代ソフトで仕事をしていますが、Webデザイナーがいわゆる「脱Adobe」するとどうなるかなどを書いてみたいと思います。第3回目は実際に「脱Adobe」してみてでてきた課題を書いてみたいと思います。 「Sketch」でUIカンプデータを作成するときに問題になるのは、データの受け渡しです。コーダーやフロントエンドエンジニアがMacユーザーなら、「Sketch」を使ってくださいといえば問題ないのですが、Windowsユーザーなら多少問題があります。 現在「Sketch」を利用している案件はカンプデータをPDFとPNGでエクスポートしてコーダーやフロントエンドエンジニアに渡しています。データ自体も作業指示を記載したもの、作業指示を記載していないもの、2種類を渡しています。 「Sketch」ではCSSも書き出せるため

起動の早さはSketchの圧勝 Adobe製品おなじみの、アプリケーションの起動待ちにイライラしちゃう。 そんな人はSketchの起動の早さに感動すること間違いナシ。 パソコンのスペックにもよると思いますが、私のMacBookProではSketchの起動は１秒かからないです。 画像補正はさすがに譲れない！？Psが優秀 Psはその名の通り、元は写真を補正するソフトです。 さすがその点はPsが当然と言っていいほど優秀です。 Sketchも出来なくはないですが、そこはわざわざ効率の悪いSketchで全部やる必要はないですよね。 画像の作り込みはPsじゃないと無理 基本的には画像補正と似た理由です。 Sketchはバナーのような画像をゴリゴリ作りこむのが、圧倒的に不得意です。 スタイルをかけたレイヤーを重ねまくってパターン薄く焼きこみで光彩がもにゃもにゃ…なんて私のような人は、Sketchでは少し