タグ

designに関するhotmilkcocoaのブックマーク (231)

  • 【無料】日本語フォント「ビルの谷間と高架下」フリー版 - TYP store - BOOTH

    語(和文)フォント「ビルの谷間と高架下」 フォントデータ形式:OpenType 収録字種:一七万丈三上下不与世両並中丸主久之乗九乱了予争事二互五井亡交京人今介仏仕他付代令以仮仲件任企伊休会伝伸似位低住佐体何余作使例供依価便係保信修俺倉個倍倒借値健側備傷働像僕優元兄先光免児党入全八公六共兵具内円再写冷処出分切刊刑列初判別利制刺刻則前剤割創劇力加助労効動務勝勢勤包化北区医十千半卒協南単占印危厚原厳去参又及友反収取受口古可台史右号司各合吉同名向君否含吸吹告周味呼命和品員商問善喜営器四回因団困囲図固国園土圧在地坂型城域執基堂報場塩境増壁壊士声売変夏夕外多夜夢大天太夫失奈契奥女好妙姉始委姿娘婚婦嫌子字存学宅守安完宗官定実客室宮害家容宿寄密富寝察審寺対専射将導小少就尾局居届屋展属山岡岩島崎川州工左差己巻市布希帝師席帯帰常幕平年幸幹庁広床底店府度座庫庭康廃延建弁式引弟弱張強弾当形影役彼待律後徒従得

    【無料】日本語フォント「ビルの谷間と高架下」フリー版 - TYP store - BOOTH
  • 【フリーフォント】築豊初号見出し明朝│見出し用オールドスタイルかな書体 - 文字魚│Typographish - BOOTH

    ■書体概要 築豊初号見出し明朝(つくほうしょごうみだしみんちょう)は金属活字の築地初号やそれから派生した民友社初号明朝、写植書体のかな民友明朝、大蘭明朝参考に制作した見出し用かな書体です。 豊かな表情のある骨格や文字と多少不揃いな雰囲気を残すことを意識しています。 また、OpenType機能のStylistic Setを使うことができ、一部字形を旧いものと現代で一般的なものに切り替えが可能となっております。(ss01~02までを収録) 等幅フォントのため、ご自身で適切なカーニングを行うとよりきれいに見えるでしょう。 ■収録字形 ひらがな、カタカナ、約物、一部記号の全311グリフが収録されています。 詳しくは、同梱の画像に掲載しています。 ■ご利用にあたり 商用・個人利用可能です。また、著作権は放棄しておりません。 個人的なフォントの改変は自由ですが、派生フォントの配布はお控えください。 フ

    【フリーフォント】築豊初号見出し明朝│見出し用オールドスタイルかな書体 - 文字魚│Typographish - BOOTH
  • 藍原サインペン

    藍原サインペン 素材ご利用の際は 必ず利用規約を読み、ご理解・ご了承された上で利用してください。 ここに書いてあることがわからない方・守れない方は素材利用をご遠慮ください。 2024/07/24 藍原サインペンについて 『藍原サインペン』は、フリー版とシェア版があります。 フリー版はひらがな、カタカナ、記号、教育漢字(1006文字)+α、数字、アルファベットを打つことができます。 シェア版はフリー版にプラスして、半角アルファベット、半角記号、JIS第一水準漢字を完全に収録、JIS第二水準漢字は使用頻度の高そうなものを中心に収録し計5020文字を打つことができます。 ※JIS第一水準漢字とはJISで定められた漢字の規格で、特に使用頻度の高い2965字を指す。 常用漢字1945字とその他の人名用漢字が含まれており、通常の文書であればJIS第1水準の文字だけで記述できるとされている。 ※JIS第

    藍原サインペン
  • 藍原勘亭流

    藍原勘亭流 素材ご利用の際は 必ず利用規約を読み、ご理解・ご了承された上で利用してください。 ここに書いてあることがわからない方・守れない方は素材利用をご遠慮ください。 2023/11/12 藍原勘亭流について 江戸っぽさ、日っぽさを出したいとき、インパクトが欲しいときなどにお勧め! 『藍原勘亭流』フォントは、フリー版とシェア版があります。 『藍原勘亭流 フリー版』は、ひらがな、カタカナ、第二学年までに習う教育漢字(240文字)を収録しています。 『藍原勘亭流 シェア版』はひらがな、カタカナ、一部記号、数字、アルファベット、半角アルファベット、半角数字、一部半角記号、JIS第一水準漢字(2965字)・JIS第二水準漢字の一部、あわせて4302文字を収録しています。 ※JIS第一水準漢字とはJISで定められた漢字の規格で、特に使用頻度の高い2965字を指す。 常用漢字1945字とその他の人

    藍原勘亭流
  • Web制作者の念願がついに叶った! height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

    今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか! と驚きました。 🧙‍♂️ CSS trick: transition from height 0 to auto! by Fra

    Web制作者の念願がついに叶った! height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法
  • 超リアルな「スライムシミュレーション」映像が注目集める。UE5のプロが“かわいいスライム”を丹念に表現、でもめっちゃむずい - AUTOMATON

    とあるゲーム開発者が公開したキュートなスライムのゲーム映像が今注目を集めている。「REAL SLIME SIMULATION」と銘打たれたその映像では、巨大なスライムが日らしき街を動き回る、すべり台やシャワーを楽しむ様子や、そのスライムらしい挙動がかわいいと注目を集めているかたちだ。 映像では、日語の看板や表札が立ち並ぶ夏の日らしき街を舞台にスライムが自由に動き回るゲームプレイが映し出されている。自転車や手すりをすり抜ける様子や、シャワーを浴び膨張する姿、すべり台からこぼれ落ちる粘性のかたまりなど、スライムのあらゆる挙動とそれに対する物体の動きがゲーム内で再現されている。また、映像の途中にはモンスターの手をしたカーソルが登場。スライムを撫でたり、暑さで疲弊するスライムに対して炭酸飲料を渡したり、シャワーをかけてあげたりとペットのようにスライムをかわいがっている様子が映される。 この映

    超リアルな「スライムシミュレーション」映像が注目集める。UE5のプロが“かわいいスライム”を丹念に表現、でもめっちゃむずい - AUTOMATON
  • HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes

    HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のリボンを実装できるCSS Ribbon Shapesを紹介します。 リボンは、よく見かけるシンプルなリボンをはじめ、パネルに垂れ下がるようなリボンや複雑な形状のリボンまでたくさんあります。リボンを実装するときには、ここを見ればコピペで簡単に実装できます。

    HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes
  • Midjourneyを1年間使って見つけた、Webデザインに使えるプロンプト全ガイド

    「どうすればAIWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを1年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何?」というひとは、基の使い方をまとめた以下のガイドを参考にど

    Midjourneyを1年間使って見つけた、Webデザインに使えるプロンプト全ガイド
  • Open Doodles

    Open Doodles by Pablo Stanley. Free for Commercial and Personal Use. No need to credit, license, or anything.

    Open Doodles
  • Humaaans: Mix-&-Match illustration library

    humaaansMix-&-match illustrations of people with a design library

    Humaaans: Mix-&-Match illustration library
  • Open Peeps, Hand-Drawn Illustration Library

    Open Peeps by Pablo Stanley. Free for commercial and personal use under CC0 License. Mix & Match.The library works like building blocks made of vector arms, legs, and emotions. You can mix these elements to create different Peeps. Combine clothing and hairstyles to add flair. Change emotion with different facial expressions. Set the scene with different poses—including standing and sittingDownload

    Open Peeps, Hand-Drawn Illustration Library
  • Transhumans: Open Source Punk Sci-Fi Art Collection by Pablo Stanley

    transhumansopen source illustrations of character transcending their biological barriers

    Transhumans: Open Source Punk Sci-Fi Art Collection by Pablo Stanley
  • ユーザーが直感的に理解できる「待ち時間」の適切なUIの選択方法まとめ

    ウェブサービスの開発において、「待ち時間をどうするか」は大きな問題です。もちろん、待ち時間を減らせるのであれば減らしたいものですが、仕組みの都合上どうしても待ち時間が発生してしまう場合があります。そうした場合にユーザー体験を向上させるデザインのパターンについて、デザインを専門に行う企業の「Pencil & Paper」がブログでまとめています。 UX Design Patterns for Loading https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/ ブログによると、ロードのパターンは「パッシブロード」と「アクティブロード」の2パターンに分けられるとのこと。 ◆パッシブロード パッシブロードは、システムが最初にデータ量の多いページをロードするとき、ファイルを開くとき、または検索結果を表示する

    ユーザーが直感的に理解できる「待ち時間」の適切なUIの選択方法まとめ
  • 最近のUIデザインのテクニックを解説! より使いやすいボタンをデザインするときのポイント

    WebサイトやスマホアプリのUIに使用されているボタンをデザインするときに気をつけるポイント、より使いやすくするためのポイントを紹介します。 UIのボタンは色だけに頼らない明確な視覚的階層が必要で、同じスタイルの場合は区別できるようにデザインすることが重要です。 Button design tips to avoid common mistakes by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに UIのボタンで見かけるよくある間違い ボタンをデザインするときに重要なこと より良いボタンにする方法 より実践的なUIデザインのガイドライン はじめに 私はデザイナーになって20年が過ぎ、多くのプロジェクトでボタンを使用してきましたが、ボタンのデザインについて深く考察する時間を取っていなかっ

    最近のUIデザインのテクニックを解説! より使いやすいボタンをデザインするときのポイント
  • Free Logo Maker | Download your logo 100% free

  • デザインの「悪い方がよい」原則 The Rise of "Worse is Better"

    デザインの「悪い方がよい」原則 The Rise of "Worse is Better" rpg@lucid.com 日語訳: daiti-m@is.aist-nara.ac.jp 私や Common Lisp と CLOS のデザイナーのほとんどは、MIT/Stanford 方式の設計に親しんでいる。 この方式の核心は、「正しい」やり方をせよ、という ことにつきる。デザイナーにとっては、以下の点をすべて正しく満たすことが 重要である。 簡潔性 デザインは実装と使用法の両面において単純でなければならない。 このとき、使用法が単純な方が、実装が単純なことより重要である。 正当性 デザインはすべての点において正しいものでなければならない。 誤りは許されない。 一貫性 デザインは一貫性を欠いたものであってはならない。一貫性を保つ ためには完全性は少しだけ犠牲にしてもよい。一貫性は 正当性と同

  • 【CSS】まだホバー時のスタイルを :hover だけで指定してるの?

    はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう! @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス(正確には、ホ

    【CSS】まだホバー時のスタイルを :hover だけで指定してるの?
  • Randomness in CSS using trigonometry

    In the past, I have covered the topic of pseudo-randomness in CSS using modulo operation and I used prime numbers to create an automatic counter that can be used to generate different values for each object. Thanks to that, we could compute pseudo-random values for each element independently. As robust as this solution is, it has few downsides: The modulo function is not continuous It is overly co

    Randomness in CSS using trigonometry
  • フィッツの法則と、UXにおけるその応用

    ターゲットまでの移動時間は、ターゲットの大きさとターゲットまでの距離に依存する。 Fitts's Law and Its Applications in UX by Raluca Budiu on July 31, 2022語版2023年1月10日公開 歴史 ポール・フィッツは、ヒューマンエラーが単なる人間による誤りではなく、不適切なデザインに起因することを理解した最初の心理学者の1人である。彼は第二次世界大戦中に飛行機のコックピットのデザインを研究し、ヒューマンエラーが原因であるとされていた多数の戦死が、実際にはデザインの不適切さによるものであると主張した。 1950年代になると、彼はシャノンの有名な情報理論の影響を受ける。そして、ジョージ・ミラーがチャネル容量の概念を人間の記憶に適用し、その過程で人間の短期記憶の情報処理能力として有名なマジカルナンバー7を導き出したように、フィッ

    フィッツの法則と、UXにおけるその応用
  • SVG Artista - SVG Drawing Animation Generator

    <svg viewBox="0 0 564 242" version="1.1" xmlns="http://www.w3.org/2000/svg" width="564" height="242"> <g stroke-width="2" stroke="none" fill="none" fill-rule="evenodd"> <path d="M284.896413 1.77679122c.882345.50911399 1.614955 1.2417713 2.124036 2.124173l21.099094 36.57152808-23.135682 15.8357502c4.105694 3.2404436 6.948421 5.8686448 8.528184 7.8846038 1.579762 2.0159589 3.442094 5.5716267 5.58699

    SVG Artista - SVG Drawing Animation Generator