キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート
最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。 ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。 実装は非常に簡単で、応用も利くので、ぜひお試しください。 Stunning hover effects with CSS variables by Tobias Reich 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インスパイアされた美しいグラデーション グラデーションが変化するエフェクトの実装方法 実装したデモ このエフェクトの可能性 よくある質問と答え インスパイアされた美しいグラデーション Groverにある遊び心溢れる美
![[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/c1b35ec4c552cd9a134d1163d291381be76f2c4e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019030401.gif)
イラスト作成もOK！ベクター素材を無料ダウンロードできるWebサイト厳選22個まとめ
無料で利用できるベクター素材は、制作時間のかかりそうなイラストやパーツなどを手軽に利用できる、グラフィックデザインでも重宝するアイテムです。 今回は、さまざまなシーンで利用可能な、高品質なベクター素材を無料ダウンロードできるサイト22個を国内、海外編に分けてご紹介します。 ベクター素材のクオリティが高いのはもちろん、商用利用にも対応したフリー素材が数多く公開されています。制作時間が短縮したいというときにいかがでしょう。 デザイン力で勝負する！ベクター素材を無料ダウンロードできるWebサイト厳選22個まとめ 海外編（全12サイト） unDraw デザイン性の高さだけでなく、豊富なジャンルを網羅したスタイリッシュなベクターイラストを多数公開しています。すべてのイラストのタッチが統一されているので使いやすく、その場で配色を変更、確認することも可能。 Humaaans 着せ替え人形感覚で、人間のイ
851チカラヨワク配布だす
851チカラヨワク Ver 0.02 (最終更新：2016/05/26) 現在の収録文字数：2,457文字(スペース除く) ※ダウンロードしてからでもいいんで、利用規約的な何かを読んどいてくださいませ タイプ：手書き、デザイン、プロポーショナルフォント 対応文字：ひらがな、カタカナ、ラテン文字(英語)、数字、記号(少し)、漢字(常用漢字) サンプル： -----せつめい----- ・改造・無料での再配布はご自由にどうぞ ・自分で作ったとか言い張るのはNGでお願いします 一応著作権は放棄してませんので ・再販もNGでお願いします 売るときは僕が売ります ・商用利用可です チラシや同人誌や動画などにご自由にお使いください 特に許可はいりません（ちなみに「使ったよ！」という報告は普通に作者が大喜びします） 雑誌等で紹介していただける場合も無許可でOKです (こちらも同様報告していただけますととて
無料のマテリアルデザインフレームワーク10選
ライターであり、Sufism:A Brief Historyの著者。メインの分野はオープンソース、モバイル開発、WebCMS、ベクターアートなど。電子ジャーナルのBrave New Worldのチーフ＆エディター。 デザイン原則に科学と技術のイノベーションを組み合わせたら、なにが起こるでしょうか？ まさにGoogleが実践し作りあげた、マテリアルデザインのコンセプトが創られるのです。 マテリアルデザインとは、クラシックデザインの原理やルールと、サイエンスやテクノロジーの可能性やきまりを結びつけたビジュアルデザインコンセプトです。マテリアルデザインだけでなく、関連するツールやリソースも同様に人気があります。 この記事では、マテリアルデザインスタイルを採用するWebやモバイルプロジェクトに最適なフレームワークをまとめました。 マテリアルデザインUIキットとマテリアルデザイン活用の実例もまとめて
もうアイコン素材に困らない！CC0でSVG完備、420種類のシンプルにデザインされたアイコン素材 -Evericons | コリス
シンプルなアイコン素材は、重宝しますよね。 Webサイトやブログ、スマホアプリなどにぴったりな、シンプルにデザインされた無料で利用できるSVG完備のアイコン素材を紹介します。 CC0なので、商用利用時のクレジット表記は不要、複製、改変、配布などもOKで、使い勝手がかなりよいと思います。
[JS]さまざまなデータを最小限の記述でビジュアル化する高性能なJavaScriptライブラリ -Zeu.js
さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。 メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。 Zeu.js -GitHub 上記は静止画ですが、もちろんアニメーションで動きます。 デモのカラーは派手ですが、オプションで簡単に変更できます。 My Command Center Zeu.jsはCanavasベースで、外部ファイルと空のcanvas要素を用意し、あとはタイプとデータを定義するだけで実装できます。 <!-- 外部ファイル --> <script src="zeu.min.js"></script> <!-- 空のcanvas要素 --> <canvas id="text-meter" width="200" height="100"></canvas> <script> //
![[JS]さまざまなデータを最小限の記述でビジュアル化する高性能なJavaScriptライブラリ -Zeu.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/31b37dfb88801f7bd583e6d221be6ed9f89769cc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018091301.png)
商用利用無料！書道家「ダ山竹電」先生によるSVGの筆書き素材 -カリ蔵(カリグラ)
筆書きのかっこいい文字を使いたい！ 一回使うだけなのに、毛筆フォントをインストールするのは面倒！ そんな人たちの要望を叶えるべく、書道家「ダ山竹電」先生が立ち上がり、カリグラフィの筆書き素材がローンチしたので、紹介します。 筆書き素材は、個人でも商用でも無料で利用できます。 カリ蔵(カリグラ) 筆書き素材は、カスタマイズしてダウンロードできるのも大きな特徴です。 サイズやカラーを変更したり、文字にもいくつかのバリエーションが用意されています。
マイクロソフト、手描きスケッチからHTMLコードを自動生成する「Sketch2Code」
Microsoftは、手描きしたWebアプリ用ユーザーインターフェイス（UI）デザインのスケッチ画像を読み込み、実際に動くHTMLコードを自動生成する技術「Sketch2Code」を開発した。 この技術を使えば、ブレインストーミングで出されたアイデアを整理してホワイトボードに描いたUIデザイン案を撮影し、その場で実動プロトタイプ化して試す、といった作業が可能になる。まとめたデザイン案を改めて手作業でHTMLコード化する場合に比べ、設計プロセスが高速化されるだろう。 ユーザーは、まずデザイン案の画像をSketch2Code用ウェブサイトへアップロードする。Sketch2Codeシステムは、画像解析して描かれた枠や文字をそれぞれボックスやテキストに変換し、表示位置を整え、適切なエレメントに分類する。そのうえで、UI実現に必要なHTMLマークアップコードを生成する。
世界中の伝統文様2,200点超をダウンロードできる「文様百趣アーカイブス」スタート。東洋美術印刷より - デザインってオモシロイ -MdN Design Interactive-
「文様百趣アーカイブス」は、日本のみならず世界中の2,200点以上の伝統文様素材をダウンロードできる素材提供サービスだ。データは、波・雲・動物などカテゴリで分類されており、「桜」「兎」といったキーワードからも検索も可能。 サイト上の素材は、実在する陶器や着物等に描かれた伝統的な文様をハンドメイドでトレースしており、すべて編集可能なイラストレータデータ(.ai)で提供されている。拡大しても画質が損なわれないのはもちろん、色を変更したり、パーツのみで使用したり、追加で加工をするといった使い方も可能だ。 さらに、各素材に描かれた伝統文様の「出典」や込められた「意味」といった付帯情報もあわせて収録されており、先人たちの想いが込められた伝統文様を商品コンセプトに取り入れることで、造形の美しさだけではない、想いの伝わる商品をエンドユーザーに届けることも可能となっている。
esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること / Design Talk of esa - Speaker Deck
ハッカーズチャンプルー2018でお話させていただきました http://hackers-champloo.org/2018/ https://esa.io/
無料ダウンロード可能で商用利用もOKな内容が異様に細かいピクトグラム「human pictogram 2.0」
資料や配布物のデザインは悩みどころですが、「早く帰りたい人は利用してさくっと仕事を終えて帰宅しましょう」ということで、「フキダシデザイン」の作者であるTopeconHeroesのダーヤマさんが無料で商用利用も可能なピクトグラムを公開しています。「ピクトグラムはほとんどの場合、公共交通機関や、バリアフリーなどの標識に使われるため、雰囲気が真面目なものが多く、やや面白みに欠けるので、くだらないポーズなど多めにバリエーションを増やしていく事にしました」とのことで、ピンポイントすぎるピクトグラムの内容は、見ているだけでも楽しめます。 human pictogram 2.0 (無料人物 ピクトグラム素材 2.0) http://pictogram2.com/ トップページにはカテゴリ分けされていないピクトグラムがずらっと表示されており、ページ下部のボタンから「どんなピクトグラムがあるのか？」というこ
「わかりやすさ」を軸にデザインする - Hatena Design Group
Mackerelチームでデザイナーをしているid:takuwologです。 この記事ではMackerelがどのように情報をデザインしているのかを事例を交えて紹介します。 Mackerelとはエンジニアがサーバーを管理・監視するためのサービスです。 mackerel.io サーバーの管理・監視を行なうMackerelでは多くの情報を取り扱うことになります。扱う情報は大きく分けると3つあります。 サーバーの仕様や状態などの情報 サーバーを監視するためにユーザーが追加した設定情報 チームやユーザー個人の設定情報 上記3つを合わせると情報量はとても多くなります。そのため情報を「わかりやすく」ユーザーに提示することがサービスにおいて重要になってきます。 「わかりやすさ」とは何か ユーザーは日常的にMackerelを使用してサーバーの管理・監視を行います。そのため誰がどんな時に何が目的でMackere
Web制作者がチェックしておきたい、最近のWebサイトで注目されているデザインのトレンド -2018年3,4月 | コリス
デザインや実装で悩んだ時には、世界のクリエイターの間で注目されている新鮮なトレンドを見てみると良いインスピレーションに出会うことができます。最近のWebサイトで注目されているデザインのトレンドを紹介します。 自分にはない発想を見かけると、なんだか楽しくなりますよね。 3 Essential Design Trends, March 2018 3 Essential Design Trends, April 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ナビゲーションを表示しないトップページ -ポスタースタイル 02. Ultra Violetのカラーパレット 03. グラデーションとテキスト 04. 泡のような柔らかい塊 -バブル アンド ブロブ 05. 浮遊している矩形 -フローティング レクタングル 06
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
観衆を引きつける！文字だらけスライドの磨き方──澤円のプレゼン塾（その19） | リクナビNEXTジャーナル
Google Fonts正式版に日本語がやってきた！ | バシャログ。
こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons
UIデザイナーのためのMaterial Designの理解と実践
http://www.minimalist-kenki.net/entry/canva
http://www.life-is-bitter.com/entry/ui_checklist
