無料でデザイン上「アリ」な色の組み合わせをサクッと確認できる「Accessible Brand Colors」レビュー
ウェブデザインやフリーペーパーといった物理的なデザインをする際には、人に訴える力を持つ「見やすい」色の組み合わせを見つけ出すことはかなり重要です。背景色と文字色の組み合わせが「アリ」なのか「ナシ」なのかを一目でわかるようにする「Accessible Brand Colors」を使えば、悩みがちな色の組み合わせを直感的にさくっと決められそうだったので、実際に使ってみました。 Accessible Brand Colors by Use All Five https://abc.useallfive.com/ 上記URLにアクセス後、画面右上の「＋」をクリック。 カラーピッカーが現れるので…… 色相や明暗を調整して「Add hex」をクリック。カラーコードを指定することも可能です。 するとこんな感じで1色目が決定。同様に下側の「＋」もクリック。 色を選択して「Add hex」をクリックします。
Logo Rank - Check your logo design with deep learning
Uniqueness This metric is based on the similarity of the logo to our library of 1M+ icons. The ideal logo design is visually unique, easily distinguished from stock images and other common shapes. Legibility A strong, bold silhouette is the hallmark of a great logo - it ensures that the logo can be recognized low resolutions, from afar and on mobile devices. Color/Contrast Color and contrast can h
アプリケーションアイコンを作るときに参考になるサイトまとめ
こんにちは！デザイン担当の福島です。 今日は、わたしがアイコンを作成する際に見る参考サイトの紹介をしたいと思います。 あの機能のシンボルってなんだっけ？ってときに見る。 あれ、この形って一般的なのかな？と、作っているときに不安になることはよくありますよね！心配になったときに検索すると一般的に連想される形がわかって捗ります（一般的なシンボルもプラットフォームによって多少違ってくるので、数が多い = 正解とはいいきれませんが） たとえば『タブ』ってどんな形で表すのが一般的なんだろう？というような疑問にすぐに答えてくれます。 FIND ICONS 色んな検索に対応しているので、がっつり調べたいときはここで検索します。 ICON FINDER さくっと見たいときはこちら！16/24/32/48/64/ 等の一般的なサイズで絞りこめるので 16px で作られた、あの複雑な形のアイコンがみてみたい！な
配色選びに困ったら確認したい、色の組み合わせ用チートシート The Ultimate Combinations Cheat Sheet
デザイン制作のなかでも、正しい色の組み合わせを見つける作業は、もっとも重要な過程のひとつで、デザインのたびに頭を悩ますデザイナーも多いでしょう。 今回は、手軽に配色を決めることができるチートシート「The Ultimate Color Combinations Cheat Sheet」が公開されていたのでご紹介します。 詳細は以下から。 コンプリメンタリー配色 Complementary Combination コンプリメンタリー配色は、カラーホイールの反対側の色を組み合わせた組み合わせで、補色（英: Complement）同士を組み合わせた配色を指します。この配色は、鮮やかで精力のある元気なデザインが特長です。 トライアド配色 Triads Combination トライアド配色は、カラーホイール上の等しい距離にある3色の組み合わせを指します。うまく調和の取りつつ、強いコントラストを表現
無料で商用利用可能でクレジット表示も不要なアイコンをまとめた「IconStore」
ウェブサイトやパンフレット、資料などを作っている時に無料アイコンは便利ですが、クレジットの表示が必要など、制限があることも。「IconStore」に登録されているアイコンは無料の上に商用利用も可能で、クレジットの表示も不要とかなり使い勝手がよく、映画スター・ウォーズっぽいものから、SNSアイコン集、海がテーマのアイコン集、ゲームっぽいアイコンまとめなど、種類も多岐にわたっています。 Free icons by first-class designers - IconStore https://iconstore.co/ IconStoreはこんな感じでアイコンがずらりと並んでおり、スクロールしながらさまざまなアイコンを見ることができます。 スクロールしていくと画面下部に現れる3点リーダのアイコンを押すことで、さらなるアイコンたちを見ていくことが可能です。 なお、それぞれのアイコン画像は右下
ロゴ作りで大事なのはロゴの見た目にあらず、本当に大切なポイントを解説したムービー「What makes a truly great logo」
企業にとって非常に重要なロゴマークは、決定するのに時間や手間がかかることも。ロゴにはどういうタイプがあり、人々にどう作用し、現在ではどのようなロゴが人気なのか、そして、ロゴ作りにおいて本当に大事なことは何なのかをグラフィックデザイナーのマイケル・ビアラット氏がムービー「What makes a truly great logo」で解説しています。 What makes a truly great logo - YouTube ロゴは現在において過大評価されている側面があり、グラフィックデザイン会社の副社長マイケル・ビアラット氏は「私がロゴに対して持つ感情はさまざまなものが入り交じっています」と語ります。 ロゴは人にとっての「顔」と同じく、企業にとっての「顔」と言えるもの。人によって好き嫌いがあるのは当然です。 ロゴは小さく表示されても…… 大きく表示されても機能する必要があります。 ロゴに
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
AppStoreSketch - App Store提出用のスクリーンショットを一気に書き出すことができるSketch 3テンプレート | ソフトアンテナ
iPhone 6 / iPhone 6 Plusの登場で、iOSアプリをApp Storeに登録するときに必要となる画面のスクリーンショットの数が一気に増えてしまい、作成の手間の増加に頭を悩ませている開発者の方も多いかもしれません。 「AppStoreSketch」はそのような時に使いたい、スクリーンショット一括作成用のSketch 3テンプレートです。電子書籍design+code用に作られたテンプレートのようですが、テンプレート自体は単独で使用することができます。 使用方法は、テンプレートファイルに記載されていて、バックグラウンドを変更し、2x、3x用のテキストを変更し、iPhoneのスタイルを選べば完了です。3.5インチ、4インチ、4.7インチ、5.5インチに対応したスクリーンショットを一気に作成することができます。
[Xcode 6] Asset Catalog でベクターが扱えるようになりました！ | DevelopersIO
これからはベクターでアセットを管理！？ Asset Catalog では、これまでビットマップ画像しか取り扱うことはできませんでしたが、Xcode 6 からは PDF 形式 と JPEG 形式 がサポートされました。特に新しいのが ベクターが扱えるようになったという点です！ ベクターが扱えるようになったということは、いままでのように Retina や Non Retina で別々の画像を用意する必要がなくなったり、イメージを複数のサイズの View に配置したいときに1つのファイルだけ用意すれば良くなるということです。これはきっとプログラマーにとってもデザイナーにとっても嬉しいことですね！ ということで使ってみました。 Asset Catalog でベクターを扱うには PDF 形式のアセットデータを用意する Asset Catalog でベクターとして認識できるのは PDF 形式のファイル
![[Xcode 6] Asset Catalog でベクターが扱えるようになりました！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b92dfecc1683bd6bd1943840e9d28953e3b81b2/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F09%2Ficon-xcode-6.png)
初心者がIllustratorを使いこなすためのショートカットキー、 テクニック集 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集部です。こちらは「Illustratorをはじめて使う人が、ひと通りの基本的な操作ができるようになる」ところまでを目標とした全4回の超初心者向けIllustrator講座です。 第1回ではIllustratorの基本的な設定を、第2回ではIllustratorの基本画面およびベジェ曲線について、第3回ではIllustratorの各ツールについて説明をしました。 最終回となる今回では、総まとめとして、Illustratorを効率化するためのショートカットキー、過去にLIGブログに掲載された役に立つIllustratorの記事などを紹介していきたいと思います。初心者ではない方も、おさらいのつもりでぜひ確認してみてください。 ▼目次 Illustratorを効率化するためのショートカットキー 拡大、縮小、手のひらツール ペンツールを効率化 文字ツールを効率化 Illu
デザインアセットをiPhone6に対応するワークフロー - ワザノバ | wazanova
http://aten.co/2014/09/12/designing-from-iphone-5-to-iphone-6-iphone-6-more-than-i-bargained-for/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約7時間前 発表されたiPhone6のサイズからして、予想はしてましたが、MerchbarのEdward Atenがまとめてくれたブログを読むと、改めて対応の工数を認識させられます。 iPhoneのレイアウト/解像度がどう変更されてきたか iPhone3 -> iPhone4: キャンバスのサイズは 320x480 pointsと同じなのでレイアウトは変更なし。解像度が 640x960 pixelesに倍増するので、アセットをアップグレードする対応。 iPhone4 ->
Webデザイナーによるカラーコードを使った便利なテクニックあれこれ
By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ
マーケティングにおける色彩心理学の本当の使い方
by Tiger Pixel マーケティングにおいて色彩心理学を利用することは重要とされますが、色彩の持つ効果は個人の経験に依存し、学術的に裏付けされたデータが少ないため、議論も多いところです。そこでHelp Scoutがブログで研究によって明らかにされた色彩の持つマーケティングでの効果をまとめたのが「The Psychology of Color in Marketing and Branding」で、実際に商品を売り出したり、ウェブサイトをデザインする際にも非常に役立つ内容となっています。 The Psychology of Color in Marketing and Branding | Help Scout https://www.helpscout.net/blog/psychology-of-color/ ◆色彩心理学に関する誤解 どうして色彩心理学は多くの誤解を含み、そして
「信頼感の青」「安心できる緑」など色がマーケティングで果たす役割とは
By etaKate マーケティングにおいて「色」の果たす役割は非常に大きく、「購買行動の9割を目から得た情報によって決定している」という研究結果があるほどで、色をいかに上手く使うかがマーケティング成功のポイントの1つです。企業は実際のところどのように色を使っているのか、それはどのような効果を生んでいるのか、SNS専門のコンサルティング会社Bufferのレオ・ウィドリッチ氏が実例を使ってまとめています。 Why Facebook Is Blue: The Science of Colors in Marketing - The Buffer Blog http://blog.bufferapp.com/the-science-of-colors-in-marketing-why-is-facebook-blue 多くのウェブサイトや企業のロゴイメージにおいては、ある明確な目的があってその目
Interface Sketch
If you're designing a website or app, these simple templates are designed to help you sketch your ideas on paper. The templates are in PDF. Simply download a template, print out the pages you need and start sketching. You can print in colour or black-and-white; on laser or inkjet printer. Some of the templates contain a grid of dots to help with alignment when you sketch. These dots do not represe
記憶に残るロゴをデザインするために自身に問いかけるべき6つの質問
ブランディングの1つとして重要なのが、企業の象徴とも言えるロゴです。企業とユーザーの最初の接点となるロゴをデザインしてきたMin Ming Loさんが、人々の記憶に残るロゴをデザインするために、自分に問いかけるべき6つの質問を公開しています。 The Makings of a Great Logo - BOLD by Pixelapse https://bold.pixelapse.com/minming/the-makings-of-a-great-logo ◆01：ロゴはどんな感情を呼び起こすのか？ ロゴをデザインする上で最も重要なのが、ロゴが企業の特徴を反映できているか、ということ。ロゴを見たユーザーが呼び起こされる感情は、企業価値にとって適切なものでなければいけません。例えば、ディズニーのロゴは、見た人が「幸福」を感じるようにデザインされています。特徴的な曲線と、楽しげなフォントは
iPhone Development 101: iPhone Screen Sizes and Resolutions
iPhone Device & Screen Sizes and Resolutions (Open image in new window) Compare Device Sizes To get the screen dimensions (in points) of the current device: Objective-C: CGRect screenBounds = [[UIScreen mainScreen] bounds]; // Macros: #define screen_width [ [ UIScreen mainScreen ] bounds ].size.width #define screen_height [ [ UIScreen mainScreen ] bounds ].size.height Swift: let screenBounds = UIS
Illustrator（Photoshop） のペンツールできれいなパス、ベジェ曲線を描くためのコツ（私流）
Illustrator や Photoshop のペンツール。 初心者の頃は、きれいな曲線が描けなくて悩んだものでした。そんなペンツール、パスの初心者さんのための、ペンツールできれいなベジェ曲線を描くコツを、一連の操作方法とともにまとめてみました。 ペンツールに挫折しちゃった人も、もう一回チャレンジしてみるきっかけになればうれしいです！ ペンツール初心者さんが対象の記事です。 Photoshop や Illustrator のペンツール … はっきり言って私はへたっぴーです。ペンツールは切り抜きをするときやイラストを書く時など、絶対に使いこなしたいツールですよね。ペンツールで描く曲線をベジェ曲線、アンカーやハンドル（後述）も含めてパスって呼んだりもしますが、この曲線が初心者さんにはとにかく難しい …。初心者さん向けの Illustrator の本や Webサイトを見ても、ペンツールできれい
The iOS Design Guidelines - Ivo Mynttinen / User Interface Designer
Updated: 18. October 2020 The iOS Design Guidelines Design great-looking apps for Apple iOS devices. Designing iOS apps can be difficult sometimes, but finding correct and up-to-date information about all of Apples’ devices shouldn’t be. These design guidelines will help any designer who’s building neat things for iOS get started within seconds. About these guidelines These guidelines describe how
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選
