Webサイトやデザイン制作で、やたらと時間がかかってしまうとお困りのクリエイターの方へ。
この記事では、SNSなどでいま話題の最新ツールやフリー素材を50個まとめており、制作時間を短縮したいというひとに選ばれています。
日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。
AI関連ツール
RenderNet – Create AI images with Unmatched Control
一貫性のある同一人物によるキャラクター画像を生成できるAIツールで、人種やスタイル、性別などはもちろん、顔はそのままでポーズの変更や、背景の再生成などが可能。
Textify — Fix text in images — Storia AI
元の背景を維持したまま、シームレスに文字テキストのみを変更できるAIツール。既存のフォントスタイルに合わせることも、新しいものを選ぶこともできます。
Upscayl – Free AI Image Upscaler
解像度の低い写真をAIが自動でアップスケールしてくれるツール。デスクトップ版はダウンロードでき、オンライン版は現在ウェイティングリスト待ち。次回アップデートで生成が5倍早くなるそう。
Web便利ツール
CSSのみでスタイリングされた図形シェイプのコレクション。クリックでソースコードをコピペでき、ほとんど全てのし図形はグラデーションをつかったカラーリングも可能です。
この記事ではCSSのborderプロパティを使わずにできる、”フェイク”ボーダーやアウトライン、さらにはSVGを使ったアニメーションの例を5つご紹介します。
Rebrand — Stellar brand bento inspiration
リブランドしたデザインコンセプトやBento UIレイアウト、プロダクトページなどを、アニメーションGIFのサムネイル紹介する新感覚のWebギャラリーページ。
最新ウェブデザインをいち早くチェックできる、オススメWebギャラリーサイトをまとめて、随時アップデートしています。
インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にもどうぞ。
Image Stack Entrance Animations
画像を積み重ねて面白いイントロ・アニメーションを作成する方法を紹介します。このアイデアは、ユニークな動きの組み合わせを作成すること。 デモページ
On-Scroll Expanding Image Animation within Typography
スクロールに合わせてタイポグラフィー内の画像が拡大するアニメーションのWebコンセプト。デモページ
Model Texture Transition and Procedural Radial Noise using WebGL
WebGLを使った実験で、3D缶モデルのテクスチャ遷移と、プロシージャルな放射状のノイズ・フィールドという2つの視覚効果を検証しています。 デモページ
GitHub Next | Copilot Workspace
、開発者が自然言語でコードのブレストから実装計画、構築、テスト、実行まですべて行えるようにする開発環境ツール。GitHubリポジトリまたはライブラリに統合する予定。現在ウェイティングリスト待ち。
deco.cx: the open-source, headless frontend platform
基本的なノーコードのサイトビルダーと複雑なフルコードのセットアップのギャップを埋めることで、成長中のeコマースブランドの開発者が高性能なデジタル体験を作成できる注目ツール。
迅速な開発、簡単なメンテナンス、アクセシビリティのために最適化されたオープンソースのUIコンポーネントライブラリの最新バージョン。インポートするだけで、設定は不要。最新のアプリを構築するために必要なものがすべて揃います。
Subframe – The best way to build UI, fast.
本番環境にそのまま対応でき、UIを迅速に構築できるコンポーネント集。ドラッグ＆ドロップのお手軽操作で、だれでも簡単なビジュアルエディター。
CLONE UI | design – Generate UI components with simple prompts
AIをつかって再利用可能なコンポーネントのHTMLコードを生成できるサービス。簡単なプロンプトで要求されたコンポーネントのバージョンの生成も可能。
CartoSVG – Design gorgeous interactive maps
軽量で美しいインタラクティブなSVGマップをブラウザ上で簡単に作成できるツール。ページ右上にある「Examples」よりサンプルを閲覧できます。
「Webサイトのインスピレーション欲しい」「デザインのアイデア共有したい」「打ち合わせの見本資料があれば、、」
そんなときは、優れたデザインで話題となっている国内外の最新Webデザインをチェックしてみましょう。
デザインツール
Spaceバーを押すたびに、美しい5色の配色カラーパレットを瞬時に生成してくれるので、アイデアがまったくないときのインスピレーションにも。画像からカラーパレットを抽出できたり、その他のツールも便利。
キーワードに合った配色を瞬時に生成してくれるカラーツールで、サンプル用のビジュアルモックアップと一緒に提案されるのもポイント。無料利用は一日3回まで。
300 Free Marble Textures / Backgrounds [4K Resolution]
エレガントで、とてもリアルな300点の大理石テクスチャ素材セット。特にラグジュアリーで高級感のあるデザインにオススメ。
200種類に及ぶ４K解像度の高品質な黄金テクスチャが揃うフリー素材。光沢感のあるものからマットな素材まで、豪華でエレガントな雰囲気を演出できます。
超リアルな黄金テキストエフェクトとの相性もばっちり。
Free Doodle Patterns (500+ Seamless Patterns)
落書きしたようなユニークな手描きイラストを楽しむことができる、500枚のエキサイティングで超高解像度なパターン素材セット。シームレスで、どんなサイズにも引き伸しできるのが、パターン最大のメリット。
Free 80s Patterns (500+ Seamless Patterns)
1980年代のカラフルでポップな幾何学パターン、その数500枚を揃えた巨大コレクション。手軽に継ぎ目のないシームレステクスチャとして活用できます。他のパターン素材もおすすめ。
36 Vector Metallic Gradients To Add Some Shine To Your Artwork
Illustratorでメタリックな光沢感を表現したいときにおすすめの素材で、ゴールドやシルバー、ピンクゴールドなど36色の光沢グラデーションが揃います。
200+ Free Redaction Photoshop Brushes
落書きスケッチのようなブラシストロークとマーカーだけを集めたPhotoshopブラシコレクション。デザインのあしらいにも便利で、サイズや色も自由にカスタマイズでき使いやすい。テクスチャ版もあります。
おしゃれ英語フォント本命！商用OKな無料セリフ書体おすすめ55選
2年ぶりのアップグレード。商用利用できる本当に美しい英語セリフフォントを厳選してご紹介。
よりスッキリとシンプルな無料のサンセリフ書体と一緒に利用するだけで、おしゃれな見た目を演出できます。
商用可！手書きでナチュラルな無料フォント決定版（日本語・英語）
オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きフォントを検討中のひとにおすすめしたいコンテンツ。
今回は、商用利用できる手書き風フリーフォント素材をまとめてご紹介します。
おしゃれクリエイターは知っている、ずるい最新フリーフォント50選
このリストは、10年以上フォントを集め続けているフォント好きが選んだ、デザイン性を重視した最新フリーフォントを日本語、英語に分けてまとめています。
商用ライセンスの有無も記載しています、あなたのお気に入りフォントを見つけてみませんか。
Google Fontsには現在、64の日本語書体が提供されており、すべてのウェイトを合わせると、132フォントが商用OK＆完全無料となっています。
その中でも「使える」フォントのみを厳選リストでご紹介。
Figma・アイコンツール
DesignCode UI – Figma Design UI Kit & Design System
ノーコードツールFramerとの統合が可能な、Figma用UIコンポーネントとテンプレートを含むデザインシステム。無料版には50個のUIキットが用意されています。
Instagram – UI Kit 2.0 | Figma
InstagramのUIデザインを完全再現したFigma用UIキット、220を超えるコンポーネントが用意されており、デザインシステムやバリアブルにも対応。ドラッグ&ドロップで手軽にデザインを作成できます。
Gradient Generator · Learn UI Design – Figma
さまざまな色空間で補間された線形、放射状、円錐形のグラデーションを生成し、より豊かで鮮やかなグラデーションを生成します。ライブ更新なので、結果を簡単に表示して調整できます。
Mapbox デフォルトスタイルまたは Mapbox Studio で作成したカスタムマップスタイルから画像を取得します。緯度、経度、ズーム、方位、ピッチなどのマッププロパティをマップ上やフィールドコントロールを使用して変更できます。
70+ Free Desktop Mockups & Templates | Figma
70以上のレイアウトが用意されたテンプレートは、ウェブやデスクトップのデザインコンセプト作成に最適なアイテム。
UI向け、国旗、支払いアイコン合わせて7000個が揃った、完全無料のアイコンコレクションで、デザイナーやクリエイターはいざというときにあれば重宝しそう。
キーワード別にアイコンを探すことができる巨大アイコンコレクション集。どんなデザインにも合わせやすいシンプルさが特長で、すべてオープンソースライセンスの商用OKなアイコンだけを集めています。
ユニーク・面白ツール
「マリオカート８」でどの設定がもっとも速いのか、各オプションとキャラクターを比較しながら考察したWebプロジェクト。最速キャラクターと「フレーム」「タイヤ」「グライダー」３つのパーツをカスタマイズし、真のトップレーサーを探ります。
ブラウザ環境でインタラクティブな音楽体験を作成できるWebオーディオフレームワーク。規制のシンセサイザーやエフェクトなどの機能を提供中。ミュージシャンとオーディオ・プログラマーの両方が利用できるWebアプリケーション。
前回のまとめがこちら。Web便利ツールとデザインツールで分けて紹介しています。「Webサイト制作がもっと楽になる方法ってないの？」「Web制作の最新ツールを試してみたい」そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。
「こんなのあったら便利なのに、」を叶える、かゆいところに手が届く便利ツール・素材を中心に、無料で利用、ダウンロードできるものをセレクトしています。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
