A painter and a black cat

# WebDesign

{{rawhtml(<canvas id="map"></canvas><script src="/javascripts/pagemap.min.js"></script><script>pagemap(document.querySelector("#map"));</script>)}}

{{toc}}

# デザイン事例集（主にダメな方）

デザインの敗北事例集～人に伝わらないデザインは死ぬ～

https://note.com/kaji_webmaster/n/nfcab8996c744

# Good articles

ノンデザイナーでもイケてるLPを作成する方法

https://qiita.com/teradonburi/items/412f65147525ff34dbbd

note - Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！

https://note.mu/rdlabo/n/nced2ff4cf64b

開発者が見落としがちなユーザビリティアンチパターン

http://acro-engineer.hatenablog.com/entry/2018/12/15/120000

UIデザインパターン

https://www.sociomedia.co.jp/category/uidesignpatterns

{{rawhtml(<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜！（以下ひとつずつ解説） <a href="https://t.co/2S3PlFeQzC">pic.twitter.com/2S3PlFeQzC</a></p>&mdash; 広野 萌 (@hajipion) <a href="https://twitter.com/hajipion/status/1177063922311942144?ref_src=twsrc%5Etfw">September 26 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>)}}

Webデザイン入門者向け「UI・UX」って何？UXを向上させるには？

https://paiza.hatenablog.com/entry/2019/10/10/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%80%85%E5%90%91%E3%81%91%E3%80%8CUI%E3%83%BBUX%E3%80%8D%E3%81%A3%E3%81%A6%E4%BD%95%EF%BC%9FUX%E3%82%92%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B

本当にそのやりかたでいい？ UXの段階ごとによく用いられる手法をまとめてみた

https://creatorzine.jp/article/detail/494?utm_source=dlvr.it&utm_medium=twitter

Sociomedia ヒューマンインターフェース ガイドライン

https://www.sociomedia.co.jp/category/shig

データよりもストーリーを、相関よりも因果を。

https://takuti.me/ja/note/cognitive-science-and-behavioral-economics/

一人前のUIデザイナーになるための成長計画テンプレート（β）

https://forte.inc/posts/growth-plan-for-designers

UIデザイン時にやってしまいがちな18の誤ち

https://note.com/mikiok/n/n34cedf895e6b

UIデザインのための心理学：33の法則・原則（実例つき）

https://baigie.me/officialblog/2022/03/29/psychology_for_uidesign/

ダサい画面と最短でサヨナラする方法

https://fintan.jp/page/1633/ https://fintan.jp/page/1635/

ユーザーは⾃分が本当にほしいものを⾔葉にできない！UIデザインとUXデザインは別もの！先入観の罠！目からウロコなUIデザインの勉強会

https://togetter.com/li/1916418

実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編

https://note.com/i3design_design/n/na5bc07e4acb0

## ファビコン

【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法

https://webdesign-trends.net/entry/7251

Favicon Generator. For real.

https://realfavicongenerator.net/

>主要なブラウザ・OS向けにファビコンを手軽に生成できるサービス

## 注目記事

WEB FIELD MANUAL - Web制作に役立ちそうなリソースをまとめたサイト

http://webfieldmanual.com/

Creative Tim - Webサイトのテンプレートやスニペット、UIキット等を配布

http://www.creative-tim.com/

ウェブ開発ツールの小技をGIFアニメで届けてくれるサイト「Dev Tips」

https://umaar.com/dev-tips/

webディレクターだけど、初心者に役立つサイト教える

http://lifehack2ch.livedoor.biz/archives/51573841.html

Webサイトの作成を爆速化するWebアプリ約70種をまとめた「HelpMeBuild.io」がまさに救世主！

http://plus.appgiga.jp/masatolan/2015/04/07/55755/ http://helpmebuild.io/

Web制作者向けのツールやリソースを収集している・「wwwhere」

http://kachibito.net/useful-resource/wwwhere http://wwwhere.io/

人工知能で画像を超高画質拡大できる「waifu2x」が凄いと話題に 

http://waifu2x.udp.jp/index.ja.html

AIで画像をアップスケールする無償ツール「Upscayl」に16倍拡大モードとバッチ処理が追加

https://forest.watch.impress.co.jp/docs/news/1441188.html

last log - WebKit nightly の DevTools に Visual CSS Editor

http://uupaa.hatenablog.com/entry/2015/08/18/030559

【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選

https://biz.moneyforward.com/blog/business-hack/designer-ui-slideshare/

img2css. (任意の画像をアップロードするとCSSに変換してくれる)

http://javier.xyz/img2css/

デザインの確かな知識が身につく！Webサイトやアプリのデザインの勉強になるスライドのまとめ

http://coliss.com/articles/build-websites/operation/work/slides-for-ui-ux-design-2015.html

smartcrop.js(画像からいい感じの部分を自動で切り取るスクリプト)

https://github.com/jwagner/smartcrop.js/

coliss - Webデザインの勉強にいい！レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめ

http://coliss.com/articles/build-websites/operation/design/style-guides-for-ui-design.html

GrapesJS - ポトペタでWebサイトのテンプレートを作成

http://grapesjs.com/

Flexbox Patterns - Flexboxを使ったUIのサンプルコード

http://www.flexboxpatterns.com/

CSSCO - スタイルシートで画像フィルタ

http://www.cssco.co/

BEAM - チャートを手軽に作成、embedも出来るWebサービス

https://venngage.com/beam/

Blur Admin - Bootstrap向け管理画面テンプレート

https://github.com/akveo/blur-admin

あの美しい写真はこのように加工されていた。プロのカメラマンが明かした写真加工ビフォア・アフター

http://karapaia.livedoor.biz/archives/52215335.html

MarkMaker - 企業名からそれに合ったロゴを提案してくれるサイト

http://emblemmatic.org/markmaker/#/

私がスマホでブログ用の写真を撮る時欠かせないアプリ4つ紹介します

http://www.nakamu.info/entry/pictureapps-android

コード不要のWebデザインからフリー画像/アイコンなど、「ベストデザインツール25選！」

http://l-orem.com/the-best-designer-tools-collection/

coliss - CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ

http://coliss.com/articles/build-websites/operation/css/flexbox-tutorials-and-frameworks.html

PHOTOSHOP VIP - コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ

http://photoshopvip.net/92708

PHOTOSHOP VIP - デザインの現場ですぐ使える、おしゃれな無料パターン素材38枚まとめ

http://photoshopvip.net/94402

WPJ - 「いらすとや」だけじゃない！ Webデザインで使える無料イラスト素材サイト11選 

https://www.webprofessional.jp/2016/09/7189/

優れたフォームをデザインする デザイナーが陥りがちなミス、そして、その修正の仕方

https://medium.com/japan/d-9ff35629c4fb#.t16uxi6nt

Webクリエイターボックス - 日本語対応！CSS Flexboxのチートシートを作ったので配布します

http://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet/

FlexBox Cheatsheet

http://vudav.github.io/flexbox-cheatsheet/

有害とみなされる人間中心デザイン

https://blog.iaspectrum.net/norman-acd-2005/

エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！

https://raintrees.net/projects/a-painter-and-a-black-cat/wiki/WebDesign/edit

バッドデザイン賞を勝手にノミネートしてみた-2017年度版-

http://ddd.entaku-guild.com/entry/bad-design-award-2017

ヒューマンエラー 理論と対策

http://www015.upp.so-net.ne.jp/notgeld/humanerror.pdf

どんなふうに見えてるの？　色覚に配慮したUI設計事例 #UI

https://techblog.yahoo.co.jp/entry/20191125782900/

エンジニアがデザイナーといい仕事ができるために頑張ったこと

https://note.com/seyanote/n/n737e2c7efe08

エンジニアに「効く」デザイントレーニングとは

https://fintan.jp/?p=7300

# Twitter Bootstrap

## Article

商用利用無料！Bootstrap 3, Bootstrap 4をベースに最近のUIデザインのトレンドを取り入れた新作テーマのまとめ

http://coliss.com/articles/build-websites/operation/work/best-templates-for-bootstrap-2015-autumn.html

シンプル設計なBootstrapベースの管理画面テンプレート

http://www.creative-tim.com/product/light-bootstrap-dashboard

kachibito.net - ベーシックで使いやすそうなBootstrap向け管理画面テンプレート・「Gentallela」

http://kachibito.net/useful-resource/gentallela https://github.com/kimlabs/gentelella

hifive開発者ブログ - Bootstrapの画面を手軽に作れるツールまとめ

http://blog.htmlhifive.com/2016/02/12/bootstrap-easy-view-creator/

かちびと.net - Bootstrapで使えるコードスニペットを集めている・「CodeLab」

http://kachibito.net/useful-resource/codelab

Bootstrap 4 Cheat Sheet

http://hackerthemes.com/bootstrap-cheatsheet/

## Tool/WebService

Strapping! - Bootstrapのテーマを簡単に作れるWebサービス

http://bbrennan.info/strapping/

Bootstrap Studio (DEMO) - 保存できない等、機能制限あり

http://bootstrapstudio.io/demo/

# 写真素材

かわいいフリー素材集 いらすとや

http://www.irasutoya.com/

非常に興味深い。生物に関する世界の書籍の挿絵や図解など15万点以上が無料ダウンロード可能に

http://karapaia.com/archives/52287447.html

 * https://www.instagram.com/biodivlibrary/

 * https://www.flickr.com/photos/biodivlibrary/albums

>オライリーっぽい薄い本の表紙が捗りそう

ぱくたそ - フリー写真素材・無料ダウンロード

https://www.pakutaso.com/

FindA.Photo

http://finda.photo/

FOODSHOT

http://foodshot.co/

Unsplash - 商用フリーの高解像度写真を無料ダウンロードできるサイト

https://unsplash.com/

SKUAWK PUBLIC PHOTOS

http://skuawk.com/

Pixabay

https://pixabay.com/

freestocks.org

http://freestocks.org/

Pixel Mob - 無償で使える高品質な写真素材を提供するストックフォトで公開されている写真を複合して閲覧できるアグリケーターサイト

https://pixelmob.co/

>Pixabay、Unsplash、Pexels、Stockvault …CC0

Diverse UI - 商用でも使える顔写真アイコンを提供するプロジェクト

https://www.diverseui.com/

BURST - CC0で高品質な写真素材を提供してくれるストックフォトサイト

https://burst.shopify.com/

dipixio - 切り抜き画像メインのフリーのストックフォトサイト

http://www.dipixio.com/

FOODIE FACTOR - 食べ物の写真を専門に配布するストックフォトサイト

http://kachibito.net/useful-resource/foodie-factor

reshot - 商用利用OK、クレジット不要で使える、量よりも質を重視したストックフォトサイト

https://www.reshot.com/

0.1%の需要に答えた家族のフリー写真素材サイト スキマファミリー

https://time-space.kddi.com/freefamily/

商用でもクレジット無しで無料で使える高品質な写真素材を配布するストックフォト・「picjumbo」

http://kachibito.net/useful-resource/picjumbo

ISO Republic - CC0ライセンスの写真や動画を配布するストックサイト

https://isorepublic.com/

O-DAN - 無料写真素材が日本語で検索できる

https://o-dan.net/ja/

NDLイメージバンク

https://rnavi.ndl.go.jp/imagebank/

>[著作権フリー素材がスゴすぎ…広重や夢二も全部無料　国立国会図書館の試みに「工作心がムズムズ」「活用しない手はない」](https://maidonanews.jp/article/14636045)

CleanPNG

https://www.cleanpng.com/

>背景が透明に設定されたPNG画像集

# テクスチャ素材

商用でも完全無料で利用できる！ デザインやイラストでかなり使える有料レベルの高解像度テクスチャ素材 -ResourceBoy

https://coliss.com/articles/freebies/textures-by-resourceboy-202501.html

# AI画像生成

Midjourney

https://www.midjourney.com

AI素材.com

https://aisozai.com/

>「Image by AI素材.com」のクレジットを併記することを条件に商用利用可

# Font

本文のタイポグラフィとCSS

https://paper.dropbox.com/doc/CSS-wPD007Sd9dSeEDLP78jri

デザイナーが持っていたい、すごいフリーフォント40個まとめ 2016年2月度

http://photoshopvip.net/archives/87280

日本語フリーフォント、これだけは欲しい厳選22個

http://photoshopvip.net/japanese-free-fonts

ベーコンさんの世界ブログ - 良質なデザインを作るため揃えるべき日本語フリーフォント10種類

https://www.baconjapan.com/entry/free_font_best

Google Fonts

https://fonts.google.com/?subset=japanese

源暎フォント置き場

https://okoneya.jp/font/download.html

# 彩色

【プロイラストレーターが多用する明度彩度の領域】

https://twitter.com/Aiuti01/status/1262996636524920832

>複数人のプロイラストレーターの作品で、明度彩度だけサンプリングした結果、見えてきた明度彩度の傾向となぜその領域が使用されるかの分析をしてみた。

{{rawhtml(<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【プロイラストレーターが多用する明度彩度の領域】<br><br>複数人のプロイラストレーターの作品で、明度彩度だけサンプリングした結果、見えてきた明度彩度の傾向となぜその領域が使用されるかの分析をしてみた。 <a href="https://t.co/mnJ4QY0cKY">pic.twitter.com/mnJ4QY0cKY</a></p>&mdash; あいうち＠エアコミケ参加準備中！！ (@Aiuti01) <a href="https://twitter.com/Aiuti01/status/1262996636524920832?ref_src=twsrc%5Etfw">May 20 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>)}}

色覚特性について学んだことをざっくりとまとめてみた #ヌーラボ真夏のブログリレー2024

https://nulab.com/ja/blog/nulab/summary-of-knowledge-about-colorblindness-characteristics/

# CSS

モダンCSSでよく使用されるレイアウトを実装するまとめ

https://coliss.com/articles/build-websites/operation/css/useful-layouts-using-modern-css.html

REMM（レム）は、フロントエンド開発における「要素命名」と「CSS管理」、「スタイリングアプローチ」の方法論です。

https://remm.qwiproject.com

# Memo

##  画像ロゴのジェネレータ

http://www.simwebsol.com/ImageTool/default.aspx

>Underline

>\#666666

>Arial Fontsize:20Left1200dpi gif

ダウンロードしておきたい25個の高品質な筆記体フリーフォント完全まとめ

http://photoshopvip.net/archives/7373

Web書道.com

http://web-shodo.com/

##  カッコイイデザインのページ

i/o3000

http://io3000.com/

amble

http://amble-shop.com/

sounansa.net - オシャレなログイン画面の無料HTMLテンプレート　２０選

http://sounansa.net/archives/647

inspirationui - カテゴリ別にUIが整理

http://inspirationui.com/tags/143

## 画像加工

ディープネットワークを用いた白黒写真の自動色付け

http://hi.cs.waseda.ac.jp:8082/

Online Photo Watermarker

https://www.watermark.ink/#/

Style2Paints - 人工知能で彩色

https://s2p.moe/

Remove Image Background - 人物の切り抜き

https://www.remove.bg/

Remove Background made easy - 画像背景消去

https://extractbg.com

AI Img Enlarger

https://imglarger.com/

>機械学習を活用して綺麗な状態のままで大きなサイズに拡大してくれるサービス

IMGonline.com.ua

https://www.imgonline.com.ua/eng/make-seamless-texture.php

>綺麗にシームレス化できるサービス

# UI/UX

45分間で「ユーザー中心のものづくり」ができるまで詰め込む

https://www.slideshare.net/storywriterjp/45-252537767

# デザインシステム

Figma によるデザインシステム入門

https://zenn.dev/ignorant_kenji/books/introduction-to-design-systems

# Misc

sway - しゃれたプレゼン・コンテンツが簡単にできるサービス

https://sway.com/

ChromeのJavaScriptのコンソールに document.designMode='on' と入力すると画面を直接編集できる

マルチレイヤーな複雑なCSSグラデーションのコードをコピーできる・「Gradienta」

http://kachibito.net/useful-resource/gradienta https://gradienta.io/