「ウェブの制作コストと時間を節約したい」 「デザインを統一して、一貫性をもたせたい」 「制作に必要なものだけまとめたい」 「シェアしたときのデザインのずれを防ぎたい」 プロジェクトを続けているうちに、ページによってボタンや文字サイズ、余白スペースの幅などがばらばらで、統一感がなくなってしまった、なんて経験があるかもしれません。 さらに、複数のチームによる開発では、デザインのズレだけでなく、同じ作業を繰り返すなど非効率さが目立ち、全体のモチベーションもだだ下がりなんてことに。 一貫したデザイン設計により、技術的な問題を防ぐことができるデザインシステムを作成しようと思いつつ、最初に作るのが時間もかかって大変だから、と導入をあきらめていませんか。 今回は、デザインシステムとしてそのまま使えるFigma用おすすめUIキットをまとめてご紹介します。 プロトタイプ作成に必要なパーツが一式すべて揃い、プ

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し

この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ

この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを

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

この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 新しいツールや機能をうまく駆使することで、時間のかかる面倒な作業もラクにこなし、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール Web制作フ

海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい

北アメリカに生息する鳥類を、実際に大自然を旅しながら超リアルに描写した画家ジョン・ジェームズ・オーデュボン（英: John James Audubon）。 1839年、イギリスで出版された「アメリカの鳥類（英: Birds of America）」全435枚が、180年以上の時を超えて、デジタルアーカイブとして無料ダウンロードできるようになったので、今回はご紹介します。 画集「アメリカの鳥類」とは？ 「アメリカの鳥類」は、画家オーデュボンが1827年から38年にかけてアメリカ各地を旅しながら、鳥の観察を続け、水彩画を元にした435枚の彩色銅版画です。 それまでの標本を元に描いた博物画とは異なり、自然の中に生きる野生の鳥たちを躍動的に描いた点が特長。さらに一羽一羽の鳥が、実物大の大きさで描かれている点も大きな特色です。 今回、野鳥の保護を目的とする自然保護団体「全米オーデュボン協会（英: A

最適化されていない画像は、特に初めて読み込むときに、ウェブサイトのパフォーマンスが低下する主な原因のひとつです。解像度と画質によっては、Webサイトの合計サイズの70%以上を画像が占めることもあります。 最適化されていない画像を本番環境でも使用したことで、ウェブサイトの読み込みスピードが大幅に遅くなったということもしばしば。経験の浅いデベロッパーは、あまりこの潜在的な問題を認識していないかもしれません。同じように、画像の最適化に便利なツールや解決アプローチを持ち合わせていないでしょう。 この記事では、Web用に画像を最適化するための便利ツールと解決アプローチをまとめてご紹介します。 コンテンツ目次 JPG画像ファイルサイズの計算方法 オンライン画像最適化サービスの利用 自動化ソリューション 画像読み込みの最適化 CDNの利用 乾いたインクスタイル WebP画像形式 高ピクセル密度画面（Re

この記事では、ウェブサイト制作をより手軽で簡単にする最新CSSライブラリをまとめてご紹介します。制作時間の短縮はもちろん、新しく登場するCSSの学習ガイドとしても最適です。 ウェブ制作に携わるすべてのひとにオススメしたいお役立ちツールが揃っており、多くはGitHubよりセレクトされています。これらのツールを使わないにしても、CSSの可能性を学ぶことができるでしょう。 これは便利！ウェブ制作がサクサク捗る新作CSSライブラリ、ツール15個まとめ CSS Wand CSSをベースとしたアニメーションをボタンひとつでコピペできるシンプルなCSSライブラリ。思い通りにカスタマイズできるので、ボタンや入力フォーム、ローディングアニメーションなどを素敵にしたいときに試してみましょう。 Water.css その名の通り、「水（Water）を加えるだけで」、ウェブサイト制作の雛形として利用できるCSSフレ

この記事では、Adobe XDにインストールしておくことで、デザイン制作をより快適にしてくれる無料プラグインをまとめてご紹介します。 実際にAdobe XDにインストール、使用してみて便利だったプラグインのみを厳選しています。プラグインを利用して、制作スピードを爆速にしてみませんか。 コンテンツ目次 1. プラグインが利用可能に 2. Adobe XDプラグインのインストール方法 3. Adobe XDプラグインの使い方 4. おすすめ無料プラグイン（デザイン効率化） 5. おすすめ無料プラグイン（コンテンツ生成） 6. おすすめ無料プラグイン（描画デザイン系） 7. おすすめ無料プラグイン（コラボレーション・ハンドオフ系） 8. ショートカット機能で作業効率をさらにアップ Adobe XDでプラグインが利用可能に Adobe XDは定期的にアップデートが行われており、昨年10月にリリース

ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作

思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】 コピペで実装できる、最新WebテクHTML/CSSコードスニペットまとめ Turbulence font – SVG マウスの動きに合わせて、

ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく！

CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ

ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース

ホームページ制作やブログ、プレゼンテーション用資料作成など、あらゆるデザイン案件でイラストやアイコンは、分かりやすく情報を伝えることができます。しかし、いざ必要な素材を探すとなると、時間がかかってしまうこともしばしば。そんなときは事前にいくつかデザインツールとして、お好みの素材をストックしておくことで、デザインアイデアやヒントにもなって便利です。 今回は、無料ダウンロードできるアイコン素材やイラスト素材を厳選して48個まとめてご紹介します。総アイコン素材数は、7000個！を超える新作アイテムばかりなので、幅広いデザイン案件に活用してみてはいかがでしょう。 全て無料！高品質で使いやすい新作アイコン素材まとめ Designer Workspace Illustrations PhotoshopやIllustratorなどを日頃から扱うデザイナーに特化した、イラスト・アイコン素材集。.Aiと.E

デザインに欠かせない配色選びは、デザイナーにとって頭を悩ませる問題のひとつ。もしコンセプトにあった色の組み合わせを素早く、しかもたくさんのサンプル案と一緒に確認できるとしたら？ Khroma は、そんなデザイナーの想いを人工知能をつかって解決したオンライン配色ツールです。お好みの色を追加することで、より精度の高い組み合わせを実現できる、まさに「育てる」配色ツールと言えます。 Khroma とは。 Khroma とは、人工知能 Ai を利用することで、選択した色を解析し、実用性の高いカラーパレットを生成するオンライン配色ツールです。 このツールを使えば、以下のようなスタイリッシュな配色をほんの数分で作成することができます。今回は、Khroma の使い方を詳しくみていきましょう。 Khroma の使い方 まずは、お好みの色を50色選んでいきます。「50色」と聞くと多いように感じるかもしれません

「ウェブサイトを作成したい、でも時間もスキルもない。」そんなときに役立てたいのが、あらかじめデザインされたテンプレート素材です。時間の節約になるだけでなく、デザインのベースとして使うことで手軽にカスタマイズできます。 今回は、無料ダウンロードできるPhotoshop最新ウェブテンプレート素材をまとめてご紹介します。テンプレート素材はどれもレイヤーごとにきちんと整理され、必要に応じて手軽にカスタマイズできるように設計、デザインされています。今後のデザインプロジェクトにいかがでしょう。 ウェブサイト作成に困ったら使いたい！Photoshop無料テンプレート素材まとめ 2017年版 作業ペースが上がる！ブックマークしておきたい無料UIデザイン素材40個まとめ Photoshopで使える！美しい Web サイト用の無料テンプレート素材まとめ Edd – Landing Page Sketch Fr

ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ