WebDesign » 履歴 » リビジョン 3
リビジョン 2 (kanata, 2025/04/13 15:57) → リビジョン 3/4 (kanata, 2025/04/27 19:45)
{{>toc}} # WebDesign {{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画像集 # アイコン・ピクトグラム EXPERIENCE JAPAN PICTGRAMS https://experience-japan.info # テクスチャ素材 商用でも完全無料で利用できる！ デザインやイラストでかなり使える有料レベルの高解像度テクスチャ素材 -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/