下記のキャプチャ画像は、写真でもイラストでもありません。 肌の質感も髪も目も鼻も口も全部CSSで実装されたポートレートを紹介します。 眉毛とか、瞳とか、かなりのクオリティ。唇や歯もかなりリアルです。 <pic> <face> <i></i> </face> <eyeleft> <i> <i></i> <i></i> <i> <i> <i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </i> <i></i> <i></i> </i> <i></i> </i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i

言葉って面白いですよね。言葉を少し付け加えたり、入れ替えたりするだけで、その言葉の印象が大きく変わることがあります。WebページやスマホアプリのUXに特化されたコピーライティングの解説書を紹介します。 思わずクリックしたくなるタイトル、迷わずクリックできるボタンなど、見かけませんか？ ボタンに書かれているラベル、ボタンに添えられたテキスト、これらに使われている文言はほんの少し工夫を加えるだけで、劇的な効果を発揮します。 本書の帯にある「たった2文字を変えただけで、売上が1.5倍になった！」というような宣伝文句に私は懐疑的なのですが、本書には良い意味で裏切られました。 当ブログのビジター全員にお勧めします！ Webページやブログ、そしてスマホアプリなどで使用する言葉、ボタン、フォーム、ナビゲーションなどに使用する文言など、言葉の魅力でWebのUXを改善するためのライティングについて詳しく解説

面白そうなJavaScriptがリリースされました！ SVGやCanvasで実装した平らな要素をブラウザ上に3Dモデルでレンダリングすることができる超軽量JavaScriptライブラリを紹介します。レンダリングされた形状は3D空間に存在するかのようにクリックやドラッグなどで操作ができます。 Zdog Zdog -GitHub Zdogの特徴 Zdogのデモ Zdogの使い方 Zdogの特徴 Zdogは<canvas>とSVG用の3D JavaScriptエンジンです。 Zdogを使用すると、3DモデルをWeb上でデザインしてレンダリングすることができます。 軽量ライブラリ Zdogは、28KbのJavaScriptです。 滑らかなレンダリング 丸みをおびた美しい形でレンダリングされます、ジャギーはありません。 簡単 モデリングは単純明快な宣言型APIで行われます。 Zdogのデモ Zdog

ノンデザイナーズ・デザインブック [第4版] 令和元年記念キャンペーン 今回のキャンペーンは、2本立てです。 ノンデザイナーズ・ デザインブックの動画化 20周年の特典PDFを数量限定でプレゼント ノンデザイナーズ・ デザインブックの動画化 ノンデザイナーズ・デザインブックの動画では、デザインの基本4原則とその応用テクニックを分かりやすく解説。 第1回目の動画は、「名刺」です。 第1回目は基本編として、名刺の制作を通して基本4原則をおさらいできます。また、第2回目は活用編として、書籍では解説されていない、ビジネスドキュメントやプレゼン資料に使われることが多い「表組み」が予定されています。 第2回以降を視聴するには、手続きが必要です。 ノンデザイナーズ・ デザインブックを所有している人のみ対象（紙書籍・電子書籍問わず） マイナビの下記ツイートをシェア。 マイナビのフォームから申し込み。 マイ

Adobeから、この2017年にリリース予定の新しいテクノロジーが告知されました。 Adobe CCとモバイルアプリに対応予定で、そう遠くない日にリリースされそうです。 Face Paintと名付けられた新しいテクノロジーは、画像内の顔を簡単に回転させて、正面以外にもペイントすることができます。このリアルタイムのペイントシミュレーションエンジンでは、ペイントが照明に応じて画像と自然にブレンドされます。

新ゴやリュウミンなど、モリサワの500種類以上の書体が当ブログで紹介した際にも評判が高かったSTUDIOで、誰でも無料で利用可能になりました！ STUDIO自体も無料で利用できるので、文字通り「誰でも無料で利用可能」です。 STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。

当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの用語 CSSのパフォーマンス CSSの記述の順番 リソース はじめに この記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。 多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに

「凸版文久体」はクリエイターに人気が高い書体の一つですが、利用環境がmacOSやモリサワなどに限定されていました。しかし、4/9よりAdobe Fontsでも利用可能になったことで、より多くのWindowsユーザーも利用できるようになりました。 Adobe Creative Cloudユーザーは、「凸版文久体」が商用でも無料で利用できます。

Apple Cardに一目惚れした人も多いと思います。 私もその一人で、夏にリリースされるのが楽しみですね！ カードのデザインがかっこよく、そこで気になったのが使用されているフォントです。Apple Cardの「Marisa Robertson」に使用されているフォントが何か調べてみました。 Apple Card Apple Cardのページには、このフォントについての記載はありません。San Franciscoっぽいですが、角が丸いので異なります。そこで、AppleのHuman Interface Guidelinesを調べてみました。 watchOS - Human Interface Guidelines - Apple Developer 現在Appleでは、小型デバイスのシステムフォントとしてSan Francisco（SF）が使用されています。このフォントには小型デバイスに最適

フリーフォントが大好物な人に朗報です！ 日本語のフリーフォント、英語のフリーフォント、そして多言語のフリーフォントが大量に収録されたフォント集の書籍を紹介します。 フォントを探すのが手間、各サイトからダウンロードするのが面倒な人にぴったりな一冊だと思います。また、配布中止になってしまうってこともあるかもしれません。 本書の書籍版にはDVDが付録としてあり、再配布可能な（または許諾を得たもの）フリーフォントのファイルとフリーフォントのリンクがデータとして収録されています。 紙面ではフォントすべての文字サンプルとライセンスが記載されており、インストール方法、フォントを使用したデザイン、フォント管理ツールなどが解説されています。

Webデザインでも紙のデザインでも、フォントや文字周りのデザインは奥が深いです。指摘されるまで気がつかないようなフォントや文字についてのデザイン知識、実践的なテクニックを学べるデザインの良書を紹介します。 日本語のロゴ、タイトル、見出し、コピーをはじめ、情報量の多いコンテンツやデータ、重要なテキストの目立たせ方など、フォントを活かしたデザインレイアウトが満載です。 本書に既視感を覚えた人は大正解！ 当ブログでも紹介した際に好評だった「けっきょく、よはく。」の第2弾。今回はフォントを活かしたデザインレイアウトの解説書です。 デザイナー初心者にありがちな「何かが違うのは分かるけれど、どこをどう修正すればいいのか分からない」「プロが作ったようなデザインができない」など、デザインでよくある悩みをずばりと解決してくれる一冊です。 「けっきょく、よはく。」は初版・2版は速攻で売り切れてしまい、Amaz

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

当ブログで無料フォントや格安フォントを紹介する度に、「フォントの管理が、、、」という声がちらほら聞こえます。そんなフォントをたくさん所有されている方にぴったりのWin, Mac, Linux対応の無料アプリを紹介します。 先日リリースされたばかりの国産アプリで、もちろん日本語フォントに対応しています。 Fontviewer　-GitHub Fontviewerのダウンロード Fontviewerの使い方 Fontviewerのダウンロード Fontviewerはソフトウェア開発をしているSotaro氏が開発した無料のソフトウェアで、インストール済みのフォントを好きな文字で一覧表示することができるフォントのビューアです。 MITライセンスで、個人でも商用でも無料で利用できます。

個人でも商用でも無料利用できる、日本語のフリーフォント727種類を紹介します。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です！ 前年の647からフリーフォントが50種類くらい増えています！ ※サイト閉鎖などでかなりのフォントが減っています。気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。 本記事は定期的に、全フォントを確認して、更新しております。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。 更新情報 2024/6/4: フォントを10種類追加 2024/2/20: フォントを11種類追加 2023/12/26: フ

クロスプラットフォームの2D物理エンジン「Box2D」をベースに、読みやすくメンテナンス可能なJavaScriptコードとして開発されたJavaScriptのライブラリを紹介します。 Webおよびモバイルプラットフォーム用のライブラリとして、最適化されています。

border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの基礎知識 流れに逆らう（わないで） はじめに 今年開催されたFrontend Conferenceにて、Rachel AndrewはCSS Gridのレイアウトについて講演しました。中でも私が注目したのは、彼女の話の終わりにあったCSSの古いプロパティについてです。 イメージはborder-radiusプロパティを使用するだけで、用

商用でも安心して利用できる、さまざまなデザインのプロジェクトにぴったりな有料フォント、計133,594円分が、98%オフの3,200円で購入できる特大セールを紹介します。 販売期間は、10月30日12時までの期間限定セール。 購入した有料フォントはWebデザイン、アプリ、動画、紙のデザインなどに利用でき、クライアントのプロジェクトでも販売する同人誌に使用してもOK。 デザイナーが愛用したい 極上フォントコレクション セットに含まれてる有料フォント Design Cutsでの購入方法 Design Cutsのライセンス セットに含まれてる有料フォント セットに含まれている有料フォントの総額は133,594円分、それらが今だけ3,200円で購入できます。 まずは、セットに含まれてる有料フォント全部を見てみましょう。 セットに含まれて有料フォント セットの中から特に気になったフォントをピックアッ

Webデザイナーやプログラマー、イラストレーター、そしてブロガーなど、クリエイターが直面する権利や著作権の問題について、実際に起こった豊富な事例とともに詳しく解説されたクリエイター必読の本を紹介します。 写真から構図をトレースするのは問題ないのか、商用フォントを使ったロゴやタイトルの著作権はどうなるのか、在籍中に描いたイラストは退職しても使えるのか、Webサイトで使用されているコードを使用してもよいのか。 クリエイターが実際に悩むことが多い問題の答えがズバリ、分かります。 権利や著作権など、法律関連の書籍は抽象的なものが多いイメージですが、本書は実際に裁判となったイラストやデザインなどの事例が掲載されており、非常に分かりやすくクリエイターの権利や著作権について知ることができます。 もちろん法律関連なので、堅い説明もあり、そしてマンガやイラスト形式でのくだけた説明もあり、しっかりと理解するこ

「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ