オランダのナイメーヘンにあるレストラン「Crudo」のブランディング、食材とタイポグラフィを組み合わせた見事なロゴとサイトのデザインを紹介します。
オランダのナイメーヘンにあるレストラン「Crudo」のブランディング、食材とタイポグラフィを組み合わせた見事なロゴとサイトのデザインを紹介します。
フォントはデザインにおいて、非常に重要な要素です。 プロのデザイナーが当たり前のようにやっていることが、初心者には見落とされていたり、実践されていないこともあります。 持っている日本語フォントがそんなに多くなくても、文字デザインの表現の幅を広げる日本語フォントの組み合わせ方を紹介します。 先週紹介したスライドと同じく、日本語デザイン研究会中部の勉強会でプレゼンされた日本語のタイポグラフィのスライドで、特別に掲載許可をいただきました。 DTPの勉強部屋(名古屋)で登壇しました 日本語デザイン研究会中部は、タイポグラフィの大切さと楽しさを伝えるため・学ぶための交流の場として結成されました。 スライドは全部で51ページ。 フォントに含まれている全ての字形がバランスよく、カッコいいものはあまり多くはありません。多くのデザイナーが使用している各フォントの特徴を理解し、漢字と仮名、そして英数字・約物・
明日、いや今日からすぐに役立つ、日本語フォントの書体の選び方・組み合わせ方、そしてそれをどのようにデザインするのか、日本語タイポグラフィのテクニックを学べるスライドを紹介します。 スライドは、日本語デザイン研究会中部の勉強会でプレゼンされた日本語のタイポグラフィのスライドで、特別に掲載許可をいただきました。 DTPの勉強部屋(名古屋)で登壇しました 日本語デザイン研究会中部は、タイポグラフィの大切さと楽しさを伝えるため・学ぶための交流の場として結成されました。 スライドは全部で45ページ。 日本語の読ませるタイポグラフィについて、書体の選び方や組み合わせ方、実例とともにデザインのテクニック、どのように勉強すればよいのかまで掲載されています。
デザインのセンスを磨くには、いいものをたくさん見ること。 タイポグラフィ(主にWeb)の素晴らしいアイデアやインスピレーションが満載のサイトを紹介します。 Discover.typography Gothamなどのフォントをリリースしている「Hoefler & Co.」のフォントギャラリー。自社フォントの使用例がかっこよく掲載されており、各アイテムに使用されているフォントをフォーカスすると、同じフォントを使ったものがハイライトされます。 Beautiful web type combinations 数多くあるGoogle Web Fontsの中から高品質なフォントを厳選し、組み合わせて使用したギャラリー。各テキストをホバーすると、タイプフェイスの名前が表示され、Google Web Fontsにリンクされているのですぐに利用できます。
TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 1.アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ
フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに~みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。 あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。 英語圏と同じにしない テキストで大胆なタイポグラフィ
10 jQuery Plugins to Enhance Your Web Typography テキスト表現力を豊かにするタイポグラフィ関連jQueryプラグイン10がまとまっています。 これらを覚えておけば、分かりやすさを向上させたり、画像オーサリングツールなしでデザイン性の高いサイトを作れそうです。 一昔前なら、全部画像という感じの物がjQueryプラグインで実現できるあたりは素晴らしい テキストでなく、画像であることで、プラットフォームによって崩れることは防げるメリットもあるので、シーンによって使い分けしたいところですね。 関連エントリ jQuery&CSS3でここまで出来るタイポグラフィエフェクトのサンプル集
Photoshopをもっともっと好きになる、テキストをかっこよく魅せるチュートリアルのまとめ -2012年版
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 (それに縛られすぎてもいけませんが…(あえてインパクトを出すために違う印象のフォントを組み合わせたりする)、基本的な選び方として知っておくと良いと思います。) 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
日本デザインセンター / Andreas Pihlström / TYP他...全14件
今やタイポグラフィを見る、学ぶ、知る、活用する、作る。それらすべてのことが様々なサイトやツールを使って実現することが可能です。 ここ1ヶ月くらい、僕のFacebookで投稿させて頂くネタ/書かせて頂く記事の内容がタイポグラフィに偏っていたのですが、実はちょっとタイポグラフィに関するお話をさせて頂く機会があったので、ずーーっと調べていました。 それこそ、作ってみたり、動画みたり、チュートリアル見たり…あれやこれやとまぁ、よくやったわと自分で自分を褒めてみたり… とは言っても、僕はタイポグラフィを学校や専門で勉強したことは無いので、その辺りは別の人にお話頂き、僕はとにかくWEB上での活用、情報収集面に注力させて頂いたのですが、本当に色々あってびっくら仰天。 とういわけで、今日はその時話しさせてもらった内容を。あーんど!僕が以前からお世話になっている物を加えてご紹介! かなり、がっつりしたボリュ
ご参考までに、このスライドはKeynoteで作っているのですが、(スライド公開時のみに表示している)画面の下のコメントを除き、メインの文字などはすべてIllustratorで入力して、Keynoteにコピー&ペーストしています。 理由は2つ。 Keynoteでは自動カーニング(文字ツメ)ができない Keynoteでは混植ができない(がんばればできるけど、ベースラインの調整などを行えない) ちょっとした修正などが面倒なので、気が狂っているとも思いますが、プレゼン資料における文字は、ある意味、すべてキャッチコピー。文字ツメが甘いのはいただけないと思うのです。 ちなみに、後で修正しやすいように、Illustratorドキュメントは残しています。 追記(2013年11月): 続編があります。 スライド『Webデザイナーのためのタイポグラフィと文字組版(Reloaded)』 - DTP Transi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く