Webデザインでよく使う要素やカラーやタイポグラフィに一手間加えて、マンネリ化から抜け出すデザインテクニックを解説
Webデザインで今、注目されているトレンドはデザイン的にも面白く、かなり使いやすいです。最新のデザインやトレンドな機能をサイトに加えて、いつもの同じようなデザインから抜け出すために使ってみるのもよいでしょう。 ここで紹介するトレンドは、よく使用している要素やカラーやタイポグラフィに一手間加えるだけで、新鮮なデザインに変わります。 Essential Design Trends, February 2016 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 DuoToneのカラースキーム Split-Screenのデザイン 共有スペースのタイポグラフィ 総括 DuoToneのカラースキーム DuoToneのカラーパレットは存在自体は昔からありましたが、最近の使い方としてはフルスクリーンの画像にDuoToneのグラデーションを加えて強いイン
なんという才能のムダ使い！どんな画像も映画のポスターにしてしまうコラージュ職人がすごい
海外の画像掲示板「reddit」のユーザー「Your_Post_As_A_Movie」さんはその名の通り、どんな画像も映画のポスター風にコラージュしてしまう職人さん。 もともとセンスある写真はもちろん、日常の何気ない風景を写した写真であっても、ちょっと見てみたくなるような映画のポスター風に変えてしまう。 元画像に合わせた映画タイトルが面白かったり、いかにもな俳優をキャスティングしていたり。ありがちなキャッチコピーも面白い。 【関連】 プロットめちゃくちゃだけどちょっと見たいかも？映画の中にゴジラを登場させた、無理矢理な映画ポスター14枚 【画像】こんなジブリなんて見た……いかも？洋風アレンジしたジブリ映画のポスター画像7枚 【画像】ある意味怖い。コレジャナイ感漂う、ガーナの手描き映画ポスター24枚 職場で居眠りした結果、コラ画像の素材となってしまった男 写真24枚 1. 2. 3. 4.
日本語フォントの書体の選び方・組み合わせ方、そしてデザインする日本語タイポグラフィのテクニック
明日、いや今日からすぐに役立つ、日本語フォントの書体の選び方・組み合わせ方、そしてそれをどのようにデザインするのか、日本語タイポグラフィのテクニックを学べるスライドを紹介します。 スライドは、日本語デザイン研究会中部の勉強会でプレゼンされた日本語のタイポグラフィのスライドで、特別に掲載許可をいただきました。 DTPの勉強部屋（名古屋）で登壇しました 日本語デザイン研究会中部は、タイポグラフィの大切さと楽しさを伝えるため・学ぶための交流の場として結成されました。 スライドは全部で45ページ。 日本語の読ませるタイポグラフィについて、書体の選び方や組み合わせ方、実例とともにデザインのテクニック、どのように勉強すればよいのかまで掲載されています。
資生堂の美意識が詰まった「資生堂書体」って知ってる？ 100年近く手書きで社員に伝承してるらしいぜ！
化粧品メーカーの資生堂が、同社が100年近く伝承している独自の書体「資生堂書体」を動画で紹介していました。同社の美意識が込められた書体であり、長年、同社のデザイナーが手書きで伝承しているらしいです。 資生堂書体は、1916年の意匠部（現在の宣伝・デザイン部）設立とともに「資生堂の美学と精神性を表現する」書体として誕生し、資生堂のポスターやパッケージを長らく彩ってきました。現在でも、同社に入社した新人デザイナーは1年かけてこの書体を体得するんだとか。 手書きの所作からして美しい……！ 動画では書体の紹介とともに、鉛筆や墨を使って手書きで書体を仕上げていく様子を撮影。女性のしなやかさを思い起こさせる伸びやかな曲線と、キリッとした雰囲気の直線やエッジが相まって、エレガントな文字が浮かび上がってきます。 動画を見ていると「こんな書体が自分も書けたらいいのにな！」とか思ってしまうのですが、やっぱりそ
タイポグラフィの歴史を5分で説明するよ（コマ撮り動画＆全訳）
タイポグラフィの歴史を5分でダッと説明するストップモーションアニメ（上）が超クールと海外で注目を集めています。 製作したのはカナダのマクマスター大学でマルチメディアを専攻するベン・バレット=フォレスト（Ben Barrett-Forrest）さん（23）。3年目のアニメーション科目の課題でショートアニメを作れと言われて始めたら、ついつい凝ってしまったのだそう。 出身地ユーコンの地方紙はこう紹介してますよ。 ｢たぶん15～20時間もかければ合格だったと思います。それが始めたらとてもそんな時間じゃ終わらない、課題よりずっと手間かかるってすぐに気づいて。でも、それでもいいやって思ったんです｣ 結局バレット=フォレスト君は2ヶ月暗い部屋に篭って500ワットの電球で照らしてる熱い中、ダンボールくり貫いて作った292個の文字を並べて2500枚の静止画像を撮影し、そこからストップモーションビデオをつくっ
超かっこいいタイポグラフィを駆使した映像の数々！息をのむ程魅入った映像総まとめ | バンクーバーのうぇぶ屋
もう、タイトルの通りです。僕はずっと前からいづれ映像制作もやってみたいなと思っていました。中でもタイポグラフィの美しさを取り入れた映像には、いつもいつも美しさを感じてやまない日々です。 今日は、いままで僕が見てきたり、友人から勧められた動画の中で、タイポグラフィが激美しい！！！と思ったものを集めてみました。 「これもいいよ！」って言うのがあったら是非共有してくれると嬉しいと思います！ ちなみに、最近タイポグラフィネタが多いのは僕が最近、カリグラフィのレッスンに通おうか検討していて、色々調べているからです。もう、今僕の頭の中では文字ば毎晩踊っています。 Tipografia Word as Image これ、超面白いわー！文字から受けるイメージを映像にしてる動画！「ill」のやつは初見じゃわからんかったｗ Blink 182 – Online Songs Kinetic Typography
『文字／タイポグラフィ』を知る、学ぶ、見る、活用する、作る！様々な場面で役立つサイト達の大まとめ！ | バンクーバーのうぇぶ屋
今やタイポグラフィを見る、学ぶ、知る、活用する、作る。それらすべてのことが様々なサイトやツールを使って実現することが可能です。 ここ1ヶ月くらい、僕のFacebookで投稿させて頂くネタ／書かせて頂く記事の内容がタイポグラフィに偏っていたのですが、実はちょっとタイポグラフィに関するお話をさせて頂く機会があったので、ずーーっと調べていました。 それこそ、作ってみたり、動画みたり、チュートリアル見たり…あれやこれやとまぁ、よくやったわと自分で自分を褒めてみたり… とは言っても、僕はタイポグラフィを学校や専門で勉強したことは無いので、その辺りは別の人にお話頂き、僕はとにかくWEB上での活用、情報収集面に注力させて頂いたのですが、本当に色々あってびっくら仰天。 とういわけで、今日はその時話しさせてもらった内容を。あーんど！僕が以前からお世話になっている物を加えてご紹介！ かなり、がっつりしたボリュ
Webデザイナーが文字組版を勉強するときに参考になるサイト
「Webデザイナーのためのタイポグラフィと文字組... / Webデザイナー（私）によるタイポグラフィーレイ... / Illustratorで文章を扱うとき（文字組版...他...全9件
Web制作における文章の可読性について考える ｜https://wp.yat-net.com/name
ブログにしてもサイトにしても同じ事が言えますが、サイトのコンテンツで一番読むのは文章です。なので我々作り手も文章の可読性に関してはしっかり考えたいなというところです。 Index 1.文章の可読性とは？ 2.文章のブロック・段落 3.行間 4.余白 5.テンポ・リズム 6.フォントについて 1.文章の可読性とは？ 当たり前なことですが文章の可読性とはつまり「読みやすさ」です。文字が小さすぎたり、背景色に近い文字だったりすると当然可読性は落ちますね。 コンテンツに記述されていることが優れていても、文章が読みづらそうといった先入観や、読んでいて読みづらいという認識を持つとそのサイトに対してどう思うでしょうか？ 文字のサイズが小さいだけならブラウザのサイズを変更して読んでくれるかも知れませんが、他のサイトへ離脱してしまう可能性は十分に考えられます。人はストレスを感じることを嫌がりますのでよっぽど
数字はデザインに重要な要素。数字の見せ方10個（サンプル有り〼） | ユーモアのある人生を。【Maka-Veli.com】
どーも。最近SNSの使い方がわからなくなりつつある僕だよ。 久々にデザイン系のネタ。いや、ちょっと乗り遅れたタイポグラフィネタか・・・ 広告で数字が一番の訴求対象になる場合は多く、 数字だけで完結する物もあります。 そういった場合は、数字デザインをこだわりたいですね。 テレビ東京新卒採用サイト 7chと第7感って事でかけてますね。 モビット 数字を強調させる設計ですね。数字自体の効果が凄くキレイ。 No.DesignTech The 10 意味不明にカッコ付けてみました。以下が見せ方と自作サンプルです。 目次 数字以外を小さく 丸で囲ってみる 枠端で薄く背景に イタリックに 比較させる 数字だけを強調 弱い要素のアイキャッチに 数字だけでも シンプルな物は英字と組み合わせるのも 本文中は太字、下線を取り入れてみる 数字以外を小さく 見たい、見せたいのは数字です。 広告の
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
Fonts In Use – Type at work in the real world.
Advertising (1745) Album Art (3353) Art/Illustration (450) Booklets/Pamphlets (1925) Books (5301) Branding/Identity (6477) Ephemera (1013) Exhibition/Installation (883) Film/Video (856) Infographics/Maps (472) Magazines/Periodicals (1588) Mobile/Tablet (680) Newspapers (247) Object/Product (916) Packaging (1944) Posters/Flyers (4608) Signs (1781) Software/Apps (262) Web (4421) Acumin (53) Adobe Ca
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
クオリティ高すぎ！「高校2年生」が作った“テスト”動画がすごい - はてなブックマークニュース
「踊ってみた」や「歌ってみた」、自作の映像など、さまざまな動画が動画共有サイトに投稿される近年。そんな中、「YouTube」に投稿された“テスト”動画が「すごい」と、はてなブックマークで話題になっています。 ▽ http://www.youtube.com/watch?v=sRBS9-MrRxw 富山県に住む自称「高校生」が、YouTubeへの“投稿テスト”のためにアップロードした“中間テスト”がテーマの動画「test ～富山県立高岡高等学校2学期中間テスト～」。緊迫感のある音楽がバックに流れる中、「国語」や「数学」など、中間テストの教科をモチーフにした映像が次々と映し出されます。ほとんどが文字を中心とした映像ですが、その演出テクニックは高校生が作ったとは思えないほどのクオリティです。 投稿したmori9393939393さんはこの動画に対し、「youtubeへの投稿テスト。テスト恐い。ち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Swissted
新着記事
Amazon.co.jp： タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック- (デザインラボ) 大崎 善治 本
Amazon.co.jp: Typographic Systems―美しい文字レイアウト、8つのシステム: Kimberly Elam (著), 今井ゆう子 (翻訳): 本
https://raksul.com/magazine/wp-content/uploads/2011/02/red.jpg
