ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。 Proportio Proportio -GitHub Proportioの特徴 Proportioの使い方 Proportioの特徴 Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン
音楽、数学、タイポグラフィ
先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編 - Qiita
デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編 ３ヶ月やるとどうなるか Daily Cocoda 1日目 初心者丸出しのデザインですね。丸アイコンの画像が大きすぎたり、ピンクの背景色と白の文字色があってなかったり､パディングとマージンがおかしかったりしています。 ちなみにネットでよく見かけるこのアイドル（茜さやさん）は、フリー素材で、ぱくだそさんから取得してきました。 Daily Cocoda 50日目(最終日) 50日目は初日からの成長を感じさせるいい感じのデザインですね。 諸注意 このページはデザイン一日目の自分を対象にしています。 デザインシステムはマテリアルデザインを採用しています。 オレオレ流です。間違いも多々あると思いますので、指摘お願いします。 ここでいう３ヶ月とは、6H/日 * 90日です。
ノンデザイナーズ・Wantedly デザインシステム完全理解ペーパー | Wantedly Engineer Blog
Wantedly では新卒含む新入社員向けに研修を毎年実施しています。これは「新入社員向け」といいつつ既存の社員も自由に参加できるものです。今年はこの研修のフォーマットを借りて、Wantedly のプロダクト開発を支える重要な概念のひとつである「Wantedly の UI デザインシステム」についての研修を、ソフトウェアエンジニアの @izumin5210 (筆者) とプロダクトデザイナーの @NishaMe で実施しました。 デザインの構造を正しく捉えることは、UI の実装を専門にしているかどうかを問わず、正しい実装 - 開発生産性が高く、ユーザにとっても使いやすい実装 - のための重要なポイントです。よってこの研修は「広義のフロントエンドエンジニア」、業務中に UI を実装することがある全てのエンジニアを対象としました。 Web フロントエンドエンジニアモバイルエンジニア専門ではないが
「オーバーシュート overshoot」なる用語について（この用語で「爆発的な感染拡大」を言う英語の実例がほとんど確認できない件）
中途半端な英語使いが英国からのニュースを東京で読み、あちこちふらふらうろうろ。時々嘘。 はてブ = http://b.hatena.ne.jp/nofrills Twitter = http://twitter.com/nofrills Twitterのログ = http://twilog.org/nofrills ◆「なぜ、イスラム教徒は、イスラム過激派のテロを非難しないのか」という問いは、なぜ「差別」なのか。（2014年12月） ◆「陰謀論」と、「陰謀」について。そして人が死傷させられていることへのシニシズムについて。（2014年11月） ◆知らない人に気軽に話しかけることのできる場で、知らない人から話しかけられたときに応答することをやめました。また、知らない人から話しかけられているかもしれない場所をチェックすることもやめました。あなたの主張は、私を巻き込まずに、あなたがやってください
こんにちは、たかとーです。 今日はTailwind CSS Resources you wish you had. - DEV Community 👩💻👨💻の日本語訳記事です！ 当記事は、Janeさんの許可を得て翻訳しています。Tweet Tailwind CSS Resources you wish you had. Tailwind CSS リソース 私が学んでいたときに役に立ったいくつかのリソースをリストアップしていきます。それらをあなたのリストに追加したり、すでにある場合は、それらを使い続けてください。 1) TailwindInk ブランドカラーを選ぶと、補色のリストを生成してくれるカラージェネレーターサイトです。カラーコードはTailwindのconfigファイルに簡単にコピーすることができます。 2) Tailblocks この素晴らしいプロジェクトはMert C
こんにちは、たかとーです。 今日はTailwind CSS Resources you wish you had. - DEV Community 👩💻👨💻の日本語訳記事です！ 当記事は、Janeさんの許可を得て翻訳しています。Tweet Tailwind CSS Resources you wish you had. Tailwind CSS リソース 私が学んでいたときに役に立ったいくつかのリソースをリストアップしていきます。それらをあなたのリストに追加したり、すでにある場合は、それらを使い続けてください。 1) TailwindInk ブランドカラーを選ぶと、補色のリストを生成してくれるカラージェネレーターサイトです。カラーコードはTailwindのconfigファイルに簡単にコピーすることができます。 2) Tailblocks この素晴らしいプロジェクトはMert C
1.はじめに 私は(筆者は)モバイルエンジニア転職を目指す立場です。個人的にアプリのUIデザイン知識はデザイナーだけでなくエンジニアにも必須だと思っています。私自身がアプリ開発の過程でデザインについて指摘され、「このままデザインに無知では良くないと思った」、「同じような立場の方にモバイルアプリのデザインの事を少しでも知ってもらいたいと思った」その２つの理由から本記事を執筆しました。 現在、エンジニアを目指している方やアプリ開発はしているけどモバイルデザインについて改めて知りたいという方、そのような方向けに改めてiOS・Android双方のデザインガイドラインについてまとめてみました。 2.iOSとAndroidのデザインの考え方 2020年現在、iOSではHuman Interface Guidelines、AndroidではMaterial Designの考え方をもとにアプリUIが作られ
ウェブやソーシャルメディアなどで、日本語の原稿を英語に翻訳した（と思われる）コンテンツを目にする機会が増えています。しかしそういった英語のコンテンツの中には、欧文タイポグラフィの視点から見ると少しおかしく感じられるものも少なくありません。たとえば句読点や記号の使い方が間違っていたり、語句が不自然に強調されていたりといった具合です。このようなちょっとしたミスは、ひとつひとつは些細なことでも、結果としてコンテンツが正しく伝わらなかったり、書き手の信用を下げてしまったりする原因にもなります。 この記事では英語のコンテンツを作るときに気をつけたいタイポグラフィのディテールについていくつか解説します。タイポグラフィといっても、グラフィックソフトを扱う技術も高度なCSSの知識も必要ありません。ほんの少しテキスト原稿に手を入れたり、マークアップを工夫したりするだけでも、タイポグラフィの質を高められるので
デザインという営みの本質はどこにあるのだろうか？ よくその意味について考えている。 というのも、一般的に「デザイン」と呼ばれているものが、資本主義社会の「過処分注意力搾取促進デバイス」としてUXという名の下に、その部分だけの適在性を過大評価・利用されていること違和感を覚えたからかも知れない。おそらく私は、個人的に理解しているデザインの営みそのものの本質から乖離したところで、資本主義的な目的の聞こえをよくするためのユーフェ二ズムとして「デザイン」という言葉が使われていることに違和感を感じている。 日本的なアプローチを参考にして体系化されたと言われているIDEOやd.schoolを始めとした現代版の「デザイン思考」もきっと私の違和感の対象かもしれない。この「デザイン思考」とは、スタンフォード大学で専門性と論理性を極めた学生や研究者たちに、「共感」と「トライ＆エラー」いうデザインの側面をインスト
Google のデータ ビジュアライゼーションに関するマテリアルデザインの記事を Tableau 視点で読む - データ可視化のアイデア帳
先日話題になった、Google のデータ ビジュアライゼーションの記事が気になったので読んでみました。 material.io この記事はデータを可視化する際の基本的なセオリーから、個々のケースでの DO と DON'T が紹介しています。非常にまとまっている反面、英語であること、それなりの前提知識を必要とするなと感じたので*1 Tableau 的な視点から読んでみた感想をまとめていきます。 なお Tableau 視点ですので、Tableau にない思想やない機能については言及しません。訳してるように見える箇所も意訳ですので、正確性を求める方は元記事を読んでください。 Principle Type Selecting Charts 時系列変化を示す場合 棒グラフと円グラフ 棒グラフは異なるカテゴリーの時間による変化を示すのに使う 円グラフは時系列変化に使わない エリア チャート 積み重ねた
[レポート] デザインシステムにおけるフロントエンド #linedevday_report | DevelopersIO
オハコンバンニチワ CX事業本部の清田です。 LINE DEVELOPER DAY 2019 の DAY2 に参加してきましたー。自分の中で注目している DesignSystem についてとりあげている 「 デザインシステムにおけるフロントエンド 」セッションがあったので参加しつつレポートをご紹介できればと思います。 概要 2019年11月20日（水）・21日（木）にグランドニッコー東京 台場でLINEのデベロッパーカンファレンス「LINE DEVELOPER DAY 2019」が開催されました。 タイトル デザインシステムにおけるフロントエンド [Front-End in Design System] スピーカー 岡崎 晶彦 氏 [LINE Front-end Standardizationチーム Front-end Engineer] セッション概要 LINEは、クライアントアプリ/W
![[レポート] デザインシステムにおけるフロントエンド #linedevday_report | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/cce94c90ddc76c1ea7c6bf4be9e744090746ae41/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F11%2Flinedevday20191.png)
Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、 Layout Shift が発生してしまう。 これを防ぐ方法として、 CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); asce
普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。 日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。 ztext.js ztext.js -GitHub ztext.jsの特徴 ztext.jsのデモ ztext.jsの使い方 ztext.jsの特徴 ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
チートシートとは、覚えておきたいことをまとめた「カンニングペーパー、カンペ」のようなものです。この記事では、デザインやWeb制作の作業効率が上がるチートシートをまとめてご紹介します。 デザインの現場に欠かせないPhotoshopやIllustratorといったAdobe製アプリはもちろん、HTMLの基本やCSS FlexboxやGridといった覚えておくのが大変なものから、配色やタイポグラフィーの基本など、「あれ、どうやるんだっけ？」そんなときに役立つチートシートを、日本語版中心にまとめています。 デザインやWeb制作の作業効率が上がる便利チートシートまとめ Photoshopのショートカットキー早見表 Adobe謹製のフォトショップ用チートシート。数あるショートカットの中から、デザイナーによく使われているものをピックアップして一覧表にしているそう。PDFで保存し、印刷することもできます。
LibreOffice CJK問題の第一人者が語る、これまでとこれから 〜LibreOffice Asia Conference 2019 Tokyo基調講演「LibreOffice CJK Bugs, Fixes, and Stories.」レポート〜 オープンソースのオフィスソフトであるLibreOfficeの日本語コミュニティは、LibreOfficeを支援する非営利団体The Document Foundationの全面的な協力の下、2019年5月25日（土）と26日（日）の日程で、「LibreOffice Asia Conference 2019 Tokyo」を開催しました。会場は日本橋・サイボウズ株式会社東京オフィスです。 アジア圏のLibreOfficeコミュニティとビジネスを活性させることを目的とした本イベントは、本年が記念すべき初の開催であり、またLibreOffice
デザイントークンって何？｜seya
「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこの W3C では Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. 訳: デザイントークンとは、色、スペーシング、タイポグラフィのスケールなど、デザインシステムを構成する不可分なピースのことです。 Design Tokens W3C Community Group https://github.com/design-tokens/commun
ここにきて、奇妙な逆転現象が生じている。 現在、写植の書体をいちばん身近に感じているのは、ひょっとすると、文字の読み書きを覚えて間もない子どもたちかもしれない。 どうしてかというと、他のジャンルに比べてロングセラーが多い子どもの本には、いまでも写植の文字がのこっているから。 その理由を、絵本の編集者の方に訊ねてみたことがある。 話によると、同じロングセラーでも、実用書、文庫の場合は、改訂や新装版にあわせてDTPに変えることが多い。でも、新刊書店で児童書の棚にずっと置かれているような絵本は、つくりなおすタイミングがむずかしいという事情らしい。 世代を超えて長年愛されている『ぐりとぐら』も、そうした「タイミング」が訪れていない名作絵本の一冊だ。 野ねずみの「ぐり」と「ぐら」は、森のなかで大きなたまごを見つけ、カステラをつくることにする。 ふんわりと焼きあがった黄色いカステラに、子どものころ心奪
「俺にはクールな画面は作れない」 そう思う人もいるかもしれません。 エンジニアが知っておきたい色についてのお話を見ていただいた方はおわかり頂けたことと思いますが、知識で補える部分もたくさんあるんです。 本当の話なんです・・・そう、フォントの話なんです。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です フォントの種類を知る 適切なフォントを選ぶためにはまずフォントの種類を知る必要があります。 専門家からするともっとたくさん分類はあるのかもしれませんが、エンジニア視点（私視点）だと大きく以下の分類があると思っています。 セリフ体 or サンセリフ体 プロポーショナル or モノスペース（等幅） 英字 or 和文 ＃英語、日本語以外の言語対応はした経験がないので他の言語はわかりません・・・ セリフ体 or サンセリフ体 左側がセリフ体
Safari 13.1 以降では San Francisco の Mono や Rounded な variant とかを CSS で指定できるようになっている - polamjaggy
WWDC20 の "The details of UI typography" という動画をなんとなく見ていたところ偶然気がついた。 developer.apple.com Transcript 的にはこの辺: Now the -apple prefixed version has a standard name: system-ui. And earlier this year, we're bringing a new set of CSS font family names, like ui-rounded, ui-serif and ui-monospace to Apple platforms. そもそも: San Francisco 以降 Apple のシステムフォント群はじわじわ増殖している San Francisco フォントが Apple 製品のシステムフォントになってか
はじめに 本稿は、拙著『タイポグラフィの領域※1』（以下、『領域』）について、その結論部を補足する試みである。 『領域』を執筆した動機は、タイポグラフィという言葉の定義化の必要を痛感したからである。まずこの国では、本来の意味と齟齬をきたす使われ方がなされていると見えたからであり、次に本質的な概念の抽出が、その語を口にする者にとっては必要だろうと考えたことにある。そのためには時代の技術変化に支配される環境下においても一定不変である概念を引き出す努力が不可欠であり、その定義化という作業では歴史を遡らざるを得ないことから、可能な限りの広い渉猟と慎重さが要求される。それに応えられたかはかなり心もとないが、幸運にも発表の機会を得て、ここに四半世紀を迎えようとしている。 『領域』の結論では、「タイポグラフィとは活字書体による言葉の再現・描写である」と示し※2、定義の一例として提案した。 タイポグラフィ
Adobe Fontsオススメ欧文書体－Serif・San Serif・Slab Serif編｜文字とフォントのことはじめ10
Adobe Fontsオススメ欧文書体－Serif・San Serif・Slab Serif編｜文字とフォントのことはじめ10 欧文書体の新定番をAdobe Fontsで見つけよう 文字・フォント・デザインの情報をお届けする連載「文字とフォントのことはじめ」、第10回は膨大な欧文書体のなかからオススメフォントを紹介していきます。 Adobe Fontsは非常に多くのフォントを自由に使えるクラウドフォントサービスです。 その数は2023年12月現在、25,000以上にものぼり、その多くはラテン文字を中心にした、いわゆる“欧文書体”が占めています。 デザインワークでは、使えるフォントの数が多いほど、文字表現の選択肢は増えていきます。さまざまな書体が使えることはデザイナーにとって歓迎すべきことなのは間違いありません。 しかし一方で、その膨大な書体を前に、“数が多すぎて、探すのが大変”、“どれがい
Figma Config 2022 感想まとめ - Goodpatch Tech Blog
2022年5月10日から2日間かけて行われた「Figma Config 2022」のアーカイブ動画が先日公開されましたね！ 本記事では、有志のGoodpatchエンジニアが興味を持ったセッションをピックアップし、セッションの概要や感想をご紹介します！ すべてのアーカイブ動画はこちら👉 Config 2022 - YouTube ピックアップセッション💙 Figma tutorial: What’s new in Auto layout negative spacing absolute position text baseline alignment How design tokens can make us better collaborators - Jan Six (Config 2022) Figma Hacks and Workflow Enhancements with P
アップグレードに必要なシステム要件が厳しすぎて新しめの PC でも動かない可能性があるということで問題になっている Windows 11。 私が所有している PC は Core™2 Duo 世代のものばかりなので Windows 11 へのアップグレードは絶望的。今後、Mery の Windows 11 対応をどうするか、非常に悩ましいところです。 Windows 11 を使ってみる そんな状況ではありますが、Windows 11 の Insider Preview (テスト版) はシステム要件が緩いということで、これを使って Mery の動作を検証してみました。 さて、Windows 11 の UI ですが、雑に言うと macOS っぽくなった感じがします。エクスプローラーやアイコンのデザインはちょっとオシャレになっており、個人的には割と好みです。 ただ、macOS のようにタスクバーの
あらま、顔がヴァイオリンに…… この春ヴェルサイユ宮殿で、19世紀に活躍したフランス人画家オラース・ヴェルネの展覧会が開催されていた。ヴェルネは、オリエンタリズムや歴史画を手がけたアカデミズムの画家として語られることの多い画家だ。しかしこの展覧会は、意外にもロマン主義と古典主義をつなぐような革新的潜在性を秘めた画家であったことを示す点で、実に発見の多い企画だった。なかでも興味深かったのが、最後の部屋にひっそりと展示されていた風刺的自画像（図１）である。ここでヴェルネは、60歳を迎えた自己の頭部を、ヴァイオリンに見立てている。 図１ オラース・ヴェルネ《ヴェルネ自身によるオラース・ヴェルネ》1850年ごろ、フランス国立図書館 出典：Valérie Bajou (dir.), Horace Vernet (1789-1863), cat. exp., Château de Versailles
こちらの記事はアプリ「Adobe Illustrator」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。 タイトルやロゴをデザインする８つのアイディアと作り方 フォントを少しアレンジすることで、タイトルやロゴのデザインを作成します。 そのため、使用しているフォントの紹介をしていますが、一部有料フォントも使用していますが、持っていないフォントの場合は似ているフォントなどで代用してもらって全然OKです！ 今回ご紹介する８つのタイトル・ロゴのデザインアイディアです。 映画ポスターや小説表紙っぽいですが、バナーデザイン、ポスターデザイン、Youtubeサムネでも使えるテクニック・アイディアなので、ぜひ参考にしてみてください！ （１）三角形を追加して疾走感・加速感 使用フォント：ＶＤ ロゴジー 特太 文字を斜体に変形 三
〈日本で「活字」という語はいつ頃から使われているか、また「Movable Type」の訳語なのか〉問題を掘り下げるためのメモランダム - 日本語練習虫
※2022年4月5日18時追記：長いので、せっかくのセクション見出しを目次として冒頭に並べ、少し読みやすくしてみました。 目次 1. はじまりのQA 2. 並行世界にて（１）図書室好きのルームメイツ 3. 本木昌造は「活字」という語を使用した文献などを残していない？ 4. 並行世界にて（２）アンダーリム眼鏡とOEDそして 5. 陸深『金臺紀聞』より 6. 並行世界にて（３）独仏蘭葡から揺籃期本を眺めると 7. 今回採用する江戸期の時代区分 8. 並行世界にて（４）日本国語大辞典 9. 《日国》用例への疑義等 10. 近世木活字時代の「活字」用例 11. 「探求心に終わりはない」 1. はじまりのQA 印刷博物館 印刷工房のツイッター・アカウントから発信された2022年3月15日付のツイートに、こういうものがありました。 3月5日に開催いたしました、#大人のための活版ワークショップ #ONL
※Tauriって何？という方はお先にこちら↓の記事をどうぞ。 この記事は？ Tauriで使えるWebフレームワークを探してみよう、という記事です。 まずはRust部分（バックエンド）のコーディングに関係するVSCodeのプラグインを紹介してから、Webフレームワークの調査に入っていこうと思います。 なぜVSCodeのプラグインかというと・・・単純に私が普段VSCodeでコーディングしているからです😋 TauriでのRustコーディングに関係するVSCodeのプラグイン Tauri Tauriコマンドと、tauri.conf.json編集時の機能を追加してくれるプラグイン。 機能 コマンドパレットに、init、deps、dev、buildコマンドが追加 ドキュメントやオートコンプリートの表示 Rust自体のコーディングにはあまり関係ないので、入れるかどうかはお好みでよいかと。 rust-a
iOS/iPadOS 17では日本語の手書きキーボードが追加され、縦書きのテキスト認識表示もサポートされるそうです。詳細は以下から。 Appleは世界開発者会議(WWDC23)の基調講演の中で次期iPhone, iPad用OSが「iOS 17/iPadOS 17」を発表し、このiOS/iPadOS 17ではTransfermer言語モデルとオンデバイスの機械学習を利用し、これまで以上に単語の自動修正やインライン予想が正確になると発表しましたが、 AppleのKaran Miśraさんによると、iOS/iPadOS 17では、この他にも日本語キーボードに手書きキーボードが追加され、中国と日本語の縦書きテキストもテキスト認識できるようになるそうです。 Karanさんは、それ以外にも日本語や中国語環境で着信や連絡先UIで縦書きをサポートし、日本語を含む複数の言語で折り返しの機能を強化(禁則処理?
HOME Column/Interview Column , Review Together Forever, ECD：全作品解説(前編) by @VinylDealerBB ECD。 2018年1月24日、闘病の末帰らぬ人となってしまった、日本語ラップ最古参MCの名前だ。 享年57歳。そんな彼が惜しまれつつも他界し、早3年が過ぎようとしている。 にも関わらず、だ。例えば移民ラッパーとして昨今大きな注目を集めるMoment Joonが最新作『Passport & Garcon』収録の”TENO HIRA”でECDの名前をシャウトしたり、2020年6月にはECDの自主レーベル・FINAL JUNKYのカタログ全9作品がサブスク解禁されるなど、ここに来てむしろその存在はむしろ際立ってさえいる。そう感じるのは筆者だけではあるまい。 また、そんな在り方が、USで言うところの2PacやNotorio
大嫌いだったユーティリティーファーストCSS（TailwindCSS）と向き合った話 - Qiita
最近、業務にTailwindCSSとAstroを取り入れ始めました。 ここではそれまでの苦悩、導入までの軌跡や工夫についてご紹介します。 育った環境 私が社会人になるころにちょうどWeb標準という言葉が浸透し、「世の中はXHTMLでマークアップはセマンティックであるべし！」という価値観で育ちました。 CSSは名前の通り、カスケードするから良いものだと思っていましたし、クラス名はデザインの都合ではなく、機能や意味からつけることが幸福につながると信じていました。 当時は大量コーディングをより効率よく行うためにコマンドラインのプログラムをつくってXPathで抽出・変換し少しでも作業を軽減できないか試行錯誤したり、複数人でのコーディングをどのように効率よくまわせるか考えたり、HTMLをXMLとして捉えて、当時のXHTMLの思想に則って業務を進めていました。 XHTMLは廃れ、それほど厳格性を求めら
正直CSSは根本的に作り直してほしいと思うのですが、それはそれとして毎年大規模にJavaScriptの使用状況を調査しているThe State of JS(2018年日本語訳)という組織が、今年はCSSにも手を出しました。 以下はThe State of CSS 2019の日本語訳です。 The State of CSS 2019 ※↑元ネタは全部CSSで書かれてる Introduction Web開発ファミリーの中でも、JavaScriptは気が短く、毎年流行に流される10代の若者のように反抗的で、それを理解するには年を取り過ぎたと皆が感じています。 いっぽうCSSは勤勉で、礼儀正しく、決して妄断を下すことのない優等生です。 しかし、気を許さないでください。 CSSは既に20歳を超えているにも関わらず、今さらJavaScriptような激動の10代を迎えつつあるのではないかという兆候があり
はじめに iOSの標準フォントはSystem Fontで、具体的にはSF（San Francisco）である。サイズによって、SF Pro TextとSF Pro Displayが置き換わり、またトラッキングの値も変わる。この辺は、さすがApple、細かいこだわりを感じる。 詳細はHuman Interface GuidelinesのTypographyに記載されているのだけど、それは欧文についてだけだ。SF Fontには、当然ながら和文はない。では、XcodeでSystem Fontを設定した場合の和文フォントの正体は何なのか。iOSの日本語標準フォントはヒラギノ角ゴ ProNということは知っているが、よく見るとSystem Fontを選んだときの欧文はヒラギノには見えないし、Xcodeで選べるSystem Fontのウェイトは9種類（Ultra Light、Thin、Light、Reg
こんにちは、デザイナーの関口です。日本デザインセンター オンスクリーン制作室 というチームに所属しています。今回は、自分のサイトのブログ記事を、チームのnoteマガジン「ギンザウェブ」へ寄稿しています。 ─── まだ一般流通していない書体（制作者）にオファーをした先日「ON-SCREEN TYPOGRAPHY DAY2019」というイベントを知人のデザイナーと二人で共催しました。イベントそのものについては別記事にしたいと思っているのですが（なぜかブログがかけない病）、今回はイベントの要となったとある書体について、書き残してみたいと思います。 今回僕がイベント開催にあたって主軸をおいたのは主体的企画と対外的アウトプットで、客観的企画とイベント構築・運営ディレクションは共催のカワセさんによるもの。そしてイベントにおいて象徴的な役割となった「LP制作」で、まだ市販されていない書体を採用させていた
日本語書記技術WG報告書（2019年3月31日付）
慶應義塾大学SFC研究所 Advanced Publishing Laboratory 日本語書記技術WG報告書 2019年3月31日 目 次 日本語書記技術 WG の議論の概要… …………………………… 小林龍生… 5 EPUB は Web ではない…………………………………………… 村 田 真… 19 Is EPUB part of the web?… ………………………………… Florian Rivoal… 23 リフロー可能なドキュメント環境とは………………………… 木田泰夫… 29 簡便な行組版ルール（案） … ……………………………………… 小 林 敏… 35 読み効率を高める日本語電子リーダー設計の試み…………… 小林潤平… 49 組版についてのアクセシビリティ要件………………………… 村 田 真… 57 ルビの簡便な配置ルール（案） … ………………………
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React + Material-UIで管理画面を作成してみた | DevelopersIO
全米が待ち望んでいた超便利なTailwind CSSツール10選 - Qiita
全米が待ち望んでいた超便利なTailwind CSSツールリスト
モバイルアプリにおけるUIデザイン - Qiita
英語コンテンツを作るときに気をつけたいタイポグラフィのディテール
デザインという営みの本質を探る 1｜akiramotomura
Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io
テキストやSVGや画像が3Dで動く！HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js
不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
デザイン・Web制作の作業効率UP！便利チートシート17個まとめ
LibreOffice CJK問題の第一人者が語る、これまでとこれから 〜LibreOffice Asia Conference 2019 Tokyo基調講演「LibreOffice CJK Bugs, Fixes, and Stories.」レポート〜 | gihyo.jp
マンガチックの秘密 - 正木香子【タイポグラフィ・ブギー・バック】
エンジニアが知っておきたいフォントについてのお話 - Qiita
河野三男「タイポグラフィの領域：補遺」 | ÉKRITS / エクリ
テキストエディター「Mery」ベータ版 Ver 3.3.9 を公開
掌の美術論 <br>第15回 キュビスムの楽器の奏でかた、キュビスムの葡萄の味わいかた - けいそうビブリオフィル
サッと作れる！日本語タイトルロゴのデザインアイディアと作り方
Tauriで使えるWebフレームワークたち（VSCodeのプラグインも添えて）
iOS/iPadOS 17では日本語の手書きキーボードが追加され、縦書きのテキスト認識表示もサポート。
Together Forever, ECD：全作品解説(前編) by @VinylDealerBB - PRKS9
1万人に聞いた、2019年の最新CSS使用状況 - Qiita
【iOS】System Fontの和文（日本語）について - Qiita
［画像追加］ Koga Sansはいいぞ #ostd2019｜Yutaka Sekiguchi