Googleフォントで好みのフォントを見つけるのはなかなか大変だけど、これを利用すると簡単に探せる！ -Font Library

本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精

見ているだけで楽しくなる、そんな春らしいワクワク感たっぷりの桜のイラストやパターン素材を紹介します。 昨日、東京も桜の開花宣言が出て、週末にはちょうど見頃になりそうですね。 ここで紹介している素材はすべて、個人・商用ともに無料で利用できます。 Webデザインや映像・紙などに無料で利用する時にはどこかしらにクレジット表記が必要です。

Webページ、本や雑誌、ポスターや看板などで見たフォントを使いたいけど、そのフォントが何か分からない時ってありますよね。そんな時にはフォントを画像から、フォントの特徴からそのフォントが何か検索できる無料サービスを紹介します。 日本語のフリーフォントのまとめも参考にどうぞ。 2022年用、日本語のフリーフォント 609種類のまとめ フォント名が分からない日本語フォントを検索・自動判定 Adobeやダイナフォントやタイプバンクの有償日本語フォントをはじめ、青柳衡山フォントやみかちゃんフォントなど無料日本語フォントまで、日本語フォントを検索できます。 Identifont -形状別フォント 識別名称別フォント検索 対応フォント 日本語・英語 対応フォントは、書体メーカー一覧をご覧ください。 検索方法 形状別・名称別・スタイル別・類似・絵文字・メーカー別 使い方は簡単で、名前が分からないフォントの

明日、いや今日からすぐに役立つ、日本語フォントの書体の選び方・組み合わせ方、そしてそれをどのようにデザインするのか、日本語タイポグラフィのテクニックを学べるスライドを紹介します。 スライドは、日本語デザイン研究会中部の勉強会でプレゼンされた日本語のタイポグラフィのスライドで、特別に掲載許可をいただきました。 DTPの勉強部屋（名古屋）で登壇しました 日本語デザイン研究会中部は、タイポグラフィの大切さと楽しさを伝えるため・学ぶための交流の場として結成されました。 スライドは全部で45ページ。 日本語の読ませるタイポグラフィについて、書体の選び方や組み合わせ方、実例とともにデザインのテクニック、どのように勉強すればよいのかまで掲載されています。

IE8がサポート外になり、喜んでいる制作者の人も多いと思います。 正式版がリリース予定のjQuery 3もBootstrap 4もIE8はサポート外です。 古いバージョンのIEをサポート外にすると、CSSで使えるテクニックも広がります。これからどんどん使っていきたいCSSのテクニックを紹介します。

顔、化粧、瞳、髪、肌、小物などのカラー、対象物のカラーのハイライトやシャドウなど、イラストやマンガを描く時の参考になるカラーパレット・Photoshopのスウォッチ素材を紹介します。

<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>

26 Free Vector Animal Graphics - Ukiyo-e SVG 浮世絵の作者は江戸時代末期に活躍した浮世絵師: 歌川 芳虎（Wikipedia）で、パブリックドメインの浮世絵をベクター化したものです。 まずは、動物から。 「新版獣尽（1857）」の26種類の動物・空想動物が描かれています。

紙・布・生地・黒板・皮・木目・石こうなど、繊細な質感を表現したテクスチャをシームレスに使えるパターン素材を紹介します。 下記の素材は全て個人でも商用でも無料で利用できます。 詳しくは下記ページをご覧ください。 ライセンスページ ダウンロードできるファイルには小さい画像とPhotoshopのパターンファイル（.pat）があり、シームレスに利用できます。

HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d

よいデザインとは、ちょっとしたことを積み重ねていくことが大切。 Webデザイン、カラー、PhotoshopやIllustratorなどのテクニックを磨く、デザインをちょっとよく見せる小ネタをDribbbleから紹介します。 画像: Girly Drop 複数のカラーから調和のとれたカラーパレットを作成 角丸パネルを重ねる時、それぞれの角丸をバランスよくする 円をよりくっきり見せる 滑らかなベジェ曲線を描く エレメントをくっきり美しく 斜めの線を使った小さいアイコンを作るこつ レイヤーパネルの設定をカスタマイズ 「ベベルとエンボス」より「シャドウ（内側）」がいい場合 曲線と直線を美しく手描きするこつ 複数のカラーから調和のとれたカラーパレットを作成 広範囲のコントラストをもつ複数のカラーから調和のとれたカラーパレットを作成します。

個人でも商用でもWebページやアプリ、プレゼン、提案書、ポスター、フライヤー、同人誌などのさまざまなメディアで利用できる国内の無料素材、日本語フォント、写真素材、イラスト素材、マンガ素材をまとめました。 ほとんどのものがバックリンク・クレジット表記の義務無しなので、使いやすいと思います。

あなたのブランドを魅力的に見せるアイキャッチ画像は、非常に大切です。どんなカラーパレットを使うか、どんなタイプのイメージを選ぶか、どんなフォントが一緒に機能するか、デザインのプロセスは多岐に渡ります。 Webページやブログのヘッダ、プロダクトの打ち出し、ブランドのメッセージなど、見た人の印象に残るアイキャッチ画像の作り方、50の作例とデザインする際に役立つアドバイスを紹介します。 Steal These 50 Branding Kits For Your Startup 下記は各ポイントを意訳したものです。 元記事ではアイキャッチ画像と同テイストの名刺も同時に紹介されています。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Whimsical: サンプル画像 抑えられたトーンとミニマルなタイポグラフィ 画像にソフトなカラーフィルタを使いトーンを抑え目にし、タイポグラフィ

Webページやプレゼンの資料やお店のフライヤーなど、法人でも個人でもWebサイト・ブログ・映像・アプリ・ゲーム・紙で無料利用できるフリーのアイコン素材を紹介します。 WebページにはアイコンフォントやSVGアイコン、紙にはPNGアイコン、デザインもベーシックなものからちょっと変わった面白いものまで、見ているだけで楽しめるアイコンばかりです。 Fontello Font Awesome, Entypo, Typicons, Iconicなど、メジャーサイトのアイコンを自由に組み合わせて、自分用のアイコンセットを作成してダウンロードできます。 Webサイトで使うベーシックでシンプルなものなら、ここだけで足りるでしょう。 ライセンスは各アイコンごとに異なりますが、SIL, BSD, MITのオープンソースのものが主です。

ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます！ ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン

個人ブログでも企業サイトでも新しいサービスを立ち上げる時に重要なのは、ロゴのデザインです。ロゴの作成は、デザインセンスがある人には簡単な作業でも、デザインが苦手な人にとっては悪夢かもしれません。 ロゴのデザインやカラーやフォントを難しいと感じる人は、ぜひこの記事を参考にしてください。ロゴのデザインにとても役立つ23のサイトをご紹介します。 ロゴ・ジェネレーター（ロゴ作成ツール） カラーを選ぶためのツール ロゴ用の無料アイコンがダウンロードできるサイト ロゴ用の無料フォントがダウンロードできるサイト ロゴのアイデアがもらえる情報源 ロゴ・ジェネレーター（ロゴ作成ツール） ロゴ・ジェネレーターはロゴ作成のための一番簡単な手段です。以下のサイトを使えば手早くロゴが作成できます。無料や低価格で利用できるので費用の節約にもなります。 それでは、一つずつご紹介します！ Logaster 会社名と業種を

人物・動物のイラストを描く時の参考になる骨格や筋肉の仕組み、動きや表情、手や足など各部位、赤ちゃんからお年寄りまで世代ごとの特徴の出し方、ネコや鳥や馬などの動きや品種や柄などの描き方を紹介します。

一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。 Coolors オススメの組み合わせを次々に表示してくれるオンラインサービス。 スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。

個人でも商用でも無料で利用できる、下絵や線画から1クリックで主線を抽出するPhotoshopのアクションを紹介します。 数手間かかるのが、1クリックでできちゃうと楽ちんですね。 登録すると、こんな感じに。 ※最後のアクション「Layer 0」で、日本語環境だとアクションが止まってしまいますが、単にレイヤーを非表示にするだけのアクションなので無視しても大丈夫です。変更する時は上にちらっと見えてるように「レイヤー0」にします。 というわけで知り合いの絵師さんに下絵をいただいたので、実際に使ってみました。