【保存版】配色アイデアに迷わない、すごい配色カラーパレットツール107個まとめ
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
テーブルをレスポンシブデザインに対応するためのCSSを使ったレイアウトパターン - YCOMのホームページの制作・運営に役立つブログ
ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ レスポンシブデザインをしていると悩まされるんがテーブルのデザインです。 PCの画面と違って表示領域が狭いので、工夫しないとうまくテーブルを表示できません。 CSSを使ってテーブルをレスポンシブデザインするためのパターンを３つ紹介します。 見出しとコンテンツを交互に縦表示 テーブルの縦横を切り替える テーブルそのものをスクロール レスポンシブでレイアウトを変更する 一般的にテーブルはTableタグを使っているでしょう。 その構成要素は、Tableはdisplay:tableが初期値で、tdやthタグはtable-cellが初期値になっています。 これらを操作す
すぐに取り入れよう！美しいデザインを実現する「8ポイント方眼デザイン」とは？
Webデザインについて勉強していくと必ず出会うのが*「グリッドデザイン」*あるいは「グリッドレイアウト」「グリッドシステム」という言葉です。 グリッドとは「方眼」を意味する言葉で、画面やページを縦横に分断する直線で分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法のことです。 ところが、Webデザインにおいては*「グリッド」(方眼)*という言葉が使われながらも、実際には縦の線で分割しただけのものでも「グリッド」と呼んでいました。 水平位置に関してはテキストのベースラインは考慮されることもありましたが、基本的にはあまり考えられていない場合が多いようです。 確かに縦の線を意識することでレスポンシブデザインに簡単に対応することができるのですが、単にデスクトップサイトとモバイルサイトの互換性だけを考えていては、非常にもったいないです。 というのも、せっかく縦の線を均等の割合
ノンデザイナーこそ知っておきたい【デザイン用語40】
カーニング、CMYK、彩度、カンプデータ…Webデザイナーやグラフィックデザイナーの方と一緒に仕事をしていると、こうしたデザイン用語が会話の中に登場することがあります。 デザイナーと制作依頼者がコミュニケーションを取るときに、デザイナーとのコミュニケーションがしっかりと取れないと、デザイナーに主導権を握られたりデザイナー任せになってしまったりすることがあります。 そうすると、デザインが出来上がったときに、制作依頼者が意図していなかったデザインになってしまうことも珍しくありません。 今回は、ノンデザイナーこそ知っておきたいデザイン用語を集めてみました。 こうしたデザイン用語を知っておくことで、デザイナーとのコミュニケーションが取りやすくなるだけでなく、デザイナーに自分が表現したいデザインをより的確に伝えることができるようになります。 ある程度デザインの世界を知っている方は、自分がどれくらい知
ノンデザイナーがクオリティの高いWebデザインを作成する時に気をつけたい4つのポイント
インターネットの技術の進歩に伴い、誰もが簡単にホームページを作成できるようになりました。 しかし、いくら技術的な知識をつけても、「なにかダサい……」「なにか物足りない……」と感じることはありませんか？ このような場合、多くは「デザインの基礎」を押さえられていないだけかもしれません。 今回は、デザインの知識が全くない「ノンデザイナー」の方でも、最低限押さえておきたい4つのポイントをご紹介します。いきなりプロ顔負けのデザインが作れなくとも、これさえ押さえておけば見ている人にも自分の意図をしっかりと伝えることができるでしょう。 1.テーマカラーを厳選する 「なにかダサい……」と感じるWebデザインは、配色のチョイスを間違えている可能性があります。 デザイナーは、何となくこの色が好きだから、という理由で配色を決めることはありません。 Webサイトには、伝えたいメッセージがあります。 例えば、男性向
ストックしておいて損はなし！ユニークな日本語フリーフォント10選
フォントは、グラフィックデザインにおいて非常に重要な役割を担います。 フォントを少し変えるだけで、雰囲気が180度変わることも珍しくありません。 あらゆるデザインにすぐに対応できるよう、フォントのバリエーションは多ければ多いに越したことはありません。 無料フォントをストックしておけば、どのような依頼がきても対応しやすくなります。 特に日本語のフォントは重宝するのではないでしょうか。 今回は、ユニークな日本語のフリーフォントを10個厳選してご紹介します。 広告デザインなどの媒体で使うイメージが湧くように、フォントの良さが出てくる画像と合わせてみました。 ユニークな日本語フリーフォント10選 1. 廻想体 http://moji-waku.com/kaiso/ 廻想体は、現代っぽさを感じさせる縦長の字体が特徴のフォントです。 パッケージや広告のタイトルなどに利用できそうです。 全角のひらかな・
デザインの概念が学べるTED動画8選
TED（Technology Entertainment Design）は、大規模な講演会を主催している非営利団体です。 TEDの講演会はTEDカンファレンスと呼ばれ、テクノロジー（学術）分野・エンターテインメント分野・デザイン分野を中心に、その世界で活躍する人々が " TEDトーク " と呼ばれるプレゼンテーションを行います。 さらに、TEDでは「Ideas worth spreading（広げる価値のあるアイデア）」をスローガンとして標榜し、インターネットでも無料で簡単に " TEDトーク " を閲覧することができます。 今回は、TED トークのデザイン分野に着目し、デザインの基礎がない人でもわかりやすく概念が学べるTED動画をまとめました。 デザインの概念が学べるTED動画8選 1. ドナルド・ノーマン「感情に訴えるデザインの3つの要素」 ドナルド・ノーマン「感情に訴えるデザインの3
感情を鷲づかみ！共感を生むデザインを作るために気をつけたい5つのポイント
感情は、ユーザーインタラクションにおいて最も大切な要素の一つです。その理由は、広告業界を見てもらえば一目瞭然で、人々の感情を動かすことで大きな利益を得ているからです。ブランドや製品に対して信頼や同情、欲望から羨望まで、人間のあらゆる感情を心理学的に利用することは、実世界だけではなく、Webマーケティングの世界でも有効です。 その中でも、UXデザインは、ユーザーの立場に立って、ユーザーに共感し、ユーザーに共感してもらうスキルとして、昨今大きく注目を浴びています。 そこで今回は、共感を生み、信頼を得るためのデザインを作るために注意したいポイントをまとめました。 共感を生むデザインを作るために気をつけたい5つのポイント 1. 言うのでなく見せる 「文字にしているからわかるでしょう」というスタンスではなく、一つひとつを丁寧に図示することで、書いてある言葉がより分かりやすくなり、スッと頭に入ってきま
【2019年版】デザインも使いやすさも抜群！本気でオススメしたいWordpressテーマ16選 - にーとのかがみ。
どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。 最近はてなブログからWordpressへと鞍替えしている人が増えているけど、もしかして最近のトレンドか何かかな？ （SSL対応の問題もあるからみんなもちょっとシビアになっているよね。） とか思いつつはてなブログを続けている僕ですが、ぶっちゃけWordpressの良さもわかっているから気持ちはわかる…。良いよね、Wordpress そういうわけで、今回ははてなブロガーにもそうでない人にも本気でおすすめできるテーマをいくつか選んだので紹介していこうと思うよ！ ちなみに、今回紹介しているテーマは全て使ったことのあるテーマの中から厳選して紹介していますので、わりとガッツリ書いてます。 はじめに無料テーマと有料テーマの違いを知ろう Wordpressでブログやサイトを作ろうと思ってテーマを探していると、無料でもめちゃくちゃ凄い
【厳選】デザイナーやクリエイターのポートフォリオにオススメするWordPressテーマ12選
近年、フリーランスとして活動するデザイナー、クリエイターが増えてきています。フリーランスとして働くためには、これまでの実績を示したり、自分の情報を発信するためのポートフォリオが重要です。 ポートフォリオをWordPressを使って作る方も多く、適したテーマも豊富にあります。 カスタマイズが必要なオリジナルテーマを制作せずとも自分の個性を表現したテーマで簡単にブログを作成することも可能です。 今回は、ポートフォリオに適したオシャレなWordPressテーマをご紹介します。 膨大な量のテーマの中からポートフォリオ向きのテーマだけをピックアップしています。 ポートフォリオサイトを作る際のテーマ選びにぜひお役立てください。 ▼ディレクターとデザイナーで読みたい資料 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの
UI/UXが優れている！2016年オススメのWebサイト・アプリ9選
使いやすく、心地よいホームページには、必ず根拠があります。 「使いやすい」「心地よい」という感覚を生み出す重要な要素の一つが、UI/UXです。 どれだけ素晴らしいコンテンツが用意されていたとしても、UI/UXが優れていなければ長期的に利用してもらうことはできないでしょう。 今回は、ホームページやアプリの中で「インターフェイスのデザインやユーザー体験が素晴らしい」と話題になったものご紹介します。 UI/UXが優れている！Webサイト・アプリ9選 1. Stripe Radar https://stripe.com/radar Stripe Radarは、従来の決済システムと異なり、機械学習を取り入れた誰でも簡単に導入できる決済システムです。 トップページはマウスで動かして機能性を確認できる多面体で、傾けて奥行きをつけた動画の配置、紫色が特徴のグラデーション、シンプルなアニメーションなど、見て
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン外注で「コレジャナイ」結果にならない配色指示のポイント――色彩とコミュニケーション#6 | 色彩とコミュニケーション（全6回）