ビジネスに使えるデザインの話ビジネスにデザインの知識はけっこう使えます。苦手な人も多いから１つ知るだけでもその分アドバンテージになることもあります。noteは毎日午前7時に更新しています。 欧文のルール日本人は知らない欧文（主に英語）のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くあります。 知っておくと何かとアドバンテージになるので少しずつご紹介していきます。ご紹介した欧文のルールはこちらのマガジンにストックしていきます。 「＆」の正体正式にはアンパサンド（ampersand）と言います。日本では「アンドマーク」と呼ばれていることが多いこの記号。正しい名前は“ampersand”（アンパサンド）です。日本でも馴染みのある記号で、企業名などでもよく目にするのではないでしょうか。 情報通信・メディア系

「デザイナーだけがデザインをする時代は古い」「デザインにセンスはない」と語るのは、Udemyの「UI/UXの改善を進めるための基礎講座」などで人気を誇る、UI/UXデザイナーの濱野将氏。生成AI時代において、デザインをビジネスをつなげるためのポイントや、UI/UXの基礎を解説します。 UI/UXデザイナーが教えるデザインの基本 濱野将氏：それでは、僕からは「ビジネスを実現する『デザイン』の基本」をお話しさせていただきます。よろしくお願いします。 今日のアジェンダはこんな感じです。「デザインの必要性」「デザイナーだけがデザインする時代はもう古い」「UI/UXについて」。今回はAIがテーマなので「AIを使ったプロジェクトの進め方」も少し紹介させていただきたいなと思っております。 簡単に自己紹介をさせてください。株式会社IMAKE代表の濱野と申します。職業はUI/UXデザイナーで、講師もさせてい

HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。

前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 ※最新の勉強会の開催情報についてはXをご参照ください 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉し

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで　z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。 infinity は calc() の中で使用できる特殊な値です。名前の通り最も大きな値を表します。 そのため、どんなに大きな z-index の値を指定されても、calc(infinity) が最も大きな値になるため、最前面に表示されるわけですね。

適当な日本語手書きフォントです。 英数字、ひらがな、カタカナ、JIS第1～4水準漢字、その他の漢字や記号など約16000字を収録しています。 ゲーム、イラスト、動画、印刷物など様々な用途に使用できます。 文字の大きさや丁寧さにばらつきがあります。 利用規約当フォントはSIL Open Font License 1.1（OFL）に準拠しています。 クレジット表記は不要で、商用利用も可能です。 フォントデータ自体の再配布や改変をする場合は、著作権表記とライセンスの保持などの制約があります。 詳細はSILオープンフォントライセンスをご確認ください。 原文　https://scripts.sil.org/OFL_web 日本語訳　https://licenses.opensource.jp/OFL-1.1/OFL-1.1.html 当フォントを使用したことで生じたトラブルについて、制作者は一切責任

サインペンで手書きしたようなフォント「適当ポエム」は、ひらがな、カタカナ、漢字や英数字を合計で9000字以上収録しており、無料で商用利用も自由に使うことができます。 適当ポエム（フリーフォント） - Cockatrice Digital - BOOTH https://cktrc.booth.pm/items/4806814 ゲーム制作にも使える手書きフリーフォント配布中 クレジット表記不要で商用利用可 アップデートを続けて現在9000字くらい収録しています 適当ポエム（フリーフォント） | Cockatrice Digital https://t.co/XXBwZbcj24 #スーパーゲ制デー pic.twitter.com/7SqqtaiE7w— Hagi42 (@hgwr42) 適当ポエムは趣味でゲーム制作をするHagi42氏が配布しています。フォントをダウンロードするには、Hagi

テキストからCADデータを自動生成する「Text-to-CAD」α版公開　Zoo：CADプログラムにインポートして編集できる 米国スタートアップ企業のZooは2023年12月19日（米国時間）、テキストプロンプトからCADデータを自動生成する「Text-to-CAD」のα版を公開した。Zooは、テキストから3Dモデルを生成する既存のText-to-3Dモデルとの違いとして、点群データ（ポイントクラウド）を使用せず、B-Rep（※）を生成することを挙げている。 ※注：B-Rep（境界表現）は、頂点、エッジ、面で構成される表面を使用して3Dオブジェクトを簡潔に定義し、その外部形状の輪郭を描く。暗黙的モデリングとは異なり、B-Repはオブジェクトのジオメトリとトポロジーを正確に制御し、正確な寸法と公差が重要な製造プロセスに不可欠な正確かつ効率的な設計変更を容易にする。 既存のText-to-3D

マンガ・同人誌向けのアンチック体フォントはたくさんあります。今回紹介する「GL-ノバンチカ源」はアンチゴチとしての読みやすさはもちろん、セリフや擬音・擬態語に使用する濁点・半濁点つきのひらがな・カタカナ、小書き仮名も揃っており、こんなにも仮名や記号文字が揃っているフォントはないと思います。小書きの「ん」や「ー」の濁点なども揃っています。 オープンソースなので、個人でも商用でも完全に無料で利用できます。しかも、改変や組み込みもOKの太っ腹ライセンス！ GL-ノバンチカ源 -GitHub 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」のダウンロード 「GL-ノバンチカ源」を使ってみた 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」は、「GL-アンチック」「GL-オとマのペ」などマンガ・同人誌向けのフリーフォントや「GL-築地初号などを多数リリースされているGutenberg Lag

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに 人は見た目が9割 皆さん一度はこの言葉を耳にしたことがあるのでしょう。内面がどれほど素晴らしくても、外見がそれに見合わないと、なかなか本当の価値を認めてもらえないものです。 この話は人間だけでなく、アプリケーションにも当てはまります。どれだけ内容が素晴らしくても、見た目がイマイチだったり使い勝手が悪かったりすると、ユーザーに敬遠されてしまいます。(私は以前ネ⚪︎フリからア⚪︎プラに切り替えたのですが、使いにくく感じたため、すぐに元のサービスに戻しました) エンジニアの皆さん、優れた技術力を持ちながら、デザインが原因でユーザー離れを招いていませんか？そうならないよう

1980年、東京生まれ。片手袋研究家。町中で見かける片方だけの手袋を研究し続けた結果、この世の中のことがすべて分からなくなってしまった。著書に『片手袋研究入門』（実業之日本社）。 前の記事：有名人と同じ高さの棒で身近に感じられる ＞ 個人サイト 片手袋大全 世界を変えるかもしれないアイディアが、ふいに降りてきた 「スリットアニメーション」あるいは「スキャニメーション」というものをご存じだろうか？人間の錯視を利用したアニメーションの手法で、パラパラ漫画なんかに近いものだ。

「いらすとや」の素材がAdobe Expressに新搭載。豊富なイラストをデザインに取り入れよう 季節のイベント・動物・人物などのかわいいイラストを個人利用・商用利用ともに無料で提供するフリー素材サイト「いらすとや」とAdobe Expressが連携し、Adobe Expressの「アドオン（Add-on）」経由で素材を使用できるようになりました。 アドオンとは、Adobe Expressに追加して新たに機能を拡張することができるツールです。具体的には、Adobe Expressで提供されていない画像、動画や音楽素材を追加したり、外部サービスと連携したりすることができるようになります。 「いらすとや」のアドオンでは、3万点以上のいらすとやの素材の一部が期間限定でAdobe Expressのアプリ上で検索可能になり、制作中のバナーやチラシにワンクリックで追加することができます。お正月や花見な

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のリボンを実装できるCSS Ribbon Shapesを紹介します。 リボンは、よく見かけるシンプルなリボンをはじめ、パネルに垂れ下がるようなリボン...記事の続きを読む

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使

kaoruww @kaoruww サイゼリヤの新オーダーシステムの話｜井登友一 note.com/corobutika/n/n… 画面遷移の様子。自分は卓上の説明をほぼ読まずに入力したが迷うポイントはなかった。最後まで読まなかったから、会計時にテーブルの紙の伝票をそのままレジに持っていき支払ったので会計ボタン押さなかったな。問題なかった。 2023-11-23 12:18:20 リンク note（ノート） [UX小話]サイゼリヤの新オーダーシステムの話｜井登友一（YuichiInobori) あたしは自他ともに認めるサイゼリヤエンスージアストなんですが、昨夕、出先でWiFiが使いたくなって近くにあったサイゼリヤに立ち寄った際、なんとオーダーシステムが顧客自身のスマホを使ったセルフオーダーシステムに変わっていました。 （店員さんにお聞きしたところ、現時点では全国で数店舗だけの試験導入段階との

個人でも商用でも完全に無料で利用できる、さまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、全部ダウンロードすると時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。1年くらい前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティフリーとなっています。詳しくはダウン

｢デザインってちょっと苦手…｣と思う人にこそ使ってほしいアドビの新しい生成AI2023.10.12 18:007,534 山本勇磨 テンプレートの概念が変わるかも。 Photoshop（フォトショップ）などのクリエイティブツールを開発するAdobe（アドビ）は、現在クリエイター向けのカンファレンス｢Adobe MAX｣を開催中です。 初日は、Adobeの生成AIのアップデートが発表。これによってプロユーザー向けのツールである｢Photoshop｣や｢Illustrator（イラストレーター）｣などのソフトは生成AIによって大幅に進化しました。 しかしプロだけに恩恵がある話ではありません。むしろ｢デザインって苦手なんだよな…｣という人にこそおすすめしたい新しい生成AIツールがあるんです。 簡単に使えるデザイン制作ツールに、最新のAIが搭載Adobeの制作ツールにはさまざまなプランがありますが

CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ

A graphic design app that helps you create professional quality social media posts, invitations, digital postcards, graphics, and more. Start with your idea and create something unique for you.