WebDesign » 履歴 » リビジョン 2
リビジョン 1 (kanata, 2025/04/13 15:57) → リビジョン 2/3 (kanata, 2025/04/13 15:57)
# 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>— 広野 萌 (@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>— あいうち＠エアコミケ参加準備中！！ (@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/