この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
エンジニアを始めてから便利だったツールまとめ
概要 エンジニアになってから出会った便利ツール・アプリを備忘録としてまとめました。 ※WEB用ツール多め GUIツール・アプリ デスクトップ上で動作させるやつ。 Authy https://authy.com/ 2FAアプリ。Multi-Deviceという複数端末で使える機能があり、PCでログインする際の2FAをPCのみで完結できるので便利。 Hyper https://hyper.is/ コンソールアプリ。テーマ機能やプラグイン追加で自分の好みに環境を整えやすくて見た目がよい。 設定を.hyper.jsファイルで管理するので、gitにて設定管理ができて便利。 VSCode https://code.visualstudio.com/ 言わずもがなの高機能コードエディター。特に理由がなければ基本的にはプログラミングするならこれを使えばいいんじゃないかな。 豊富なプラグインや設定で、Hype
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応 昨年（2022年）、Adobeによる買収が発表され話題となったWebデザインツールを提供するFigmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Bring Figma to VS Code Our new extension for VS Code eliminates context switching and helps you move faster with code suggestions based on your designs. Install to... → Inspect Fig
UIデザインやワイヤーフレームの作成に便利なデザインツールがほしいと思ったことはありませんか？Adobe XDやSketchなどがメジャーなところですが、他にもインターフェースがわかりやすく、操作性と利便性の高いツールがいくつかあります。 今回紹介する「Figma（フィグマ）」は、それらに引けを取らず、さらに便利な機能も備えたツールです。Figmaがどのように役立つものなのか、使い方を初心者にもわかりやすいようにシンプルにまとめました。 ▼ディレクターとデザイナーで読みたい資料 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 Figma（フィグマ）と
Webデザインツールはどれを使えばいいの？
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Webデザインのためのツール（アプリ）はいくつもあるため、Webデザインを勉強し始めたばかりの方は何を使っていいのか迷うと思います。 この記事ではデザインツールの特徴だけでなく、「カード型UIデザイン」を例にWebサイトのデザイン制作に使用する機能の比較をしたり、アプリ間の連携についても触れていきます。 デザインツールの種類デザインツールそれぞれの特徴Webサイトのデザイン制作に使用する機能の比
この記事は新野淳一氏のブログ「Publickey」に掲載された「VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応」（2023年6月26日掲載）を、ITmedia NEWS編集部で一部編集し、転載したものです。 2022年、米Adobeによる買収が発表され話題となったWebデザインツールを提供する米Figmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Figma for VS CodeはVSCodeのプラグインとして提供されます。 基調講演のデモでは、下図のようにVSCodeのコードエディタ画面と並んで右側にFigmaのキャンバス画面が表示されました。
ジェネレーティブAI技術の進歩などによって、デザインに活用できるAIツールが次々と誕生しています。AIを業務に組み込むことで、今後デザイナーの働き方も大きく変わっていくでしょう。 そこで本記事では、さまざまなAIツールの中からデザイン業務に活用できそうなものをピックアップし、ワークフローのシーン別にご紹介します。主要なツールについては使ってみた感想（レビュー）も記載したので、デザイナー観点でAI活用をどう感じたかをお伝えできれば嬉しいです。 はじめに：AIデザインツールの原理 そもそもデザインに使えるAIツールとはなんでしょうか？AIの分野で重要な役割を果たす3つのキーワードについて、簡単に解説します。 ニューラルネットワーク クリエイティブな仕事をサポートまたは代替してくれるAI技術は、数十年にわたる技術開発の上に成り立っています。その基本的な仕組みの1つとして挙げられるのがニューラルネ
Adobeは、9月15日（米国時間）にウェブデザインツールの最大手「Figmaを約2.9兆円で買収する」と明らかにした。Figmaは、Adobe自身がCreative Cloudの一部として提供している同様のWebデザインツールとなる「Adobe XD」の競合とみられており、これまでFigma自身もXDからの移行をユーザーに促してきた歴史もある中で、なぜAdobeがFigmaを買収したのかいぶかる声も少なくなかった。 Adobe MAXで講演するAdobe Creative Cloud担当上級副社長（EVP）兼 CPO（最高製品責任者)）スコット・ベルスキー氏（左）のゲストとして呼ばれたFigma CEO ダイラン・フィールド氏（右） 10月18日（米国時間）から米国カリフォルニア州ロサンゼルス市にあるLACC（Los Angeles Convention Center）で行なわれたCre
Webデザインツール「Figma」がアドビに買収へ。今後はPhotoshopやLightroom、Illustrator、InDesignなどの部門長の配下に
Webデザインツール「Figma」がアドビに買収へ。今後はPhotoshopやLightroom、Illustrator、InDesignなどの部門長の配下に Webデザインツール「Figma」を提供するFigma社とアドビは、Figmaがアドビに買収されることで合意したことを発表しました（アドビの発表、Figmaの発表） 下記はFigmaの共同創業者でCEOのDylan Field氏のツイート。 THREAD: This morning we’re announcing that @Figma has entered into an agreement to be acquired by @Adobe ! More information here: https://t.co/eqJsSlkShq (1/9) — Dylan Field (@zoink) September 15, 20
「いつもやってるこの作業、実はちょっと面倒」 「アイデアを形にできるツールや素材が欲しい」 「クリエイティブの生産性を上げたい」 そんな人に朗報です。 このまとめでは、ここ最近公開された便利なツールや素材の中から、「本当に使えるもの」だけ55個を厳選。 カテゴリ別に整理しているので、自分に合った新しいツールを見つけ、作業をもっと快適にしてみましょう。
ウェブサイト作成に必要なツールがひとつに揃った、国産Webデザインプラットフォーム「Studio」。 コーディングの知識も不要で、Webやアプリデザインを誰でも作成できるだけでなく、たった1クリックで作成したデザインを実際のWebサイトとして公開することも可能です。 今回は、最新アップデートが行われたばかりの「Studio」に追加された新機能をまとめてご紹介します。 Studioとは？ Studioとは、ウェブサイトのデザインから公開、CMS機能までを完結できる、日本発の国産Webデザインツールです。 今回のアップデートにより、ブログなどのコンテンツ管理ができるCMS（英: Contents Management System）が追加されたことで、WordPressのような動的サイトの制作が可能となりました。 今回のアップデートの目玉のひとつ、リアルタイムでの共同編集は、新型コロナウイルス
WebサイトとWebアプリの違い 知っておくべきこと 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ウェブ開発とモバイルアプリ開発を専門とするプログラマとして、私たちはクライアントとそれぞれの目的について頻繁に話し合い、それらを区別する方法を説明してきています。 そのため、これら2つの主な違いを指摘するガイドを作成することを考えました。 いくつかのトリックを知っていれば、それらを区別するのは本当に簡単です。 本日は初心者様にこれらを解説致します。 Webサイト Webアプリケーション 類似点 違い デメリット 適切な選択は？ まとめ 最後に 完全なデジタル時代に移行するにつれて、Webサイトの人気がますます高まっております。 2022年では世界的にも、中小企業の71%以上がWebサイトを保有しております。 保有していない場合、ワールド・ワイド・ウェブ(WWW)の時代において、現代の世界で生き残ることは困難となります。 ただし、Webサイトを必ず持っていなければならないというわけではござい
※本ページはプロモーションが含まれています こちらの記事では、WebデザインツールFigma（フィグマ）について初心者向けに解説しています。 Figmaの使い方について詳しく知りたい方は、参考にしてください。 \Figmaの使い方を効率的に学習できる/ Figmaの使い方を学習できるおすすめ講座を紹介 Figma初心者の方は、講座等を活用して Figmaの実践的な使い方を学習することをおすすめします。 1.初心者から始めるアプリデザイン＜UI/UXデザインをFigmaで学ぼう！＞ 2.【2021年最新】現場のプロが教えるfigma初心者はまずはこれ！|０からWEBサイトを簡単に作成。爆速習得裏ワザ公開 3.初心者【話題のFigmaでWEBデザイン。すぐ知れる作れる！】難しい説明よりも現役デザイナーと一緒にまず作ってしまおう！
レスポンシブ対応｜Webデザインツール｜Editor X
ワイヤーフレームからプロダクションまで Web デザインのプロセスをどこまでもシームレスに。洗練されたレスポンシブ CSS をドラッグ＆ドロップで実現できます。
紙魚をかかぐる人々 - 青色3号
いろいろあって（というのは、ひとつには今日の本題にも関係して、であるのだけれど）過日しばらく、徳永直『光をかかぐる人々』を読んでいました。青空文庫にあるものはいうなれば「前編」で、「中編」にあたる雑誌『世界文化』連載分も青空文庫の当該作品を入力された内田氏が公開しています。そして「後編」は未発見原稿のままなのだといいます。それを読んでいました。 書誌的な情報はともかく、内容としてはおおむね、日本における活版印刷の誕生をひもとく、しかもそのための著者の奮闘込みで……といったもの。「前編」では日本の活版印刷の先駆者として知られる本木昌造の足跡を追うのですが、話題があっちにいったりこっちにいったり、どうも迷いながら進んでいる様子もあり、それこそ素直に進みません（これは駄洒落です。人の名前で洒落を言うのはやめましょう）。前編のうちとくに後半などは、通詞（本木の生業、いわゆる通訳）からみた開国史とい
【AWS Amplify Studio + Figma + React】Amplify StudioとFigmaを同期してReactコンポーネントを自動生成する手順 - Qiita
【AWS Amplify Studio + Figma + React】Amplify StudioとFigmaを同期してReactコンポーネントを自動生成する手順AWSフロントエンドReactamplifyfigma 先日、AWS Summit Tokyoに行ってきました！とても楽しかったです。 私はフロントエンド実装が大好きな生き物なので、AWSのブースで紹介されていた、Amplify StudioをFigmaと同期することでReactコンポーネントを自動生成できる機能に感動しました。 ブースにいたAWSの方に機能の紹介をしてもらい、帰宅後に自分でもやってみましたが、結構苦戦しました...。なんとかコンポーネントを表示するところまではいけたので、いつか利用する時にまた躓かないように手順をまとめてみました。この記事がどこかで誰かの役に立てると幸いです。是非ご覧ください(^｡^) AWS
【作業別】おすすめAIデザインツール21選
AI ツールは、今まさに私たちの仕事や生活を変えつつあります。本記事では、AI ツールの基礎知識と、デザイン業務に活用できそうな AI デザインツールを厳選して紹介します。 特に Web デザイナーやグラフィックデザイナーのみなさんに向けて、実用的な AI デザインツールを激選しました。画像生成ツールや Web デザインツールだけでなく、デザイン作業全体の効率を高めるための便利な作業効率化 AI ツールも併せて紹介します。 これからデザインを学ぶ人は、Web デザインの基礎についての記事も参考にしてみてください。 目次 AI ツールの原理 AI デザインツールの 3 つのモデル ジェネレーティブモデル 大規模言語モデル（LLM） コンピュータビジョンモデル デザイン作業フロー別AIデザインツールまとめ リサーチ、アイディエーションに使える AI ツール クライアント理解に使える AI ツー
Appleマップは近年、さらに詳細なマップを一部の国や地域で公開していますが、米ラスベガスでは異次元の精度に達しつつある、とユーザーがスクリーンショット動画を公開しています。いったいどれほどの精度なのでしょうか。 ■3行で分かる、この記事のポイント 1. Appleマップの段違いの精度について、米ユーザーが動画を公開した。 2. フォーミュラ1カーまでもが見えてしまうほど、詳細に作り込まれている。 3. より詳しいマップは10月にデンマークとギリシャへと拡張しているが、日本では未展開。 F1のレースカーまでもが見えてしまう？ Appleマップの段違いの精度について投稿したのは、人気のWebデザインツールFigmaでAIを担当するジョーダン・シンガー氏（@jsngr）です。 reason number 7586 why Apple Maps is >>> pic.twitter.com/hr
勉強し始めるなら今！Web制作におけるFigmaの使い方〜超初級編！【XDから卒業】 | 東京のWeb制作会社 株式会社クーシー
勉強し始めるなら今！Web制作におけるFigmaの使い方〜超初級編！【XDから卒業】 Web制作ハウツー 特集 Web制作ツール Web最新トレンド Figmaは世界シェア第1位のWebデザインツールです。デザイナーだけでなくノンデザイナーでも気軽に使えるツールとして支持を集めています。 この記事では今注目のデザインツール「Figma」について解説します。Webサイト制作場面を中心にFigmaでできることやメリットを紹介する内容です。 「Figmaを使ってみようかな」と考えている方は、さっと読めるので参考にしてみてください。 Figmaとは https://www.figma.com/ja/ Figmaは無料で使えるUIUXデザインツールです。誰もがブラウザ上で手軽にUIデザインを作れます。営業資料やバナー、ロゴの作成も可能です。UIUXデザインツールなので印刷物には向いていません。 Fi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応
Figma（フィグマ）とは？初心者でも分かるWebデザインツールの使い方
VSCodeにFigmaを組み込む「Figma for VS Code」登場 コードの自動補完にも対応
【2023年版】デザインに使えるAIツールまとめ（レビュー付き）｜Goodpatch Blog グッドパッチブログ
なぜアドビはFigmaを買収することを決めたのか--幹部の回答、FigmaとAdobe XDの展開は
知らないと損する最新Web＆デザインツール、素材55選
コーディング不要！国産WebデザインツールSTUDIO 3.0で注目の新機能まとめ
【初心者向け】Figmaの使い方を解説！Webデザインツールについて詳しく。
Appleマップ進化！F1ラスベガスGPを見たら信じられない！ - iPhone Mania