https://note.morisawa.co.jp/n/nb96702245df1
「InDesignやIllustratorを使ってデザインを作ったはいいが、何か締まらない……」と悩んだことはありませんか？ 例えば…… 全体をもう一段階まとめたい！全体的にもう少し締まったまとまりのある感じを出したい！というとき、デザイン作業で意外と盲点になりがちなのが文字の「間隔」です。 この画像の場合、文字周辺がパラパラしていることでかなりゆったりした感じが出ています。 日本語における文字配置の基本日本語書体は原則、正方形の枠（仮想ボディ）を基準に作られています。 そして、日本語組版の原則はベタ組み……つまりこの正方形の枠が接する形で配置されるのが基本です。 （このあたりの話を詳しく知りたい方はぜひこちらもご覧ください！） しかし見出しなど、大きく文字を使う時は文字間が目立って見えてしまうことがあるため、文字を詰める作業が必要な場合があります。 文字配置の調整はプロのひと手間、料理で
Fluid Type Scale - Generate responsive font-size variables
Minimum (Mobile)At this minimum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio. Base font size (px)Screen width (px)Type scale ratioMinor secondMajor secondMinor thirdMajor thirdPerfect fourthAugmented fourthPerfect fifthGolden ratio Maximum (Desktop)At this maximum viewport width, all font sizes in your type scale are comput
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
鈴木丈「音楽、数学、タイポグラフィ」 | ÉKRITS / エクリ
タイポグラフィとしてのスタイルシート タイポグラフィでは、文字や単語は機械的な手法で生み出されます。……（サイズや位置などの）情報は他の人に渡すことができ、別の機会にまったく同じものを再現することもできます。 フレット・スメイヤーズ『カウンターパンチ※1』 タイポグラフィとは、人の手によって直接描かれるものではなく、機械的な手法によって生成されるものです。そして、その書体や文字サイズや行間といったものをデータとして定義でき、そのデータをもとにまったく同じものを再現できるものでもあります。 ここに示したのはウェブサイトやモバイルアプリケーションなどの表示スタイルを記述する言語であるCSS（カスケーディング・スタイル・シート）のコードです。これによって書体や文字サイズ、行間、そして文字サイズを基準にしたスペーシングなどが定義されます。このコードをもとにして、ウェブブラウザなどユーザーエージェン
ウェブタイポグラフィ─美しく効果的でレスポンシブな欧文タイポグラフィの設計
デザイナーもエンジニアも、すべては読み手の体験向上のために! これまでウェブタイポグラフィの書籍で、これだけまとまった内容を読める本はなかったのではないでしょうか。欧文フォントや欧文組版を審美的視点から解説したもの、HTMLやCSSの書籍において実装技術的視点から解説したものはあれど、どちらも網羅的に解説した決定版書籍が待たれていたのではないでしょうか。 本書は、その審美的視点/実装技術的視点のどちらも併せ持ち網羅的な解説書として、デザイナーはもちろん、エンジニアの皆さんにもウェブを含むオンスクリーンメディアで文字を扱う際に必要となる知識や実践について、細かく解説しています。 著者・監訳者プロフィール 著者:リチャード・ラター(Richard Rutter) 英国のUXデザインファーム「Clearleft」の共同設立メンバー。バークレイカードなどの大企業だけでなく、数多くのスタートアップ企
HAS Magazine - Life Story Magazine
HAS Magazineは、メンバーシップにご登録頂いた皆様へお届けする様々な物語をご準備しています。ご利用スタイルに応じて、お選び頂ける各種プランがございます。 旅に出るように、まだ見ぬ美しい物語との出会いをお楽しみ下さい。
astamuse Lab
こんにちは、中塚と申します。 今回の記事では、私が先日参加したKaggle Days x Z by HP World Championship (以降、Kaggle Days Championship) について紹介します。ただし、どれくらいCompetitionの内容に触れていいのかが不明なので、今回はタスクや解法の詳細には触れませんのでご理解願います。 私はチームで参加しましたが、チームメンバに恵まれたこともあり、上海開催ではPublic (暫定順位) 11位 / Private (最終順位) 14位、ニューデリー開催ではPublic 4位 / Private 3位でした！各開催のいずれかで3位以内に入ると、バルセロナのオフラインでの最終開催への参加権を得ることができるので、私はスペインへ行くことができそうです。 Kaggle Days Championshipとは？ Kaggle D
KITASLOT777: Situs Slot Online Gacor Maxwin Gampang Menang Terbaru Hari Ini
🎰 Slot Online, 🎯 Casino Online, ⚽️ Judi Bola, 🎱 Togel Online Daftar Situs Judi Slot Online Gacor Resmi Mudah Menang Maxwin Terbaru Para penggemar permainan judi, baik judi versi lawas ataupun versi online memang semakin bertambah. Salah satu faktor yang menyebabkan terjadinya hal tersebut adalah kemudahan dalam mengakses situs judi online. Selain itu, sekarang ini kita dapat dengan mudah menemu
英語コンテンツを作るときに気をつけたいタイポグラフィのディテール
ウェブやソーシャルメディアなどで、日本語の原稿を英語に翻訳した（と思われる）コンテンツを目にする機会が増えています。しかしそういった英語のコンテンツの中には、欧文タイポグラフィの視点から見ると少しおかしく感じられるものも少なくありません。たとえば句読点や記号の使い方が間違っていたり、語句が不自然に強調されていたりといった具合です。このようなちょっとしたミスは、ひとつひとつは些細なことでも、結果としてコンテンツが正しく伝わらなかったり、書き手の信用を下げてしまったりする原因にもなります。 この記事では英語のコンテンツを作るときに気をつけたいタイポグラフィのディテールについていくつか解説します。タイポグラフィといっても、グラフィックソフトを扱う技術も高度なCSSの知識も必要ありません。ほんの少しテキスト原稿に手を入れたり、マークアップを工夫したりするだけでも、タイポグラフィの質を高められるので
Photoshopの文字入力：編集やフォント設定方法を総まとめ
この記事では、Photoshopでの文字入力の方法とポイントを解説します。フォトショ初心者の方でも分かるよう、一部初歩的な部分も詳しく説明しているので、必要に応じて読み飛ばして頂ければと思います。 文字入力で使うところ 1.横書きツール 文字入力をするときは、まずツールバーで横書きツールを選びます。 2. 文字パネル 画面右側の文字パネルは、フォントサイズやフォント種類をはじめとして、文字入力に関する細かな設定をする場所です。使い方は後で詳しく説明します。 文字パネルが表示されていない場合は、メニューバーの［ウィンドウ］（上の図の★のところ）から［文字］をクリックすれば現れるはずです。 3.オプションバー オプションバーでも文字の設定ができます。文字パネルとオプションバーどちらでも文字設定ができますが、文字パネルの方が細かな設定ができます。 1-2.文字入力の流れ 文字ツールを選んだ状態で
デザイナーに次に知ってほしい文字組み初級 – 503DESIGN
BLOG / 2018.09.18 2014年に「デザイナーにまず知ってほしい文字組み入門」という初心者向けエントリーをあげて以来、早数年が経ちました。 その月日の中で「絶対フォント感」という言葉が流行したり、「フォント」あるいは「文字組み」という単語が（より一層）脚光を浴び、メディアコンテンツとして取り上げられることが多くなったなと感じます。 例えば2017年にはTBSさんの「マツコの知らない世界」でも取り上げられ、マニアには垂涎の的の「フォントかるた」という大人気商品も生まれたりしています。 さらに、文字組みに関する記事も爆発的に増えていると感じますが、手法が先行した記事が多いことに少し私は疑問を持っています。 特に「なぜ文字をツメることが“大”前提」なのでしょうか？ この記事は、上記の“なぜ”の部分を少し意識してもらい、Adobe Illustratorをメインで使用するデザイナーが
Webデザインにおけるタイポグラフィの10のヒント
一般的には、フォントの数は最低限に抑え、全体を通して同じフォントを使用しましょう。フォントは、大抵の場合１つで十分であり、２つでも多い方です。もし２つ以上のフォントを使う場合は、文字の太さを基に、お互いを引き立たせるものにしましょう。以下は、フォントの組み合わせの例です。左の GeorgiaとVerdanaの組み合わせは、文字の太さが似ており、調和が取れています。 一方で、右のBaskervilleとImpactの組み合わせは、Impactの太さでもう片方のセリフ体が見劣りしてしまっています。 ２. 標準的なフォントを使うよう試みる Google Web FontsやTypekitなどのフォント埋め込みサービスは、多くの良いフォントを提供しており、デザインに新しさや新鮮さ、意外性を加えることができます。また、これらのフォントはとても簡単に使用できます。Googleでの例を見てみましょう。
なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。入社以前はエディトリアルデザイナー（新聞・雑誌・書籍などの出版物のデザイナー）として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね！ 2017年2月27日追記：有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日本語組版は約物（記号類）のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半
美しいデザインを作る鍵「タイポグラフィ」基礎の基礎 デザイン会社 ビートラックス: ブログ
美しいデザインとは何だろうか？ 言い換えれば、何がデザインの美しさを決定するのだろうか？ デザインを構成する要素はレイアウト、線、図形、色、形式、質感、そしてタイポグラフィなどがあるが、実はこのなかで最も重要なのがタイポグラフィである。 今回はこのタイポグラフィの基礎について、btrax CEO、Brandon K. Hillによる社内ワークショップの内容をもとにお伝えしたい。 デザイナーではないビジネスパーソンの方にとっても、書類作成等に大いに役立つ内容であるので是非参考にしていただきたい。 1．そもそもタイポグラフィとは？タイポグラフィとは、言葉を見やすく、読みやすく、 そして魅力的に見せる ための、 字体を配置する技術であり芸術である タイポグラフィの歴史は古く、15世紀まで遡る。最初のタイポグラフィはBlackletterである。（ちなみにこの発明以前、本などは人による手書きであっ
なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | POSTD
Webのタイポグラフィについて少しでも調べたことがあるなら、 Vertical Rhythm という言葉を耳にしたことがあるのではないでしょうか。タイポグラフィを用いて仕事をする場合、最も重要な手法の1つです。このことについて知って以来、私は自分のサイト全てにVertical Rhythmを使っています。 ある日、Vertical Rhythmの重要性について自分が全く理解していないことに突然気付き、愕然としました。そしてその後すぐに2つの疑問が湧き上がってきました。「なぜVertical Rhythmを使うとサイトのデザインが向上するのか？ 」「自分のデザインを良くするために、Vertical Rhythmから何を学べばいいのだろうか？ 」。 私はこの疑問を解明しようと決めました。その考察を綴ります。 記事の最初にあたって認識を共通にするため、まずはコンテキストについて説明します。 Ve
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebook
Kern Type, the kerning game
CSSで作れる！ロゴのようなテキストシャドウエフェクト16種【ドロップシャドウ】
CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選 | WebDesignFacts
Why UI design is all about typography