WebDesign¶

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

デザインの敗北事例集～人に伝わらないデザインは死ぬ～
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

パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜！（以下ひとつずつ解説） pic.twitter.com/2S3PlFeQzC
— 広野萌 (@hajipion) September 26 2019

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.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/

著作権フリー素材がスゴすぎ…広重や夢二も全部無料　国立国会図書館の試みに「工作心がムズムズ」「活用しない手はない」

CleanPNG
https://www.cleanpng.com/

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

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

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

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

複数人のプロイラストレーターの作品で、明度彩度だけサンプリングした結果、見えてきた明度彩度の傾向となぜその領域が使用されるかの分析をしてみた。 pic.twitter.com/mnJ4QY0cKY
— あいうち＠エアコミケ参加準備中！！ (@Aiuti01) May 20 2020

色覚特性について学んだことをざっくりとまとめてみた #ヌーラボ真夏のブログリレー2024
https://nulab.com/ja/blog/nulab/summary-of-knowledge-about-colorblindness-characteristics/