【保存版】配色アイデアに迷わない、すごい配色カラーパレットツール107個まとめ
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
ワイヤーに不満を持つことが多いのであれば、あなたは情報設計をすべき | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回の連載の趣旨 こんにちは、アートディレクターのもりたです。 アートディレクターなんて立派な肩書を最近名乗るようになったのですが、なにをすべきなのか暗中模索しています。 ただ、一つだけ言えるのは、誰かに指示を出さなければいけない場面が増えたこと……。 自分だけでは完結できないあんな表現やこんな作業、頭のなかには完成形が見えているのに、これを相手にどう伝えたらいいのかわからない。 今回はそんなお悩みに対して、LIGのデザイナーに「自分はこうしていますよ」を書いてもらいました。 みなさんの仕事の一助になれれば幸いです！ 第1回のテーマは情報設計です 連載第1回のテーマは情報設計です。突然アートディレクションっぽくないですね！ でもまだページから離れないでください、もしもあなたが他のメンバーから渡されたワイヤーを元にデザインを作成していて、そのワイヤーに不満を持つことが多いのであれば、あなたは
デザイナー視点でUI設計の質を上げるための4つのポイント | SONICMOOV LAB
こんにちは、ソリューション事業部でデザイナーをしております、こーたと申します。 ゲームを楽しむために、快適で使いやすく、ユーザーにストレスを感じさせないUIデザインが大切であるということを、前回の【UIデザインで幸せになるためにUXで意識している事】で掲載しました。 ではユーザーが幸せになる良いUIデザインをするためには、具体的にどうすればいいのかということですが、それらに基づいた骨組みをしっかりと作ってあげる必要があります。 今回はそんな幸せになるためのUI設計の作り方をご紹介します。 1：共有と理解 まずは設計する前に作るものへの理解を深めましょう！ UIの設計は、ゲームを企画をした人と密に連携をとって、きちんと内容を理解する事が非常に大切です。 たとえば・・・ どんなゲームなのか 何をするゲームなのか どんな世界観であるのか このゲームのウリ、特徴はなにか このゲームのターゲット層は
カスタマージャーニーマップの作り方 - 瀬宮の球拾いブログ
会社でカスタマージャーニーの話が出ていたのでちょっとここに書く。 カスタマージャーニーについて悩んでいた彼がここを見るかもしれないし見ないかもしれない。 もし見たのなら助けになればいいと思う。 あくまで私の一見解であるので特に勧めたりはしない。 また一見解であるので、真に受けて痛い目みても責任は取れない。 本題 さて、私はカスタマージャーニーとはUX設計の一手法だと思っている。 ここにAirBnbのカスタマージャーニーの図があるんだが、これはわかりやすい。 ただしわかっている人間にとっては。 わかっていない人間にとっては非常に誤解しやすい図だと思っている。 ドツボにはまるケース わかっていない人間は手続き的にユーザーの動作を列挙しようとしてドツボにハマる。 つまり行動を列挙し、それにともなう感情を付け加え、最後に書き連ねた内容を総括して「結局ユーザーは何をしたい？」を書く。 順番として 行
株式会社D2C｜統合マーケティングパートナー
D2Cグループは、認知拡大から販売促進、ロイヤルユーザー化まで、幅広い領域を対象としたソリューションを提供する統合マーケティングパートナーです。あらゆる手段を駆使して「人を動かす、新しい瞬間」をプロデュースすることで、企業の課題を解決に導きます。
カスタマージャーニーの作り方とその実例
div.hs-menu-wrapper > ul > li" data-pacnav-mobile-width="820"> サービス インバウンドマーケティングサービス MA運用サービス 製品 HubSpot HubSpot CMS テンプレート ソリューション 事例 資料ダウンロード ブログ 「カスタマージャーニーとは？プロが教えるマップの基本と作り方」では、カスタマージャーニーの概要とカスタマージャーニーマップの基本的な作り方に関してご紹介しました。 カスタマージャーニーとは、見込み客や顧客が自社の商品やサービスを購入するまでに辿るプロセスのことです。 見込み客や顧客のあらゆるタッチポイントにおいて、どのようにして接点を設けて、どういう体験をしてもらうかを事前に定義しておくこと、つまりカスタマージャーニーの設計をしておくことで、見込み客や顧客を最高の体験で満足させ、企業や組織のゴール
全然売れないECサイトがやりがちな4つのダメUX
StanはオムニチャネルコマースにおけるSaaSソリューションプロバイダー、Agiliron Inc.のCCOです。彼は30年以上のキャリアがあり、BtoC、BtoBのソフトウェアのローンチなどにも関わってきました。 大繁盛なECサイトがある一方で、ぜんぜん儲からないECサイトも存在します。そのようなECサイトはなぜ儲けを得られないのでしょうか。その原因は多々あります。例えば、商品そのものの品質が悪いということや、登録にとてつもなく時間がかかるということ。その他にもウェブサイトからの反応がなかったり、サイトの所有者や運営団体が不明で、実体そのものが疑わしかったり… このように、ECサイトが期待したほどの成果が得られない理由は様々ありますが、最大の要因はなんでしょう？ それは、「良いユーザー体験の欠如」です。 商品やサービスを販売しているサイトの目的は、クライアントを惹きつけ売り上げを増やす
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
グラフィックデザイナーに学ぶ、表現の幅を広げるためのヒント | FICCナレッジブログ | FICC
デザイナーとして日々の制作に向き合っていると、自分のデザインにマンネリを感じることはありませんか。クライアントや商品が変わっても同じあしらいをよく使っていたり、アクセントの付け方が似ていたり。もちろん自分の中で定番のデザインがあることは、効率的でもあり、デザインの個性とも言えます。しかし、そのマンネリを抱えたままで良いのでしょうか。 そこで今回は、Webの領域から少し視野を広げて、ビジュアルコミュニケーションの源泉とも言えるグラフィックデザインから、表現の幅を広げるためのヒントを探ります。 現在フリーランスで活躍されているアートディレクター／グラフィックデザイナーの横山 徳（よこやま のり）氏をFICCにお呼びし、勉強会を開催しました。普段どのような考え方でデザインを制作し、またどのようにその表現力を身につけているのか。Web制作にも活かせそうなヒントを伺いました。 お互いの実績を紹介し合
HCD-Net
人間中心設計（HCD）専門家制度は、人間中心設計推進機構（HCD-Net）が実施する専門家認定制度です。 人間中心設計専門家とは 受験応募要領 資格更新手続き HCD認定ニュース 認定者一覧 認定専門家インタビュー
userflowpatterns.com - このウェブサイトは販売用です！ - userflowpatterns リソースおよび情報
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.
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
直帰率の改善にウフフ！スマホサイトのメニューをアプリっぽくしてみたら
WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 メニューをアプリっぽくフッターに固定してみたら、直帰率が10%ほど改善しました。昨日の今日の話なのであまりアテにはならぬ的な見方もできますが、これをポジティブに捉えた方がさらなる工夫への弾みになります。 それで、新たに前後の記事へ移動できるボタンを加えました。利用したjQueryのプラグインやアイコンフォントは前記事で紹介してるので、今回は知っ得な「WordPressの条件分岐」について、触りだけにはなりますが書いておこうと思います。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサ
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://geeks-dev.hateblo.jp/entry/%E3%81%95%E3%81%99%E3%81%8C%E3%81%AE%E7%A7%81%E3%82%82-ios9-%E3%81%AB%E3%81%AF%E3%82%AC%E3%83%83%E3%82%AB%E3%83%AA%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%A7%E8%A6%8B%E9%99%90%E3%82%8A%E3%81%9F/
プレゼンや企画書作成に役立ちそうな無料のWebサービス11選｜All About（オールアバウト）
http://dandkagency.com/extensions/velositey/