個人や商用で無料利用できる、日本語のフリーフォント260種類を紹介します（公開時より、2つ追加）。 ビジネスからプライベートまで、幅広く利用できるフォントが満載です！ 毎年まとめていますが、去年は219種類だったので、大幅に増えています。無料でなくなったフォントや配布終了になったフォントもいくつかありました。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 まずは個人的に、今年一年かなり使用したフォントからご紹介。 3種類

最近リリースされた日本語のフリーフォント、バージョンアップされた日本語のフリーフォントを紹介します。 そういえば、4月10日はフォントの日、だそうです。 しかも、アドビ システムズ株式会社の制定！ 知らなかった、、、 イラスト: Girls Design Materials 最近のだけでなく、これまで全部の日本語の無料フォントは下記をどうぞ。 2019年用、日本語のフリーフォント 366種類のまとめ 最新のフリーフォント、まずは先日リリースされたばかりの源ノ明朝から。 源ノ明朝（Source Han Serif） 源ノ明朝 -GitHub 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 Adobeによる5番目のオープンソースフォントで、日本語・簡体中国語、繁体中国語、韓国語の東アジアで用いられている４つの言語に対応したセリフ体。65,535の字形に、ExtraLight, Li

毎月多くのフリーフォントがリリースされています。その中から、特にこれはダウンロードしておきたいフリーフォントを紹介します。 有料フォント並のクオリティの手書きフォントをはじめ、シンプルなフォント、かっこいいフォント、ビス付きの珍しいフォントなど、いろいろです！ まずは、GothamとHelveticaがどれくらい似ているか、合体するとどうなるか、実験的に作られたフォントから。

単に色をのせたようなイラストにリアル感を与えたり、写真画像からマンガの背景用にパターンとラインを抽出したり、スキャンした下絵や線画から1クリックで主線を抽出したり、イラストやマンガや同人誌の制作に役立つPhotoshopの無料のアクションを紹介します。 Photoshop用色収差アクション イラストや写真などの画像に色収差を与え、色を単にのせたようなのっぺりした画像を現実の目で見えているようにリアルに仕上げるアクション。 適用されるレイヤーは背景で、スマートオブジェクトとフィルタを使用しているので、色のずれ幅やにじみ量の細かい調整が可能です。

デザインでここぞという時に強みになるのが、引き出しがどれだけあるかです。 最近のWebデザインで使われているさまざまなテクニックの勉強になるUI素材、Adobe XD用、Photoshop用、Sketch用の無料素材を紹介します。 Guacamole Adobe XD, Adobe Photoshop, Sketch XDにはデフォルトでApple iOS, Google マテリアル, Microsoft WindowsのUIキットが利用できますが、Guacamoleでも70種類以上のUI素材、150種類以上のアイコン素材などが利用できます。 XD対応の素材はこれからどんどん増えてきそうですね。 Adobe XDってなんぞ？という方は下記を参考にしてください。 UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介

Kindle Unlimitedがいよいよ、始まりましたね。 2016年8月現在、読み放題のタイトルは139,910件で、月額980円（初回30日は無料）で利用できます。 Web制作者やデザイナーにオススメのKindle Unlimited読み放題の対象本を紹介します。

2016年6月20日に、AdobeのCreative Cloudがアップデートされました。バージョンは、2015.5と「.5」がついただけですが、前回の2015.1から、4つ飛ばしになり、新機能がかなり搭載されています。 Photoshop CC 2015.5の魅力的な新機能を紹介します。 誰もが恩恵を受けるのは「フォントリストの読み込みが4倍速」になったことでしょうか。これによりロード時間が圧倒的に早くなりました！ 地味ですが、こういうアップデートは非常に嬉しいですね。 Adobe Photoshop ※Adobeの画像の掲載にあたり、Adobeの広報様に許可を頂いています。 Photoshopで「カワイイ」「笑顔」「小顔」が簡単に作れる 「コンじる」が大幅にパワーアップ、新機能も登場 正確な選択範囲とマスクの切り抜き作成が簡単に、しかも速い 字形の機能が強化、フォントのスワッシュも簡単

PhotoshopのPSDファイル、GimpのXCFファイル、JPEG, PNG, GIF, BMP, WebPなどの画像ファイルを開き、編集もできてしまう無料のオンラインサービスを紹介します。 UIは簡易版Photoshopという感じで、PSDのレイヤーやグリッド、エフェクトなども読み込むことができます。 そのレイヤーやグリッドやエフェクトを編集することももちろん可能です。 Photopea 写真: ぱくたそ 対応ブラウザの明記はありませんが、Chromeでアクセスすれば問題ないでしょう。利用にあたっては完全に無料で。登録など面倒なことは必要ありません。 さっそく、昨日の「ワイヤーフレームやフローチャートに使える素材のまとめ」でダウンロードしたPSDファイルで試してみました。 通常のアプリと同様に「File:: Open」からファイルを選択して開きます。

いいフォントは高品質ですが、お値段が高いので、増やすのもなかなか大変ですよね。 商用のプロジェクトで使用できるクオリティの高い、そして少しかわいい有料フォントを紹介します。 現在プレリリースとして、全14スタイルが「$1（約110円）」で購入できます！ いつまでなのか分かりませんが、長い期間ではないでしょう。 普通に購入すると、6万円くらいかな。 追記: 今月末までとのことです。

「Ombré（オンブレ）」とはここ数年、海外セレブたちが火付け役となって人気になったオンブレヘアーの美しいグラデーションで、特定の2色間をグラデーションでつなぐデザインです。ロゴデザインではこのグラデーションをベクターベースの面白い形状で色分けして利用しています。 Circles 完璧と無限を表現する美しいサークルは、非常に人気が高いデザイン要素です。最近のトレンドは、サークルの上にサークルを重ねたり、繰り返して使用しています。こういった幾何学的な形はシンプルであればあるほど良く、要素に区別をつける時にはフラットにしたり透明にしたり、グラデーションにしても効果的です。 Half and Half

Webサイトのデザインやコーディングは、やるべきタスクが年々増えてきました。それらの手間がかかる面倒な事が楽にできるツールやアプリも年々リリースされています。 これからのWeb制作にどんどん取り入れていきたいツールやアプリを紹介します。 Adobe Experience Design(Adobe XD) Adobe XDはWebサイトやスマホアプリのデザインやプロトタイプを作成するベクターベースのツールで、PhotoshopやIllustratorともスムーズに連携して利用することができます。 以前は「Project Comet」の名称で発表されていた新ツールが、2016年3月に「Adobe Experience Design(Adobe XD)」としてプレビュー版が公開されました。現在はOS X版のみですが、2016年後半にはWindows 10への対応も予定されています。

Bootstrapベースのデザインカンプを作成する時にめちゃくちゃ便利で、大幅な時短にもなるPhotoshop CC2015対応の機能拡張を紹介します。 OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。

「CSS Grid」はCSSの新しいレイアウトモジュールで、まだEditor's Draftですが、手続き完了に近づいています。このモジュールは17個の新しいプロパティを持ち、今までとは異なる新しいコンセプトでCSSを記述します。 この新しい仕様がどのように機能し、どのように記述するか、レスポンシブ対応の3カラムレイアウトを使って紹介します。 CSS Gridの基本的な使い方は、下記ページをご覧ください。 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 The Holy Grail Layout with CSS Grid 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「Holy Grail Layout（聖杯レイアウト）」とは 「CSS Grid」で3カラムレイアウトを実装 実装の解説 「Holy G

マンガや同人誌のセリフ・キャッチコピーなどの短い文にインパクトがでるよう、ひらがなとカタカナを通常より5-7%大きくデザインした日本語のフリーフォントを紹介します。 マンガや同人誌向けの記号も用意されています。 もちろん、横書きでもビジネス使用でもOKです！ フォント: 源暎ゴシック H-KL イラスト: 小倉あずき 源暎ゴシック H-KLは、源暎アンチック・源暎ラテゴ/ラテミンの作者様の新作で、大かな版のフォントです。「H-KL」は Heavy Kana Large の略。 紹介記事: 2017年用、日本語のフリーフォント 259種類のまとめ ひらがなとカタカナが通常のフォントより目立ち、そのままで強調を表現することができます。

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行

Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す

先日、Twitterで協力をお願いしたアイコンの作成依頼が受理され、さっそく作っていただきました。 いやーほんと、仕事が早くて驚きです！ ※コリスのアイコンはダウンロードできません。 海外の無料アイコンはかっこよくてかわいいのですが、日本人向けのものがないのが難点です。「はてな」「LINE（ライン）」「Feedly」のアイコンをお願いして、作成してもらいました。

Webデザインで今、注目されているトレンドはデザイン的にも面白く、かなり使いやすいです。最新のデザインやトレンドな機能をサイトに加えて、いつもの同じようなデザインから抜け出すために使ってみるのもよいでしょう。 ここで紹介するトレンドは、よく使用している要素やカラーやタイポグラフィに一手間加えるだけで、新鮮なデザインに変わります。 Essential Design Trends, February 2016 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 DuoToneのカラースキーム Split-Screenのデザイン 共有スペースのタイポグラフィ 総括 DuoToneのカラースキーム DuoToneのカラーパレットは存在自体は昔からありましたが、最近の使い方としてはフルスクリーンの画像にDuoToneのグラデーションを加えて強いイン

Web制作の知識を基礎から深く理解し、現在のWeb制作のワークフローを元に、現場で必要とされている技術的なテクニックを幅広く解説した一冊を紹介します。 これからWeb制作の仕事をしてみたい人にも、現役で仕事としてバリバリ従事している人にもオススメで、自分で考える力が養える良書です。 本書は「改訂新版」とある通り、2013年2月に発売された「Webデザインの新しい教科書」の改訂版です。この3年間で大きく変わったポイント、モバイルの普及、レスポンシブ、HTML5、CSS3 を中心に、今時のWeb制作の現場で必要とされている知識を基礎から幅広く身につけることができます。

外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワークを紹介します。 一部だけ利用してもよし、もちろん全部を利用してもよし、カスタマイズも簡単なので、ブルマをベースに自分用のデザインを適用して利用するのもよしです。