アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？　そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると

Web to Figma is the ultimate plugin to collect and save, design inspirations into Figma as flawless components. Farewell, screenshots! Web to Figma is the ultimate plugin to collect and save, design inspirations into Figma as flawless components. Farewell, screenshots!

「ウェブサイトのアイデアが浮かばない」 「刺激的なインスピレーションが欲しい」 「打ち合わせでイメージをすり合わせたい」 そんなときに目を通したい、世界で話題の最新Webデザインをまとめてご紹介します。 2023年のデザイントレンドを意識した作品から、時代に関係なく愛されるシンプルなスタイルまで、幅広いセレクションを取り揃えています。 レイアウトや配色などの参考にできるのはもちろん、魅力的な動きのアニメーション探しにもおすすめです。

本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。今回焦点を当てるのは「Figmaで図表をデザインするときの時短アイディア」についてです。 こんにちは！SmartBankのデザイナーをしている春山（@yuki930）です。 私たちは、B/43というVisaプリペイドカードと家計簿アプリがひとつになった「家計簿プリカ」という新しいジャンルのサービスを運営しています。 第2回では、「Figmaで図表をデザインするときの時短アイディア」をテーマに、Figmaでフロー図やグラフを作るときの工夫をご紹介します。 Figmaで効率よくフロー図を作る 最初は、次のようなフロー図を効率よく作るためのアイディアについて、B/43のユーザーインタビューページに掲載している「お金のふたりの家計管理マッ

クリエイターの作業をラクにする最新Web、オンラインツール33個まとめ これからはこれだ、次世代の便利ツールが大集合 「こんなツール、あったの？」と思ってしまう、話題の最新オンラインツールをまとめてご紹介します。 デザインのインスピレーションが欲しいときや、やりたくなり面倒な作業を一発完了したり、時短にもつながる便利ツールが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. デザインツール 2. Webデザイン便利ツール 3. モックアップ・UIツール 4. アイコンツール 5. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ デザインツール Ukiyoe Stock 4,200以上の和風、浮世絵イラスト素材を集めたサイト、他の無料イラストサイトと一緒にいかがでしょう。 Palet

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー

いかがでしょうか。 グレー(#808080)に近い色はやや見づらくなってしまっていますが、それ以外はかなり上手く表示できているのではないかと思います。 やり方上記のサンプルは以下のようなCSSで実現しています。 ">Copy <div> <span>hello world!</span> </div> <style> div { background-color: red; } span { color: red; filter: invert(100%) grayscale(100%) contrast(100); } </style> 以上、これだけです。 詳しい解説は後述しますが、colorとbackground-colorに同じ色を設定してから、文字色だけCSSのfilterで見える色に変化させる仕組みです。 なお、divとspanをセットにすると背景色にもフィルターが適用されてし

こんにちは、デザイナーのしーちゃんです。 突然ですが、デザイン時にアイデアが出なくなってしまったことはありませんか？ 私は何度もあります……。 そういうときの解決策は色々あると思いますが、私の場合はネットで色々検索して、他のデザイナーの方々のデザインを見ることで新たなアイデアのヒントを得ています！ まだ解決策が確立していなかったり、いつもの解決策を行ってもなかなかアイデアが降りてこないとき、この記事で紹介するサイトを見て着想を得ていただけると幸いです！ AIGA （Eye on Design） 画像引用元：AIGA AIGAはアメリカにある最も古く、最大のデザイン会員組織です。 Eye on Designブログには、デザインに関するいくつかのユニークなトピックがあって、教育やタイポグラフィの記事など、多種多様な記事が掲載されています。 また9つの主要なカテゴリに分類されていて、一気に色々な

デザインスタジオであるSTARRYWORKS inc.は、昨年秋からロースター・カフェを開業しました。そのお店の名前に合わせて「Hue」という欧文書体を開発することになった、そのプロセスや開発の裏側を紹介したいと思います。 1. お店のコンセプトは「色で選ぶコーヒー」お店の名前は「Hue Coffee Roaster」といいます。「Hue」（ヒュー）は色相や色味という意味の英語で、コーヒーのメニュー名を産地や豆の品種、焙煎度合などではなく、「色」の名前で表現することでより気軽にさまざまなコーヒーを楽しんでいただくことをコンセプトとしています。 お店のInstagram 私はコーヒーが好きで毎日飲みますが、豆の品種や産地などは詳しくなく覚えられずにいました。以前注文したものが美味しかったからまた飲みたいと思ったり、前回とは違うものに挑戦してみたいと思っても、ややこしい地名などで覚えられず、う

こんにちは、GaudiyデザイナーのTORAJIRO（@jirosh1998）です。 『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。 このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋（mizoさんをはじめmikanのみなさん、具体的なアウトプットの公開まで許可いただき感謝です！心広すぎ！） 読んで欲しい人 - これからチームでデザインシステムを作っていきたい - コンポーネントライブラリをFigmaで構築したい - Figmaをリファクタリングして、デザイナーの作業効率を上げたい デザインシステム本題に入る前に、このnoteで書いている「デザインシステム」の定義について触れておきます。デザインシステムとは「良いデザインを『効率

以下は、Jeff Ong が書いた WordPress.org 公式ブログの記事「Configuring Theme Design with theme.json」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 WordPress 5.8以降、新しいツールである “theme.json” をテーマ開発に利用できるようになりました。初めて聞いたかもしれませんし、すでにこれを試用し、テーマを開発しているかもしれません。いずれにせよ、今は WordPress テーマにとってエキサイティングな時期ですので、この記事を読んでいただけて嬉しく思います。 当記事では、この新しいフレームワークを簡単に紹介し、実用的なヒントと例をいくつか共有することで、何ができるのかを説明していきます。 theme.json とは 技術的に言えば、theme.json はテーマのディレクト

「ウェブデザインのアイデアが決まらない」「なんとなくイメージはあるけど、どう作ればいいかわからない」「打ち合わせでのサンプル見本が欲しい」 この記事では、そんなときに役立つ世界中のクリエイティブな最新Webデザイン33個サイトをまとめてご紹介します。 すぐれたデザインをたくさん見ることで、アイデアやインスピレーションになるのはもちろん、Webデザイン力をあげるきっかけにもなります。 雰囲気やレイアウトはもちろん、配色やフォント選び、トレンド性のあるパーツの使い方など、用途に応じて参考にしてみるとよいでしょう。 Webデザイン力を鍛える最新良質ウェブサイト36個まとめ Kazuki Noda Portfolio まるで本物の木漏れ日がウェブサイトにかかっているようなエフェクトにはじまり、ブルーを基調とした落ち着いた配色、フォント選びまでセンスが光るポートフォリオサイト。 まるでペンキで塗り替

GUIにおけるアイコンとは、プロダクトを触れるユーザーに対して、機能や動作を抽象化してシンプルかつ直感的に伝達させる、文字情報に頼らない記号です。 基本的に、記号が内包する意味には受け手によって解釈の余地があるような状態であってはなりません。しかし、ユーザーに対して、シンプルに正しい意味を伝えることが出来るという前提さえ踏まえれば、それを成すスタイリングは作り手やプロダクトによって様々な表現が可能な余地が残されています。 つまり、アイコンは、記号としての機能性に加えて、装飾としての役割も抱く、プロダクトGUIにおけるスタイリング定義の標本となり得るということです。 前段 「Ameba」について 「Amebaらしい」アイコンとは何か 塗りと線のルール 「Amebaらしい」形状 「Ameba Sans」の形状分析と曲率定義 線の太さのルール 命名規則を決める Library化 リプレイス まと

MicrosoftからAndroidやiOSのスマホのUI向けにデザインされたSVGアイコンを紹介します。もちろん、デスクトップで使用しても問題ありません。 アイコンは角が丸く、形状が単純化されており、スマホでの視認性や操作性が考慮されています。スタイルはソリッドとベタ塗りの2種類、2,186種類すべてがSVGアイコンです。 Fluent Icons ※オープンソースなので、有志によるサイトも作成されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンは全部で、2,186種類！ アイコンのスタイルは、Regularのソリッド、Filledの塗りつぶしの2種類。 スマホのUI用に、24pxでデザインされたアイコン。 ダークモードにも対応。 アイコンはSVGで、コードのコピーあるいはファイルのダウンロードで利用できます。 すべてSVGアイコンなので、サイズやカラー

この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

2020年のデザイントレンドと注目のWebサイト5選 | アドビUX道場 #UXDojo 連載 エクスペリエンスデザインの基礎知識 Webサイトのデザインおよび制作のための技術は、年々利用しやすくなっています。数時間でコードを書かずにサイトを公開できるプラットフォームを提供するSquarespaceやWixはその好例です。 一方、市場における競合はとても激しく、そのためユーザー体験がますます重要視されるようになっています。適切にサイトをデザインすることができれば、訪問者に良い印象を与え、再度訪問したいという意欲を持たせる可能性も高まるでしょう。 では、どのようにデザインすればサイトを際立たせることができるのでしょうか？優れたWebデザインの例はいくつも存在しますが、それらを見つけ出して優れている理由を特定するのは手間のかかる作業です。そこでこの記事では、2020年のベストデザインと呼べるW

この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 Ai、人工知能を利用した、これまで面倒だった作業を改善できるツールも見かけるように。また、プロトタイプツールFigmaに関する便利なプラグイン、テレワークによるオンラインミーティングで使えるさーびすなども増えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Eazy CSS どんなウェブサイトのデザインも、コード知識不要でタ

1991年に原書が刊行された『絵には何が描かれているのか　絵本から学ぶイメージとデザインの基本原則』。絵の作用とその原則を知ることで、作ること／見ることについての新しい視点が得られ、理解を深めることができます。 本書の日本語版刊行を記念して、第一線で活躍するデザイナーや研究者の皆様による選書ブックフェア〈心を動かす絵のひみつ〉を開催しました。選者は、本書に特別解説を寄稿いただいた山本貴光さんをはじめ、松田行正さん、名久井直子さん、大原大次郎さん、細馬宏通さん、平倉圭さん、菅俊一さんの豪華7名です。 本記事では、皆様がその際にセレクトした選書リストを、各選書へのコメントとともに公開いたします。 選者：山本貴光 ～はじめに～ モリー・バング『絵には何が描かれているのか』の横に置いて読みたい本を27 冊ほど選んでみました。全体を大きく三つのパートに分けてご紹介します。「イメージと人間のあいだ」「

この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。 2019年の暮れに公開されたサイトも含み、多彩なアニメーションや鮮やかな配色カラーパレット、ストーリーテリング手法など注目のスタイルを揃えました。また、高級感のあるサイトデザインが特に多いシリーズとなりました。 いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ Sussex Royal イギリス王室からの離脱や、王室を連想させる「サセックス・ロイヤル」の商標登録など、なにかと話題となっているサイト。閲覧できるのは今のうちかも。 Spotify for Pets 自分の聴いている音楽、ジャンルをもとに、愛犬などのペットに合ったプレイリストを自動生成してくれるオンラインサービス。 Coachella 毎年チケット販売とともに完売の

イラストレーションは、デザインを通して文字を表現する視覚的なテクニックです。進化を続けるイラストのトレンドは、高品質でモダンなアート作品を作成するために、豊富な知識やテクニックのアップデートが欠かせません。 この記事では、いま世界で注目されているイラストトレンド10個を具体的なデザインサンプル例と一緒にご紹介します。 まずはすべてのトレンドに関連する。Pantoneが発表した2020年の流行カラー「クラシック・ブルー Classic Blue」についても知っておくと良いでしょう。 2020年の色が決定！夕暮れ空のような「クラシック・ブルー Classic Blue」パントンから発表 では、ここからイラストのトレンド10個を詳しくみていきましょう。 1. 幾何学デザイン（Geometric Design） シンプルな幾何学デザインは、2020年の主要トレンドのひとつと言えるでしょう。ミニマル