UIデザイン用ã«ã€AIã§è‰²å½©ç†è«–ã«åŸºã¥ã„ãŸã‚«ãƒ©ãƒ¼ãƒ‘レットを生æˆã—ã¦ãれる無料オンラインツール -AI Color Combination Generator

Photoshopãªã©ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚½ãƒ•ãƒˆã«ã‚る「乗算ã€ã€Œã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã€ã€Œç„¼ãè¾¼ã¿ã‚«ãƒ©ãƒ¼ã€ã€Œè¦†ã„焼ãカラーã€ãªã©ã€å„æ画モードãŒã©ã®ã‚ˆã†ã«æ©Ÿèƒ½ã™ã‚‹ã‹ã‚’解説ã—ã¾ã™ã€‚ ãã‚Œãžã‚Œã®é•ã„ãŒã‚ˆã分ã‹ã‚‰ãªã„ã€ã©ã‚“ãªåŠ¹æžœãŒã‚ã‚‹ã®ã‹åˆ†ã‹ã‚‰ãªã„ã¨ã„ã†äººã«ã€ã“れをèªã‚ã°æ画モードã§ã©ã‚Œã‚’使ã†ã‹è¿·ã†ã“ã¨ã¯ãªããªã‚Šã¾ã™ã€‚ Blending Modes by Dan Hollick (@DanHollick) 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚ã« æ画(ブレンディング)モードã¨ã¯ å„æ画(ブレンディング)モードã«ã¤ã„ã¦è§£èª¬ ã¯ã˜ã‚㫠見ãŸç›®ãŒæ€ã„通りã«ãªã‚‹ã¾ã§ã€æ画モードをã„ã‚ã„ã‚試ã—ã¦ã„ã¾ã›ã‚“ã‹ï¼Ÿ æ画モードã®ç¨®é¡ž ã“ã®è¨˜äº‹ã‚’èªã‚“ã§ã‚‚ã‚ã¾ã‚Šå¤‰ã‚らãªã„ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ãŒã€å°‘ãªãã¨ã‚‚「比較(明)ã€ã‚„「比較(暗)ã€ã‚’使用ã™ã‚‹ã“ã¨ã¯ãªããªã‚‹ã§ã—ょã†
Figmaã«ã¯ãƒ—ラグインãŒãŸãã•ã‚“ã‚ã‚Šã¾ã™ã€ãã®ä¸ã‹ã‚‰ç‰¹ã«ä¾¿åˆ©ãªãƒ—ラグインを紹介ã—ã¾ã™ã€‚Webサイトやスマホアプリã®UIを作æˆã™ã‚‹ãƒ¯ãƒ¼ã‚¯ãƒ•ãƒãƒ¼ã«å½¹ç«‹ã¤ä¾¿åˆ©ãªãƒ—ラグインã°ã‹ã‚Šã§ã™ã€‚ 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚㫠特ã«ãŠå‹§ã‚ã—ãŸã„Figmaã®ãƒ—ラグイン 終ã‚ã‚Šã« ã¯ã˜ã‚ã« ç§ã¯ã“ã“æ•°å¹´ã®é–“ã€Figmaã®å¤šãã®ãƒ—ラグインを実際ã«è©¦ã—ã€å®šæœŸçš„ã«ä½¿ç”¨ã—ã¦ãã¾ã—ãŸã€‚Figmaコミュニティã§æä¾›ã•ã‚Œã‚‹ãƒ—ラグインã¯æ”¹å–„ã•ã‚Œç¶šã‘ã€ãã®å‹¢ã„ã¯è¡°ãˆã‚‹æ°—é…ãŒã‚ã‚Šã¾ã›ã‚“。 ç§ãŒã“ã‚Œã¾ã§ã«ä½¿ç”¨ã—ã¦ããŸãƒ—ラグインã®ä¸ã§ã€ç‰¹ã«ãŠå‹§ã‚ã§ãã‚‹20個ã®ãƒ—ラグインã¨ã€ç¾åœ¨ã‚‚æ›´æ–°ã•ã‚Œã¦ã„るプラグインをã¾ã¨ã‚ã‚‹ã®ã«è‰¯
VS CodeãŒã©ã‚“ã©ã‚“便利ã«ãªã£ã¦ã„ãã¾ã™ã。 先日ã®v.1.60ã®ã‚¢ãƒƒãƒ—デートã§ã€ãƒ–ラケットã®ã‚«ãƒ©ãƒ¼åŒ–ã«å¯¾å¿œã—ã¾ã—ãŸï¼ VS Codeã®è¨å®šã‚’変更ã™ã‚‹ã ã‘ã§ã€é–‹å§‹ã¨çµ‚了ã®ãƒ–ラケットをセットã§åŒã˜ã‚«ãƒ©ãƒ¼ã«ã—ã¾ã™ã€‚今ã¾ã§ã¯æ©Ÿèƒ½æ‹¡å¼µã‚’入れãªã„ã¨ã§ããªã‹ã£ãŸã“ã¨ãŒã€ãƒã‚¤ãƒ†ã‚£ãƒ–対応ã—ãŸã®ã¯æœ—å ±ã§ã™ã€‚ Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeã«ãƒšãƒ¼ã‚¹ãƒˆã™ã‚‹éš›ã«ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°è¨€èªžã‚’検出ã—ã¾ã™ã€‚ ビルトイン高速ブラケットカラー化 - 大è¦æ¨¡ãƒ•ã‚¡ã‚¤ãƒ«ã§ã‚‚高速ã«ãƒ–ラケットã®ãƒžãƒƒãƒãƒ³ã‚°ã¨ã‚«ãƒ©ãƒ¼åŒ–。 è¨å®šã‚¨ãƒ‡ã‚£ã‚¿ã®ã‚·ãƒ³ã‚¿ãƒƒã‚¯ã‚¹ãƒã‚¤ãƒ©ã‚¤ãƒˆ - è¨å®šã®ã‚³ãƒ¼ãƒ‰ãƒ–ãƒãƒƒã‚¯ã§ãƒªãƒƒãƒãªã‚·ãƒ³ã‚¿ãƒƒã‚¯ã‚¹ãƒã‚¤ãƒ©ã‚¤ãƒˆã«å¯¾å¿œã€‚ ターミナルã§ã‚°ãƒªãƒ•ã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚° - ボックスæç”»ã¨ãƒ–ãƒãƒƒã‚¯è¦ç´ æ–‡å—ã®è¡¨ç¤ºãŒæ”¹å–„。 デãƒãƒƒã‚°ã‚¦ã‚©ãƒƒãƒå€¤ã®è¨å®š - デãƒãƒƒã‚°ã‚»
ã“ã®è¨˜äº‹ã§ã¯ã€ã‚¦ã‚§ãƒ–サイトを訪れãŸã²ã¨ãŒæ€ã‚ãšæŠ¼ã—ãŸããªã‚‹ãƒœã‚¿ãƒ³ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’ã¾ã¨ã‚ã¦ã”紹介ã—ã¾ã™ã€‚ã©ã®ãƒœã‚¿ãƒ³ã‚’HTMLã¨CSSã®ã¿ã§ä½œæˆã•ã‚Œã¦ã„ã‚‹ã®ã§ã€æ‰‹è»½ã«ã‚³ãƒ”ペã§åˆ©ç”¨ã§ãã€ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã‚‚自由自在ã¨ãªã£ã¦ã„ã¾ã™ã€‚ JSã‚‚ã¤ã‹ã£ãŸã‚ˆã‚Šã‚¯ãƒªã‚¨ã‚¤ãƒ†ã‚£ãƒ–ãªãƒœã‚¿ãƒ³ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚‚ã‚ã‚‹ã®ã§ã€ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã«åˆã£ãŸãƒœã‚¿ãƒ³ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’探ã—ã¦ã¿ã¾ã—ょã†ã€‚ ボタンをデザインã™ã‚‹ã¨ãã«æ°—ã‚’ã¤ã‘ãŸã„ãƒã‚¤ãƒ³ãƒˆã‚’ãƒã‚§ãƒƒã‚¯ã—ã¦ãŠã‘ã°ã€ã‚ˆã‚ŠåŠ¹æžœçš„ãªãƒœã‚¿ãƒ³ã®ä½¿ã„æ–¹ãŒã§ãã¾ã™ã‚ˆã€‚有åサイトã®ãƒœã‚¿ãƒ³ã‚’コピペã§ãるサービスもãŠã™ã™ã‚ã§ã™ã€‚ ç¾åœ¨37種類ã®ãƒœã‚¿ãƒ³ãƒ‡ã‚¶ã‚¤ãƒ³ãŒæƒã„ã€ä»Šå¾Œã‚‚定期的ã«ã‚¢ãƒƒãƒ—デートã—ã¦ã„ãã¾ã™ã€‚ CSSコピペã§å®Œæˆï¼æŠ¼ã—ãŸããªã‚‹Webボタンデザインã¾ã¨ã‚ ユラユラã¨æºã‚Œã‚‹æ³¢ã‚¦ã‚§ãƒ¼ãƒ–ボタン ã¾ã‚‹ã§æ°´é¢ãŒæºã‚Œã¦ã„るよã†ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆãŒç‰¹é•·ã®ãƒœã‚¿ãƒ³ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã€‚ See the Pen Creative Wave Button
リンク www.ncd-ri.co.jp イメージシステム| カラー戦略ã®å°‚門家 | NCD-WEB | 色彩心ç†ãƒ»ç”Ÿæ´»è€…ç ”ç©¶ãƒ»ãƒˆãƒ¬ãƒ³ãƒ‰åˆ†æžã®æ—¥æœ¬ã‚«ãƒ©ãƒ¼ãƒ‡ã‚¶ã‚¤ãƒ³ç ”究所 æ—¥æœ¬ã‚«ãƒ©ãƒ¼ãƒ‡ã‚¶ã‚¤ãƒ³ç ”ç©¶æ‰€ã¯ã‚ªãƒªã‚¸ãƒŠãƒ«ã®ã‚«ãƒ©ãƒ¼ã‚·ã‚¹ãƒ†ãƒ 「HUE&TONEシステムã€ã‚„イメージ分æžã‚·ã‚¹ãƒ†ãƒ 「イメージスケールã€ã‚’開発ã€ç™ºå±•ã•ã›ã¦ãã¾ã—ãŸã€‚ 62 users ã‹ãŸãŠã‹ï¼ LPå°‚é–€Webデザイナー&著者 @kataokadesign 「Webデザインをå¦ã³å§‹ã‚ãŸã°ã‹ã‚Šã§é…色ãŒã†ã¾ã決ã‚られãªã„ã€ã¨ã„ã†æ‚©ã¿ãŒã‚ã‚‹ãªã‚‰ã€æ—¥æœ¬ã‚«ãƒ©ãƒ¼ãƒ‡ã‚¶ã‚¤ãƒ³ç ”究所ã®ã‚¤ãƒ¡ãƒ¼ã‚¸ã‚¹ã‚±ãƒ¼ãƒ«ã‚’活用ã™ã‚‹ã¨è‰¯ã„ã§ã—ょã†ã€‚ å„ã‚ーワードã«é–¢é€£ã™ã‚‹é…色ãŒä½“系化ã•ã‚Œã¦ã„ã‚‹ã®ã§ã€é…色ã§å¤§å¤±æ•—ã™ã‚‹å¯èƒ½æ€§ã¯ã²ã¨ã¾ãšæ¸›ã‚‰ã™ã“ã¨ãŒã§ãã¾ã™ã€‚ ncd-ri.co.jp/about/image_sy… pic.twitter.com/QTfzBpQ2EL 2020-12-
CSS変数(カスタムプãƒãƒ‘ティ)ã¯ã€æ–‡å—通りCSSã§å¤‰æ•°ãŒä½¿ç”¨ã§ãã‚‹ã®ã§éžå¸¸ã«ä¾¿åˆ©ã§ã™ã€‚CSS変数ã®ä½¿ã„æ–¹ã§ã‚ˆãèžãã®ã¯ã‚«ãƒ©ãƒ¼ã§ã™ãŒã€ãれ以外ã«ã‚‚ã•ã¾ã–ã¾ãªå„ªã‚ŒãŸä½¿ã„æ–¹ãŒã‚ã‚Šã¾ã™ã€‚ Webサイトやスマホアプリã®UIã§ã€ç‰¹ã«ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®ãƒãƒªã‚¨ãƒ¼ã‚·ãƒ§ãƒ³ã‚’実装ã™ã‚‹ã®ã«å½¹ç«‹ã¤CSS変数ã®ä½¿ã„方を紹介ã—ã¾ã™ã€‚ Practical Use Cases For CSS Variables by Ahmad Shadeed 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚ã« CSS変数を活用ã§ãã¦ãªã„例 CSS変数ã®å„ªã‚ŒãŸä½¿ã„æ–¹ 1: ãƒãƒ³ã‚°ãƒãƒ³ãƒ‰ã®ãƒ—ãƒãƒ‘ティ CSS変数ã®å„ªã‚ŒãŸä½¿ã„æ–¹ 2: 背景 CSS変数ã®å„ªã‚ŒãŸä½¿ã„æ–¹ 3: グラデーション CSS変数ã®å„ªã‚ŒãŸä½¿ã„æ–¹ 4: クリップパス CSS変数ã®å„ªã‚ŒãŸä½¿ã„æ–¹ 5: ãƒã‚§ãƒƒã‚¯ãƒœãƒƒ
Googleã¯ã€5月19日未明ã«é–‹å‚¬ã—ãŸã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã‚¤ãƒ™ãƒ³ãƒˆã€ŒGoogle I/O 2021ã€ã§ã€æ–°ã—ã„デザインフレームワーク「Material Youã€ã‚’発表ã—ã¾ã—ãŸã€‚ Material Youã§ã¯ã€ã“ã‚Œã¾ã§ãƒ‡ã‚¶ã‚¤ãƒ³ãƒ•ãƒ¬ãƒ¼ãƒ ワークã«ã‚ˆã£ã¦ã‚らã‹ã˜ã‚指定ã•ã‚Œã¦ã„ãŸã‚«ãƒ©ãƒ¼ãƒ‘レットã‹ã‚‰è‰²ã‚’é¸ã¶ã®ã§ã¯ãªãã€ã€Œã‚ãªãŸè‡ªèº«ã®ãƒ‘ーソナルカラーを基ã«ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã®è¦–点ã¨ã‚«ãƒ©ãƒ¼ã‚µã‚¤ã‚¨ãƒ³ã‚¹ã®çµ„ã¿åˆã‚ã›ã«ã‚ˆã£ã¦ä½œã‚‰ã‚ŒãŸã‚«ãƒ©ãƒ¼ãƒ‘レットを生æˆã™ã‚‹ã“ã¨ã§ã€ã‚ãªãŸãŒã‚¢ãƒ—リケーションã®ãƒ«ãƒƒã‚¯ï¼†ãƒ•ã‚£ãƒ¼ãƒ«ã®ã‚¯ãƒªã‚¨ã‚¤ã‚¿ãƒ¼ã«ãªã‚‹ã€ï¼ˆMatias Duarteæ°ï¼‰ã¨èª¬æ˜Žã€‚ ãã—ã¦è‡ªå‹•çš„ã«ãã®ã‚«ãƒ©ãƒ¼ãƒ‘レットã«UIãŒé©åˆã—ã¦ã„ãã¨ã®ã“ã¨ã€‚
フリーランスã¨ã—ã¦ä¸€äººã§åˆ¶ä½œã‚’ã—ã¦ã„ã‚‹ã¨ã€ã©ã†ã—ã¦ã‚‚自身ã®ã‚¹ã‚¿ã‚¤ãƒ«ã®ä¸ã ã‘ã§ãƒ‡ã‚¶ã‚¤ãƒ³ã—ãŒã¡ãªã®ã§ã€æ–°ãŸãªåˆºæ¿€ã‚’求ã‚ã¦æ›¸ç±ã‚„ãƒãƒƒãƒˆã‚’徘徊ã—ã¦è¦‹ã‚‹ã‚ˆã†ã«ã—ã¦ã„ã¾ã™ã€‚今回ã¯ã€ç§ãŒå‚考ã«ã—ã¦ã„るギャラリーサイトを11個紹介ã—ã¾ã™ã€‚クライアントã¨ã®æ‰“ã¡åˆã‚ã›æ™‚も担当者ã¨ã‚¤ãƒ¡ãƒ¼ã‚¸ã‚’共有ã§ãã‚‹ã®ã§ä¾¿åˆ©ã«åˆ©ç”¨ã§ãã‚‹ã¨æ€ã„ã¾ã™ã€‚ãœã²å‚考ã«ã—ã¦ã¿ã¦ãã ã•ã„。 URAGAWA 担当ã—ãŸåˆ¶ä½œä¼šç¤¾ã‚’掲載ã—ã¦ã„るギャラリーサイト。制作会社ã”ã¨ã«è¦‹ã¦å›žã‚Œã‚‹ã®ã¯ãŠã‚‚ã—ã‚ã„。カテゴリ分ã‘も『æ¥ç•Œã€ã€Žã‚¿ã‚¤ãƒ—ã€ã€Žç‰¹å¾´ã€ã€Žã‚«ãƒ©ãƒ¼ã€ã€Žç‰¹é›†ã€ã€Žã‚¢ãƒ¯ãƒ¼ãƒ‰å—賞ã€ã€Žãƒ©ãƒ³ã‚ングã€ã¨ä»–ã«ã¯ãªã„分類ã§ã™ãŒæ„外ã¨ä½¿ã„ã‚„ã™ã„ã§ã™ã€‚制作ã®è£å´è¨˜äº‹ã‚‚ã‚ã£ã¦Webデザインã®å‚考ã ã‘ã§ã¯ãªãèªã¿ç‰©ã¨ã—ã¦ã‚‚楽ã—ã‚ã¾ã™ã€‚ URAGAWA | 制作会社ãŒã‚ã‹ã‚‹WEBデザイン・å‚考サイト集 紹介文 URAGAWAã¯ã€ã‚¯ãƒªã‚¨ã‚¤ãƒ†ã‚£ãƒ–カンパニーã®æƒ…å ±ã‚’è“„ç©ã—ã¦ã„ãã“ã¨
2021å¹´3月4æ—¥ CSS CSSå°æŠ€é›†ã‚·ãƒªãƒ¼ã‚ºã®ç¬¬4å¼¾ï¼ã€Œã€ç¬¬3弾】少ã—ã®ã‚³ãƒ¼ãƒ‰ã§å®Ÿè£…å¯èƒ½ãª15ã®CSSå°æŠ€é›†ã€ã‹ã‚‰ç´„2年。ã¾ãŸã¾ãŸä¾¿åˆ©ã§ã‚µã‚¯ãƒƒã¨ä½¿ãˆã‚‹ã‚³ãƒ¼ãƒ‰ãŒç¶šã€…ç™»å ´ã—ã¦ã„ã¾ã™ï¼åˆå¿ƒè€…ã•ã‚“ã‹ã‚‰ãƒ™ãƒ†ãƒ©ãƒ³ã•ã‚“ã¾ã§è¦ãƒã‚§ãƒƒã‚¯ï¼ ↑ç§ãŒ10年以上利用ã—ã¦ã„ã‚‹ä¼šè¨ˆã‚½ãƒ•ãƒˆï¼ ç›®æ¬¡ è¦ç´ ã®ä¸Šä¸‹å·¦å³ä¸å¤®é…ç½® ç”»é¢å¹…ã„ã£ã±ã„ã«ç”»åƒã‚’é…ç½® リストマーカーã®è‰²ã‚’変ãˆã‚‹ 言語ã«ã‚ã‚ã›ã¦å¼•ç”¨ç¬¦ã‚’変更 クリックã§æ–‡å—列をé¸æŠž 背景画åƒã‚’見切れãªã„よã†ç¹°ã‚Šè¿”ã—表示 入力時ã®ç¸¦ç·šã®è‰²ã‚’変更 ドラッグã§è¦ç´ ã®ã‚µã‚¤ã‚ºã‚’変更ã§ãるよã†ã«ã™ã‚‹ float㯠flow-root ã§è§£é™¤ æ–‡ç« ã‚’ã‚«ãƒ©ãƒ åˆ†ã‘ã—ã¦ãƒ©ã‚¤ãƒ³ã‚’入れる HTML・CSSã®å…¨ã‚³ãƒ¼ãƒ‰ã¯å„サンプルã®ã€ŒHTMLã€ã‚„「CSSã€ã‚¿ãƒ–ã‚’ã€åˆ¥ã‚¿ãƒ–ã§ã®ã‚µãƒ³ãƒ—ル表示ã¯å³ä¸Šã®ã€ŒEDIT ON CODEPENã€ã‚’クリックã—ã¦ã”覧ãã ã•ã„ï¼ 1. è¦ç´ ã®ä¸Šä¸‹å·¦å³ä¸å¤®é…ç½® ボックスをè¦
デザイントレンドã¯å¤‰ã‚ã£ã¦ã„ã¾ã™ãŒã€ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã¯ã¨ã¦ã‚‚ナãƒãƒ¥ãƒ©ãƒ«ãªè¦‹ãŸç›®ã¨å¤šæ§˜æ€§ã«å¯Œã‚“ã§ãŠã‚Šã€ã„ã¤ã®æ™‚代も愛ã•ã‚Œã‚‹ãƒ‡ã‚¶ã‚¤ãƒ³ã‚¹ã‚¿ã‚¤ãƒ«ã§ã™ã€‚ ã“ã®è¨˜äº‹ã§ã¯ã€ç¾Žã—ã„グラデーションを作æˆã™ã‚‹åŸºæœ¬ãƒ«ãƒ¼ãƒ«ã¨ã€æ‰‹è»½ã«åˆ©ç”¨ã§ãるグラデーション作æˆã‚ªãƒ³ãƒ©ã‚¤ãƒ³ãƒ„ールをã”紹介ã—ã¾ã™ã€‚ 全シリーズã¯ã“ã¡ã‚‰ã€‚ ã—ã£ã‹ã‚Šãƒžã‚¹ã‚¿ãƒ¼ï¼ç¾Žã—ã„グラデーション作æˆå¾¹åº•ã‚¬ã‚¤ãƒ‰ã€Illustratorグルーãƒãƒ«ã‚«ãƒ©ãƒ¼ç·¨ã€‘ ã—ã£ã‹ã‚Šãƒžã‚¹ã‚¿ãƒ¼ï¼ç¾Žã—ã„グラデーション作æˆå¾¹åº•ã‚¬ã‚¤ãƒ‰ã€Illustrator実践デザイン編】 美ã—ã„グラデーションã£ã¦ã€ãªã‚“ã ã‚ã†ï¼Ÿ グラデーションã«ã¯è‰¯ãã¦ç¾Žã—ã„ã‚‚ã®ã‚‚ã‚ã‚Œã°ã€æ‚ªãã¦ã²ã©ã„ã‚‚ã®ã‚‚ã‚ã‚‹ã§ã—ょã†ã€‚ 良ã„グラデーションã¨ã¯ã€ãƒŠãƒãƒ¥ãƒ©ãƒ«ã§èª¿å’Œã®ã¨ã‚ŒãŸç¾Žã—ã„ãªã‚らã‹ãªè‰²ã®å¤‰åŒ–ã®ã“ã¨ã‚’指ã—ã¾ã™ã€‚ プリントå°åˆ·ã§ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’表ç¾ã™ã‚‹ã¨ãã®æŠ€è¡“çš„ãªå•é¡Œã‚’防ãã®ã«ã‚‚役立ã¡ã€ç”»é¢ã‚¹ã‚¯ãƒªãƒ¼ãƒ³çŠ¶ã§è¦‹ãŸã¨ãã«ã‚‚é…
ä¼æ¥ã‚µã‚¤ãƒˆã‚„プãƒãƒ€ã‚¯ãƒˆãƒšãƒ¼ã‚¸ã‚’ã¯ã˜ã‚ã€ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã‚·ãƒ§ãƒƒãƒ—ã€ã‚¢ãƒ—リãªã©ã€Webã®UIデザインã«é©ã—ãŸSVGアイコンãŒç„¡æ–™ã§åˆ©ç”¨ã§ãã‚‹Glyphsを紹介ã—ã¾ã™ã€‚ アイコンã®ç¨®é¡žã¯ãªã‚“ã¨1,130ç¨®é¡žï¼ ã‚¢ã‚¤ã‚³ãƒ³ã®ãƒãƒªã‚¨ãƒ¼ã‚·ãƒ§ãƒ³ã‚‚豊富ã§ã€ã‚½ãƒªãƒƒãƒ‰ã‚„ベタ塗りã ã‘ã§ãªãã€ãƒ•ãƒ«ã‚«ãƒ©ãƒ¼ã‚‚æƒã£ã¦ã„ã¾ã™ã€‚ã‚‚ã¡ã‚ã‚“ã€SVGãªã®ã§ã‚«ãƒ©ãƒ¼ã‚„サイズãªã©ã‚’ç°¡å˜ã«å¤‰æ›´ã§ãã¾ã™ã€‚ å„アイコンã¯5種類ã®ãƒãƒªã‚¨ãƒ¼ã‚·ãƒ§ãƒ³ãŒã‚ã‚‹ Figmaã§ãƒ‡ã‚¶ã‚¤ãƒ³ã•ã‚ŒãŸ1,000種類を超ãˆã‚‹ç·¨é›†å¯èƒ½ãªã‚¢ã‚¤ã‚³ãƒ³ã€‚ ä»»æ„ã®ã‚¢ãƒ—リケーションã§ä½¿ç”¨ã™ã‚‹ãŸã‚ã®Webコンãƒãƒ¼ãƒãƒ³ãƒˆã€‚ Figmaã‹ã‚‰SVGをダウンãƒãƒ¼ãƒ‰ã™ã‚‹ãŸã‚ã®CLIユーティリティ。 目的ã®ã‚¢ã‚¤ã‚³ãƒ³ã¯ãƒ•ã‚©ãƒ«ãƒ€ã‚„ã‚¿ã‚°ã§ç°¡å˜ã«æ¤œç´¢å¯èƒ½ã€‚ ドã‚ュメントã¨ã‚¬ã‚¤ãƒ‰ã‚’完備。 ダークモード対応 MITライセンスã§ã€å•†ç”¨ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã‚‚ç„¡æ–™ã§åˆ©ç”¨ã§ãã¾ã™ã€‚ アイコンã®ç·¨é›†ã‚‚ç°¡å˜ã€ã‚µã‚¤ã‚ºã‚„カラーã®å¤‰æ›´ã ã‘
Sassを使ã†ãªã‚‰çŸ¥ã£ã¦ãŠãã¨ä¾¿åˆ©ãªè‰²ã¾ã‚ã‚Šã®å°æŠ€ã‚„Mixinã„ã‚ã„ã‚SassãŒãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã§ç”¨æ„ã—ã¦ã„る関数やã€ãれを応用ã—ã¦è¨å®šã§ãã‚‹å°æŠ€ã‚„Mixinã‚’ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚紹介ã—ã¦ã„ã‚‹ã»ã¨ã‚“ã©ã®å°æŠ€ãŒã€è‰²ã‚’一色ã—ã¦ã™ã‚Œã°ä»–ã®è‰²ã‚‚自動生æˆã—ã¦ãれる…ã¨ã„ã†ä¾¿åˆ©ãªã‚‚ã®ã§ã™ã€‚Sassを勉強ä¸ã®æ–¹ã¯ã‚‚ã¡ã‚ã‚“ã€ã‚´ãƒªã‚´ãƒªä½¿ã„ã“ãªã—ã¦ã„る方もå‚考ã«ã—ã¦ã¿ã¦ãã ã•ã„ï¼ æŠ‘ãˆã¦ãŠããŸã„基本編1. é€æ˜Žåº¦ã®æ›¸ã方を簡略化通常色ã®é€æ˜Žåº¦ã‚’指定ã™ã‚‹æ™‚㯠rgba(0, 0, 0, 0.5); ã¨ã„ã†å…·åˆã§ã€RGB 値ã«ç¶šã„ã¦é€æ˜Žåº¦ï¼ˆ0〜1 ã®å€¤ï¼‰ã‚’記述ã—ã¾ã™ã€‚ã—ã‹ã—カラーコードã§æ›¸ã慣れã¦ã„ã‚‹ã¨ã€ã‚«ãƒ©ãƒ¼ã‚³ãƒ¼ãƒ‰ã‹ã‚‰ RGB 値ã«ç”Ÿæˆã—ã¦æŒ‡å®šã™ã‚‹â€¦ã¨ã„ã†ã®ãŒå°‘ã—é¢å€’ã ã£ãŸã‚Šã—ã¾ã™ã‚ˆã。Sass ãªã‚‰ã‚«ãƒ©ãƒ¼ã‚³ãƒ¼ãƒ‰ã®ã¾ã¾é€æ˜Žåº¦ã®æŒ‡å®šã‚‚å¯èƒ½ã§ã™ã€‚ Sass(.scss)ファイル$main-color: #0bd; div
ブラウザã«è¡¨ç¤ºã•ã‚ŒãŸWebページã¯ã‚‚ã¡ã‚ã‚“ã€Photoshop, Illustratorã‚’ã¯ã˜ã‚ã¨ã™ã‚‹ã™ã¹ã¦ã®ã‚¢ãƒ—リã‹ã‚‰ã‚«ãƒ©ãƒ¼ã‚’ã™ãã†ã“ã¨ãŒã§ãã‚‹ã€ã‚·ãƒ³ãƒ—ルã§ä½¿ã„ã‚„ã™ã„高性能ãªã‚«ãƒ©ãƒ¼ãƒ”ッカーを紹介ã—ã¾ã™ã€‚ macOS対応ã®ã‚¢ãƒ—リã§ã€ã‚ªãƒ¼ãƒ—ンソースãªã®ã§å•†ç”¨ã§ã‚‚ç„¡æ–™ã§åˆ©ç”¨ã§ãã¾ã™ã€‚ カラー値ã¯ã€HEXã€RGBã€HSBã€HSLã«å¯¾å¿œã€‚ ãƒã‚¤ãƒ†ã‚£ãƒ–ã§éžå¸¸ã«é«˜é€Ÿ macOS 10.15 Catalina以é™å¯¾å¿œã®ã‚¢ãƒ—リã§ã™ã€‚ アクセシビリティé‡è¦– カラーを比較ã—ã¦ã€WCAGã¸ã®æº–æ‹ ã‚’ã™ã°ã‚„ã確èªã§ãã¾ã™ã€‚ コンパクト メニューãƒãƒ¼ã«å¯¾å¿œã€å¿…è¦ã®ãªã„ã¨ãã«é‚ªé”ã«ãªã‚Šã¾ã›ã‚“。 ãƒã‚°ã‚¤ãƒ³æ™‚ã«èµ·å‹• è¨å®šã‹ã‚‰ãƒã‚°ã‚¤ãƒ³æ™‚ã«èµ·å‹•ã‚’é¸æŠžã€ã„ã¤ã§ã‚‚クリックã¾ãŸã¯ã‚·ãƒ§ãƒ¼ãƒˆã‚«ãƒƒãƒˆã§ã‚¢ã‚¯ã‚»ã‚¹ã§ãã¾ã™ã€‚ アクセスãŒç°¡å˜ è¨å®šã‹ã‚‰ã‚°ãƒãƒ¼ãƒãƒ«ãƒ›ãƒƒãƒˆã‚ーをè¨å®šã§ãã¾ã™ï¼ˆâ‡§âŒ˜DãŒãŠå‹§ã‚)。 カラーã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆ HEXã€RGBã€H
CSSã®é€²åŒ–ã¯ã™ã”ã„ã§ã™ã🚀 一昔å‰ã¯JavaScriptãŒå¿…è¦ã ã£ãŸã‚Šã€ãƒˆãƒªãƒƒã‚ーãªCSSã§è¨˜è¿°ã—ãªã„ã¨ã§ããªã‹ã£ãŸã“ã¨ãŒã€1行もã—ãã¯æ•°è¡Œã®CSSã§ç°¡å˜ã«å®Ÿè£…ã§ãるよã†ã«ãªã‚Šã¾ã—ãŸã€‚ Web制作者ãŒçŸ¥ã£ã¦ãŠãã¨ä¾¿åˆ©ãªCSSã®å°ãƒã‚¿ã‚’紹介ã—ã¾ã™ã€‚ CSS Tips by Marko Denic 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚㫠スムーズãªã‚¹ã‚¯ãƒãƒ¼ãƒ«ã¯ãŸã£ãŸ1è¡Œã®CSS㧠CSSã ã‘ã§ãƒ†ã‚ストをçœç•¥ 複数行ã®ãƒ†ã‚ストもçœç•¥ã§ãã¾ã™ æ°´å¹³ã¨åž‚ç›´æ–¹å‘ã®ã™ã¹ã¦ã«ä¸å¤®æƒãˆ 影を画åƒã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã®ã¿ã«ä¸Žãˆã‚‹ CSSã§ã‚«ãƒ¼ã‚½ãƒ«ã‚’SVGã«å¤‰æ›´ CSSã ã‘ã§ã‚¿ã‚¤ãƒ”ングã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆ テã‚ストã®ãƒã‚¤ãƒ©ã‚¤ãƒˆã‚«ãƒ©ãƒ¼ã‚’変更 ã©ã‚“ãªè¦ç´ ã§ã‚‚サイズを変更 CSSã§å®Ÿè£…ã™ã‚‹ãƒ¢ãƒ¼ãƒ€ãƒ« サイズ指定ã«calc()関数ãŒä¾¿åˆ© 空ã®è¦ç´ をスタイ
ã¯ã˜ã‚㫠ダミーデータを作æˆã—ãªã‘ã‚Œã°ãªã‚‰ãªã„ã¨ãã£ã¦ã‚ã‚Šã¾ã™ã‚ˆã? テストデータやサンプル画é¢ã‚’作るã¨ãã«å€¤ã‚’ã©ã†ã™ã‚‹ã‹å›°ã£ãŸã“ã¨ã‚ã‚Šã¾ã›ã‚“ã‹ï¼Ÿ ãã†ã„ã£ãŸæ‚©ã¿ã‚’ VS Code ã§è§£æ±ºã™ã‚‹ãŸã‚ã®æ‹¡å¼µæ©Ÿèƒ½ãŒ vscode-random ã§ã™ã€‚ https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random デモ (GitHub リãƒã‚¸ãƒˆãƒªã‚ˆã‚Šå¼•ç”¨ï¼‰ 拡張機能ã¨ã—ã¦ã¯ã‚«ãƒ¼ã‚½ãƒ«ä½ç½®ã«ãƒ©ãƒ³ãƒ€ãƒ ãªå€¤ã‚’挿入ã™ã‚‹ã¨ã„ã†å˜ç´”ãªã‚‚ã®ãªã®ã§ã™ãŒã€VS Code ã®ãƒžãƒ«ãƒã‚«ãƒ¼ã‚½ãƒ«æ©Ÿèƒ½ã¨çµ„ã¿åˆã‚ã›ã‚‹ã“ã¨ã§éžå¸¸ã«å¼·åŠ›ãªä½“験を得るã“ã¨ãŒã§ãã¾ã™ã€‚ åå‰ã‚„メールアドレスã®é …ç›®ãŒã‚ã‚‹ JSON ã‚„ YAML ã«å¯¾ã—ã€è¤‡æ•°ã®é …ç›®ã«ã¾ã¨ã‚ã¦å€¤ã‚’挿入ã—ã¦ä½œã‚Šä¸Šã’ã‚‹ã®ã¯æ°—æŒã¡ã„ã„ã“ã¨é–“é•ã„ãªã—ï¼ å¯¾å¿œã‚³ãƒžãƒ³ãƒ‰ コマンド 説明 生æˆä¾‹
Webページã§ã‚ˆã見ã‹ã‘ã‚‹UIコンãƒãƒ¼ãƒãƒ³ãƒˆã€ãƒ˜ãƒƒãƒ€ãƒ»ãƒ•ãƒƒã‚¿ãƒ»ãƒ’ーãƒãƒ¼ãƒ»ã‚®ãƒ£ãƒ©ãƒªãƒ¼ãƒ»ã‚¹ãƒ†ãƒƒãƒ—・ãŠå•ã„åˆã‚ã›ãªã©ã‚’Tailwind CSSã§ã™ãã«å®Ÿè£…ã§ãるコードをã¾ã¨ã‚ãŸtailblocksを紹介ã—ã¾ã™ã€‚ ãã‚Œãžã‚Œã®UIコンãƒãƒ¼ãƒãƒ³ãƒˆã«ã¯ã•ã¾ã–ã¾ãªãƒãƒªã‚¨ãƒ¼ã‚·ãƒ§ãƒ³ã‚‚ã‚ã‚Šã€ã‚¹ãƒžãƒ›ãƒ»ã‚¿ãƒ–レット・デスクトップã§ã®è¡¨ç¤ºã€ãƒ©ã‚¤ãƒˆãƒ¢ãƒ¼ãƒ‰ãƒ»ãƒ€ãƒ¼ã‚¯ãƒ¢ãƒ¼ãƒ‰ã€ãƒ†ãƒ¼ãƒžã‚«ãƒ©ãƒ¼ã®å¤‰æ›´ãªã©ã€éžå¸¸ã«ä¾¿åˆ©ã§ã™ã€‚ tailblocks -GitHub tailblocksã®ç‰¹å¾´ tailblocksã®ãƒ‡ãƒ¢ tailblocksã®ç‰¹å¾´ tailblocksã¯ã€Tailwind CSSã§ã™ãã«å®Ÿè£…ã§ãã‚‹UIコンãƒãƒ¼ãƒãƒ³ãƒˆã‚’ã¾ã¨ã‚ãŸã‚‚ã®ã§ã™ã€‚Tailwind CSSã¯UIコンãƒãƒ¼ãƒãƒ³ãƒˆã‚’カスタマイズã™ã‚‹ãŸã‚ã®ãƒ¦ãƒ¼ãƒ†ã‚£ãƒªãƒ†ã‚£ã¨ãªã‚‹classã‚’æä¾›ã™ã‚‹CSSã§ã™ã€‚ å‚考: Tailwind CSSã®ä¾¿åˆ©ãªä½¿ã„æ–¹ã€ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚„UIコンãƒ
Web制作時ãªã©ã®ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã®ä½œæ¥ãŒæ—ã‚‹ã€ã‚³ãƒ¼ãƒ‰ãŒã¯ã£ãã‚Šã¨è¦‹ã‚„ã™ãã¦ã€ä½¿ã„ã‚„ã™ã„ Visual Studio Codeã®ãƒ†ãƒ¼ãƒžã‚’紹介ã—ã¾ã™ã€‚ ダーク系ãŒå¥½ããªäººã‚‚ã€ãƒ©ã‚¤ãƒˆç³»ãŒå¥½ããªäººã‚‚ã€ãã—ã¦ã‚¯ãƒªãƒ¼ãƒ 系やMaterialカラーã®ãƒ†ãƒ¼ãƒžãªã©ã€ã„ã‚ã„ã‚æƒã£ã¦ã„ã¾ã™ã€‚ VSCodeThemes VSCodeThemes -GitHub VSCodeThemesã§ã¯ã€Visual Studio Codeã®ã•ã¾ã–ã¾ãªãƒ†ãƒ¼ãƒžãŒã¾ã¨ã‚られã¦ã„ã¾ã™ã€‚ Visual Studio Codeã§ä½¿ã„ã‚„ã™ã„テーマファイル Visual Studio Codeã®ãƒ†ãƒ¼ãƒžã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨å¤‰æ›´æ–¹æ³• Visual Studio Codeã§ä½¿ã„ã‚„ã™ã„テーマファイル ã¾ãšã¯åˆ¶ä½œè€…ã«äººæ°—ãŒé«˜ã„ã€æš—ã„色を使用ã—ãŸãƒ€ãƒ¼ã‚¯ç³»ã®ãƒ†ãƒ¼ãƒžã€‚
デザインや実装ã§æ‚©ã‚“ã 時ã«ã¯ã€ä¸–ç•Œã®ã‚¯ãƒªã‚¨ã‚¤ã‚¿ãƒ¼ã®é–“ã§æ³¨ç›®ã•ã‚Œã¦ã„ã‚‹æ–°é®®ãªãƒˆãƒ¬ãƒ³ãƒ‰ã‚’見ã¦ã¿ã‚‹ã¨è‰¯ã„インスピレーションã«å‡ºä¼šã†ã“ã¨ãŒã§ãã¾ã™ã€‚最近ã®Webサイトã§æ³¨ç›®ã•ã‚Œã¦ã„るデザインã®ãƒˆãƒ¬ãƒ³ãƒ‰ã‚’紹介ã—ã¾ã™ã€‚ 自分ã«ã¯ãªã„発想を見ã‹ã‘ã‚‹ã¨ã€ãªã‚“ã ã‹æ¥½ã—ããªã‚Šã¾ã™ã‚ˆã。 3 Essential Design Trends, March 2018 3 Essential Design Trends, April 2018 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ 01. ナビゲーションを表示ã—ãªã„トップページ -ãƒã‚¹ã‚¿ãƒ¼ã‚¹ã‚¿ã‚¤ãƒ« 02. Ultra Violetã®ã‚«ãƒ©ãƒ¼ãƒ‘レット 03. グラデーションã¨ãƒ†ã‚スト 04. 泡ã®ã‚ˆã†ãªæŸ”らã‹ã„å¡Š -ãƒãƒ–ル アンド ブãƒãƒ– 05. æµ®éŠã—ã¦ã„る矩形 -フãƒãƒ¼ãƒ†ã‚£ãƒ³ã‚° レクタングル 06
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}