Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。 自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。 結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。 で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし
モバイルデザインで押さえておきたい６つの基礎テクニック
最近のインタラクションデザインの成功例を調べてみると、どれも基礎をしっかりとおさえたものとなっています。これらのデザインには共通して、人間の自然な行動をもとにし、私たちが気づかないところで障壁となるものを取り除いています。ビジュアルの表現やインタラクティブな体験が重視されており、中でも読みやすさ、理解しやすさは特に重視されます。 それでは、最も重要なデザインテクニック、およびそれがどのように機能するかについて簡単に見てみましょう。 効果的なタイポグラフィ サイトまたはアプリにおけるテキストの目的は、アプリとユーザーの間に明確なつながりを確立し、ユーザーが目標を達成できるようにすることです。そして、タイポグラフィはこのインタラクションにおいて重要な役割を果たしています。 テキストのサイズとレイアウトは、画面上でものを読むときの体験に大きな影響を与えます。小さな書体や狭い行間、余白の文字を処理
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Webデザインにおけるタイポグラフィの考察 | ノート | dotgraphy
2016年5月16日（月）に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。 「の」「を」「と」はTypography 09の「組版上級者になるためのメソッド 工藤強勝さんのスタッフ指導」より うちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い「の」「を」「と」などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。 とあったので、「の」「を」「と」をTP明朝でつくってみました。 目的 紙のタイポグラフィ
ウェブ組版は行間が基準なのではという話 - note
以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。 ＞ remの基準となる値を行の高さにする | yoshihiko com-blog 行間 ≠ line-height という罠よくある疑問に、日本語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日本語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて本文ができている。文字の頭（仮想ボディの上）から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。 行送り= line-height、行間= line-gapで、一方ラテン語圏が基本のウェブ（CSS）では、この line-gap のくっつき方が純粋な日本語組版とは異なっ
Dear Web designer
もう何年も前からWebデザイン、Webデザイナーの在り方について思うことがあります。 まず私のバックグラウンドがどういうものか示した上で、その思いを語ります。 DTPデザイン（紙のデザインです。ポスターやリーフレット、ポストカードなどなど）を1年半経験し、その後はWebデザイン、マークアップエンジニア、フロントエンドエンジニアへとコードを書くことに興味を持ちその時々でポジションを変え10年ぐらい経ちます。最近ではフリーランスとしてスタートアップのWebサービスの中でデザインからHTML, CSS, JavaScriptを主戦場にしている者です。 ここで語る内容は、Webサービスのデザインに偏った内容になってしまいますが、コーポレートサイトやランディングページひとつとっても考え方は同じだと思っています。 タイポグラフィはWebデザインに必要か？よくWebデザインはタイポグラフィの部分で自由が
Webデザインでよく使う要素やカラーやタイポグラフィに一手間加えて、マンネリ化から抜け出すデザインテクニックを解説
Webデザインで今、注目されているトレンドはデザイン的にも面白く、かなり使いやすいです。最新のデザインやトレンドな機能をサイトに加えて、いつもの同じようなデザインから抜け出すために使ってみるのもよいでしょう。 ここで紹介するトレンドは、よく使用している要素やカラーやタイポグラフィに一手間加えるだけで、新鮮なデザインに変わります。 Essential Design Trends, February 2016 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 DuoToneのカラースキーム Split-Screenのデザイン 共有スペースのタイポグラフィ 総括 DuoToneのカラースキーム DuoToneのカラーパレットは存在自体は昔からありましたが、最近の使い方としてはフルスクリーンの画像にDuoToneのグラデーションを加えて強いイン
type.center - Domain Name For Sale | Dan.com
Buyer Protection Program When you buy a domain name at Dan.com, you’re automatically covered by our unique Buyer Protection Program. Read more about how we keep you safe on our Trust and Security page. Next to our secure domain ownership transfer process, we strictly monitor all transactions. If anything looks weird, we take immediate action. And if the seller doesn't deliver on their part of the
ウェブ・タイポグラフィーのベスト・プラクティス
Translation of: The All-Inclusive Guide to Web Typography Best Practices インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。 懸命なウェブ・デザイナーなら誰しもこのことは知っており、注意深くまた慎重に時間を費やし、作成中のウェブサイトでタイポグラフィーがきちんとなるようにしていることでしょう。その中では読者に機能的で魅力的であるようなタイポグラフィーを提供するため、ウェブサイトの情報アーキテクチャ
デザイナーは文字詰めに命をかけよう ～和文と欧文のフォーマットの違いから考える～｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは。梅雨入りしたのかしてないのか曖昧な天気が続きますが、体調は崩してませんか？比較的嫌われやすい時期ではありますが、私は雨は好きなほうです。「小夜時雨」「涙雨」「白雨」等、雨を含んだ日本語は美しいですよね。 さて、先週は明朝体とゴシック体について書きましたが、今週は和文書体と欧文書体について書こうと思います。 フォントには日本語の漢字、ひらがな、カタカナで構成された「和文書体」と、アルファベットで構成された「欧文書体」があります。二つの書体は、文字の形状の違いから文字のフォーマットも違います。 それぞれのフォーマットから、文字間隔の詰め方について考えてみましょう。 和文書体のフォーマット 和文書体は【仮想ボディ】という正方形のフォーマット内で文字が収まるようにデザインされています。実際は仮想ボディの枠いっぱいではなく、ひとまわり小さい枠（字面枠）の中に文字が作られます。 仮想ボディ
完全にフォントだけで勝負しているカッコよくてシンプルなサイト集
日本デザインセンター / Andreas Pihlström / TYP他...全14件
Typography Cheat Sheet [Infographic] - Designmodo
Typography Cheat Sheet [Infographic] DesignDiana Valeanu • October 17, 2016 • 1 minute READ Understanding type can be one of the most difficult elements of design. There’s a lot of terminology and lingo that type designers (and designers, in general) use when talking about lettering. Sometimes it can be tough to decipher it all. If you find yourself wondering what the difference between a hook and
![Typography Cheat Sheet [Infographic] - Designmodo](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa6358c2b91e0ed9b78737cf2d2fd08e846eeeb6/height=288;version=1;width=512/https%3A%2F%2Fdesignmodo.com%2Fwp-content%2Fuploads%2F2016%2F10%2FTypography-social-296684-preview.jpg)
CSS Nite LP, Disk 21に行って組版の大切さを勉強してきました。 #cssnitelp21 | Webデザインのタネ
一定期間更新がないため広告を表示しています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
集中.jp
Webデザイナーのためのタイポグラフィ入門1
ウェブデザイナーにお勧め！フォントやタイポグラフィの知識・テクニックを学ぶまとめ | コリス
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP