WebDesign

Good articles

ノンデザイナーでもイケてるLPを作成する方法
https://qiita.com/teradonburi/items/412f65147525ff34dbbd

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

【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法
https://webdesign-trends.net/entry/7251

開発者が見落としがちなユーザビリティアンチパターン
http://acro-engineer.hatenablog.com/entry/2018/12/15/120000

注目記事

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

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

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/

ぱくたそ - フリー写真素材・無料ダウンロード
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/

Font

デザイナーが持っていたい、すごいフリーフォント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

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テンプレート 20選
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/

Misc

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

Add picture from clipboard (Maximum size: 100 MB)