商用利用無料!さまざまなUIデザインに適した、SVG完備の美しく精密なアイコン素材 -SWM Icon Pack

企業サイト、オンラインショップ、アプリ、ブログ、プレゼンなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるSWM Icon Packを紹介します。

ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。また、スタイルは3種類(アウトライン・ブロークン・デュオトーン)で、美しく精密にデザインされたアイコンです。

SVG完備のアイコン素材 -SWM Icon Pack

Freebie SWM Icon Pack

続きを読む

フォントのサイズ設定は役に立たない、問題点と解決方法

WebページやOSのUI、エディタなどのソフトウェアでフォントのサイズや行の高さを設定した際に起こる問題点と解決方法を紹介します。

フォントのサイズ設定は役に立たない、問題点と解決方法

Font size is useless; let's fix it
by Niki Tonsky

続きを読む

Web制作者は要チェック!現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。

Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。

現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css

Reseter.css
Reseter.css -GitHub

続きを読む

イラストのディレクション本がついに発売!イラストの仕事に携わる人は目を通しておいて損のない一冊 -たのしく、イラストディレクション!

イラストのディレクションって、何からどうすればいいの? そんな不安を完璧に解消してくれるイラストのディレクションを徹底解説した良書を紹介します。

こういった解説書は、初じゃないでしょうか。
イラストのディレクションを基本から、イラストレーターの見つけ方、発注方法、最初に伝えるべき内容、クライアントへの提案、スケジュールや料金、著作権や契約についてまでよく分かる一冊です。

イラストをどのように効果的にデザインで使用すればよいのか、制作の前段階から納品後までその過程がくわしく解説されています。

たのしく、イラストディレクション!

続きを読む

CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ

画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。

CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。

画像上に表示するテキストをより読みやすく、より美しくするCSSのテクニック まとめ

Handling Text Over Images in CSS
by Ahmad Shadeed

続きを読む

Adobe CCユーザーに朗報!🎉 キリギリスや味明やルイカなど、日本語フォントがAdobe Fontsに大量追加

Adobe CCユーザーに朗報です!🎉
Adobe Fontsにまたまた、191書体の大量の日本語フォントが追加されました。これでトータル436の日本語フォントが利用できます。

日本語フォントがAdobe Fontsに大量追加

続きを読む

CSSの新しいセレクタが便利!複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方

CSSの新しいセレクタが、主要なすべてのブラウザにサポートされました(ただし、IEは除く)。複数のセレクタを1つにまとめられる:is()、同機能でさらにセレクタの詳細度を0にする:where()をどのように使い分ければよいのか紹介します。

複数のセレクタを1つにまとめられる:is()、さらに0詳細度にする:where()の使い方

:where() has a cool specificity trick, too.
by Chris Coyier

続きを読む

FigmaでWebサイトやスマホアプリのデザインシステムを制作する手順を解説

UI/UXデザインのコラボレーションツール「Figma」で、Webサイトやスマホアプリのデザインシステムを制作する手順を紹介します。

カラーパレットをはじめ、タイポグラフィ、シャドー、アイコン、コンポーネントなど、Figmaでデザインシステムに必要なものをどのように制作するか解説します。

Figmaでデザインシステムを制作する手順を解説

Creating a Design System in Figma.
by Marc Andrew

続きを読む

top of page

©2021 coliss