Web制作に役立つ情報一覧

こんなやり方もあったとは！最近のWeb制作のワークフローにおけるAdobe系ソフトの効率的な使い方が詳しく解説された完全保存版の良書

2018/10/11(Thu) 09:55

Web制作にAdobe系のソフト、Adobe XDとPhotoshopとIllustrator、そして、Creative Cloudを活用している人は多いと思います。ブラウザやスマホなどの閲覧環境が多様化する中、デザインツールや制作のワークフローも大きく進化しています。

https://coliss.com/articles/book-review/isbn10-4297100320.html

全部、無料フォント！曼荼羅（まんだら）デザインのロゴを簡単に作成できるフリーのベクター素材キット

2018/10/10(Wed) 10:08

緻密にデザインされた曼荼羅のロゴを簡単に作成できる、Illustrator用・Photoshop用のファイルが揃ったフリーのベクター素材キットを紹介します。

https://coliss.com/articles/freebies/modern-mandala-logo-creator.html

ブランドをもっとも印象づけるロゴの配置はどこか？

2018/10/09(Tue) 09:56

多くのデザイナーがブランドを印象づけるためにWebサイトのロゴを中央や右に配置します。しかしこれは、ブランドの印象づけに繋がらないことが調査によりわかっています。

https://uxmilk.jp/74759

なぜ背景色に明るく鮮やかなを使ってはいけないのか？

2018/10/05(Fri) 10:05

インターフェイスの色にユーザーの目を刺激する色を使っていませんか？もし、背景に明るく鮮明な色を使っているのであれば、ユーザーがページにとどまるのを困難にしています。明るく、鮮明な色はユーザーの興味を引きます。しかし鮮明な色を広い領域で使うことは、目を圧迫し網膜を過剰に刺激します。

https://uxmilk.jp/74976

Photoshopで写真をモノクロにする 8個の鉄板テクニック 完全版

2018/10/04(Thu) 09:52

Photoshopで写真をモノクロに加工する方法は、デザイン制作において欠かせない重要なテクニックです。しかし、加工方法もさまざまで、画像に応じてツールを使い分け、モノクロ加工を行っているというひとは、どれくらいいるでしょう。

http://photoshopvip.net/convert-black-white

【CSS】beforeとafterなど擬似要素の使い方

2018/10/03(Wed) 09:57

「擬似要素って、なんとなくとっつきづらい」「擬似要素で表現できるものは、CSSに書けばよくない?」こんなイメージを「擬似要素」に持っていませんか？ 特に、アイコン表示などは、CSSでも実現できるのに、なぜ擬似要素なの、という疑問はCSSを最初に学習し始めた人が素朴に抱きがちです。

https://creive.me/archives/14779/

カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法

2018/10/02(Tue) 10:02

テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/color-system-in-css.html

基本から実用テクまで網羅！Photoshopで参考にしたい最新チュートリアル、作り方42個まとめ

2018/10/01(Mon) 09:56

今回は、特に活用する機会、需要ともに多いデザインエフェクトを学ぶ、最新Photoshopデザインチュートリアルをまとめてご紹介します。

http://photoshopvip.net/111121

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut

2018/09/28(Fri) 10:00

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。

https://coliss.com/articles/build-websites/operation/javascript/animate-on-scroll-library-scrollout.html

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説

2018/09/28(Fri) 09:58

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。

https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html