はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ

バナー広告やスライドの見栄えがしっくりこなかったり、テキストが読みにくいと感じたことはありませんか？もしかするとその問題、「配色」を見直すだけで解決できるかもしれません。 まず下のバナー広告をご覧ください。 黒、青、ピンクの３色が使われていますが、読みづらく毒々しい印象です。 このバナー広告のデザインは一切変えずに、色のみを変更してみましょう。 いかがでしょうか。デザインはそのままでも、配色を見直すだけで印象を大幅に変えることができました。 本記事の目的は誰でも適切な配色ができるようにすることです。美術やデザインに明るくない方でも、ルールやコツを身につけることで上手に色が扱えるようになります。基本知識の解説に始まり、バナー広告の配色NG例から便利なツールまでご紹介します。 バナー広告のデザインについて学びたい方はこちらの記事もオススメです。 【事例付き】バナー広告のデザインがイケてないとき

Palette List is a dynamic palette generator

HSL使ってますか？まだ使ったことがないという人は、このページでHSLを体験してください。マウスホイールを回すだけで色を作成できます。RGBでは手間がかかった色の作成もHSLなら簡単にできます。HSLは、イメージした色を簡単に作成したいと思っている人に強くおすすめします。 CSSでの色の指定方法　一覧 HSLをやる前に、HSLを含めて色を指定する方法をざっとおさらいしておきます。 下に私が知っている色を指定する方法を書いてみました。形式はちがいますが、すべて同じ色を指定しています（厳密に言うと値を変換するときに少数点以下を丸めるなどしているためまったく同じと言う訳ではありませんが、モニタでは同じに見えると思います）。 color: #778899;                   /* ① #RRGGBB 形式　カラーコード */ color: #789;               

hsl()ではhue：色相、saturation：彩度、lightness：輝度の3要素で色を指定します。 RGBより直感的な色指定方法としてCSS3で追加されました。 キーとなるhueさえ最初に決めておけば、あとは彩度と輝度の割合を変えるだけでそれなりにまとまったサイト配色になります。 モックや社内用管理画面をゴリゴリ作る際に覚えておくとべんり！ ##指定方法 ###hue：色相 0～360°の角度の値で指定。 角度のため、例えば400と指定すると40に変換されます。 0=360=red ###saturation：彩度 0～100%の割合で指定。 100％＝純色、0%＝灰色 ###lightness：輝度 0～100%の割合で指定。 100%=白、50％=純色、0%=黒 （明度とは異なるので注意。明度は100%=純色、0%=黒。） ##例）hue=0 の場合の変化 See the Pe

All-in-one color tool for creators

ロゴをデザインする時に役立つ、業種やデザインのテイストにあったオススメのカラー、色の組み合わせ、フォントが分かる無料オンラインツールを紹介します。 色の組み合わせが苦手な人、あと１色欲しい人、フォントをいろいろ試してみたい人には、嬉しいサービスだと思います。

その昔アンディ・ウォーホルという巨匠が描いたマリリン・モンローのポップアートのレプリカが4年くらい前にマンションに飾ってあったのを思い出すけれど、最近Webデザイン界では海外を中心に「Duotoneデュオトーン」と呼ばれるデザインが流行りだしている。 シンプルでありながら、ポップでビビッドで非常に印象に残るデザインなので、「Duotone」を極めれば超イケてるサイトになりそうな予感。 最近流行っている「Duotone」って何ぞ？ 「Duotoneデュオトーン」は「Duo(2つの)」＋「tone(色)」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色を中心に描き出されるハーフトーン作品のこと。Duotone作品自体は昔から存在するのだけれど、昔のアーティストが一生懸命に写真をつなぎあわせていた時代から時が経ち、Photoshopのアップデートで簡単に写真を加工してDuoto

#はじめに 私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。 デザイナーじゃないので１からデザインをしていくなんて到底無理です。 そんな時にノンデザイナーの方でも良い物を作るために UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。 基本他のアプリを真似参考にするといい感じにできちゃうかもしれません。 Web系開発の方も配色パターン等は参考になると思います。 #デザインをする前に デザインをする前に呼んでおいたほうがいい物 ITエンジニアに易しいUI/UXデザイン デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 ノンデザイナーのための配色理論 #アプリデザイン ##CAPPTIVATE.co 動きのあるカッコいいUIばっかり載っています。 種類別で見ることもできるので便利ですね。 ##Mobile

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/ ◆色彩心理学に関する誤解 どうして色彩心理学は多くの誤解を含み、そして

ランディングページのデザインにおいて、サイトの色彩は非常に大きな要素だ。 例えば、見込み客の嗜好やブランドイメージと合わない色をメインカラーにすると、それだけでコンバージョンは大幅に下がる。 少し想像してみて欲しい。例えば、このブログの背景が黒一色で、あなたが今読んでいるこの文字がまっ黄色だったらどう思うだろうか？どれだけ役に立つことが書いてあっても、何となく嫌悪感を感じるはずだ。 また、例えば、Amazonのサイト内の購入ボタンが真っ黒だとしたらどうだろうか？購入意欲が下がることは間違いないだろう。 ここまで極端ではないにしろ、ランディングページやサイトの色彩の選択を間違えると、コンバージョンが下がるということは実感して頂けたと思う。 そう、極限まで売れるページ/機能するサイトを作る上で、色が人に与える心理的な影響（色彩心理学）を知っておくことが必要不可欠だ。そこで、本日は、色が人の購買

3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_

自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか？ 私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。 けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。 ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。この記事自体単なるまとめ記事ですが、できるだけ厳選し、読んでほしい順に並べました。皆さん、あきらめずに一緒に勉強しましょう。 配色 アクセントになる色を使うのが苦手で、同色系の色ばかり使ってしまうのですが、これらを読めば恐れずに使えそう。 色彩センスのいらない配色講座 ベースカラー、メインカラー、アクセントカラーに分類してどのような色を選ぶべきか分かりやすく解説してくれています。具体例もあって分か

2018年10月11日 Webデザイン, インスピレーション, 色彩 前回の記事「WebデザイナーにおすすめのEvernote活用術」で紹介したように、私はEvernoteに素敵なデザインをストックする際、使われているテーマカラー別にタグをつけて分類しています。気がつけば各色のデザインストックが増えてきたので、その中でも厳選した5サイト×10色の合計50サイトを紹介します。単色をデザインに使う時のポイントも一緒に読んでみてくださいね！ ↑私が10年以上利用している会計ソフト！ 追記：リンク切れサイトを削除したため、数が減ってます… テーマカラーをメインに取り入れる時のポイント 「配色に自信がなくても！Webデザインが好きになる配色ツールと使い方」でも紹介したとおり、きれいな配色でもベタ塗りしただけではデザインの魅力が半減してしまいます。特に今回のようにテーマカラーを使う面積が広ければ広いほ

配色に自信がなくても！Webデザインが好きになる配色ツールと使い方以前「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ウェブ配色ツールを使った基本的な配色方法まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Web サイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差 0° で配色した例。色相差を 0° にすると同系色（＝同じ色の明度・彩度を変えた色）で配色されます。調和されて見えますが、アクセントになる色がないため

基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ