デザインの確認などレビューする人向けにFigmaの使い方をまとめました。 | DevelopersIO
Figmaを使ってレビューすることが増えましたね。そんなレビューする人に向けて、とりあえずの使い方をまとめました。 レビュー等でデザインの確認を目的とした、主にViewer権限を持ったユーザー向けのFigmaの使い方についてまとめました。 Viewer権限でも細かく見ていくとざまざまな機能がありますが、ここでは必要な機能＋知っていると便利になる機能を紹介しています。 この記事では次の点にご注意ください。 ショートカットの表記でcmd/ctrlのようにスラッシュで区切られている場合、スラッシュの前がMac、後ろがWindowsの修飾キーを表します。 ショートカットはUSキーボードを基準としているため、JISキーボードだとキーコンビネーションが異なるかもしれません。（筆者はUSキーボードユーザーのため、JISでの確認はしていません）。 ブラウザ版の利用を想定しています。 Figmaアカウントは
一人で学べるIllustrator！最新デザインレシピ、つくり方24個まとめ
この記事では、基本操作から制作時間を短縮するテクニックまで、Illustratorを実践的に学ぶ最新デザインチュートリアル、つくり方レシピをまとめてご紹介します。 実際に手を動かし、手順どおり進めることで、Illustratorのツールや機能の実践的な使い方が、自然と身につきます。 Illustratorを本気でモノにする最新デザインレシピ、つくり方まとめ 美しいグラデーションをつかったロゴアイコンのつくり方 シェイプツールを使って基本的なデザインを作成し、トレンディーで鮮やかなグラデーションをつかって立体的なロゴに仕上げます。 モコモコとした毛皮をつかったテキストエフェクトの作り方 手描きしたパスに沿って立体感のある3Dスタイルを表現し、さらに「ラフ」効果をつかってモコモコ感のあるデザインに仕上げます。 カラフルなカスタムグラデーションの作り方 フリーフォームグラデーションとメッシュグラ
ロゴのデザインに独創性があるか、パクリじゃないか、Webサイトやスマホでどう見えるか検証できるオンラインツール -TWM Logotester
せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
デザインツールをXd→Figmaへした話 / プロトタイプ作るようになった話 - エニグモ開発者ブログ
こんにちは、デザイナーの本田です。こちらは Enigmo Advent Calendar 2020 の2日目の記事です。 今年でエニグモへ入社して3年目。昨年末からUXデザイングループへ異動し、BUYMAのアプリケーション UIデザインがメインになったので、考えることややることが大きく変わった1年だったと感じています。 業務の幅も広がって何を書こうか迷うのですが、今年を振り返ると今までで1番デザインツールと向き合っていたし、学んだことも多かったので デザインツールをXd→Figmaへした話 プロトタイプ作るようになった話 の2つについて書こうと思います。 1. デザインツールをXd→Figmaへした話 デザインデータ引き継ぎの関係上、Adobe Xdをメインで使っていたのですが、今年の7月頃からFigmaへ移行しました。 Xdも使いやすいですし、何よりAdobe Creative Clou
【2018年春】今チェックしておきたいデザインツール12選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob
日本語にも対応！自分で書いた文字からフォントを簡単に作成できる無料オンラインツール -Calligraphr
Windowsからでも、macOSからでも、手書きのオリジナルのフォントが簡単に作成できる無料オンラインツールを紹介します。フォントはTrueTypeもOpenTypeも作成できます。 日本語はじめ、英語、ドイツ語、フランス語、スペイン語などのフォントを作成することができ、リガチャ（合字）にも対応しています。 Calligraphr さっそく、Calligraphrで手書きの日本語フォントを作成してみました。 作成するには、メールアドレスの登録（無料）が必要です。 ※無料版でもフォントは無制限に作成できますが、同時に作成できるのは一つまでで、75文字までとなっています。 全体的な流れは、下記のようになります。 作成するフォントを決める（日本語・英語・ひらがなやカタカナや漢字のみも可）。 手書き用のテンプレートをダウンロード。 テンプレートに文字を手書きし、アップロード。 アップロードしたテ
こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材
スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウンロード Symbolsの使い方 Symbolsで作成できるスタイルガイド Symbolsはその名の通り、シンボルで自動更新されるスタイルガイドのテンプレートです。使用するカラー・フォント・ロゴなどを変更するだけで、Webサイトに使用するさまざまなコンポーネントのスタイルを定義できます。
デザインのバージョン管理をする世界
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ
デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov
プロトタイピングツールでデザインの作業効率を上げる - astamuse Lab
アスタミューゼデザイン部のMatsumotoです。 ここ最近astamuse.comとastaIDのスマホ最適化の取り組みに合わせて、プロトタイピングツールを実験的に使い始めました。 ツールを使い始めてからまだあまり月日が経っていませんが、とにかく便利！ ストレスなく今までのデザインプロセスが改善しそう！ ということで、今回はプロトタイピングツールを使う利点や、実際のサービス開発において、どう作業効率がUPしたのかについて紹介させていただきます。 目次 プロトタイピングツール概要 ツールを使用するようになった経緯 ツールを使う目的 使ってみた3つのサービス比較 何が変わった？ まとめ 参考サイト プロトタイピングツール概要 そもそもプロトタイピングとは何？ プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は
配色のセンスをアップする！アクセントカラーの選び方 | コリス
デザインやイラストで配色を考える時、アクセントカラーは非常に大切です。 Webデザインだと目立たせたいコンテンツやボタンに、イラストだと単調な配色を引き締めたり、アイテムや小物を際立たせることができます。 配色のセンスや知識がなくても、ベースカラーにぴったりなアクセントカラーを簡単に見つけられる方法を紹介します。 便利な無料ツールを利用しよう ベースカラーを用意 アクセントカラーの選び方: その1 アクセントカラーの選び方: その2 アクセントカラーのダウンロード 便利な無料ツールを利用しよう 無料で利用できるオンラインのカラーツールがたくさんあるので、それを使用します。 今回は無料で利用でき、登録など面倒なことも一切ない「Paletton」を使用します。
HTML/CSSでワイヤーフレームもUIデザインも作成する人がけっこう多い -最近のWeb制作で使われているツールのまとめ | コリス
Web制作の実際の現場で、ブレーンストーミング、ワイヤーフレーム、UIデザイン、プロトタイプ、プロジェクト管理、ファイル管理・バージョン管理に使われている人気のツールを紹介します。 Design Tools Survey 「Design Tools Survey」は、世界各国の制作会社・フリーランス・スタートアップ企業など、さまざまな形態でWeb制作を行っている人にアンケートをとり、それぞれ使用しているツールをまとめたものです。 日本人100%とは当然異なると思いますが、興味深いデータとなっています。 ブレーンストーミング ワイヤーフレーム UIデザイン プロトタイプ プロジェクト管理 ファイル管理・バージョン管理 ブレーンストーミング ブレーンストーミング時に使うツール 64%: 鉛筆と紙 10%: Sketch 7%: Illustrator 7%: Photoshop 6%: その他
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
プロ御用達！WEBデザインに役立つデザインツール13選
更新日: 2017年09月26日公開日: 2015年06月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方に
レトリック｜RHETORIC（デザイン・コピーのアイデア発想ツール）
1. P.1 R H E T O R I C デ ザ イ ン ・ コ ピ ー の ア イ デ ア 発 想 ツ ー ル レ ト リ ッ ク Koki Kaku Septeni co.,ltd. Marin Kamikura Septeni co.,ltd. 2. P.2⾃自⼰己紹介 株式会社セプテーニ メディアソリューション本部 クリエイティブ部 チーフディレクター / 加来 幸樹Koki Kaku 2006年年セプテーニ⼊入社。コミュニケーションデザイン領領域のプランナー/プロデューサー、 ソーシャルメディア戦略略コンサルタントなどを経験した後、2012年年10⽉月より現職。 国内外の⼤大⼿手アプリ事業者を中⼼心としたクリエイティブディレクション業務に加えて、 80名を超えるクリエイティブチームの制作クオリティ管理理についても管掌する。 趣味はネー
真っ白な歯で笑顔に自信
芸能人のような白い歯を手に入れたいと思う人は多いのではないでしょうか。美しい白い歯を手に入れる方法として注目されているのが、歯のホワイトニングです。しかし、ホワイトニングと一口に言っても実はいくつか種類があり、それぞれ特徴やおこなうための費用が異なっています。 自分に合った歯を白くする方法を見つけられるよう、今回はホワイトニングの種類について紹介しましょう。 ホームホワイトニングの特徴 ホームホワイトニングは、その名の通り自宅でおこなうホワイトニングのことです。歯科医院で自分に合ったマウスピースを作ってもらい、そして専用の薬剤（ホワイトニングジェル）を使用して白い歯を目指していきます。 効果が出るまでは2週間ほどで、満足できる白さを手に入れるまでは2ヵ月ほどかかります。ホームホワイトニングをおこなう際の費用ですが、マウスピースを作成する料金と薬剤の料金を合わせて、1万5千円～3万円です。「
Netvibes - Dashboard Everything
Or pick-up a popular dashboard デフォルト FIFA 2010 Social network Breaking news Best productivity ファイナンス Monitor Keep track of your favorite interests and trending topics. >Netvibes Smart Reader: the first RSS reader that streams the latest feeds to you in real-time >Follow dozens of blogs, activity streams and Twitter conversations all at a glance Personalize Create your own personal dashboard and en
pltts.me - pltts リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年気になったハイクオリティなデザインUIキット − 2015 - NxWorld
