ナレッジ・ノウハウ デザイナー版のGitHub!デザインのバージョン管理システムAbstract社内勉強会を開催しました! エンジニアたちにはGitHubがありますが、デザイナーには今までデザインの履歴を管理するシステムがありませんでした。そこで2017年7月にローンチされ世界中で注目を集めているのがAbstractです。 デザイナーたちのためのワークフロープラットフォームとして、デザインプロセス上の強い不満を解消するのではないかとデザイナーたちから期待されています。 以前Goodpatch Blogでは、Millanoteの活用法をご紹介しましたが、Goodpatchには新しいツールを積極的に使うカルチャーがあります。そんな中で今回はProttのリードデザイナーであり、先日もデザイナーデーを主宰したBertが社内のデザイナーに呼びかけ勉強会を開催しました! 初回ということもあり社内でまだ
Shift10という年末に行われるwebデザイナー向けのイベントで、2016年のツールについてお話する機会がありました。当日語れなかった周辺に関するお話をツラツラと。 イベントに参加していない方も楽しめる内容になっていますが、より深く内容を知りたい方はイベント後でも動画やスライドで詳細を知ることができるフォローアップ参加がおすすめです。 「Shift10:Webデザイン行く年来る年(CSS Nite LP50)」(2016年12月17日開催) 脱アドビしたい理由 アドビ製品はどれも良いですが、主となるPhotoshopやIllustratorをプロジェクトによっては使わないケースがあります。 Adobe XDは、パワポがわりにけっこう立ち上げてます。 1ヶ月で10時間もさわれない場合、月々払っている費用とのバランスが悪いのではないか。無駄な支出は減らしたい。というのが発端です。 え、じゃあ
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ
ペルソナやカスタマージャーニーマップ、アジャイル開発などなど。 UXやUI開発に携わる人なら知っている、有名なデザイン思考ツールはいろいろあります。 今回は、こういった良く使われているデザイン思考ツールにプラスして取り入れたい、サービスの課題をより深くより広く分析できるようなデザイン思考ツールをご紹介したいと思います。 なぜなぜ分析ユーザーに連続的に質問を重ねることで、UXの表面に現れた現象の背後にある理由を掘り下げていき、ユーザーが抱える問題の本質を分析する手法です。 例えば、飲食店を想定した次のやり取りを見てみましょう。 参考:Marc Stickdorn, Jakob Schneider『THIS IS SERVICE DESIGN THINKING.』(ビー・エヌ・エヌ新社)p.167ランチタイムの接客効率化という問題の裏に、別の問題があったということが良く分かります。同じくサービ
いままでの作業フローをいい意味で、劇的に変えてくるデザインツールを探している、そんなひとは多いかも知れません。テクノロジー系のクールで面白いプロダクトについて、誰よりも早く知りたい人たちのためのコミュニティ Product Hunt のデザイン部門で、これまで話題となった作業効率をアップするデザインツールをまとめてご紹介します。 デザイン制作における悩みのタネでもある配色選びを手軽に行ったり、何百というGoogle フォントを手軽にPhotoshop で使える拡張プラグイン、さらに時間に応じて目に優しいスクリーンの明るさに調整してくれたりと、特にデザイナーにとってうれしい機能を中心にピックアップしています。 詳細は以下から。 目からウロコ、作業効率がアップする話題のデザインツールまとめ Pexels 著作権フリーで、商用利用にも対応したフリーフォトストックサイト。豊富な収録数に加え、人気キ
デザインやDTP関連のソフトウェアの大御所Adobeからこのほどビジュアルコンテンツを簡単に制作できる無償ツール「Spark」がリリースされた。 このiOSアプリはウェブと連携するので、グラフィックを作成してSNSに投稿したり、ウェブページを作成したりの作業が場所を問わずシームレスに行える。 ・アプリは3種類 Sparkアプリは3種類ある。まず、ソーシャルメディアへの投稿を作成する「Post」。使いたい写真を選んで文言を入力し、デザインフィルターをかけるなど、ものの数秒でグラフィックスを作成してFacebookなどのSNSに投稿できる。 普通に写真にコメントをつけて投稿するよりオリジナル度が高まり、フォロワーの目を引きそうだ。 ・雑誌スタイルのウェブページも 次に「Page」。こちらでは、ウェブページを雑誌スタイルで作ることができる。 旅行ブログなど写真を多く載せたい時に便利で、雑誌のよう
Webページ、本や雑誌、ポスターや看板などで見たフォントを使いたいけど、そのフォントが何か分からない時ってありますよね。そんな時にはフォントを画像から、フォントの特徴からそのフォントが何か検索できる無料サービスを紹介します。 日本語のフリーフォントのまとめも参考にどうぞ。 2022年用、日本語のフリーフォント 609種類のまとめ フォント名が分からない日本語フォントを検索・自動判定 Adobeやダイナフォントやタイプバンクの有償日本語フォントをはじめ、青柳衡山フォントやみかちゃんフォントなど無料日本語フォントまで、日本語フォントを検索できます。 Identifont -形状別フォント 識別名称別フォント検索 対応フォント 日本語・英語 対応フォントは、書体メーカー一覧をご覧ください。 検索方法 形状別・名称別・スタイル別・類似・絵文字・メーカー別 使い方は簡単で、名前が分からないフォントの
デザインをおこなう上でセンスは必要な要素ではありますが、デザインのルール、理論に沿ったものにするということが重要です。プロはこれらルールを理解した上でデザインを作成しています。 ルールを守ってデザインをおこなえば誰でもセンスのいいデザインに近づけることができます。逆に、最低限のルールを無視してデザインしたものはいくら工夫を凝らしても素人っぽさが抜けない、ということになります。 ビジュアルデザインを行う上で、最低限知っておきたいものとして「貴金属比」というものがあります。「黄金比」という言葉を誰しも一度は耳にしたことがあるかと思いますが、これも貴金属比の一種です。貴金属比は古くから人間が美しいと感じる比率として用いられており、デザインに取り入れればバランス良く、整った見た目に仕上がります。 今回は、黄金比を初めとした貴金属比5つと、貴金属比をデザインに取り入れる際に便利なツールをご紹介します
ノンデザイナーにとってロゴ作成は鬼門です。今回はデザインが苦手な人でもさくっと、それっぽいロゴが作れちゃうサービスを紹介します。 www.squarespace.com アクセスするとこんな感じ。中央の『LOGO NAME』にサービス名やブランド名などを記入します。今回は例として『ヒゲ部』というサービスを作ったと仮定します。 入力を終えると編集画面へ。すでにベースのロゴができあがっています。フォーカスされている『Search for symbols』に適当にそれっぽい単語を入力してみます。 余談ですが、『ひげ』は『moustache』または『beard』らしいです。生える位置で使い分けるようですが、気にしません。今回は『moustache』で検索してみます。 ひげがズラリ。 それっぽいのを選びます。 ああ、それっぽいですね。右下のTシャツとかいいですね。 次はフォントを変更します。 ロゴ名
「プログラマ業界」であればコンパイラの多くがオープンソース化されていますが、デザインツールはAdobeを筆頭に今もほとんどがプロプライエタリなツールです。そのことが、原理原則に沿うのを難しくしています。 複製不可能な部分に価値を置くという文化的な面 ツール開発にコストがかかるという金銭的な面 もあって、ツールがオープンに向かうことは当面なさそうです。Blenderという例外はありますが、GimpやInkscapeは実質プログラマだけのためのツールになっています。そういえば、Fireworksのオープンソース化嘆願はどうなったんだろう...? ツールが有料 デザインツールはときに高額です。また、セットアップに割く時間も「見えない」コストです。残念なことにインストールも自動化されていません。caskも使えません。$ npm installでは片付かないのです。また、アップグレードの問題もありま
いいな、参考にしたいなと思うデザインがあったときにキレイにスクショ管理できたり、アイコンやシェアボタンなどよく使うPSD素材なんかの管理にはいままでLittleSnapperを使っていたのですが、この度LittleSnapperがEMBERとして新たにリリースされたようなので早速買ってみました。 LittleSnapperと内容はほとんど一緒だし、そもそもLittleSnapperも4000円くらいしたので「なんでアップデートじゃないんだよ!なんで買い直さないといけないんだよ!!」みたいな愚痴は死ぬほど出てくるのですが…実際便利だしいいんです…うん…。 EMBERのつかいかた スクショ管理につかう 参考にしたいデザインがあったらChromeのEMBERエクステンションでEMBERに全画面保存できます。スクロールしないと表示しない系のサイトはEMBER内のブラウザで見たままのスクショが撮るこ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか? この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
これはいいサービス!助かりますねー。 Picky-Pics(ピッキーピックス) チラシを簡単に作れてしまう 「Picky-Pics(ピッキーピックス)」はチラシや名刺をウェブ上でサクサク作れるウェブサービス。これさえあれば、Photoshopは要りません。デザインセンスも要りません。すばらしい! 使い方は簡単。作りたい資料を選択して、デザインを選びます。 すると編集画面に移動します。あとは文字や背景を加工していくだけ。 素材は5万点近く用意されているそうです。 直感的に素材を追加できます。 各素材はドラッグすると移動します。簡単! 編集画面の使い勝手もすばらしく、ピクセル数を合わせやすいガイド機能が実装されています。 フォントも豊富!これは嬉しいですねー。 出力は3パターン。ウェブページにもできるというのは嬉しいですね。 有料素材を使っている場合は、出力にあたって費用が発生します。この値段
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く