UI・UXに強い！デザインシステムにおすすめ Figmaプラグイン20選
Figmaの使い方はとてもシンプルですが、デザインシステムの作成となると話は別です。 ストレスの多い作業プロセスになりがちですが、幸いにもFigmaにはそんな苦悩から救ってくれる、便利プラグインが数多く公開されています。 プラグインはデザインプロセスに欠かせないツールで、プロジェクト特有の問題点を解決したり、面倒な作業を自動化するなど、時間短縮にもつながります。 しかし、膨大な数のプラグインから自分にあったものを探すのは時間がかかるのも事実。 ここでは、デザインシステムの作成、管理、運用に役立つFigmaプラグイン20個をピックアップしてご紹介します。 無料ダウンロードできる良質UIテンプレート集を活用して、すぐに新しいプロジェクトをはじめてみましょう。 Figma Tokens Figma Tokens プラグインは、プロジェクトの配色や書体、境界線の半径サイズや余白サイズなどのグローバ
これどうだっけ？を解決！Web制作の便利＆時短ツール50個を揃えた Toolb.dev
Web制作で日常的に使える無料のCSSやHTML、JSウェブツール50種類以上を提供しているToolb.dev。 なにかと面倒な作業をパネル上で直感的に行うことができ、リアルタイムでのプレビュー機能や作成したコードはそのままコピペも可能、Web制作でも活用機会の多いツールが揃います。 クレジット表記不要で、ユーザー登録をせず利用できるのも嬉しいポイントです。Web制作をサポートする便利ツールも一緒にチェックしてみてはいかがでしょう。 Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ Web制作を楽にする便利なSVGツール53個まとめ Web制作の面倒な作業が楽になるツール50個を揃えたToolb.dev 「これどうやるんだっけ？」いつも忘れがちなWeb制作の工程をサポートしてくれるToolb.devで利用できるツールは50を超え、現在ベータ版での提供となります。それぞれのツー
Web制作の効率、生産性アップ！話題の最新オンラインツール33個まとめ
この記事では、Webデザイン制作を効率アップさせる最新オンラインツール33個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しましょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. アイコンツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ We
デザイン経験不要！無料でデザインを作成できるDIYオンラインツール10個まとめ
できるだけ予算をかけずに、無料で高品質なデザインを簡単DIYできる方法をお探しですか。 この記事では、デザインの経験がなくても手軽にデザインを作成できる無料DIYオンラインツール10個をまとめてご紹介します。 InstagramやTwitterなどのSNS向け画像やYouTubeのサムネイルの他にも、はがきや封筒、雑誌やポスター、プレゼンテーション資料といった、幅広いジャンルのおしゃれなデザインを誰でも簡単に作成できます。 ドラッグ＆ドロップで利用できるテンプレートが豊富に揃っているので、デザインの知識や経験がなくても安心です。 コンテンツ目次 1. Canva 2. Adobe Spark 3. Crello 4. BeFunky 5. Easil 6. Stencil 7. Desygner 8. Piktochart 9. Pablo 10. Snappa デザイン知識不要！無料でデ
デザインシステムの作り方徹底ガイド 参考にしたい導入事例まとめ
この記事では、デザインシステムを作成するときの基本ガイドをまとめています。 この記事は3つのパートで構成されています。 デザインシステムを理解する（デザインシステムとは何か、いつ作るべきか？） デザインシステムの作成（作成プロセスとやっておきたい項目） デザインシステムの具体的なサンプル例（デザイナーとデベロッパー、それぞれの観点より） デザインシステム追加の検討事項（その他のコンセプトや参考文献など） *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、「プロダクト（Product）」という言葉を使用しています。 この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイル デザインシステムを理解しよう デザインシステムとは？ デザインシステ
人気上昇中！2019年に注目されているウェブデザイントレンド10個まとめ
この記事では、2019年現在人気となっているウェブデザイントレンド10個をまとめて紹介しています。 2019年のウェブデザインの動向としては、あらゆるトレンドの組み合わせやユニークなデジタルエフェクトなど、ウェブサイトやブランドを魅力的にするものが多く含まれています。お好みのトレンドを見つけて、今後のプロジェクトに活用してみてはいかがでしょう。 コンテンツ目次 1. 効果的なタイポグラフィー 2. グラデーションカラーの変化 3. よりナチュラルで本物の写真を 4. 個人の用途に合わせたイラスト 5. 3Dイラスト 6. モバイルファースト・デザイン 7. マイクロインタラクション 8. ユニークなアニメーション 9. グリッド無視の重なり型レイアウト 10. ビデオコンテンツの統合 1. 効果的なタイポグラフィー 2019年に入り、タイポグラフィーの人気はますます高まっています。大きく表
【2018年版】アイコンデザインの押さえておきたい流行トレンド8個と新作フリーアイコンまとめ - PhotoshopVIP
アイコンは、デザインの中でも重要な要素のひとつですが、同時によく見落とされがちな要素でもあります。ここでは、2018年のアイコンデザインの押さえておきたいトレンド8個を詳しく見ていきましょう。 これらのトレンド、ポイントを押さえることで、サイトやアプリの使いやすさ、ユーザビリティを改善するだけでなく、独自のデザイン性を表現し、プロジェクトをより魅力的に仕上げることができます。 後半では、実際にデザイン制作で利用できる新作フリーアイコン素材も一緒にまとめているので、こちらも参考にしてみてはいかがでしょう。 1. ラインスタイル・アイコンデザイン このアイコンスタイルは、流行り廃りがないデザイントレンドと言えます。その理由のひとつは、どんな背景デザインにも対応できる点で、人気のアイコンパックには通常、線画スタイルが一緒に収録されています。上記サンプル例のように、どんなサイズでも見やすく、分かり
ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく！
文字フォントが一瞬で美しく！手の込んだPhotoshopテキストエフェクト素材30個まとめ
入力した文字を見違えるほど素敵に、そして手軽に仕上げることができるテキストエフェクト。ボタンクリックするだけで高品質な見た目を完成できる、デザイナーは持っておきたい素材のひとつです。 今回は、無料ダンロードできる新作のPhotoshopテキストエフェクト素材をまとめてご紹介します。多くの素材は、スマートオブジェクト機能を利用しているので、別ウィンドウで文字テキストを編集するだけ、デザインに反映できます。より詳しい使い方については、以下のエントリーを参考にどうぞ。 ほんの数クリックで完成！文字をかっこよくするPSテキストエフェクトまとめ 魅せるテキストエフェクト！押さえておきたい無料デザインPSD素材24個まとめ 無料ダウンロードできる、参考にしたいPhotoshop用テキストエフェクトまとめ 3 Photoshop Gold Text Styles キラキラ感がリアルな黄金文字テキスト用P
シンプルなウェブデザインを作成する、知っておきたい7つの基本ルール
KISS（略語: Keep it simple, stupidのコンセプトは、US海軍が取り入れた1960年ごろにはじまっています。KISSの原則は、ほとんどのシステムが複雑ではなく、単純であればもっとも効果的であることです。デザインプロジェクトでも同じことが言えます。 多くのグラフィックデザイナーは、早い段階でKISSの原則について学びますが、では実際にどのように活用すれば良いのでしょう。作成をはじめると見た目よりもう少し複雑であることが分かると思います。 今回は、シンプルなウェブデザインを作成する7つのルールをご紹介します。これらのルールを取り入れることで、ごちゃごちゃ感を取り除き、美しくシンプルなデザインに役立てることができるでしょう。 詳細は以下から。 1ページに１つの目標を設定しよう。 シンプルなデザインは、プロジェクトの目標やウェブサイトにおける各ページのはっきりとした目標から
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
Bootstrap利用、無料HTMLテンプレート素材まとめPhotoshopVIP |
新着記事
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事