※ã¯ã¦ãƒ–ã®ç·åˆãƒ›ãƒƒãƒ†ãƒ³ãƒˆãƒªã¨ã€noteã®å…¬å¼ãƒžã‚¬ã‚¸ãƒ³ã«å…¥ã‚Šã¾ã—ãŸï¼ ã“ã‚“ã«ã¡ã¯ã€‚Kazutaka Shimizuã§ã™ã€‚
デザインã«ä¾¿åˆ©ãªãƒ„ール18é¸ï½œã‹ãšãŸã‹
※ã¯ã¦ãƒ–ã®ç·åˆãƒ›ãƒƒãƒ†ãƒ³ãƒˆãƒªã¨ã€noteã®å…¬å¼ãƒžã‚¬ã‚¸ãƒ³ã«å…¥ã‚Šã¾ã—ãŸï¼ ã“ã‚“ã«ã¡ã¯ã€‚Kazutaka Shimizuã§ã™ã€‚
æ–°è¦ç™»éŒ² UI ã¾ã¨ã‚ã¦ã¿ãŸï½œã‚ã
シンプルã ã‘ã©é›£ã—ã„「新è¦ç™»éŒ²ã€ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã€‚ 派手ã•ã¯ãªã„ã‘ã©ã€åœ°é“ãªå·¥å¤«ã®ç¹°ã‚Šè¿”ã—。 æ–°è¦ç™»éŒ²ã¾ã‚ã‚Šã§é›¢è„±ã®å°‘ãªã„デザインを勉強ã—ãŸã‹ã£ãŸã®ã§ã€ã„ãã¤ã‹ã‚¢ãƒ—リをスクショã—ã¾ã—ãŸã€‚自分用ã§ä½œæˆã—ã¾ã—ãŸãŒã€èª°ã‹ã®å‚考ã«ãªã‚Œã°ã¨æ€ã„ã¾ã™ã€‚ ã¾ãŸã€ã¾ã¨ã‚内ã®ã‚³ãƒ¡ãƒ³ãƒˆã¯å€‹äººçš„感想ã§ã™ã€‚ã¾ã ã¾ã 勉強ä¸ãªã®ã§ã€ãŠæ°—軽ã«ã”æ„見ã„ãŸã ã‘ã‚‹ã¨ã†ã‚Œã—ã„ã§ã™ã€œã€‚ パターン一覧 1. ç™»éŒ²å¿…é ˆåž‹ 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別ã®å‚考事例 1. ä¸è¦ãªé·ç§»ã‚’削る 2. ä¸è¦ãªæ“作を削る 3. ã‚ã‹ã‚Šã‚„ã™ãä¼ãˆã‚‹ 4. é…力的ã«ä¼ãˆã‚‹ ãŠã‚り㫠・最é©ãªæ–°è¦ç™»éŒ²ã®ã‚¿ã‚¤ãƒŸãƒ³ã‚° ・注æ„ã™ã¹ãデザインã®è¦–点 ・スクショã®ä¿ç®¡å ´æ‰€1. ç™»éŒ²å¿…é ˆåž‹ãƒ¦ãƒ¼ã‚¶ãƒ¼ç™»éŒ²ãªã—ã§ã¯ã‚¢ãƒ—リãŒåˆ©ç”¨ã§ããªã„パターン。 å‚¾å‘ æ¯æ•°ã¨ã—ã¦ã¯ä¸€ç•ªå¤šã„å½¢å¼ã€‚プãƒãƒ•ã‚£ãƒ¼ãƒ«ãŒå¤§åˆ‡ãªãƒ•ã‚£ãƒƒãƒˆãƒã‚¹ç³»ã§ã¯ã€åˆ©ç”¨å‰ã«ã‹ãªã‚Šã®å…¥åŠ›ã‚’求
Twitterã§å¥½è©•ã ã£ãŸæ‰‹å…ƒã«ç½®ã„ã¦ãŠããŸã„デザイン本13é¸ï½œä¸Šå¸ãƒ‹ã‚·ã‚°ãƒ
ã¿ãªã•ã¾ã€ã“ã‚“ã«ã¡ã¯ã€‚上å¸ãƒ‹ã‚·ã‚°ãƒã§ã™ã€‚ ã“ã¡ã‚‰ã®note記事ã¯æ˜¨å¹´æœ«ã«ãƒªãƒªãƒ¼ã‚¹ã—ãŸã‚‚ã®ã§ã™ãŒã€ä»Šå¹´ã«å…¥ã£ã¦ã‹ã‚‰ã‚‚デザイン本をã„ãã¤ã‹ç´¹ä»‹ã—ã¦ã„ã¾ã™ã®ã§ã€æ”¹ã‚ã¦åŠ ç†ï¼ˆè¿½åŠ ）ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ 本当ã«ã‚ªã‚¹ã‚¹ãƒ¡ã®æœ¬ã—ã‹ç´¹ä»‹ã—ã¦ãŠã‚Šã¾ã›ã‚“ã®ã§ã€æ˜¯éžãŠæ‰‹ã«ã¨ã£ã¦ç¢ºã‹ã‚ã¦ã‚‚らãˆã‚‹ã¨å¬‰ã—ã„ã§ã™ã€‚ 「Twitterã§å¥½è©•ã ã£ãŸæ‰‹å…ƒã«ç½®ã„ã¦ãŠããŸã„デザイン本13é¸ã€ã¨é¡Œã—ã¦ã€ç°¡å˜ã«ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã®ã§ã€æ˜¯éžã¨ã‚‚ãƒã‚§ãƒƒã‚¯ã—ã¦ã¿ã¦ãã ã•ã„ï¼ ï¼Šï¼Šï¼Š −　目次　− â‘ æ–‡å—ã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã§é…ã›ã‚‹åºƒå‘Šãƒ‡ã‚¶ã‚¤ãƒ³ ②デザイナーã®ãƒ©ãƒ•ã‚¹ã‚±ãƒƒãƒ デザインã®ã‚¢ã‚¤ãƒ‡ã‚¢ã‚’å½¢ã«ã™ã‚‹éŽç¨‹ ③グッズ製作ガイドBOOKâ‘£ã‚ャラクターã§ã‚‚ã£ã¨ä¼ã‚るデザイン ⑤販促会è°SPECIAL EDITION 実際ã«æ案ã•ã‚ŒãŸç§˜è”µã®ä¼ç”»æ›¸ ⑥入稿データã®ã¤ãã‚Šã‹ãŸâ‘¦ã„ã¨ã—ã®å°åˆ·ãƒœãƒ¼ã‚¤ã‚º ⑧é…色アイデア手帖 ã‚ãã£ã¦è¦‹ã¤ã‘ã‚‹æ–°ã—ã„デザインã®æœ¬ ⑨パケ
ãƒã‚´ã‚’デザインã™ã‚‹éš›ã«å‚考ã«ãªã‚‹5冊ã®æœ¬
ãƒã‚´ã‚’デザインã•ã›ã¦ã‚‚らã†æ©Ÿä¼šãŒã‚ã£ãŸã®ã§ã€ãƒ–レスト用ã«ãƒã‚´ã«é–¢ã™ã‚‹æœ¬ã‚’図書館ã§ä½•å†Šã‹å€Ÿã‚Šã¦ãã¦èªã‚“ã§ã¿ã¾ã—ãŸã€‚ãã‚Œãžã‚Œé•ã†è‰¯ã•ãŒã‚ã£ãŸã®ã§ã€ãã‚Œãžã‚Œã®æ¦‚è¦ã¨è‡ªåˆ†ã«ã¨ã£ã¦å‚考ã«ãªã£ãŸç‚¹ã‚’メモã—ã¦ãŠãã¾ã™ã€‚ 特ã«æœ€åˆã®2冊ã¯è”µæ›¸ã«ã—ãŸã„ã¨æ€ãˆã‚‹å†…容ã§ã—ãŸã€‚ã“ã®2冊ã¯ã„ã¤ã§ã‚‚手ã«å–ã£ã¦è¦‹è¿”ã›ã‚‹ã‚ˆã†ã«ã—ã¦ãŠããŸã„。以下ã€å¥½ããªé †ã§ç´¹ä»‹ã—ã¦ã„ã¾ã™ã€‚ 日本語ã®ãƒã‚´ãƒ»ãƒ¡ã‚¤ã‚ング ãƒã‚´ãƒ‡ã‚¶ã‚¤ãƒ³ã®ãƒã‚¸ãƒƒã‚¯ ãƒã‚´ãƒ‡ã‚¶ã‚¤ãƒ³ã®ã‚¢ã‚¤ãƒ‡ã‚¢! 実例ã¤ããƒã‚´ã®ãƒ‡ã‚¶ã‚¤ãƒ³ æ–°ã—ã„時代ã®ãƒ–ランドãƒã‚´ã®ãƒ‡ã‚¶ã‚¤ãƒ³ 日本語ã®ãƒã‚´ãƒ»ãƒ¡ã‚¤ã‚ング 「日本語ã®ãƒã‚´ãƒ»ãƒ¡ã‚¤ã‚ングã€ã‚’Amazon.co.jpã§è¦‹ã‚‹ ラフやスケッãƒã€è‰²ã‚„フォントã®æ¤œè¨Žæ¡ˆãªã©ã€ãƒœãƒ„案をå«ã‚€åˆ¶ä½œç‰©ï¼ˆæ出資料？）ãŒè¦‹ã‚‰ã‚Œã‚‹è²´é‡ãªæœ¬ã§ã™ã€‚掲載ã•ã‚Œã¦ã„る事例ã¯25件ã§ã™ãŒã€ã“ã®5冊ã®ä¸ã§ã¯å„事例ã®åˆ¶ä½œãƒ—ãƒã‚»ã‚¹ãŒä¸€ç•ªè©³ã—ã載ã£ã¦ã„ã¾ã™ã€‚ 普段ã‚ã¾ã‚Šè¡¨ã«å‡ºã¦ã“ãªã„ボツ案ãªã©ã‚‚
カラフルã§ç¾Žã—ã„ãƒã‚´ãƒ‡ã‚¶ã‚¤ãƒ³ã®åŠ¹æžœçš„ãªã¤ãã‚Šæ–¹ã¾ã¨ã‚
ブランドã®ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«ã€å¤‰æ›´ã‚’検討ã—ã¦ã„ã‚‹ã²ã¨ã¯ã€è‰²é®®ã‚„ã‹ãªã‚«ãƒ©ãƒ•ãƒ«ãƒã‚´ã‚’検討ã—ã¦ã¿ã¾ã›ã‚“ã‹ã€‚カラフルãªãƒã‚´ã¯ã€ãƒ–ランドã®æ³¨ç›®ã‚’集ã‚ã‚‹ã“ã¨ãŒã§ãã€èªè˜ã—ã‚„ã™ãã—ã¦ãã‚Œã¾ã™ã€‚ ã“ã®è¨˜äº‹ã§ã¯ã€ã‚«ãƒ©ãƒ•ãƒ«ãªé…色を使ã£ãŸãƒ–ランドãƒã‚´ã®ä½œæˆãƒã‚¤ãƒ³ãƒˆã‚’ã”紹介ã—ã¾ã™ã€‚åŒæ™‚ã«ã€å‚考ã«ã—ãŸã„カラフルãªãƒã‚´ãƒ‡ã‚¶ã‚¤ãƒ³ã®ã‚µãƒ³ãƒ—ル例も一緒ã«ã¾ã¨ã‚ã¦ã„ã¾ã™ã€‚ カラフルãªãƒ‡ã‚¶ã‚¤ãƒ³ã‚’é¸ã¶ç†ç”±ã¨ã¯ï¼Ÿ カラフルãªãƒã‚´ã¯ã€ãƒ–ランドãŒä¼ãˆãŸã„メッセージをã†ã¾ãä¼ãˆã‚‹æ‰‹åŠ©ã‘ã¨ãªã‚Šã¾ã™ã€‚ã“ã‚Œã¯ã€ã™ã¹ã¦ã®è‰²ãŒç•°ãªã‚‹ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ã‚„æ„味をオーディエンスã«ä¼ãˆã‚‹ã“ã¨ã‹ã‚‰ãã¦ã„ã¾ã™ã€‚ ãŸã¨ãˆã°ã‚ªãƒ¬ãƒ³ã‚¸è‰²ã®ãƒã‚´ã¯ã€é‡‘色ã¨ä¼¼ã¦ã„ã‚‹ã«ã‚‚ã‹ã‹ã‚らãšã€ç•°ãªã‚‹ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ã‚’ä¼ãˆã¾ã™ã€‚ブランドãƒã‚´ã«é…色を利用ã™ã‚‹å ´åˆã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¨ã®ã‚³ãƒŸãƒ¥ãƒ‹ã‚±ãƒ¼ã‚·ãƒ§ãƒ³ã§å¨åŠ›ã‚’発æ®ã—ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«ã¨ã£ã¦ã‚ˆã‚Šé…力的ã¿ã›ã‚‹ã“ã¨ã«å½¹ç«‹ã¡ã¾ã™ã€‚ å„色ã®ã‚‚ã¤æ„味åˆã„ã«ã¤ã„㦠赤系ãƒã‚´: 若々ã—ã•
デザイナーã˜ã‚ƒãªã„人ãŒã‚„ã‚ŠãŒã¡ãªãƒ‡ã‚¶ã‚¤ãƒ³ã«ãŠã‘ã‚‹é–“é•ã„ | デザイン・広告ã®çŸ¥è˜ | デザイン作æˆä¾é ¼ã¯ASOBOAD
デザイナーã§ãªã„人ã§ã‚ã£ã¦ã‚‚ã€ãƒ—レゼン資料や自身ã®ãƒ“ジãƒã‚¹ã‚’宣ä¼ã™ã‚‹ãŸã‚ã®è²©ä¿ƒç‰©ãªã©ã€æ§˜ã€…ãªå±€é¢ã§ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’作æˆã™ã‚‹æ©Ÿä¼šãŒå˜åœ¨ã™ã‚‹ã®ã§ã¯ãªã„ã§ã—ょã†ã‹ã€‚今回ã¯Vismeã®YouTubeã‹ã‚‰ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã§ãªã„人ãŒãƒ‡ã‚¶ã‚¤ãƒ³ã‚’ä½œã‚‹å ´åˆã®æ³¨æ„点ã«ã¤ã„ã¦å¦ã³ãŸã„ã¨æ€ã„ã¾ã™ã€‚※翻訳・記事掲載ã¯è¨±è«¾ã‚’å¾—ã¦ã„ã¾ã™ã€‚(Thank you, visme !!) 以下翻訳内容ã§ã™ã€‚ 今回ã¯ã€ã€Œãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã˜ã‚ƒãªã„人ãŒã‚„ã‚ŠãŒã¡ãªãƒ‡ã‚¶ã‚¤ãƒ³ã§ã®é–“é•ã„ã€ã«ã¤ã„ã¦è©±ã—ã¦ã„ãよ。今日ã¯ãã®ä¸ã‹ã‚‰15個ã®é–“é•ã„ã«ã¤ã„ã¦å–り上ã’よã†ã¨æ€ã†ã€‚ 1.ビジュアルよりも文å—を多用ã—ã¦ã„ã‚‹ デザインåˆå¿ƒè€…やデザイナーã˜ã‚ƒãªã„人ãŸã¡ãŒä¸€ç•ªã‚„ã‚ŠãŒã¡ãªé–“é•ã„ãŒã€ãƒ‡ã‚¶ã‚¤ãƒ³ã«æ–‡å—æƒ…å ±ã‚’ä½¿ã„ã™ãŽã‚‹ã£ã¦ã“ã¨ã€‚スライドã¨ã‹ãƒ—レゼンã¨ã‹ã§ä½¿ã†æƒ…å ±ç”¨ã®ãƒ“ジュアルã§ã‚ˆãèµ·ãã‚‹ã“ã¨ã‹ãªã€‚ ã©ã†ã™ã‚Œã°ã„ã„ã‹ã¨ã„ã†ã¨ã€è¦–覚的ãªã‚ューを軸ã«ãã“ã«ä¸»è¦ãªè¦ç´ ã ã‘を付ã‘åŠ
ブサイクãªUIデザインを劇的ã«æ”¹å–„ã™ã‚‹ãŸã‚ã®10ã®ãƒã‚§ãƒƒã‚¯ãƒªã‚¹ãƒˆï½œTaiki IKEDA｜note
ãŠä¹…ã—ã¶ã‚Šã§ã™ã€ã‚¤ã‚±ãƒ€ã§ã™ã€‚UIデザインをã™ã‚‹ä¸Šã§ã€ã“れらをæ„è˜ã™ã‚‹ã ã‘ã§ãƒ“ジュアルã®è³ªãŒåŠ‡çš„ã«å‘上ã™ã‚‹ã¨ã„ã†ãƒã‚§ãƒƒã‚¯ãƒªã‚¹ãƒˆã‚’作ã£ã¦ã¿ã¾ã—ãŸã€‚UIデザインã®å‚考ã«ã—ã¦ãã ã•ã„。 å·¦å³ã®ä½™ç™½ã¯æƒã£ã¦ã„ã‚‹ã‹ å·¦å³ã®ä½™ç™½ã‚’ã—ã£ã‹ã‚Šæƒãˆã‚‹ã“ã¨ã¯æœ€ã‚‚åˆæ©çš„ã§ã€ã‚«ãƒ³ã‚¿ãƒ³ã«å®Ÿè·µã§ãã‚‹Tipsã§ã™ã€‚ã‚ã¾ã‚Šã«åˆæ©çš„ã™ãŽã¦æ‚ªã„例を探ã™ã®ã«è‹¦åŠ´ã—ã¾ã—ãŸãŒã€MoneyFâ—rwardã•ã‚“ãŒé¡Œæã¨ã—ã¦éžå¸¸ã«å„ªç§€ã§ã—ãŸã€‚å·¦å³ã®ä½™ç™½ã¯14~20ptã®é–“ã§æƒãˆã‚‹ã®ãŒå®šçŸ³ã§ã™(è¿·ã£ãŸã‚‰16ptã«ã—ã¦ãŠã“ã†)。ã©ã†ã—ã¦ã‚‚å·¦å³ã®ä½™ç™½ã‚’æŒã¦ä½™ã—ã¦ã—ã¾ã†ã¨ã„ã†å ´åˆã¯å³ã®æ”¹å–„例ã®ã‚ˆã†ã«ä¸å¤®æƒãˆã«é€ƒã’ã‚‹ã®ã‚‚手ã§ã™ã€‚ フォントã®å¤§ãã•ã¯æ£ã—ã„ã‹ fontサイズã¯ã¾ãšã€ã€Œèªã¾ã›ã‚‹ãƒ†ã‚ストã®å¤§ãã•ã€ã‚’決ã‚ã¦ã‹ã‚‰ã€ãれを基準ã«çµ„ã¿ç«‹ã¦ã¦ã„ãã¾ã™ã€‚èªã¾ã›ã‚‹æ–‡å—ã€webã§ã„ã†<p>ã‚¿ã‚°ã¯14~16ptã«è¨å®šã—ã€ãã®æ–‡å—ã¨ã®ãƒãƒ©ãƒ³ã‚¹ã‚’見ã¦<head>
デザイン的ã«åˆã†è‰²ã®çµ„ã¿åˆã‚ã›ã‚’指定ã•ã‚ŒãŸã‚«ãƒ©ãƒ¼ã‚’ベースã«ç”Ÿæˆã™ã‚‹ç„¡æ–™ãƒ„ール -Color Designer
色ã®çµ„ã¿åˆã‚ã›ã«æ‚©ã‚“ã 時ã€æŒ‡å®šã•ã‚ŒãŸã‚«ãƒ©ãƒ¼ã‚’ベースã«ãã®è‰²ã®æ˜Žã‚‹ã„色åˆã„ã¨æš—ã„色åˆã„ã‚’ã¯ã˜ã‚ã€è£œè‰²ã€é¡žä¼¼è‰²ã€åˆ†è£‚補色ã€3色é…色ã€4色é…色ãªã©ã€è‰²ã®çµ„ã¿åˆã‚ã›ã‚’ç°¡å˜ã«è‡ªå‹•ã§ç”Ÿæˆã§ãるオンラインツールを紹介ã—ã¾ã™ã€‚ カラーã®ã‚»ãƒ³ã‚¹ãŒãªãã¦ã‚‚ã€ãƒ‡ã‚¶ã‚¤ãƒ³çš„ã«åˆã£ãŸçµ„ã¿åˆã‚ã›ãŒåˆ†ã‹ã‚Šã¾ã™ã€‚
ã“ã‚Œã ã‘守れã°è¦‹ã‚„ã™ããªã‚‹ãƒ‡ã‚¶ã‚¤ãƒ³ã®åŸºç¤Ž
2019/04/18ã«æ ªå¼ä¼šç¤¾gumi様ã§è¡Œã£ãŸãƒ‡ã‚¶ã‚¤ãƒ³è¬›ç¾©ã®ã‚¹ãƒ©ã‚¤ãƒ‰ã§ã™ã€‚ デザインã¨ã¯ä½•ã‹ï¼Ÿãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã¯ä½•ã‚’考ãˆã¦ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’作ã£ã¦ã„ã‚‹ã®ã‹ï¼Ÿ ã¨ã„ã†è©±ã‹ã‚‰ã€å®Ÿéš›ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’評価・検討ã™ã‚‹ãŸã‚ã®è¨€è‘‰ã‚’紹介ã—ã¦ã„ã¾ã™ã€‚
é…色ã¯ã‚»ãƒ³ã‚¹ã˜ã‚ƒãªã„ã€UIデザインã§è‰²ã‚’ã‹ã‚“ãŸã‚“ã«ã‚メるメソッド｜Taiki IKEDA｜note
今日ã¯å…ˆæ—¥å‹æ‰‹ã«ãƒªãƒ‡ã‚¶ã‚¤ãƒ³ã—ãŸPolipoliã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’使ã£ã¦ã€UIデザインを行ã†æ™‚ã«åƒ•ãŒæ™®æ®µã©ã®ã‚ˆã†ã«è‰²ã‚’é¸æŠžã—ã¦ã„ã‚‹ã®ã‹ã‚’ã¨ã¦ã‚‚æ£ç›´ã«æ›¸ã„ã¦ã„ã“ã†ã¨æ€ã„ã¾ã™ã€‚僕ãŒã“ã‚Œã‹ã‚‰è¨˜ã™æ–¹æ³•ã«å‰‡ã£ã¦è‰²ã‚’é¸ã¹ã°ã€èª°ã§ã‚‚ナウã§ãƒ¤ãƒ³ã‚°ãªã‚¢ãƒ—リを作るã“ã¨ãŒã§ãã¾ã™ã€‚ ã¯ã˜ã‚るよ レイアウトã«é–¢ã—ã¦ã¯ã‚¤ãƒ‹ã‚·ã‚¨ã‚ˆã‚Šã”先祖様ãŒãŠç¯‰ãã«ãªã‚‰ã‚ŒãŸãƒ«ãƒ¼ãƒ«ã«å‰‡ã£ã¦ä¸¦ã¹ã‚Œã°ã‚ªãƒ¯ã€ã‚ªãƒ¯ãƒªã§ã™ã€‚ã•ã£ããã“ã®Polipoliベッãƒãƒ¥ãƒ¼ã€ã‚¿ã‚¿ã‚ケンサã‚エディションã«è‰²ã‚’ã¤ã‘ã¦ã„ãã¾ã™ã€‚ 1. メインカラーをé¸ã¼ã†ã¾ãšã¯ã˜ã‚ã«ãƒ¡ã‚¤ãƒ³ã¨ãªã‚‹ã‚«ãƒ©ãƒ¼ã‚’決ã‚ã¾ã™ã€‚Polipoliã®ãƒ†ãƒ¼ãƒžã‚«ãƒ©ãƒ¼ã¯ãƒ”ンクãªã®ã§ãƒ–ラウザã®æ¤œç´¢æ¬„ã«ã€Œpink flat ui designã€ã¨æ‰“ã¡è¾¼ã¿ã¾ã™ã€‚イメージã«è¿‘ã„色ãŒå‡ºã¦ããŸã‚‰ã‚¹ãƒã‚¤ãƒˆã§å¸ã„å–ã‚Šã¾ã—ょã†ã€‚著作権ã«ã¯ãã‚Œãれも注æ„ã—ã¦ãã ã•ã„責任ã¯è² ã„ã¾ã›ã‚“。 Polipoliã«é–¢ã—ã¦ã¯æœ€åˆã‹ã‚‰ãƒ¡ã‚¤ãƒ³ã‚«ãƒ©ãƒ¼
UXピラミッド – UXデザインã®æ£ã—ã„評価方法 – デザイン会社 ビートラックス: ブãƒã‚°
å‰å›žã®ã€ŒUXãƒãƒ‹ã‚«ãƒ – UXデザインã®æ£ã—ã„å“質評価方法 –ã€ã§ã¯ã€ã‚µãƒ¼ãƒ“スやプãƒãƒ€ã‚¯ãƒˆã®UXデザインを評価ã™ã‚‹éš›ã«ä¸€èˆ¬çš„ã«ç”¨ã„られã¦ã„ã‚‹ã€UXãƒãƒ‹ã‚«ãƒ を活用ã—ãŸæ–¹æ³•ã‚’紹介ã—ãŸã€‚åŠ ãˆã¦ã€å®Ÿã¯ã‚‚ã†ä¸€ã¤ãƒ¦ãƒ¼ã‚¶ãƒ¼ä½“験ã®ã‚¯ã‚ªãƒªãƒ†ã‚£ã‚’測る方法ãŒã‚る。 ユーザー体験を構æˆã™ã‚‹3ã¤ã®ãƒã‚¤ãƒ³ãƒˆæ¶ˆè²»è€…ãŒã‚µãƒ¼ãƒ“スをå—ã‘ã‚‹ã¨ãã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒãƒ—ãƒãƒ€ã‚¯ãƒˆã‚’利用ã™ã‚‹ã¨ãã«å—ã‘å–る体験ã®è³ªã‚’高ã‚ã‚‹ã®ãŒUXデザイナーã®ä»•äº‹ã«ãªã‚‹ã€‚ ãã—ã¦ã€ãã®ä½“験を左å³ã™ã‚‹ã®ãŒã€1. 見ãŸç›®ã®å“質 (Look), 2. 感覚ã®å“質 (Feel), 3. 使ã„ã‚„ã™ã• (Usability) ã§ã‚る。大ãã分ã‘ã¦ã“ã®3ã¤ã®è¦ç´ ã®ã‚¯ã‚ªãƒªãƒ†ã‚£ãŒé«˜ã„ã»ã©ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«å¯¾ã—ã¦ã‚ˆã‚Šå„ªã‚ŒãŸä½“験をæä¾›ã™ã‚‹ã“ã¨ãŒå¯èƒ½ã«ãªã‚‹ã€‚ 実用性ã¨åˆ©ç”¨æ„Ÿè¦šã‚’測るUXピラミッドUXãƒãƒ‹ã‚«ãƒ ã«åŠ ãˆã¦ã€ã‚‚ã†ä¸€ã¤ã®UXクオリティを測る手法ã¨ã—ã¦UXピラミッドãŒã‚る。6ã¤ã®éšŽå±¤ã§æ§‹
ユーザーを離脱ã•ã›ãªã„電話番å·ã®å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ ã¨ã¯
UX Movementã®å‰µç«‹è€…ã€ãƒ©ã‚¤ã‚¿ãƒ¼ã€‚ユーザーã«å„ªã—ã„UXデザインã®ã‚¹ã‚ルをèªè€…ã®æ–¹ãŒä¸Šé”ã§ãるよã†ã€UX Movementã®ãƒ–ãƒã‚°ã‚’始ã‚る。 電話番å·å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ ã¯ã€ç”Ÿå¹´æœˆæ—¥å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ ã¨ä¸¦ã‚“ã§ãã›è€…ã§ã™ã€‚ãŸãã•ã‚“ã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆãŒã‚ã‚Šã€ã©ã®å…¥åŠ›æ–¹æ³•ãŒæ£ã—ã„ã‹ã‚’見分ã‘ã«ãã„ã“ã¨ãŒã‚ˆãã‚ã‚Šã¾ã™ã€‚国番å·ã‚’入力ã™ã¹ãã‹å¦ã‹ã•ãˆã‚ˆãã‚ã‹ã‚Šã¾ã›ã‚“。 é©åˆ‡ãªå…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã‚’判別ã§ããªã„ã¨ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¯é›»è©±ç•ªå·å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ 以外ã®é …目も入力内容ãŒä¸é©åˆ‡ãªã®ã§ã¯ã¨ä¸å®‰ã«ãªã‚Šã¾ã™ã€‚電話番å·å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ ã§ã‚¨ãƒ©ãƒ¼ãŒã§ã‚‹ã¨ã€ãƒ•ã‚©ãƒ¼ãƒ 入力自体を放棄ã—ã¦ã—ã¾ã†ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。 ã©ã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆãŒæ£ã—ãã€ã©ã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã§ã‚¨ãƒ©ãƒ¼ãŒå‡ºã‚‹ã®ã‹ã‚’ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒå…¥åŠ›æ™‚ã«å›°æƒ‘ã—ãªã„よã†ã«ä¼ãˆã‚‹ã¹ãã§ã™ã€‚ã‚‚ã—ユーザーãŒå›°æƒ‘ã™ã‚‹ã‚ˆã†ã‚ã‚Œã°ãƒ¦ãƒ¼ã‚¶ãƒ¼ä½“験ãŒä¹ã—ã„ã¨ã„ã†ã“ã¨ãªã®ã§ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã—ç›´ã™å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚入力フォーム改善ã®ãŸã‚ã«ã¯ã€
プãƒæ¼«ç”»å®¶ã•ã‚“ç›´ä¼ã®ã€ŒçµµãŒã†ã¾ããªãã¦ã‚‚漫画をèªã¿ã‚„ã™ãã™ã‚‹æ–¹æ³•ã€ãŒã¨ã¦ã‚‚å‚考ã«ãªã‚‹
ç¨²å²¡å’Œä½ @kz_ina_ ã€çµµãŒä¸Šæ‰‹ããªãã¦ã‚‚漫画をèªã¿ã‚„ã™ãã™ã‚‹æ–¹æ³•ã€‘ ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚ åŸºæº–æž ã§æã‘ã°å¤§æ¦‚èªã¿æ˜“ã„ã§ã™ã€‚ 「侵略ã€ã®ï¼’ã€ï¼“å·»ã¯ã“ã‚“ãªæ„Ÿã˜ã§æã„ã¦ã„ã¾ã™ã€‚ pic.twitter.com/qPbaKM7e8a ç¨²å²¡å’Œä½ @kz_ina_ æã方例。 å°è©žãªã©å¤šã‹ã£ãŸã®ã§ ã™ã”ã気を付ã‘ãŸãƒšãƒ¼ã‚¸ã§ã™ã€‚ 3コマ目ã®ã‚»ãƒªãƒ•ã®å‘¨ã‚Šã‚’飛ã°ã—ã¦ã„ãªã„ã®ã¯ グレー（トーン）ã®ä¸Šã«ä¹—ã‚‹æ–‡å—ã¯æ¯”較的èªã¿ã‚„ã™ã„ã®ã§ã™ã€‚ベタã®ä¸Šã‹ã‚‰ã ã¨åŽ³ã—ã„。 ã”自身ã®æ¼«ç”»ã®1ページをé€ã£ã¦é ‚ã‘ã‚Œã°ã‚ãã¾ã§èªã¿ã‚„ã™ã•ã¨ã—ã¦ã®æ·»å‰Šã—ã¾ã™ pic.twitter.com/qMml9HHzCk
ã€ãƒ—ãƒç›´ä¼ã€‘ãƒã‚´ä½œã‚Šã®8ã¤ã®ã‚³ãƒ„ã‚’ã‚ã‹ã‚Šã‚„ã™ãäº‹ä¾‹è§£èª¬ï¼ | ベーコンã•ã‚“ã®ä¸–界ブãƒã‚°
デザイナーã®ãƒ™ãƒ¼ã‚³ãƒ³ï¼ˆ@dogdog464646）ã§ã™ ã“ã®è¨˜äº‹ã§ã¯ãƒã‚´ã‚„タイトル文å—ã®ä½œã‚Šæ–¹ã‚’説明ã—ã¦ã„ãã¾ã™ã€‚ åˆå¿ƒè€…ã§ã‚‚ã“ã‚Œã ã‘押ã•ãˆã‚Œã°ã€ã¾ã‚‹ã§ãƒ—ãƒã®ä½œã£ãŸã‚ˆã†ãªãƒã‚´ã‚’作るã“ã¨ãŒã§ãã¾ã™ã€‚ ã“ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’応用ã—ã¦ã„ã‘ã°ã€ã€Œã©ã†ã‚„ã£ã¦ä½œã‚‹ã‚“ã ï¼ã€ã¨æ€ã£ã¦ã„ãŸè¤‡é›‘ãªãƒã‚´ã‚‚作れるよã†ã«ãªã£ã¦ã„ãã¯ãšã§ã™ã€‚ ãƒã‚´ã ã‘ã˜ã‚ƒãªãã¦ã€ ・本ã®è¡¨ç´™ ・ブãƒã‚°ã®ã‚¢ã‚¤ã‚ャッム・ãƒãƒ©ã‚·ã€ãƒã‚¹ã‚¿ãƒ¼ã®ã‚¿ã‚¤ãƒˆãƒ«æ–‡å— ã«ã‚‚応用ã§ãるよã†ã«ãªã£ã¦ã„ã¾ã™ã€‚ 覚ãˆã¦ãŠã‘ã°ã€ä»•äº‹ã®è³‡æ–™ä½œã‚Šã«ã‚‚ã€PTAã®ãƒãƒ©ã‚·ã¥ãã‚Šã«ã‚‚役立ã¡ã¾ã™ã€‚ ãã—ã¦ã€ã¿ãªã•ã‚“ãŒå†ç¾ã§ãるよã†ã«ãƒ•ãƒªãƒ¼ãƒ•ã‚©ãƒ³ãƒˆé™å®šã§ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’作ã£ã¦ã„ãã¾ã™ï¼ ãƒã‚´ã‚’ä½œã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ï¼ å®Ÿéš›ã«ãƒã‚´ã‚’作りãªãŒã‚‰ã€æ§˜ã€…ãªãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’紹介ã—ã¦ã„ãã¾ã™ã€‚ 基本ã®å½¢ã‚’æ•´ãˆã‚‹ ã“ã®æ–‡å—を基本ã«é€²ã‚ã¾ã™ã。 ã¾ãšï¼’è¡Œã«ã—ã¦ã€Œã‹ãŸã¾ã‚Šæ„Ÿã€ã‚’出ã—ã¦ã„ãã¾ã—ょã†ã€‚ ãƒã‚´ã¯ã€Œæ–‡å—ã€ã‹ã‚‰ã€Œ
デザイン原則ã®å®Ÿè·µï½œdely design
This domain may be for sale!
本当ã«å½¹ç«‹ã¤é…色サービス30é¸ã€‚é…色難民ã®æ–°äººãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã«æ§ã
ã“ã‚“ã«ã¡ã¯ã€‚ ジャスã®æ„味ãŒã‚ã‹ã‚‹ã‚„ã¤ã¯å¤§ä½“å‹é”。Webデザイナーã®ãƒŸãƒ©ã‚¤ã§ã™ã€‚ä»™å°å‡ºèº«ã§ã™ã€‚ ç§ã¯å…¥ç¤¾å½“åˆã‹ã‚‰ç´„1å¹´ã€LIGブãƒã‚°ã®ã€Œã‚¢ã‚¤ã‚ャッãƒï¼ˆè¨˜äº‹ã‚µãƒ ãƒã‚¤ãƒ«ï¼‰ã€ã€ŒãƒãƒŠãƒ¼ã€ã€ŒèƒŒæ™¯ã‚¸ãƒ£ãƒƒã‚¯ï¼ˆå¤§åž‹ãƒãƒŠãƒ¼ï¼‰ã€ã‚’制作ã—ã¦ãŠã‚Šã€åˆ¶ä½œã®å›žè»¢æ•°ãŒå¤šã„ã“ã¨ã‚‚ã‚ã£ã¦ã€é…色ã§ãã‚‹ãã‚‹ã¨æ‚©ã‚€ã“ã¨ãŒã‚ˆãã‚ã‚Šã¾ã—ãŸã€‚ ãã®ã¨ãã«ã‚«ãƒ©ãƒ¼ãƒªãƒ³ã‚°ã®å‚考ã«ãªã‚‹ã‚µãƒ¼ãƒ“スサイトを手当ãŸã‚Šæ¬¡ç¬¬ã«èª¿ã¹ã¦ã€ãŸã‚ã¦ã„ãŸã‚‚ã®ã‚’紹介ã—ã¾ã™ã€‚ã‘ã£ã“ã†é‡ãŒã‚ã‚Šã€ã²ã¨é€šã‚Šã®é…色系ツールを押ã•ãˆã¦ã„ã‚‹ã®ã§ã€ãƒ–ックマークã—ã¦ãŠã‘ã°ãã£ã¨å½¹ã«ç«‹ã¤ã“ã¨ã§ã—ょã†ã€‚ é…色ã«æ‚©ã‚“ã§è„³å†…ã€ã‚¤ãƒ³ã‚¿ãƒ¼ãƒãƒƒãƒˆç ‚æ¼ ã‚’ãã‚‹ãã‚‹ã¨ã•ã¾ã‚ˆã„æ©ã„ãŸã‚ãªãŸã®æ—…ã‚‚ã“ã“ã§çµ‚ã‚ã‚Šã§ã™ã€‚仕事ã¯ã•ã£ã•ã¨çµ‚ã‚らã›ã¦ã€æ—©ã帰ã£ã¦å¯ã‚‹ã®ã§ã™ã€‚ ã¯ã˜ã‚㫠説明をèªã‚ãªã„ã»ã©ç–²å¼Šã—ã¦ã„ã‚‹ã‚ãªãŸã®ãŸã‚ã«ã€è©•ä¾¡ã®è»¸ã‚’ç«‹ã¦ã¾ã—ãŸã€‚ 見やã™ã• 特異性 掲載数 ã§ã™ã€‚ 個人的ãªè¦³ç‚¹ã§ã¯ã‚ã‚Šã¾ã™ãŒã€ã‚µã‚¯
ã€ã‚³ãƒ”ペOK】jQueryã®ã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼å®Ÿè£…サンプル10é¸ï¼
ã©ã†ã‚‚ã€ã‚¸ãƒ£ãƒ³ã‚°ãƒ«ã‚ªãƒ¼ã‚·ãƒ£ãƒ³ã®ãƒŸã‚±ã§ã™ã€‚ 今日ã¯jQueryã§å®Ÿè£…ã™ã‚‹ã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã®ã”紹介ã よ。 ç°¡å˜ã™ãŽã¦ã‚ã£ã¨ã„ã†é–“ã«å®Ÿè£…ã§ãã¦ã—ã¾ã†ã®ã§ 「HTMLã¨CSSã¯ã‚ã‹ã‚‹ã‘ã©jQueryã£ã¦ãªã‚“ã ã‹ã¨ã£ã¤ãã«ãã„ãªï½žã€ã€ŒjQueryã£ã¦ãªã«ï¼ŸJavaScriptã®ã‚‰ã„ã¶ã‚‰ã‚Šï¼Ÿã¯ï¼Ÿã€ ã¨æ€ã£ã¦ã‚‹ãã“ã®ã‚ãªãŸï¼ãœã²è¦‹ã¦ã„ã£ã¦ãï¼ ã§ã¯ã„ã£ã¦ã¿ã‚ˆã†ï¼ アコーディオンメニューã¨ã¯ アコーディオンメニューã£ã¦ãªã‚“ã よã£ã¦äººã®ç‚ºã«èª¬æ˜Žã™ã‚‹ã。 クリックやタップをã™ã‚‹ã¨ã†ã«ã‚‡ã€œã‚“ã¨ä¸èº«ãŒå‡ºã¦ã㦠もã†ä¸€åº¦ã‚¯ãƒªãƒƒã‚¯ã‚„タップをã™ã‚‹ã¨ã—ゅ〜んã¨ä¸èº«ãŒé–‰ã˜ã¦ã„ã機能ã®ã“ã¨ã よ。 Webサイトã§ã‚ˆã見ã‹ã‘るアニメーションã よã。 è¦ç´ ãŒå¤šãã¦ã”ã¡ã‚ƒã”ã¡ã‚ƒã—ãŒã¡ãªãƒ‡ã‚¶ã‚¤ãƒ³ã‚’åŽç´ã™ã‚‹ã®ã«ã‚ˆã使ã‚れるよã。 アコーディオンメニューã®ãƒ¡ãƒªãƒƒãƒˆãƒ»ãƒ‡ãƒ¡ãƒªãƒƒãƒˆã¯ã“ã¡ã‚‰ã®è¨˜äº‹ã‚’å‚考ã«ã—ã¦ã¿ã¦ã。 具体的ãªã‚¤ãƒ¡ãƒ¼ã‚¸ã¯ç”¨æ„
CSSã ã‘ã§å¹ã出ã—ã®ä¼šè©±å½¢å¼ã‚’å–り入れる方法 - 人生RPG
ã“ã‚“ã«ã¡ã¯ï¼å†’険者Lv.1（@boukenshaLv1)ã§ã™ï¼ï¼ ブãƒã‚°ã‚’始ã‚ã¦ã‹ã‚‰è‰²ã‚“ãªæ–¹ã®ãƒ–ãƒã‚°ã‚’æ‹è¦‹ã—ã¦æ¥½ã—ã‚“ã§ã„ã¾ã™ã€‚ æ‹è¦‹ã—ãŸãƒ–ãƒã‚°ã®ä¸ã«ã¯ã€Œå¹ã出ã—ã€ã‚’使ã£ãŸä¼šè©±ã‚’ã—ã¦ã„るよã†ãªè¡¨ç¾ã‚’使ã£ã¦ã„る方も度々ã¿ã¾ã™ã€‚ ブãƒã‚°ã‚„記事ã®ã‚¸ãƒ£ãƒ³ãƒ«ã«ã‚ˆã£ã¦ã¯è¦‹ã‚„ã™ã‹ã£ãŸã‚Šã€å…±æ„Ÿã§ããŸã‚Šã™ã‚‹ã®ã§ä¸€ã¤ã®æ¦å™¨ã¨ã—ã¦ã™ã”ã„å½¹ã«ç«‹ã¡ãã†ï¼ï¼ ãã†æ€ã£ãŸç§ã¯è‰²ã€…å¹ã出ã—ã®å–り入れ方ã«ã¤ã„ã¦èª¿ã¹ã¾ã—ãŸã€‚ æ£ç›´ã«è¨€ã†ã¨ã‚„ã‚Šæ–¹ã¯ã™ãç†è§£ã—ã¾ã—ãŸã€‚ ã—ã‹ã—ï¼å®Ÿè·µã—よã†ã«ã‚‚会話相手ãŒã„ãªã„ã“ã¨ã«æ°—ã¥ãã¾ã—ãŸã€‚ 自分ã®å¹ã出ã—ã¯ã‚¢ã‚¤ã‚³ãƒ³ã®ã‚ャラを使ãˆã¾ã™ãŒã€ç›¸æ‰‹ã¯ï¼Ÿ ãƒ•ãƒªãƒ¼ç´ æã§ãƒ†ã‚トーã«ç›¸æ‰‹ã‚’探ã™ã®ãŒç°¡å˜ã§ã™ãŒã€ã©ã†ã›ä»Šå¾Œä½¿ã£ã¦ã„ããªã‚‰è¦ªã—ã¿ã‚„ã™ã„オリジナルã‚ャラを使ã„ãŸã„ï¼ å¤‰ãªã¨ã“ã‚ã§ç„¡é§„ã«ã“ã ã‚り屋ã•ã‚“ãªç§ã¯ã€ç›¸æ‰‹ã‚’ã¡ã‚ƒã‚“ã¨æº–å‚™ã—ã¦ã‹ã‚‰å®Ÿè·µã—よã†ã¨ä»Šæ—¥ã¾ã§ã‚³ãƒ„コツã¨ã‚ャラ作æˆã«åŠ±ã‚“ã§ã„ã¾ã—ãŸã€‚ イラストã«é–¢
ãŠçŸ¥ã‚‰ã›
障害
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
http://www.life-is-bitter.com/entry/ui_checklist
ウェブフォントã®ã‚¨ãƒ¢ã„話
{{#tags}}- {{label}}
{{/tags}}