デザインシステムにおけるタイポグラフィーの試行錯誤 - DMM inside

2022/10/06 7 users Turtle FEG 大村 試行錯誤 実装

プラットフォーム事業本部のフロントエンドグループ（以降FEG）で技術支援をしているCTO室兼VPoE室の大村です。 今回は、FEGで構築しているデザインシステム「Turtle」のタイポグラフィーについての試行錯誤をご紹介します。 ※Turtleは常にアップデートしているので記事公開時と実装は異なる場合がございます。 デザイン... 続きを読む

オリジナルフォント『Mollis Sans』をリリースしました - Life is bitter

2018/08/10 46 users オリジナルフォント フォント Life is bitter

デザインの一要素として大きな影響を持つ「文字(タイポグラフィー)」。 フォントが好きだと言いつつ自分でフォントのひとつも作ったことがないのは文字への愛が足りてないのではと思いまして、ふとオリジナルフォントを制作してみました。 最初は特にリリースする予定もなく自分の制作案件などでいつか使えればくらいの... 続きを読む

タイポグラフィーとブランディングの密接な関係 | freshtrax | デザイン会社 btrax ブログ

2017/05/15 42 users freshtrax ブランディング デザイナー パッケージ

あなたがデザイナーであろうがなかろうが、「タイポグラフィー」に触れることなく終わる日など1日も無いだろう。なぜなら文字とタイポグラフィーは切っても切り離せない関係であり、現代において文字こそが一番のコミュニケーションツールであるからだ。 タイポグラフィーは文字に雰囲気を纏わせる という形で文字と人間のコミュニケーションをより確実性の高いものにしてくれる。私達が普段何気なく広告や商品のパッケージを見... 続きを読む

プロデザイナーの仕事から学ぶ、フォントを極める10個の基本テクニック - PhotoshopVIP

2015/12/01 72 users PhotoshopVIP フォント プロデザイナー 日本語抄

海外デザインブログCanva Design School Blogで公開された「10 Ways to Improve Typography in Your Design」より許可をもらい、日本語抄訳しています。 タイポグラフィーは、パソコンからフォントを選択したり、文字サイズを指定するだけの作業ではありません。 アートとのつながりも強く、もともと植字や文字組みなどの活版技術を意味しており、何世紀も... 続きを読む

トップデザイナーが教える、文字フォントを使った階層のつくり方７個まとめ - PhotoshopVIP

2015/07/18 136 users PhotoshopVIP 階層 文字フォント 日本語抄 許可

海外デザインブログCanva Design School Blogで公開された「Why Every Design Needs Three Level of Typographic Hierarchy」より許可をもらい、日本語抄訳しています。 階層（英: Hierarchy）は、ややこしい単語かもしれませんが、文字テキストのバランスを整える、「タイポグラフィー」においては重要なわりに、手軽に導入する... 続きを読む

「open」と「close」が入れ替わる？　歯車とタイポグラフィーを組み合わせた不思議な看板 - ねとらぼ

2015/04/20 34 users CLOSE 変哲 歯車 OPEN 歯車機構

営業中かそうでないかを示すサインとしてよく用いられる「open」と「close」。そんな何の変哲もないサインに、はっとさせられる動画が話題になっています。 この作品は、歯車機構とタイポグラフィーを組み合わせたシンプルな仕組み。「open」と書かれた歯車をくるくると回すと「close」に、「close」と書かれた歯車をくるくると回すと「open」になります。「え、どうなってるの？」と一瞬目を疑います... 続きを読む

テキストエフェクトで魅力的に！すぐ使える無料Photoshopデザイン素材24個まとめ - Photoshop VIP

2015/03/19 31 users テキストエフェクト Photoshop Vip ポスター

雑誌やポスター、イベント用フライヤーなどプリント媒体を中心に活用される機会の多いテキストエフェクトは、タイポグラフィーだけでは表現することができない、クリエイティブでユニークなスタイルを手軽に完成させることができます。最近では、ウェブ用デザインコンポーネントとして活用しているサイトも増えています。 今回は手軽にテキストエフェクトを作成することができる、無料Photoshopデザイン素材をまとめてご... 続きを読む

「iOSとエイリアンのアイコンが酷似している」など、映画「エイリアン」の文字＆アイコンを徹底分析してわかったこと - GIGAZINE

2014/12/02 23 users GIGAZINE iOS Alien エイリアン アイコン

タイポグラフィとは書体やレイアウトなどのデザイン全般を示す言葉で、そこら中で使用される文字を効果的に見せるため、古くから研究が行われています。そのタイポグラフィーについて、Appleで編集の仕事をしているDave Addey氏が映画「エイリアン」に登場する文字やアイコンを徹底分析したところ、興味深い事実が浮き彫りになりました。 Alien | Typeset In The Future http:... 続きを読む

魅せるテキストエフェクト！押さえておきたい無料デザインPSD素材24個まとめ - Photoshop VIP

2014/09/12 214 users テキストエフェクト Photoshop Vip フォント

フォントをより魅力的に仕上げるテキストエフェクトは、 コンテンツを伝えるなかで重要なデザイン要素のひとつです。Photoshopを使えばほんの少しの編集作業だけで、印象に残るタイポグラフィー、テキストエフェクトを作成することができます。 海外デザインブログInspirationHutで、現在のデザイントレンドにも対応した、テキストエフェクト用無料PSD素材をまとめたエントリー「20 High Qu... 続きを読む

スマホでオリジナルTシャツを作れるユニクロの「UTme!」 - ITmedia Mobile

2014/05/19 28 users UTme Typography ユニクロ PHOTO ペイント

ユニクロは5月19日、スマートフォンやタブレットから自分だけのオリジナルTシャツが作れるアプリ「UTme!」を発表した。アプリで自分だけのデザインを作成して注文すると、デザインをプリントしたTシャツが最短で翌日に配送される。価格は1枚1990円（税、送料別）。 UTme!は、指先で自由に絵を描くPAINT（ペイント）、TYPOGRAPHY（タイポグラフィー）、撮影した写真をレイアウトするPHOTO... 続きを読む

一昔前のカメラのロゴが好きだから、グーグルもアップルもAmazonも全部それ風にした（ギャラリーあり） : ギズモード・ジャパン

2013/02/02 96 users ギズモード グーグル アップル ギャラリー ロゴ

一昔前のカメラのロゴが好きだから、グーグルもアップルもAmazonも全部それ風にした（ギャラリーあり） どう？　雰囲気でてる？ 日本の誇るカメラ、ニコンとキヤノンの70-80年代に製造されたカメラに付いてるロゴが素晴らしいデザイン。そのタイポグラフィーに魅せられたのが、Antrepoさん。Antrepoさんは、あまりに素晴らしいので、いろんな企業のロゴを70-80年代のニコン＆キヤノン風にしてしま... 続きを読む

一昔前のカメラのロゴが好きだから、グーグルもアップルもAmazonも全部それ風にした（ギャラリーあり） : ギズモード・ジャパン

2013/02/02 96 users ギズモード グーグル アップル ギャラリー ロゴ

アート 一昔前のカメラのロゴが好きだから、グーグルもアップルもAmazonも全部それ風にした（ギャラリーあり） 2013.02.02 23:00 どう？　雰囲気でてる？ 日本の誇るカメラ、ニコンとキヤノンの70-80年代に製造されたカメラに付いてるロゴが素晴らしいデザイン。そのタイポグラフィーに魅せられたのが、Antrepoさん。Antrepoさんは、あまりに素晴らしいので、いろんな企業のロゴを7... 続きを読む

iPhone 5？　iOS 6？　カレンダーは全く改善されていないじゃないか！ : ギズモード・ジャパン

2012/10/02 25 users ギズモード カレンダー ジャパン iPhone 5 iOS 6

iPad , iPad/iPod/iPhone/iTunes , iPhone , iPod iPhone 5？　iOS 6？　カレンダーは全く改善されていないじゃないか！ 2012.10.02 17:00 毎月1日は何の日でしょう？　映画の日？　いいえ、アップルのカレンダーとタイポグラフィーにがっかりする日です。 もう何度も取り上げてられている、このカレンダー問題。センタリングがおかしいじゃない... 続きを読む

Photoshop VIP ☞ タイポグラフィーで世界旅行、各都市を表現したクリエイティブデザイン60個まとめ

2012/06/19 52 users インスピレーション フォント 発想 アイデア エントリー

フォント、テキスト文字にデザインを加えたタイポグラフィーは、クリエイティブなアイデアや発想を与えてくれ、インスピレーションにはピッタリです。 海外デザインブログBlog.SpoonGraphicsで、世界中のあらゆる都市や州などを中心に、写真とタイポグラフィーを組み合わせたデザイン作品を60枚まとめたエントリー「Inspiring Typography Designs Based on Citie... 続きを読む

Photoshop VIP ☞ フォントで遊ぶ、クリエイティブなタイポグラフィーデザイン34個まとめ

2012/04/03 51 users フォント Photoshop Vip Your Way 配置

フォントは配置やデザインなどを考えて、組み合わせることで、タイポグラフィーと呼ばれる新しいデザイン手法となります。 海外デザインブログDesign Your Wayで、デザインアイデアの参考になりそうな、タイポグラフィーデザイン34個まとめたエントリー「New Typography Inspiration – 34 Superb Examples」が公開されていたので、今回はこちらをベースに、比較... 続きを読む

iPhoneのカレンダーを見て愕然とする...ジョブズ氏がこだわったAppleのデザインへの細かさはどこにいってしまったのか？ : ギズモード・ジャパン

2012/02/20 140 users iPhone ギズモード ジョブス氏 Apple カレン

iPad/iPod/iPhone/iTunes , iPhone , アップル , 企業 iPhoneのカレンダーを見て愕然とする...ジョブズ氏がこだわったAppleのデザインへの細かさはどこにいってしまったのか？ 2012.02.20 23:00 [0] [0] Tweet Check ジョブズ氏がこだわったもののひとつ、それはタイポグラフィーだったはずなのですが。 以前、iPhoneのカレン... 続きを読む

クールなモダンセリフ書体「Accent™」 | CREAMU

2012/01/09 32 users Vogue CREAMU Bodoni Didot フォント

Accent™は、Nelson Balaban氏によってデザインされた、クールなモダンセリフ書体です。商用でも無料で利用できます。 似たフォントとしてモダンセリフ書体で有名なのは、Bodoniや、Vogueのロゴで使われているDidotなどがあります。 Accent™ Free Display Typeface タイポグラフィーについては、以下の書籍がためになります。 フォントのふしぎ ブランドの... 続きを読む

Photoshop VIP ☞ タイポグラフィーを効果的に使った、オシャレなWebサイトデザイン21個まとめ

2011/11/01 53 users タイポグラ 配色 Design Ledger レイアウト 参考

海外デザインブログWeb Design Ledgerで、素敵なタイポグラフィーを使ったWebサイトを21個まとめたエントリー「21 Inspiring Examples of Typography in Web Design」が公開されていたので、今回はご紹介します。 あまり見かけないレイアウトや配色の組み合わせなどWebデザイン制作の参考にしてみてはいかがでしょう。 詳細は以下から。 タイポグラ... 続きを読む

Photoshop VIP ☞ カラフルなタイポグラフィーのレコードジャケットを公開しているProject Thirty Three

2011/09/28 50 users 配色 アナログレコード レコードジャケット ジャケット 参考

古いビンテージレコードのジャケットをひたすら公開しているサイトProject Thirty Threeが、デザインの参考になりそうだったのでご紹介。 カラフルな配色やタイポグラフィーのおもしろい使い方など、Webデザインやグラフィックデザインにも共通するワクワク感がありそうです。 詳細は以下から。 アナログレコードの回転数33rpmにちなんだプロジェクト名が付けられたブログ、Project Thi... 続きを読む

Photoshop VIP ☞ タイポグラフィーを使ったクリエイティブな広告デザイン40個まとめ

2011/09/13 44 users フライヤー 媒体 クリエイティブ エントリー パーツ

タイポグラフィーはデザインにおいて、重要なパーツとしていろいろな媒体で利用されています。 たとえばWebデザインや雑誌、イベント用ポスター、フライヤー、広告デザインなどでもよく見かけます。 海外デザインブログAxet.netで、広告デザインで利用されているユニークなタイポグラフィーデザイン40個をまとめたエントリー「Creative Examples of Typography in Advert... 続きを読む

Photoshop VIP ☞ 印象的なタイポグラフィーをたのしむWebサイトデザイン25個まとめ

2011/09/12 33 users Photoshop Vip

Webデザインにおいてタイポグラフィーは重要なデザインパーツのひとつです。 特にGoogle Webフォントなどの登場により、かわいい&オシャレなフォントをWebサイトで利用可能となったこともポイントではないでしょうか。 海外デザインブログWeb Design Ledgerで、ユニークなタイポグラフィーを利用したWebサイトデザイン25個をまとめたエントリー「25 Examples of Big ... 続きを読む

タイポグラフィーの世界　フォントの舞台裏[前編] - ちくちく日記

2011/09/11 28 users メインテーマ 活字 フォント 書体デザイン 去年

セミナー, Font連続セミナー「タイポグラフィーの世界」の「第五回　フォントの舞台裏　-フォントはデザインだけじゃない、タイプエンジニアたちの話-」に参加してきました。 いやー、面白かった！こういうセミナーがあるところが、東京のいいところだよねー。この「タイポグラフィーの世界」というセミナーはタイポグラフィーをメインテーマに書体デザインや活字について語るという連続セミナーで、去年の12月から行わ... 続きを読む

Photoshop VIP ☞ iPhone表示にも対応、レスポンシブデザインの無料WordPressテーマ15選(プラグイン付)

2011/09/08 218 users レスポンシブデザイン Photoshop Vip 併用 編集

レスポンシブデザインに関するjQueryプラグインなど レスポンシブWebサイトを作成するときに便利なツールなどをまとめています、ご参考までに。 FitText ウィンドウ幅に応じてフォントサイズを変更してくれるプラグイン、Webフォントを利用するときに便利。 無料ダウンロード Lettering.js タイポグラフィーのカーニングや編集なども可能にするプラグイン、こちらもWebフォントとの併用を... 続きを読む

Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き

2011/08/31 833 users 注意書き Webデザイナー DTP タイポグラフィーデザイン

タイポグラフィーデザインの基本、文字詰めなどから、レイアウト手法まで学んだことをまとめてみました。私はWebデザイナーなので、DTPデザインは苦手です。でも、ここで学んだことは、WebもDTPも関係なくデザインの幅を広げてくれる内容でした。主にタイポグラフィーのレイアウトについてです！私はDTPデザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを... 続きを読む

街の手書きサインをフォントの王様Helveticaにしてみると... : ギズモード・ジャパン

2011/08/22 44 users ギズモード フォント 手書きサイン ジャパン インタラクティブ

アート , インタラクティブ 街の手書きサインをフォントの王様Helveticaにしてみると... 2011.08.22 11:00 [0] [0] Tweet Check タイポグラフィーは偉大です。 Helvetica-ヘルベチカ、スイス生まれの最も有名な書体の1つですね。現在、最も使用されている書体の1つでもあります。とにかく、映画にもなるほどのフォント界のスーパースターです。そのスーパース... 続きを読む