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

2018/12/21 58 users Sketch base 小山 デザイナー BASE株式会社

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

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

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

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

ウェブデザイナーが配色に困らない、実践向き無料カラーツール14個まとめ - PhotoshopVIP

2017/06/21 78 users PhotoshopVIP ツールキット ウェブデザイナー

配色は、デザイナーが扱うツールキットの中でも強力なアイテムのひとつで、習得するのが難しいコンセプトでもあります。 可能な色の組み合わせは無数にありますが、 ウェブサイトやアプリで使用する色を決めるときに悩んでしまう こともしばしば。 デザイン作業を簡単にする、配色カラーパレット作成に適した無料ツール をまとめてご紹介します。制作時間の短縮につながる実践的なツールの使い方を学びましょう。 http:... 続きを読む

デザイナーが確認しておきたいデザインリソース完全ガイド80選｜ferret [フェレット]

2017/01/27 79 users Ferret フェレット デザインリソース デザイナー ツール

ferret編集メンバーが不定期で更新します。 Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！ 今の作業フローをもう少し良くしたい 、と考えているデザイナーの方は多いのではないでしょうか。 日々のデザイン作業を"より快適に" "効率良く"するためには、デザインリソースを確認しておくことが重要です。 しかし、たくさんのツールやサービスがあり、実際問題どれを... 続きを読む

Photoshopで1クリックの時代がきた！Webページ用のグリッドも簡単に作成できる便利すぎる無料の機能拡張 -Bootcomp 2.0 | コリス

2016/08/10 332 users コリス デザインカンプ Bootstrap グリッド 時短

Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。 Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。 Web制作に携わるすべての人が、入れておいて損はない機能拡張です。 Bootcomp Bootcompの特徴 Bootcompのインストール... 続きを読む

デザインの腕前をアップする、即戦力のPhotoshop無料ブラシ素材セット38個まとめ - PhotoshopVIP

2015/11/03 76 users Photosh PhotoshopVIP 腕前 即戦力 ツール

デザインの可能性を無限に広げる、即戦力として活用したいPhotoshop無料ブラシ素材を集めた、2015年11月度まとめとなります。 ブラシレイヤーを重ねるだけで、デザイントレンドのビンテージ感を演出できるツールから、手描きスケッチと見間違えるクオリティが素敵な素材など、デザイン作業の効率が飛躍的にアップするアイテムが揃います。 詳細は以下から。 デザインの腕前をアップする、即戦力のPhotosh... 続きを読む

Illustratorのお助けグッズ！すごい無料ベクター素材まとめ 2015年8月度 - PhotoshopVIP

2015/08/28 102 users フリーフォント ジェネレーター PhotoshopVIP

Illustratorでのデザイン作業をより手軽に楽しめる、無料ベクター素材をまとめています。用途に限らず商用利用にも対応したアイテムが多いので、今後のクライアント向けプロジェクトにもオススメです。 サイズの変更が自由というベクターファイルの特長を活かしたテクスチャ、パターン素材から、用意されたパーツを組み合わせて作成するジェネレーターや、フリーフォントを利用したロゴバッジ素材、色のカスタマイズに... 続きを読む

Illustratorでのデザイン作業に変化を与えた便利な機能・テクニックのまとめ | コリス

2015/07/16 99 users コリス SpoonGraphics Illustrator

Illustratorも他のソフトウェアと同様にバージョンアップを繰り返し、より使いやすくより便利なものに進化し続けています。 デザインをIllustratorでする際に変化を与えた、ここ数年の間に学んだ便利な機能、新しいテクニックをSpoonGraphicsから紹介します。 Illustratorはクオリティの損失なしで拡大縮小が無限にできるベクターのアートワークを扱います。あなたがそのサイズを... 続きを読む

Sketch初心者はマスターしておきたい、Sketchでのデザイン作業がぐっと効率的になるチップス | コリス

2015/06/29 148 users コリス Sketch iOSデバイス 半径 プレゼンテーション

10 Sketch Tricks for Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レイヤー間でスタイルをコピペ レイヤーの移動 カラーピッカー 角丸の半径を個別に設定 再利用できるシンボル ツールバーのカスタマイズ iOSデバイスでデザインレビュー Sketchの便利なプラグイン Sketchでプレゼンテーション ... 続きを読む

内部作業用も納品も どうせなら他人にわかりやすいPSDファイルを作る｜【ings】東京・神田神保町発 WEB制作＆マーケティング通信

2015/05/27 323 users グループワーク ings コーダーさん デザイナー 円滑化

こんにちは。デザイナーのヨシザワです。 Webデザインを作る際の基本となるPSDファイルですが、「複数名でデザイン作業を分担する」「コーダーさんにファイルを渡す」「クライアント様にファイルを納品する」といった様々な場面で、「PSDファイルを共有する」必要がでてくるかと思います。 今回はその「PSDファイルの共有」について、 ・グループワークの円滑化 ・データ整理作業の効率化 の２つのテーマから、よ... 続きを読む

作業スピードアップ！覚えておきたいPhotoshopショートカットまとめ - Photoshop VIP

2015/01/20 76 users Photoshop Vip Photoshop マウス操作

Photoshopでショートカット使っていますか。一度覚えてしまうと、デザイン作業をよりスピードアップすることができます。今回は特に利用する機会が多いであろうPhotoshopショートカットキーを中心にまとめています。 マウス操作ではやや手間な作業も、ショートカット操作はボタンを入力するだけのシンプルさ。これを機会に作業効率を見直してみてはいかがでしょう。 詳細は以下から。 作業スピードアップ！覚... 続きを読む

デザイン作業効率をアップ！すごい無料ベクター素材コレクション 2014年10月度 - Photoshop VIP

2014/11/05 113 users Photoshop Vip Fre 2014年10月度 効率

クリエイティブなアイデア次第で、無限にデザインを作成できることができるイラストレーター(英:Illustrator)。ゼロから作るのでは、無料ダウンロードできるベクター素材を活用してみませんか。デザイン作業だけでなく、効率もアップするアイテムを定期的に集めており、今回は2014年11月度まとめとなります。 詳細は以下から。 デザイン作業効率をアップ！すごい無料ベクター素材コレクション 12 Fre... 続きを読む

分かるとWebデザインがもっと楽しくなる！考えてデザインする力が身につくオススメの書 | コリス

2014/10/17 113 users Illustrator グリッド Photoshop コリス

何も考えずにPhotoshopやIllustratorを立ち上げ、デザイン作業に入ってしまうのは悪いクセ。 ユーザーをワクワクさせるデザインとはなにか？　この情報を分かりやすく伝えるデザインとはなにか？　クライアントの要望に応えるデザインとはなにか？　考えてデザインする力が身につくオススメの本を紹介します。 グリッドや角丸を使う時もなんとなくではなく、その目的や効果的な使い方などしっかり身につけて... 続きを読む

Illustratorで調整に強いアイコン、ロゴ、UIづくり 第2回：ロゴデザインのワークフロー | Adobe Pinch In

2014/08/22 150 users Illustrator ポッ ワークフロー バリエーション

ロゴのデザイン作業は、まず始めにデザイン（ロゴマークとロゴタイプ）を複数案用意し、その後、さらにデザインを追加・変更したり、組み合わせのバリエーションを増やすという進め方になることが多いかと思います。 ボツになってしまった案を含めて、最終的に数十案つくることもありますよね。 このようにいくつもデザイン案をつくったり、組み合わせのバリエーションを用意する場合には、ひとつのIllustratorファイ... 続きを読む

グラフィック多彩な3Dデザインを得意としたフリー素材配布サイトDesigner CandiesPhotoshopVIP |

2014/03/12 55 users グラフ PNGファイル グラフィックデザイン フリー素材 以下

グラフィックデザインをよりたのしくする、3Dパーツを中心としたフリー素材を定期的に公開しているサイトDesigner Candiesを今回はご紹介します。特にむずかしい設定は不要のPNGファイルで公開されているので、デザイン作業に活用してみてはいかがでしょう。 詳細は以下から。 3Dデザインを得意としたフリー素材配布サイトDesigner Candies Designer Candiesは、グラフ... 続きを読む

Webサイト制作を効率化！無料Photoshop拡張機能、スクリプトまとめPhotoshopVIP |

2013/11/22 321 users エントリー Free Photoshop プラグイン パワー

デザイン作業に欠かせなツールPhotoshopは、プラグインや拡張機能を追加することで、機能面をさらにパワーアップさせてくれます。 海外デザインブログSpeckyboy.comで、Webサイト制作を楽にしてくれる、無料Photoshop拡張機能をまとめたエントリー「Free Photoshop Extensions for Web Designers」が公開されていたので、今回はご紹介します。 詳... 続きを読む

デザイン作業をしていると見落としがちなPSDファイルのエチケットがチェックできるオンラインサービス -PSD Validator | コリス

2013/10/17 102 users コリス watermark コーダー ウェブデザイン グリッド

ウェブデザインのPSDファイルで、チーム内のデザイナーで共有してファイルを触る時、コーダーに渡す時など、より使いやすいPSDファイルにするためのエチケットが守られているかチェックできるオンラインサービスを紹介します。 レイヤー名が「レイヤー1」のまま、グリッドを使用していない、watermarkの入った素材を使ってるなどはいただけません。 続きを読む

Webデザインの仕方が分からない！初心者にすすめるデザインのコツ その1 | ブログ｜東京のアプリデザイン制作会社｜株式会社ハラハラ｜harahara Inc.

2013/08/05 67 users harahara Inc 仕方 独学 株式会社ハラハラ コツ

こんにちは、代表の藤原です。 私は色々な仕事を兼務しているのですがその中でも最もキャリアのあるデザイン作業には特に思い入れが強くあります。 以前は会社員としてアートディレクターをしていたこともあり若いデザイナーにデザインを教えてきました（生意気ですが…）それを活用している人もいれば全く違うメソッドでデザインをする人もいます、それはそれで全く問題ありません。ここで紹介するのは私の独学と上司や先輩から... 続きを読む

Photoshopでやってしまいがちな10個の間違いPhotoshopVIP |

2013/07/10 118 users Photoshop Photosh エントリー 10個 ツール

どんなことをするにも、間違いはつきものです。 とくにPhotoshopなど機能が充実しすぎたツールでは、どんなデザイン作業も可能だと思ってしまいます。Photoshopを利用するときに、理由を知っておくことで、避けることのできる間違い10個をまとめたエントリー「10 Photoshop Mistakes to Avoid」が公開されていたので、今回はご紹介します。 詳細は以下から。 Photosh... 続きを読む

デザイン作業のスピードアップ｜1 pixel｜サイバーエージェント公式クリエイターズブログ

2013/06/05 582 users Pixel サイバーエージェント Theme 裏話 レポート

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 Entries Creative ･･･ » デザイン作業のスピードアップ Wed, June 05, 2013NEW ! Theme: Design はじ... 続きを読む

デザイン作業を楽にする、高品質フリーPSDデザイン素材50個まとめ - Photoshop VIP

2012/11/07 409 users Photoshop Vip

世界中のサイトやブログで、無料公開されているPSDデザイン素材は、ほぼ毎日のペースで更新されていることもあり、すべての新しいデザインに目を通すのはなかなか難しいものです。 海外デザインブログOnextrapixel.comで、デザイン制作に活用したい、高品質な無料PSDデザイン素材50個をまとめたエントリー「50 of the Best PSD Freebies」が公開されていたので、今回はこちら... 続きを読む

Photoshop VIP どんなWebサイト制作にも対応、Photoshopでグリッド、カラムガイドラインを作成する方法

2012/08/10 59 users グリッド Photoshop グリッドレイアウト ＨＯＭＥ

Home　>　 チュートリアル　>　Webレイアウトチュートリアル　>　どんなWebサイト制作にも対応、Photoshopでグリッド、カラムガイドラインを作成する方法 Photoshopを使ってWebデザインを制作するときに、まず必要となるのがピクセル単位で引かれたグリッドガイドラインです。 グリッドレイアウトを利用することで、コンテンツをすっきり見やすく並べるだけでなく、デザイン作業を直感的に行... 続きを読む

デザインとか加工とか出来ないからなんかいいの教えて、と言われて教えたツールいろいろ - かちびと.net

2010/07/27 1094 users net 加工 ツールいろいろ デザイン 境遇

友人がブログを始めたのですが、 Web制作もデザインも全く経験が 無いけど、普通な感じがすごく嫌 らしく、知識が無くても加工出来る、 とか良いサイトとかソフトは無いのか、 と聞かれて教えたWebサービスや ソフトが、同じ境遇の方に役立つかも と思って記事にします。 普通に写真や画像を掲載するのではなく、ちょっと個性的な感じにしたい、出来れば無料がいい、でも自分でデザイン作業は出来ないから良いサイト... 続きを読む

日本発のCacooは複数ユーザーがリアルタイムで協調しながらデザイン作業ができるすぐれもの

2010/04/06 401 users Cacoo たいてい スグレモノ リアルタイム 差別化

たいていのユーザーは説明用の図などを作るのにPowerpointかVisioを使っているだろうと思う。しかし、複雑な図を分かりやすく、しかも見栄えよく作るのは並大抵の作業ではない。現在、使いやすいオンライン描画ソフトの数には事欠かないが、Cacooはいくつかのユニークな機能によって差別化を図っている。 Cacooは日本のスタートアップ、Nulabが開発したFlashベースのウェブ・アプリケーション... 続きを読む

有料ソフトとデザイン作業を無力化させる30のブックマークまとめ*ホームページを作る人のネタ帳

2007/06/28 2224 users 有料 ネタ帳 ブックマークまとめ ホームページ Aptana

今回はデザインという分野の作業を極力省く為のジェネレータを多く収録。 有料のソフト等と同様の力を持つオープンソースのフリーソフトもプラスしてあります。 WEB制作環境 aptana 優れたWEBページの作成支援ソフトであるDreamweaverと同等の機能を持つオープンソースアプリケーション。 レビュー記事はGIGAGINEで CSSVista CSSVistaというフリーソフト。 Interne... 続きを読む