ソーシャルメディアをはじめ、各種ブラウザ、フレームワーク、ライブラリ、言語、ソフトウェア、AI関連などのロゴをSVGで簡単に利用できるsvglを紹介します。 SVGはコードをコピペで利用したり、SVGファイルをダウンロー...記事の続きを読む

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。

Google Fontsには日本語フォントや英語フォントをはじめ、さまざまな言語のフォントをすべて無料で使用できます。いやー、いい時代ですね。 そんなGoogle Fontsの中からリーダビリティ、レジビリティに優れた、テキストを読みやすくするためにデザインされたアクセシブルなフォントを紹介します。教育機関で教材に使用されていたり、指導用として承認されているフォントをあります。

「新レトロ丸ゴシック」「築豊明朝」など、オールドスタイルの日本語フリーフォントをリリースされている文字魚さんから新作フォントがリリースされました！ 「かもめ明朝」はかもめをイメージしたオールドスタイルの明朝体で、通常版（有料）とフリー版（無料）の2種類があります。 Photo by Unsplashのfrank mckenna 「新レトロ丸ゴシック」「築豊明朝」などは、下記からどうぞ。 2023年用、日本語のフリーフォント670種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 では、まずはフリー版のフォントのダウンロードから紹介します。 下記ページにアクセスし、フリー版（無料）をダウンロードするには「無料ダウンロード」をクリックするだけです。

デザインの引き出しを増やすためには、トレンドを押さえておくことは大切です。 デザインの基本となるタイポグラフィ、カラー、形などの要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2023 Logo Trend Report by BILL GARDNER 下記は各ポイントを意訳したものです。 ※元サイト様にライセンスを得て翻訳しています。 2023年、ロゴデザインのトレンドの傾向 花々を新しい解釈でデザイン「Wildflowers: ワイルドフラワー」 存在感のある流体の形状「Bloblend: ブロブレンド」 焦点の合った要素と合っていない要素をブレンド「Fades: フェード」 三次元の形を表現する「Foreshort: フォアショート」 上昇を表現する新しいデザイン「Thrust: スラスト」 自然界の神聖な数式から生まれた形「Spirals

「ブロックテーマ」とは、WordPressのサイトエディタのために用意された新しいテーマのフォーマットで、Gutenbergのブロックを使用してテンプレートを構成するものです。WordPressが後方互換を考慮するかぎり、今までのクラシックエディタや初期のGutenbergも使用できると思いますが、これからWordPressのテーマを制作するなら、このブロックテーマが必須になります。 WordPressのこれからのテーマ制作の標準「ブロックテーマ」をしっかり学べる解説書を紹介します。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書もWordPressのブロックテーマをその基礎知識から実践的なテクニックまで詳しく解説されてお

ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇

ソシム社からまたまた、勉強になる面白いデザイン書が発売です！ 今回はWebデザインや紙のデザイン、そしてイラストや写真にも使える、構図を使ってデザインするときのテクニックやポイントを解説した「最強構図」。 「けっきょく、よはく。」「ほんとに、フォント。」の著者ingectar-eが生み出したデザインの新セオリーが、分かりやすく解説されています。 デザインはセンスではなく、知識です！ 本書は、本日（1/26）発売されたばかり！ 手に取ると最初に、表紙の洗練された美しいゴールドに感動すると思います。画像で見るよりはるかに美しい金です！ 「最強構図」の4文字とその下にある黄金螺旋、ワクワク感が溢れる表紙ですね。もちろん、中身もその期待を裏切らない、いや期待以上の内容でした。

2022年も残り2週間ちょいですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 2022年フォント界の大きなニュースは、今年も引き続きGoogle Fontsに大量の日本語フォントが追加されたことでしょうか。Webフォントとして利用できるのはもちろん、オープンソースなので商用プロジェクトでも無料で利用できます。 また、LINEからフリーフォントがリリースされたのも予想外でした。ほかにも、手書き系の文字種が揃ったフリーフォント、マンガやテレビにインスパイアされたフリーフォントなど、使いたく

先日ローンチされたばかり、500種類以上のランディングページのデザインをまとめたLandingsを紹介します。 ランディングページのデザインは、テーマやカラーでフィルタリングができ、アイデアを膨らませるのに役立つと思います。 Landings Landingsは今月の初めにローンチされたばかりのランディングページのまとめサイトです。現在のところ、500種類以上のランディングページのデザインがまとめられており、これからも定期的に追加していくとのことです。 Landings Landingsの利用は簡単で、登録など面倒なことは一切不要。 ページは無限スクロールに対応しているので、そのままスクロールしてもよし、上部でテーマやカラーでフィルタリングすることもできます。 フィルタリングを見てましょう、まずはライトテーマ。 各サムネイルをクリックすると、ページ全体のキャプチャ画像とランディングページの

個人向けのブログから企業向けのサイトまで、WordPressのテーマを数多くリリースされているTCD様から、ブログメディア向けWordPressの有料のテーマファイル「Rebirth」を無料プレゼントしているので、紹介します。 完全無料で、商用利用も可、デザインも今風にリデザインされ、カスタマイズ性が高く、クオリティも非常に高いWordPressのテーマファイルです。 ※確認したところ、プレゼント期間は未定とのことで、お早めにどうぞ。 WordPressテーマ「Rebirth」 無料プレゼント WordPressテーマ「Rebirth」の入手方法 WordPressテーマ「Rebirth」とは WordPressテーマ「Rebirth」の入手方法 まずは、WordPressテーマ「Rebirth」の入手方法から。 下記ページにアクセスします。

2022年上半期にリリースされたものを中心に、ひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 作品にインスパイアされたフォント、漫画や同人誌にぴったりなアンチック書体、プログラミング向けのフォント、タイトルやコピーに使えるデザインフォントなど、たくさんのフォントがリリースされています。

ダークテーマは好きだけど、#000のブラックだったり、テキストが派手なカラーだったりすると、目が疲れませんか？ 背景のブラックはほんの少しだけブルーがかった夜空のように落ち着いた色合いで、グレーの濃淡だけのMonochromeと淡いカラーで構成されたMoonlightの2種類の配色が用意された、VS Code用のテーマファイルを紹介します。

商用でも無料、かわいくておしゃれなイラスト素材をまとめました。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、さまざまなメディアで無料で利用できます。 ほぼすべてがクレジット表記は必要無しなので、使いやすいと思います。 イラストセンター 個人・商用プロジェクトで無料で利用できます。 現在10,000点以上、分かりやすくて使いやすいイラストが揃っています。カテゴリも豊富で、だいたいのものが揃っています。野菜や果物など、同じテイストでたくさんあるのもいいですね。料理もたくさんの種類があります。一度に利用できるイラストの数は20点までとなっており、詳しくは利用規約をご覧ください。

マイクロコピーとは、Webサイトやスマホアプリのボタンのラベル、ボタンやフォームに添えるテキスト、エラーメッセージなどのUIデザインに使用される短いテキストのことです。優れたマイクロコピーを使用することで、入力ミスが少なくなったり、ボタンのクリック率があがったり、さまざまな効果を得られます。 思わずクリックしたくなるタイトル、迷わずクリックできるボタンなど見かけませんか？ ボタンに書かれているラベル、ボタンに添えられたテキスト、これらに使われる文言はほんの少し工夫を加えるだけで、劇的な効果を発揮します。 WebサイトやスマホアプリのUIで使用する文言、ライティングのテクニックを身につけたい人にお勧めします。本書は「ザ・マイクロコピー（紹介記事）」の第2版で、内容は大幅にアップデートされています。 UIデザインで使用する言葉、ボタン、フォーム、ナビゲーションに使用する文言など、言葉の魅力でU

次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, GIF）の最適化と圧縮、画像の新しいフォーマット（WebPやAVIF）への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の

「しょかきさらり」「しょかき鱗片」「しょかきうたげ」（すべて無料版あり）をリリースされているぼんのう堂さんから、ついに「しょかき楷月」がリリースされました！ 「しょかき楷月」は7,000文字すべてをペン字で手書きしたフォントで、ひらがな2種類・カタカナ・半角全角英数記号文字・ギリシャ文字・キリル文字・JIS第2水準までの漢字・千字文・般若心経の漢字が揃っています。 販売開始セールとして本日から5/6まで、40％オフの3,000円です！ しょかき楷月 -BOOTH 「しょかき楷月」は以前、当ブログで紹介した時はプロトタイプ的な無料版のみでしたが、2年以上の歳月をかけて本日正式版としてリリースされました。 パイロット社の「筆まかせ（極細）」で手書きされた、凛々しい楷書のフォントです。

マンガや同人誌などのト書きや長いセリフにぴったりな、可読性に優れた無料フォント「びぜんアンチック」がリリースされました！ 先日当ブログで紹介したMORISAWA BIZ UDゴシック（紹介記事）を使用した合成フォントで、個人でも商用プロジェクトでも完全に無料で利用できます。 びぜんアンチック びぜんアンチックは「ComicStudio フォントパック」に収録されたアンチゴチ書体を再現したもので、BIZ UDゴシックとZENアンチックを組み合わせて「びぜん(BIZen)アンチック」と名付けられました。 びぜんアンチックの紹介の前に: Twitterでお知らせしましたが、BIZ UDゴシックとBIZ UD明朝はGoogle Fontsで利用できるようになりました！ Morisawa Inc. -Google Fonts Google FontsにMorisawaの名があるのはスゴイですね。 B

VSCodeでHTMLやCSS、JavaScriptなどを書く人におすすめのフォントを紹介します。もちろん他の言語でもOKです。 先週紹介したMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」から、スラッシュ付きゼロ対応版がリリースされました。 参考: オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース スラッシュ付きゼロが好きな人には嬉しいニュースですね！ また、全角の記号文字が優先的に表示されるJPDOC版も同時リリースされています。「■□▼▽↑→↓←」などの記号が全角優先で表示されます。 UDEV Gothic スラッシュ付きゼロ対応版と全角記号文字版 スラッシュ付きゼロに対応した「UDEV Gothic v0.0.5」のダウンロードは、下記ページから。 ライセンス

まさかまさかの朗報です！ MORISAWA BIZ UDゴシックとMORISAWA BIZ UD明朝がGitHubにオープンソースのOFLで公開されています！！！ アップデート情報 4/1 Google Fontsで利用できるようになりました！ Morisawa Inc. -Google Fonts 3/29 v1.001, v1.002がリリースされ、不具合が修正されました。 3/24 HTMLやCSS、JavaScriptなどコードを書く人にどうぞ。 仕事早っ！！ オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース MORISAWA BIZ UDフォントとは GitHubで公開されているMORISAWA BIZ UDフォント MORISAWA BIZ UDフォントのダウンロード MORISAWA BIZ UDフ