私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
こんにちは、Spinners の元山 (@kudakurage) です。 最近はresize.fmという緩めのデザイン系ポッドキャストを @dex1t と始めて、オーディオ系のデバイスや仕組みについて勉強する毎日です。今のポッドキャストの収録環境についても近々書き残しておこうと思っています。 2021年1月に日本で話題になった音声SNS「Clubhouse」についてresize.fmでも取り上げて話したのですが、その中でも話しているスーパー楕円というものについて今回は詳しく書いていこうと思います。 INDEXピート・ハインのスーパー楕円スーパー楕円とデザイン建築や家具のデザインデジタルプロダクトのデザインスーパー楕円を利用した印鑑スーパー楕円の描き方数式を使った描き方（Adobe Illustrator）簡易的な描き方（Vector Draw Tool）ピート・ハインのスーパー楕円 Sou
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
Midjourney/Memeplex(StableDiffusion)などの画像生成AIで思い通りの画像を出すヒント｜shi3z
このnoteの収益を使ってStable Diffusionを使ったWebサービス https://memeplex.appを公開しました。誰でも無料で何枚でもAI作画をすることができます(そのかわり、混み合ってる時は時間がかかると思います)。 このnoteで学んだことをぜひ活用して、AIによる新しい時代の風を感じてください。 また、本文中にMidjourney、StableDiffusion、DreamStudio、Memeplexなどの言葉が頻出するため、全面的な修正を行うことにしました。StableDiffusionに統一しておきたいと思います。 現状(2022/8/28)は、StableDiffusion=DreamStudio/Memeplexと考えて構いません。Memeplexは将来的にStableDiffusion以外のアルゴリズムもサポートする予定だからです。
【10/18 翻訳完了】 ※StableDiffusion記法で書かれたプロンプトについて、()は{}に（5%強調）、{}は[]に（-5%強調）置換しています（NovelAI用）。また、NovelAIのプロンプトのプリセット機能はオフにしてお試しください。 Twitter (@31pi_) もフォローして頂けるとうれしいです。（間違い等あればこっそり教えてください） 元素法典 The Code of Quintessence ―― Novel AI 魔術全集 ―― 序文『元素法典』は、全ての高品質な術式と〈元素魔術〉を含めることを目的とする魔導書である。〈元素魔術〉とは、特に「商業イラストレベルの表現力を追求した」美しい絵を指す。 本書は、すべての人に開かれた書物である。したがって、聡明な読者諸君らの編み出した魔術の寄稿を歓迎する。 本書には、膨大な術式と豊富な挿絵が含まれている。その中か
以前当ブログで紹介した時からずっと愛用しているEagleがver.2に神アップデートしたので、改めて紹介したいと思います。 簡単に言うと、フォント（ttf,otf,ttc,woffも）、画像（jpg,png,gif,svg,webpはもちろん、raw,psd,ai,xd,sketch,clipも）、動画、音声、PDFやテキストも管理でき、タグ付けやフォルダ分けやカラーフィルターなどで整理も簡単できるアプリです。 Windows, macOS（M1対応）に対応したアプリで、1ライセンスで2つ使用でき、サブスクではなく買い切り、しかもバージョンアップの追加料金なしです。 ver.2が先日リリースされ、ver.1の人は無料でアップデートできます！ Eagle Eagleとは Eagle ver.2の神アップデート Eagleのダウンロード・インストール Eagleの使い方 Eagleとは Eag
こんにちは。 今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。 内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ... STEP1：UIデザインに関係する一般知識を得る ◎目的 このステップはUIデザインに関する前提を知るためにあります。STEP2以降と平行してやってOKです。というよりちゃんと学ぼうと思ったら無限に続きそう。 主なトピックとしては、UIUXとはなにか・人間中心設計・デザインの4原則・デザインガイドラインの4つでしょうか。 ・UIUXとはなにか UIデザインはUX（顧客体験）大きな流れの一部なので、そこを理解しているかどうかは本質的なUI
生成AIグラビアをグラビアカメラマンが作るとどうなる？第二回：「アジア美女」最新モデルBRAV6作例とネガティブプロンプトの基礎 | テクノエッジ TechnoEdge
使用したNegative Promptは、「1.無し」、「2.ほぼ最小限」、「3.筆者標準」、「4.embeddingsを使う」の4つパターン。 4番目だけ他と違い別途ファイルが必要となり、ダウンロードしたファイルを[Stable Diffusionのホームディレクトリ]/embeddingsへコピーする。Negative PromptでEasyNegativeなどをよく見かけるがそれだ。ここではng_deepnegative_v1_75tとbadhandv4が該当する。Promptで書く替わりに、特別に学習したModelで同じ効果を得られるようになっている。 無し (worst quality:2),illustration, 3d, painting, cartoons, sketch, illustration, 3d, sepia, (painting), cartoons, sk
2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. 生産性アップツール ウェブ制作がすご楽！便利な最新オンラインツールまとめ デザインコレクション SVG Arista このツールはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロ
なぜ僕が「SPAはコストが高い」と考えているのか
どうもみなさんこんばんは ちょっと前に「個人開発者やスタートアップの初期からSPAで開発するのはコスト高いっすよね」みたいな事を書いたらフロントエンドエンジニアの皆様からバチバチに叩かれた僕です 彼らには彼らの考えがあるのでそれはどうでもいいのですが、どういう理由があってその発言をしたのか～と言う部分が気になっている方もいたようなので説明しておこうと思います ちなみに今でも全く意見は変わっておらず、この発言に同意できるかできないかは単純に視点の違い、規模の違い、スキルの違いだと思ってます 追記: もちろんSPAじゃないと実現できないようなサービスを作りたい場合はSPA一択ですし（インタラクティブにHPつくるサービスとか。でも世の中の95%くらいのサービスはそうじゃないと思います）、サイトの利用はログインした人にだけ提供するような業務系ツールなどはまた話が別です 前提の話 こういう記事ではコ
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
Home テクノロジー Blog Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPA
ピクシブを退職します - 創業期から成長期への転換を越えて理解した10の教訓 - ふろしき Blog
2021年11月末にピクシブを退職します。 先日、なかなか読み応えがある退職エントリーが上がっていました。ものすごい熱量が感じられたし、それに自身のネガティブな過去なんかも隠すことなく堂々と語っていて、自信に満ち溢れたいい記事だと思いました。 note.com 僕自身も、過去の失敗談を交えつつ、それを10の教訓という形で内省し、ピクシブで行ってきた6年4ヶ月の活動を締めてみたいと思います。最近マネージャーになって苦しんでいる人とか、自分のボスが何を考えているのかわからないという人の、ちょっとしたコンテンツになれば良いかなと思います。 1. 入社直後が一番、会社を客観視できる 前職はNTTコムウェアというSIerでした。インターネットが大好きだった僕は、30歳を目前にして気持ちが抑えられず、ネット業界への転職活動を開始。そして2015年8月に、ピクシブ株式会社へと入社します。 2015年、H
商用利用無料、UIデザイン用のSVGアイコンが1100種類！Adobe XDやFigmaのツールも完備されてて、これは便利
企業サイトをはじめ、プロダクト、オンラインショップ、アプリ、ブログなど、さまざまな商用プロジェクトで無料で利用できるSVGアイコンを紹介します。 SVGアイコンの数は1,100種類以上で、しかもオープンソース！ さらに、Adobe XD, Figma, Sketchなどでアイコンが簡単に使えるツールもリリースされています。
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
SHOWROOM株式会社の映像配信遅延が業界最速レベルに縮まったので嬉しいという話 - izm_11's blog
概要 現在僕はSHOWROOM株式会社というところでxRのクライアントエンジニアをしています。 が、SHOWROOM株式会社はライブ配信サービスを行っています。 今回の記事は、このライブ配信サービスの方でかなり面白い取り組みが行われて、世に出たので面白さをみんなに布教したいと思って書きます。 prtimes.jp ライブ配信サービスの話 SHOWROOMは国内ライブ映像の配信サービスとしては古株で、確か6年くらいの歴史があります。 その後pixivさん(pixiv Sketch)やCyberZさん(OPENREC.tv )や、LINEさん(LINE LIVE)など、色々な会社さんがライブ配信サービスを生み出して、国内の市場は活気づいています。 配信者と視聴者間でコメントやギフティングでリアルタイムコミュニケーションを取る感じの仕組みです。 SHOWROOMの技術的負債 先ほど説明した通りに
日頃の忙しい業務を少しでも楽にしたい、効率化したいと考えている人にぴったりな、Web制作で使える最新オンラインツールをまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 カテゴリごとに整理しているので、制作フローに新しく追加してみてはいかがでしょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール クリックで一発コピペできる、120種類以上のCSSボタンを集めたライブラリ。3Dやグラデーション、レトロな
生成AIグラビアをグラビアカメラマンが作るとどうなる？第三回：実際の撮影とポーズ/構図の関係。openpose_handで指問題解決？ (西川和久) | テクノエッジ TechnoEdge
現役グラビアカメラマンでありソフトウェアエンジニアでもある西川和久氏が、画像生成AIを使ったリアルなAIグラビア作成技術を解説する連載の第三回。 今回はポーズ / 構図をテーマに、プロカメラマンとしての撮影スタイルとAI生成の共通点、現時点のAIでは難しい手指の表現を改善する技術についても説明します。(編集部) 実際の撮影と「呪文」の関係は似ている？グラビアでもポートレートでも、撮影する時は「立って」「座って」「前向き」「後ろ向き」……といったようにカメラマン側から指示を出す。 この大雑把な指示はどのカメラマンでもすることだが、顔の向きだったり腕の形だったり足の位置といった細かいことは、「指示する」カメラマンと「指示しない」カメラマンとで分かれる。これは撮影スタイルの話なので、どちらが良い悪いではない。 筆者の場合は割と大雑把で、細かい指示はせず、後の事はそのモデルに任せる＝個性だと思って
これは何 「デザイナーもReact書いてくださいよ」って空気になったときに読むと役立つかもしれない記事です 基本的に筆者が学んだ流れを記載しています そのため、世間一般のベストプラクティスではないと思います エンジニアの方から見ると邪道な流れ・説明の仕方かもしれませんが、デザイナーに教える上での分かりやすさを重視していますのでご了承ください この記事の中で使っているコードはこちらのリポジトリで公開しています コミットを辿ってもらえれば、各セクションの内容が全て見れます ※言い訳がましいですが、筆者もReactに精通している程ではなく「デザイナーにしては割と知ってる」レベルです もし説明に間違いや不足があれば編集リクエストをお願いします 対象読者 Web or UIデザイナー HTMLとCSSは普通に書けるけど、Reactはほぼ全く触ったことがない人 1人で完全に実装したいってほどではないけ
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるiconsaxを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。スタイルは6種類、フォーマットはSVGをはじめ、Adobe XD、Figma、Sketch、Illustratorとさまざまなアプリ用のファイルも用意されています。 iconsax iconsax -GitHub iconsaxの特徴 iconsaxのダウンロード iconsaxのアイコン iconsaxの特徴 iconsaxは、vue.jsのオープンソースのフレームワーク「vuesax」の公式アイコンです。個人でも商用プロジェクトでも完全無料で利用できますが、別の名前で販売および配布はできません。詳しくはライセンスをご覧ください。
HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01 モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色
自作 OSS のためのロゴを作る | micnncim
著名 OSS にあって自作 OSS に無いものの一つにロゴがあります。 OSS において README の出来不出来はユーザへのリーチを高める重要な要素であり、詳細な Description や GIF によるデモはもちろん、ロゴがあればより魅力的な README になるでしょう。 また、SNS でシェアされる際もロゴがあればより良いでしょう。 はじめにソフトウェアエンジニアの多くはデザイナーではないためロゴを作るコストは低くなく、テキストだけ作るのであればまだ簡単ですが、自作アイコンを作ることはかなりの労力を要することでしょう。 僕も同様で、デザイナーではないため、結論として非デザイナーでも出来る戦略を考えることになりました。 今回は、micnncim 流の、出来るだけ低コストで低くないクオリティの OSS のためのロゴの作成方法について解説します。 慣れれば上の画像のようなロゴが 5
NIST サイバーセキュリティフレームワーク 2.0を解説｜約10年ぶりの大幅改訂、押さえるべき要点とは？
HOME NRIセキュア ブログ NIST サイバーセキュリティフレームワーク 2.0を解説｜約10年ぶりの大幅改訂、押さえるべき要点とは？ 2024年2月26日、NIST（米国立標準技術研究所）は、「NIST サイバーセキュリティフレームワーク（NIST Cybersecurity Framework：NIST CSF）」のバージョン2.0を正式に公開した。2014年4月に初版であるNIST CSF 1.0が公表されて以来、約10年ぶりの大幅改訂である。 本記事では、NIST CSF 2.0における主な改訂のポイントと、特にインパクトの大きい6つ目の新機能「GV（統治）」について解説する。 ▶「経営層が納得するセキュリティ報告」を読む はじめに 2020年代に入り、新たな生活様式の変化に起因する脅威の発生、世界各国での深刻かつ大規模なサイバー攻撃の急増、生成AIなど新技術の普及に伴うリス
この記事では、「それ、何使ってるの？」と思わず聞きたくなるような、最新のWeb、オンラインツールをまとめてご紹介します。 めずらしいだけでなく、面倒で手間のかかる作業がほんの数クリックで完成の時短アイテムや、今までなかったけどあると便利なツールや素材を中心にセレクト。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. アイコンツール 4. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Make Way Grid Effect 一枚の画像を選択すると、他の画像が場所をゆずって、道を空けてくれるアニメーションエフェクト。 CSS Shadow Gradients 2色の配色によるグラデーションをつかった影、シャドウグ
iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone 12のリリース だけど、このメタルとガラスの中には象がいる 2020年の現状 どのようにデザインすればよいか？ 重要な要素は折り目の上に 終わりに iPhone 12のリリース 1
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
また、TechnologyRadarの各項目は更新されていくものであるため、更新・追加・新登場かどうかも直感的にわかるように表現されている。Newは新しく追加された項目、Movedin/outは以前紹介されたことがあるが所属リングが更新された項目、No Changeは以前紹介されている項目を指している。 あくまでもこれらの項目はThoughtsWorks社が独自の目線でピックアップし、分類したものである。それを考慮した上で、自社に採用できるツールを探すことはもちろん、次に定着しそうなツールはなんだろう、と言った別の目線でリングや新登場の情報を読み進めるのも面白いかもしれない。 ちなみにGoogle Sheetのテンプレートを使えば自分だけのRadarを作成することもできる（https://www.thoughtworks.com/radar/how-to-byor）。 リモートワークのテク
イラストやアニメのワンシーンには丁寧に色が塗られているものですが、これを色を塗る前の線画に変換することができるアプリケーション「Anime2Sketch」が、GitHub上で無料で公開されています。 GitHub - Mukosame/Anime2Sketch: A sketch extractor for anime/illustration. https://github.com/Mukosame/Anime2Sketch イラストから線画を生成することができる「Anime2Sketch」は、LinuxまたはmacOSで動作するアプリケーション。プログラミング言語のPythonで構築されており、CPUあるいはNVIDIA製のGPU＋NVIDIA cuDNNの組み合わせで動作させることができます。 実際にどのような線画が出力できるのかというと、以下の通り。左が入力画像(イラスト)で、右が
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
Sizzyというツールがあります。 様々なサイズの画面を同時に表示し、レスポンシブレイアウトがどうなるかを一気に確認できるという便利なツールです。 スマホ向けWebサイトを開発している人なら、持っていると非常に便利でしょう。 参考：レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy / 『Sizzy』様々なデバイスでのサイト表示を確認出来る便利サイト さてこのSizzy、元々無償のChromeエクステンションだったのですが、先日2019年7月に単独のアプリとして有償化されました。 一人あたり月5ドル(団体割引あり)のサブスクリプション制です。 以下は作者のKizte( Twitter、Medium、Webサイト )がその理由や経緯を綴った記事、GitHub stars won't pay your rentの日本語訳です。
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
この記事では、Webデザイン制作を効率アップさせる最新オンラインツール33個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しましょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. アイコンツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ We
はじめに ※こちらのnoteには夢女の怒りがつらつらと記されていますので、 夢思考が苦手な方は避けていただくことをお勧め致します。 ”漫画の最終回”と言えば、何を思い浮かべるだろうか。 大体の物語の最終回と言えば、””大団円””というのが私のイメージだ。 とは言っても広げた風呂敷を畳むのは一筋縄ではないだろうし、中には多少不評な作品があるのも事実。物語によってはバッドエンドで終わるものもあるだろう。だがまあある程度不完全燃焼で終わったとしても、多くの作品が上手く物語を終結させている。 しかし、中にはとんでもない終わり方をした作品というものが存在する。 今回語る「焼きたて!!ジャぱん」もそのうちの一つだ。 焼きたて!!ジャぱんの最終回は（今後読むつもりがある人や現在読んでいる途中の方は、以下の紹介を飛ばすか、14巻辺りで読むのを辞めることを心からおすすめします。） 地球温暖化の海面上昇による
Akuma.ai http://akuma.ai 2024年2月、日本発のクラウド型画像生成サービスAkuma.aiが、リアルタイム画像生成機能「AIキャンバス」を搭載したことが話題になりました。3月1日には生成枚数が延べ1200万枚に達したと発表。リアルタイム画像生成技術「LCM」を組み入れたサービスですが、高度なPC環境が不要で、タブレットなどからでも簡単に使えるため、国内外の幅広い層にウケたという経緯です。 🎉生成画像1200万枚突破🎉 リアルタイム「AIキャンバス」生成枚数が1200万枚を突破しました！ たくさんご利用いただきありがとうございます。 今後とも #AkumaAI の応援よろしくお願いします🦑 プレスリリースはこちら：https://t.co/Yf3tjxjCsS — Akuma.ai (@AkumaAI_JP) March 1, 2024 日本発の画像生成AIサ
ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ロゴを配置する時のデザイン上の注意点 ロゴを配置するグリッドの実装 CSSブレンドモードを使用してホワイトの背景を削除する ロゴの最後の行の中央揃え 実装時の注意点 終わりに はじめに フロントエンドのデベロッパーとして、複数のロゴを配置したことがあるでしょう。この実装は最初は簡単に思えるかもしれませんが、ロゴを揃えたり、中央配置にする時に悩ますかもしれません。さらに、ロゴにはさ
Workspacesは、主に海外を中心としたデスク紹介サイトです。 私はまだリモートワーク歴が浅いので、リモートワーク環境を充実させるためのヒントを探したく、参考にしております。 www.workspaces.xyz 名だたる企業で活躍されている方のデスクを紹介 デスク紹介を眺めていると、私でも知っている企業の名前が、わりと出てきます。 FacebookやNetflixは、こういったクリエイティブ環境で開発やデザインがされていることを知れる、まさに舞台裏です。 裏側を知ると、何故かテンションが上ってきます。 Facebook 映えある1番目の投稿は、FacebookのエンジニアであるShivkanth Bagavathy氏。 PCはMacBook Proで、デスク周りが濃いグレーと黒系統で統一されております。 シックでかなり素敵です。 001 - Shivkanth Bagavathy T
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記事では、Figmaの利用に至った背景や、運用し続けられるものにする工夫、デザインシステムによってデザイン業務がどのように効率化されたか、お伝えします。 Yahoo!ニュースが抱えていたデザインにおける課題と解決方法 この章では、Yahoo!ニュースが当時抱えていた複数のデザイナーがデザイン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン | Spinners Inc.
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
【日本語訳】元素法典 第1巻 #NovelAI #元素法典｜さいぴ
フォントと画像の管理にはこれ！シンプルで使いやすい、WinMac両対応アプリ「Eagle」が神アップデート
独学でUIデザインを勉強する方法を自分の経験をもとに考えてみた｜Aoi Sano | デザイナー
ウェブ制作がすご楽に！便利な最新オンラインツール33個まとめ
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
時短してますか？Web制作が変わる最新オンラインツール38個まとめ
デザイナーでも分かる範囲のReact、その書き方と学び方 - Qiita
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる、SVG完備のアイコン素材 -iconsax
自力でWebサイトを作れるようになるブロックコーディングとは？ HTML/CSSの脱初心者を目指して
これは便利！ありそうでなかった最新Web、オンラインツール36選
iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
2020年のエンジニアなら、知っておきたい。リモートネイティブという選択。 【世界のエンジニアに学ぶ】
イラストを線画に変換する「Anime2Sketch」が登場
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
GitHubのスターは金にならない - Qiita
Web制作を変える！2021年の便利オンラインツール・ベスト100選
Web制作の効率、生産性アップ！話題の最新オンラインツール33個まとめ
好きなキャラがダルシムになったりウミウシになったりする女～夢女怒りのデスロード～｜ろはちゃん
日本発のリアルタイム画像生成AIサービスが熱い 大手にとっては“イノベーションのジレンマ”に (1/3)
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
Workspacesで、海外リモートワーカーのデスク紹介を眺めるのが楽しい件 - このすみノート
25年続くYahoo!ニュースを支える、Figmaを用いたデザインシステム