Web制作に役立つ情報一覧

もっと早く知りたかった！ 認知心理学による使いやすいUIデザイン、実務に役立つ知識をしっかり学べるデザイン書 -UIデザイン必携

2022/05/02(Mon) 09:00

WebサイトやスマホアプリのUIデザインについて、実務に必要な役立つ知識と情報をさまざまな角度から学べる解説書を紹介します。「わかりやすいUI」「使いやすいUI」ぼんやりと分かっているけど、うまく言葉にできない、明確に整理できていない、UIデザインの考え方を学びたい人にお勧めです。国内外の実例も多数掲載されており、非常に分かりやすい解説書です。

https://coliss.com/articles/book-review/isbn-9784798169620.html

これならコピペで簡単！ HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball

2022/04/28(Thu) 09:09

コピペで簡単に使用できる、HTMLとCSS（複雑なものはSVG）で実装されたWebサイトやスマホアプリ用のローディングアニメーションを紹介します。さまざまなローディングやスピナーが揃っていますが、画像は一切使用されていません。必要な時にさくっと実装できるので、スニペットに登録しておくと便利です。

https://coliss.com/articles/build-websites/operation/css/uiball-loaders.html

知っておくと便利！ CSSでUIデザインを微調整する時短テクニックとプロセスを解説

2022/04/27(Wed) 08:58

WebサイトやアプリのUIデザインで欠かせないのが、FigmaなどのデザインツールとChromeなどのデベロッパーツールです。この2つをどのように使い分けるとよいのか、デザインツールでやるよりもブラウザ上でCSSでやった方が便利な時短テクニック、UIデザインを微調整するプロセスを紹介します。

https://coliss.com/articles/build-websites/operation/css/tweaking-in-the-browser.html

すべてのページが美しい！ 色に関する365のアイデアがぎっしり詰まった、デザインやイラストに即戦力の新しい配色本 -色の日めくり配色帖365

2022/04/25(Mon) 08:51

辞書のように分厚い本書には1ページにつき1色、全部で356色の素敵な色、配色、色の知識・情報がおさめられた保存版の配色帖を紹介します。デザインやイラストに使用する色を見つけたい、主役の色は決まっているけど配色をどうすればよいのか、色の使い方はどうすればよいのか、色に関する365のアイデアがぎっしり詰まっています。

https://coliss.com/articles/book-review/isbn-9784815612740.html

好きなもので満たそう！私の推しイラストレーター・画家さんを紹介するよ vol.1

2022/04/22(Fri) 08:55

好きなものに囲まれていると、癒やされますし、気分もあがりますよね。ちょっと辛いときや悲しいとき、もちろんそうじゃないときも、眺めていたい、おすすめのイラストレーター・画家さんたちをご紹介します！

https://designmemo.jp/2022/03/fav-illustrator-vol1.html

CSSの:has()疑似クラスの便利な使い方を徹底解説

2022/04/22(Fri) 08:54

:has()疑似クラスは、指定した要素がある場合にのみスタイルを適用できるCSSの新機能で、これからのWeb制作に活躍するかなり便利な機能です。こういう機能を待ち望んでいた人も多いと思います。

https://coliss.com/articles/build-websites/operation/css/has-pseudo-class.html

センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック

2022/04/22(Fri) 08:53

この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。

https://ics.media/entry/220420/

コピペで簡単！Webサイトを素敵にする最新＆実用HTMLスニペット24選

2022/04/20(Wed) 08:53

この記事では、ホームページの作成やウェブサイト制作のアイデアを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりです。

https://photoshopvip.net/134519

フォトショップで漫画コミック風イラストに一発加工！おすすめ素材10選

2022/04/19(Tue) 08:55

フォトショップで漫画コミックのようなイラスト風に加工する方法は、人気エフェクトのひとつです。画像を差し替えるだけのお手軽エフェクトやベクターイラスト風に仕上げる方法も紹介しましたが、今回はより手軽に漫画イラスト加工ができるデザイン素材をまとめてご紹介。

https://photoshopvip.net/134499

よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

2022/04/19(Tue) 08:54

Webエンジニアを始めて丸2年が経ちました。複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。

https://zenn.dev/kagan/articles/1aa466bb6ef8eb