Photoshopなどのデザインソフトにある「乗算」「スクリーン」「焼き込みカラー」「覆い焼きカラー」など、各描画モードがどのように機能するかを解説します。 それぞれの違いがよく分からない、どんな効果があるのか分からないという人に、これを読めば描画モードでどれを使うか迷うことはなくなります。 Blending Modes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 描画（ブレンディング）モードとは 各描画（ブレンディング）モードについて解説 はじめに 見た目が思い通りになるまで、描画モードをいろいろ試していませんか？ 描画モードの種類 この記事を読んでもあまり変わらないかもしれませんが、少なくとも「比較（明）」や「比較（暗）」を使用することはなくなるでしょう

WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン

まさかまさかの朗報です！ 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フ

フリーフォントが大好物な人に朗報です！ 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです！ 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語

2020年もあと残り1ヵ月、今年リリースされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 明朝体、ゴシック体、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、もじワク研究から待望のフリーフォント。 私はさっそくすべてのデバイスにインストールして、愛用しています。 マメロン Hi-Regular 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 個人的にも特にお勧めの「マメロン」が、大きく変わりました。デジタルデバイスでの使用を意識してデザインされており、可読性が高いかわいいフォントです。収録文字はAdobeJapan1-3StdNに対応しており、JIS第一・第二水

CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ

人物・動物・植物をはじめ、デジタル機器、建物、家具など、日常で見かける標準的なさまざまなスペースとサイズを図版化したDimensions.Guideを紹介します。 人物だけでも、老若男女の立ち・座り・寝・歩き・運動、そして正面・側面・上面が揃っており、イラストやデザインの参考資料になると思います。 Dimensions.Guide Dimensions.Guideではさまざまな図版が揃っています。 例えば、25-45歳の女性が歩いている時のサイズ。 平均身長は1.63mに設定されており、カジュアルな服装で歩いている横向きです。 Walking Female Side 素材はすべて商用でも無料で利用できます、クレジットは特に必要ありません。ただし、素材そのものを再配布・再販売することは禁止です。詳しくはライセンスページをご覧ください。 legal ダウンロードできる素材のフォーマットは、3種

さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ

ブランドやサービスのロゴで使われているようなモダンで、読みやすい文字をイメージして、デザインされた日本語の無料フォントを紹介します。 「刻ゴシック・刻明朝」をリリースされている作者様の新作で、連絡をいただきました！ フォント: コーポレート明朝 イラスト: freepik コーポレート明朝は源ノ明朝の派生フォントで、レトロな感じがかわいいコーポレート・ロゴを明朝体にアレンジしたものです。 ひらがな・カタカナ・漢字・英数記号文字が利用できます。漢字は源ノ明朝なので、文字がなくて困ることはないでしょう。

WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を

HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step

Webデザイナーはデザインの知識やテクニックだけでなく、どのような実装テクニックがあり、何が実現可能なのか知っておくことで、さらに素晴らしいデザインを作りだすのに役立たせることができます。 Webデザイナーにとって、CSSは難しく感じるかもしれません。しかし全部を覚える必要はありません。デザインに関わるいくつかの有用なCSSのテクニックを紹介します。 20 essential CSS tricks every designer should know イラスト: Girls Design Materials 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 絶対位置への配置 2. 全称セレクタ（*） 3. すべてのスタイルを上書き 4. 左右の中央に配置 5. 天地の中央に配置（テキストのナビに） 6. ホバーエフェクト 7

本書にはHTML、特にCSSに携わる人が学ぶべきものがたくさんあります。 最前線の現場でHTMLとCSSがどう書かれているのか、Sassは制作で実際にどのように取り入れているのか、Gulpの使い方やBEMをベースにした命名規則の策定など、CSSの設計や管理の仕方、考え方のプロセスや効率的に書く方法などが詳しく解説されています。 今の自分に、5年後の自分ために、絶対熟読しておきたいオススメの本を紹介します。 本書はヤフー株式会社の現役のフロントエンドエンジニア陣が惜しげもなく、実際に業務で使用されているHTML/CSSの記述ルールやテクニックをベースに、より多くの制作現場で利用できるよう解説されたものです。 大規模サイトはもちろん、小規模サイトやランディングページなど、一つのプロジェクトを制作する上でSassをつかった実践的なCSS設計について学ぶことができます。

正確な美しいプロ仕様のストロークで描ける、デザイナー・イラストレーター・アーティスト・絵師さん向けのIllustrator用のブラシ素材を紹介します。 通常は有料ですが今週末まで無料なので、ダウンロードはお早めに！ Illustratorにブラシをインストールする方法 ダウンロードしたファイルをIllustratorで利用する方法は簡単です。 ダウンロードしたファイルを解凍します。 「ProBrushUpdated.ai」をアプリフォルダ内の「ブラシ」に移動します。 \アプリケーション\Illustrator CC 2014\Presets\ja_JP\ブラシ\ Illustratorを再起動します。 あとは、Illustratorのブラシパネルから、「ProBrushUpdated」を選択します。

もう少し細いフォントが欲しい、横線が短めのフォントが欲しい、カクカクしたフォントが欲しいなど、自分仕様にフォントを簡単にデザインでき、それをOpenTyepとTrueTypeのフォントとしてダウンロードできるオンラインサービスを紹介します。 先日紹介した「英語や日本語や絵文字など紙に書いた文字からフォントがつくれるオンラインサービス」とはまた違ったフォント作成ツールで、こういうサービスが増えるのは嬉しいですね。

8 Faces magazineで特集されたリードデザイナー8人、世界で活躍している有名なデザイナー64人に4年に渡りアンケートを実施。「もしも8つしか書体を使えないなら、どれを選びますか？」で選ばれたTop25、27書体をランキング形式で紹介します。 正しい書体を選ぶことは、デザインとコミュニケーションにおいて非常に重要な役割となります。タイポグラフィのデザイナーが厳選した書体のリストから選ぶのも素晴らしい一つの方法です。 ランキングも面白いですが、タイプフェイスを使ったグラフィックもかっこいい！

年賀状の宛名や文面に、心をこめた手書きっぽさを演出する手書きの日本語フォントを紹介します。 毛筆もペンもマジックインキも全部無料で利用できます！ ぐんまちゃんの年賀状：ご当地キャラクター年賀状の無料素材 各フォントで縦書きのサンプルを作ってみました。文字の調整はあえて一切していません。 ※すべてのフォントは、横書きでも利用できます。 各画像に使用している羊のイラスト：年賀状用の無料素材「年賀状AC」

個人でも商用でも無料で利用できる、レトロ・ヴィンテージなカラーと柄がかわいい110種類のパターンが揃ったPhotoshop用のパターン素材を紹介します。 レトロ風のかわいい背景が簡単に作れちゃいます。

Mac, Win, Linux対応、しかもブラウザでも動作してしまうベクターベースのデザインアプリケーションを紹介します。 GPLライセンスのオープンソースで、無料で利用できるのも嬉しいポイントです。 Gravit Gravit -GitHub Gravitは優雅なUI、気持ちの良い操作で、複雑なデザインタスクを快適に行えるよう設計されたベクターベースの最先端のデザインアプリケーションです。 現在利用できるのはベータ版ですが、その機能の一端は十分体験できます。