こんなことできるの?!ホームページ制作が楽しくなる最新オンラインツール48個まとめ

by

in PHOTOSHOPVP on 2022-04-28

ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな便利な新ツールを揃えています。

https://photoshopvip.net/134594

Webデザイン便利ツール

  1. Loaders：HTMLとCSS、SVGで作られた無料のローディングCSSアニメーションライブラリ。デザインを邪魔しないシンプルな動きが特長。手軽にサイトに導入できるのもうれしい。
  2. Gradients Components AI：CSSグラデーションを組み合わせて複雑な配色やパターンを表現できる高機能オンラインツール。
  3. Ektogamat ThreeJS Boilerplate：ほんの数行のコードを追加するだけで、デモ機能を試すことができる、Threejsのスターターパック。
  4. 面白いウェブゲーム The Aviator を作成する方法：JavaScript と Three.js をつかった本格的なチュートリアル。デモページを確認でき、サンプルファイルもダウンロード可能
  5. A Typographic Scale Calculator：音楽の仕組みにヒントを得た、調和のとれた適切なフォントサイズを選ぶことができる便利ツール。
  6. Snap Font：あらゆるウェブページでフォントのライブプレビューを可能にするChrome拡張プラグイン。手持ちのフォントがサイト上でどのように見えるか、その場でチェック可。
  7. SheCodes All Cheatsheets：HTMLやCSS、JavaScript、VS Code、Bootstrap、Reactなどウェブデザインに関連する用語をチートシート形式でひとまとめに確認可。
  8. WordPress Block Pattern Directory：コピー＆ペーストするだけで、どんなWordPressサイトにも美しいデザインのレイアウトをすぐに追加できる WordPress のブロックパターンディレクトリ。
  9. Clover Cities：プログラミングの知識がなくても、誰でも手軽にレトロな「Web 1.0」スタイルのウェブサイトを作成できる、コード不要のホームページ作成ツール。
  10. Horizon UI：Chakra UI専用に開発されたReactベースの管理画面テンプレート。オープンソースによる提供。70以上のコンポーネントを自由に組み合わせるだけで、レイアウトを作成可。
  11. Kite：通常のコードエディタにAIテクノロジーをつかった自動コード補完機能を追加し、開発者にスーパーパワーを提供する未来のツール。
  12. TailwindPDF：Tailwindで作成したHTMLファイルをPDFファイルに変換、ダウンロードできるツール。納品書や履歴書などのサンプルを確認可。
  13. Tools Ocean：さまざまなファイルをPDFに変換したり、画像ファイル圧縮などあらゆるウェブツールがずらり揃った、いざというときに開きたいお助けページ。
  14. MassCode：開発者向けの普段づかいできそうなスニペット管理ツール。VSCodeと同じエディタで、ローカルでもサクサク軽快。

デザインツール

  1. Free Abstract Elements and Sketches：1300以上の手描きイラスト、スケッチ素材を揃えたコレクション。一括ダウンロードまたは個別の配色変更、ファイル形式のPNG、SVG、PDFからの選択も可能。
  2. Sine Wave SVG Generator：幅や太さ、ギザギザ具合なども細かく調整でき、作成した波ウェーブをSVGファイルでダウンロードできるオンラインツール。
  3. 3D Bay for Canva：だれでも手軽にデザインを楽しむことができるツールCanvaで、超立体的な３Dデザイン素材を無料で追加できるコレクション。
  4. Doodle Ipsum：アップデートされスタイルがさらに充実した、イラストをつかったダミー画像生成ジェネレーター、オンラインツール。
  5. Natural Women Collection：飾らない女性の日常をテーマにしたストックフォトサイト。そのままCanvaで利用可。
  6. The Gender Spectrum Collection by Vice：ライフスタイルや文化、アート、政治などに焦点を当てたメディア Vice による、性別によって定義しない自由な表現を目的としためずらしいフォトストックサイト。
  7. Reshot：4万以上のアイコン、1500以上のイラスト、25000枚の写真素材をクレジット表記なしで自由に利用可。キーワード検索や人気タグ別に探すことも可能。
  8. Let’s Enhance：画質を落とさずに画像の解像度を上げる、AIテクノロジーを駆使したオンラインツール。写真をアップロードするだけの全自動で、完成までも一瞬。
  9. Prism Distortion Effect for Posters：フォトショップに写真を放り込むだけで、プロ並みのプリズム加工を一発で作成できるPSDファイル。
  10. nodetoy：ゲーム開発アプリUnityで使える Shader Graph（シェーダー・グラフ）を直感的で使いやすいツールを使って作成、フォーク、共有することができる新しいプロジェクト。
  11. Retro 3D Devices：90年代のレトロなバイブスを感じる3Dイラスト素材集。無料デモ版では1つ素材をPNGとFigmaファイルでダウンロード可。
  12. 100 Cloud Photoshop Brushes：本物そっくりな雲模様100種類を表現できるフォトショップブラシ。スタンプを押すように使えて、仕上がりは超リアルな4Kサイズ対応。
  13. 20 Free Holographic Video Loops：七色に輝くホログラフィックテクスチャを利用した、動画用のビデオループ２０種類をまとめてダウンロード可。

配色ツール

  1. Design Gradients：ウェブサイトやグラフィックなどあらゆる作品に使える、48種類のCSSグラデーションカラーを集めた無料プラットフォーム。クリックでCSSコードをコピー可。
  2. Grainients：ザラザラとした粒状の質感を追加したグラデーション2000枚が揃うデザインライブラリ。この他にも、オーロラやBlobシェイプライブラリなども公開。
  3. Reasonable Colors：使いやすさや読みやすさなどのアクセシビリティに配慮した、魅力的な配色カラーツール。ソースコードはGitHubで公開。MITライセンスでだれでも自由に利用できるオープンソース。
  4. Color Morph：SVG形式のメッシュグラデーションをCSSで生成できるオンラインツール。トレンディな配色が多く、色数をカスタマイズすることも可能。
  5. UI Color for Tailwind CSS：HEXカラーコードを入力すると、自動でカラーパレットを作成してくれるツール。Spaceキーでランダム表示。

プロトタイプ・アイコンツール

  1. Material Symbols：2,500以上のグリフを1つのフォントファイルに統合。幅広いデザインバリエーションを持つ最新のGoogle謹製アイコン。シンボルは3つのスタイルと、4つの調整可能な可変フォントスタイル（フィル、ウェイト、グレード、オプティカルサイズ）で提供。
  2. Tabler Icons：ウェブサイトやスマホアプリを魅力的に、そして一貫性のあるシンプルで美しい見た目を実現したオープンソースのアイコンライブラリ。現在1950以上のアイコンが公開。
  3. Iconer：シンプルで何にでも利用できる、UIデザイン用の商用可なSVGアイコンライブラリ36セットから横断検索ができる便利アイコンツール。
  4. Uikit：ウェブデザイン作成に活用できる高品質なUIキットやコンポーネントを無料ダウンロードできるサイト。FigmaやAdobe XDファイルが中心で、タグ別に絞り込むことも可能。
  5. NFT Market – Free Website Template：NFTマーケットを想定したウェブサイト用テンプレート。プロトタイプツール Figma の簡単な使いかたでカスタマイズできる.figファイルによる収録。
  6. Flex UI Library for tailwind CSS：700以上のウェブコンポーネントを並べるだけでウェブページを作成できる時短コレクション。Tailwind CSSに対応。ノーコードツールShuffleと連動したデザイン。Figmaファイルは無料ですべて利用可。

クリエイティブ・面白ツール

  1. Blackbox：Chrome拡張プラグインをインストールすると、YouTubeやNetflixといった画像から目的の文字テキストを検索、抽出できるというツール。
  2. イライザペンシル：入力したキーワードから日本語の文章を約６秒で自動生成できる文章執筆AIツール。
  3. Tab Maker：コーディング不要で、誰でも簡単にChromeのカスタムタグ機能を拡張、構築できるGoogle発のスゴ技ツール。
  4. Arteater：特殊なマス目が描かれた用紙をプリントアウトし、順番にイラストを書き込み、アップロードページに貼り付ければ、パラパラ漫画のようなアニメーションを作成可。
  5. Screenity：Chromeブラウザでもっとも強力で多機能をうたう拡張機能プラグイン。文字やスケッチを入力し、ビデオ画面にフィードバック用の注釈を追加でき、動画の編集もラクラク。
  6. WeekToDo：シンプルな週間スケジュールを確認するシンプルなToDoリスト。予定にあるものを優先するのではなく、優先したいものを予定に入れることをコンセプトに、プライバシーを重視したツール。
  7. Eight Colors：W/A/S/D または矢印キーで操作し、お手本と同じように揃えるミニゲーム。最初は簡単ですが、徐々にルービックキューブのような感覚に。
  8. The Typerature Variable Color Fonts：Variableフォントをつかって何ができるのか、AからZのアルファベットをつかってプレビュー例示した特設サイト。Safari、Firefox、Chromeで最適に表示。
  9. Climate Spiral to show temperature chnage：NASAが実際に公開している、1880年から2021年までの月別の地球気温の偏差を表したビデオデータ。特に1951-1980年ごろからが異常。
  10. Crunk Dancer：曲に合わせてモコモコのモデルが踊るというデモコンセプト。配色やボディの分厚さのほかに、ヒップホップやブレイキン、スイングといった踊りもカスマイズ可。