第2回　ワイヤーフレームã¨è¨è¨ˆãƒ„ール | gihyo.jp
å‰å›žã€ã€Œâ IA One Sheetersã€ã‚’ã”紹介ã—ã¾ã—ãŸãŒã€ã‚‚ã¡ã‚ã‚“ãれらを指ã—ã¦ã™ã¹ã¦ãŒã€ŒIAタスクã§ã‚ã‚‹ã€ã¨ã¯è¨€ã„切れã¾ã›ã‚“。ãŸã å°‘ãªã‹ã‚‰ãšIAã¨ã„ã†ãƒãƒ¼ãƒ«ï¼ˆå½¹å‰²ï¼‰ã«ãŠã„ã¦é–¢ä¿‚ã—ã¦ãるタスクã§ã‚ã‚‹ã“ã¨ã¯é–“é•ã„ãªã„ã¨æ€ã„ã¾ã™ã€‚ ãã“ã§ä»Šå›žã¯ã€ãã®ã‚µãƒ³ãƒ—ルã«ã‚‚ã‚ã£ãŸã€Œãƒ¯ã‚¤ãƒ¤ãƒ¼ãƒ•ãƒ¬ãƒ¼ãƒ ã€ã«ã¤ã„ã¦ã®ãƒ„ールを紹介ã—ã¾ã™ã€‚ ãã‚‚ãã‚‚ç”»é¢ã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŠã‚ˆã³åŽŸç¨¿ã®æ•´ç†ã¨ã„ã†æ„味ã§ã¯ã€ã„ã‚ã„ã‚ãªãƒ„ールãŒé–¢ä¿‚ã—ã¦ãã¾ã™ã€‚Web制作ã®ç¾å ´ã«ãŠã„ã¦ã¯WebデザイナーやWebディレクターã¨ã„ã†ãƒãƒ¼ãƒ«ãŒé–¢ã‚ã‚Šã€ã‚¿ã‚¹ã‚¯ãƒ™ãƒ¼ã‚¹ã«ã™ã‚‹ã¨ã©ã®ãƒãƒ¼ãƒ«ãŒãã®ã‚¿ã‚¹ã‚¯ã‚’é‚è¡Œã™ã‚‹ã®ã‹ãŒæ··ä¹±ã—ãŒã¡ã§ã™ã€‚ã“ã®é€£è¼‰ã§ã¯Webデザイナーを対象ã¨ã—ã¦ã€ãƒ„ールã®ä½¿ã„方やã¶ã¤ã‹ã‚‹èª²é¡Œã«ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã‚’ã‚ã¦ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ワイヤーフレームã«ã¤ã„㦠ワイヤー（線形状）ã§ãƒ•ãƒ¬ãƒ¼ãƒ ï¼ˆæž ï¼‰ã«ã—ã¦ã„ãã“ã¨ã‹ã‚‰åå‰ãŒã¤ã„ãŸã¨æ€ã‚ã‚Œã¾ã™ãŒã€ã‚‚ã¨ã‚‚ã¨ã¯CG（
第1å›žã€€æƒ…å ±å¯è¦–化ã®æ¦‚è¦ | gihyo.jp
ã¯ã˜ã‚㫠コンピュータやインターãƒãƒƒãƒˆã®ç™ºå±•ã«ã‚ˆã£ã¦ã€å¤§é‡ã®ãƒ‡ãƒ¼ã‚¿ã‚’集ç©ã—ã€åˆ†æžã™ã‚‹ã“ã¨ãŒå®¹æ˜“ã«ãªã£ã¦ãã¾ã—ãŸã€‚ã—ã‹ã—ã€ãƒ‡ãƒ¼ã‚¿ãã®ã‚‚ã®ã«é–¢å¿ƒãŒé›†ã¾ã‚‹ä¸€æ–¹ã§ã€ãƒ‡ãƒ¼ã‚¿ã®ã€Œè¦‹ã›æ–¹ã€ã«ã¤ã„ã¦ã¯ã€ã‚ã¾ã‚Šæ³¨æ„ãŒæ‰•ã‚ã‚Œã¦ã„ãªã„ã®ãŒç¾å®Ÿã§ã¯ãªã„ã§ã—ょã†ã‹ã€‚ データã¯ã€äººãŒç†è§£ã™ã‚‹ã“ã¨ã§åˆã‚ã¦ä¾¡å€¤ã‚’æŒã¡ã¾ã™ã€‚ãã—ã¦ã€ãã®ç†è§£ã®ã‚«ã‚®ã‚’æ¡ã£ã¦ã„ã‚‹ã®ã¯ã€ãƒ‡ãƒ¼ã‚¿ã‚’人ã®ç›®ã§çŸ¥è¦šå¯èƒ½ãªå½¢ã¸ã¨ã€Œå¯è¦–化ã€ã™ã‚‹ãƒ—ãƒã‚»ã‚¹ã«ä»–ãªã‚Šã¾ã›ã‚“。データã¯ãŸã 表示ã™ã‚Œã°è‰¯ã„ã¨å®‰æ˜“ã«è€ƒãˆã‚‹ã®ã¯ã‚„ã‚ã¦ã€è¡¨ç¾åŠ›è±Šã‹ãªå¯è¦–化ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’追求ã—ã¦ã¿ã¾ã›ã‚“ã‹ï¼Ÿ 本連載ã§ã¯ã€å…·ä½“例やサンプルコードを交ãˆãªãŒã‚‰ã€æƒ…å ±å¯è¦–化ã®åŸºç¤Žã‹ã‚‰å®Ÿè·µã¾ã§ã‚’解説ã—ã¾ã™ã€‚ æƒ…å ±å¯è¦–化ã¨ã¯ä½•ã‹ 「å¯è¦–化（Visualizationâ ）â ã€ã¨ã¯ã€ç”»åƒã‚„アニメーションã®ã‚ˆã†ãªè¦–覚的表ç¾ã‚’使用ã—ã€äººã«ä½•ã‚‰ã‹ã®æ„味をä¼é”ã™ã‚‹ã“ã¨ã§ã™ã€‚特ã«ã€Œæƒ…å ±å¯è¦–化（Information Vi
Webæƒ…å ±ã‚¢ãƒ¼ã‚テクãƒãƒ£ï¼ˆIA）ã¨ãƒ„ール 記事一覧 | gihyo.jp
é‹å–¶å…ƒã®ãƒã‚´ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容ã®å…¨éƒ¨ã‚ã‚‹ã„ã¯ä¸€éƒ¨ã‚’ç„¡æ–ã§åˆ©ç”¨ã™ã‚‹ã“ã¨ã‚’ç¦æ¢ã—ã¾ã™â 。個別ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ãŒè¨å®šã•ã‚Œã¦ã„る記事ç‰ã¯ãã®ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã«å¾“ã„ã¾ã™ã€‚
Nielsen Norman Group: usability consulting, training & user research reports
Learn with NN/g Increase your UX knowledge alongside other UX professionals or your own team. All live courses are created and taught by NN/g experts. Live Online Courses Popular Live Online Courses Practical AI for UX Professionals Leverage artificial intelligence tools to enhance your UX work and save valuable time interaction Design Systems and Pattern Libraries Increase design quality, consist
訳書『デザイニング・インターフェースã€ã«ã¤ã„ã¦
2012å¹´6月ã«å®Ÿæ–½ã—ãŸã€Žãƒ‡ã‚¶ã‚¤ãƒ‹ãƒ³ã‚°ãƒ»ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ•ã‚§ãƒ¼ã‚¹ã€èªæ›¸ä¼šè³‡æ–™ï¼ˆhttp://www.slideshare.net/noriyo/on-designinginterfaces）ã¸ã®ã‚¢ã‚¯ã‚»ã‚¹ãŒç¾åœ¨ã§ã‚‚多ã„ãŸã‚ã€ãã®éŽåŽ»ã®ã‚¤ãƒ™ãƒ³ãƒˆã«ä¾å˜ã—ãŸè¨˜è¿°ã‚’削除ï¼ä¿®æ£ã—ã¦ã€æ›¸ç±ç´¹ä»‹ã®ãƒ—レゼンテーションã¨ã—ã¦ã”覧ã„ãŸã ã‘るよã†ã«ã—ã¾ã—ãŸã€‚ Facebookページã®ä»¥ä¸‹ã®ãŠçŸ¥ã‚‰ã›ã‚‚ã‚ã‚ã›ã¦ã”覧ãã ã•ã„。 https://www.facebook.com/iaspectrum/posts/588575471256557Read less
ソシオメディア | UXデザインプãƒã‚»ã‚¹ã«ã¤ã„ã¦ã®è€ƒãˆæ–¹
UXデザインã®ãƒ—ãƒã‚»ã‚¹ã¯ã€UCD ã¨å‘¼ã°ã‚Œã‚‹ãƒ¦ãƒ¼ã‚¶ãƒ¼ä¸å¿ƒè¨è¨ˆã®è€ƒãˆæ–¹ã‚’ベースã¨ã—ã¦ã„ã¾ã™ã€‚ユーザーä¸å¿ƒè¨è¨ˆã®è€ƒãˆæ–¹ã¨ã¯ã€ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã®å„工程ã§ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚’å–り入れるã¨ã„ã†ã‚‚ã®ã§ã™ã€‚主ã«ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼èª¿æŸ»ã®çµæžœã‚’è¦æ±‚分æžã«å–り入れるã“ã¨ã€è¨è¨ˆæ®µéšŽã§ã¯ãƒ—ãƒãƒˆã‚¿ã‚¤ãƒ—制作ã¨ãã®ãƒ¦ãƒ¼ã‚¶ãƒ¼è©•ä¾¡ã‚’è¡Œã†ã“ã¨ã€ãã—ã¦é‹ç”¨ã®ä¸ã§ç¶™ç¶šçš„ã«ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‹ã‚‰ã®ãƒ•ã‚£ãƒ¼ãƒ‰ãƒãƒƒã‚¯ã‚’åŽé›†ã™ã‚‹ã“ã¨ãŒé‡è¦ã¨ã•ã‚Œã€è£½å“ï¼ã‚µãƒ¼ãƒ“スã®ãƒ©ã‚¤ãƒ•ã‚µã‚¤ã‚¯ãƒ«ã‚’通ã˜ã¦ã“れを繰り返ã—ã¾ã™ã€‚ã¤ã¾ã‚ŠUXã‚’å‘上ã•ã›ã‚‹ãŸã‚ã«ã¯ã€Try（試ã—ã«ã‚„ã£ã¦ã¿ã‚‹ï¼‰ã¨ Catch（状æ³ã‚’把æ¡ã—ã¦åˆ†æžã™ã‚‹ï¼‰ã®ã‚»ãƒƒãƒˆã‚’å復的ã«è¡Œã†ã“ã¨ãŒå¤§åˆ‡ã§ã™ã€‚ ã“ã‚Œã¯åˆ¥ã®è¨€ã„方をã™ã‚‹ã¨ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã«ã¯æ±ºã¾ã£ãŸç”ãŒãªãã€å¸¸ã«è©¦è¡ŒéŒ¯èª¤ãŒå¿…è¦ã ã¨ã„ã†ã“ã¨ã§ã™ã€‚å復的デザインã¯ã€å„フェーズå˜ä½ã€ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆå˜ä½ã€ãã—ã¦ã‚ˆã‚Šå¤§ããªäº‹æ¥ã‚„ブランドã¨ã„ã£ãŸå˜ä½ã§å¤šå±¤çš„ã«è©¦ã¿ã‚‹ã“ã¨ãŒæ±‚ã‚られã¦ã„ã¾ã™ã€‚ ウォータ
UX・UI・IAやアクセシビリティã®ã€Œå°‚門知è˜ã€ãŒå¢—ãˆã‚‹ã¾ã¨ã‚ - コムテブãƒã‚°
TL;DR コーディングやシステムã¯åˆ†ã‹ã‚‹ã‘ã©ã€æœ€çµ‚çš„ã«ä½¿ã„ã‚„ã™ã„è¨è¨ˆã‚„クライアントã•ã‚“ãŒç´å¾—ã™ã‚‹ã‚ˆã†ãªãƒ‡ã‚¶ã‚¤ãƒ³ã«ãªã‚‰ãªã„。ç´å“後ã«ä½¿ã„ã«ãã„箇所ãŒã‚ã‚‹ã¨è¨€ã‚れる。ãã†ãªã‚‹å‰ã«ã€Œä½•ã¨ãªã進ã‚ãªã„ã€ã‚ˆã†ã«ã‚µã‚¤ãƒˆåˆ¶ä½œã‚„サービス・アプリを作æˆã™ã‚‹å‰ã®æ®µéšŽã§çŸ¥ã£ã¦ãŠããŸã„知è˜ã€‚UX・UI・IA ã®é•ã„ãŒæ¼ 然ã¨ã—ã¦ã„ã‚‹ã¨ãã«ã€‚ IAï¼ˆæƒ…å ±ã‚¢ãƒ¼ã‚テクãƒãƒ£ï¼‰ ï¼‘ï¼ŽåŸºç¤ŽçŸ¥è˜ æƒ…å ±ã‚¢ãƒ¼ã‚テクãƒãƒ£ã¨ã¯ Web サイト全体ã®è¨è¨ˆå›³ã€æƒ…å ±ã‚’åˆ†ã‹ã‚Šã‚„ã™ãä¼ãˆã‚‹ã“ã¨ã€‚主ã«ï¼©ï¼¡ï¼ˆã‚¤ãƒ³ãƒ•ã‚©ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚¢ãƒ¼ã‚テクト）ãŒæ‹…当ã—ã¾ã™ã€‚国内ã§ã¯ãƒ‡ã‚£ãƒ¬ã‚¯ã‚¿ãƒ¼ãŒæ‹…当ã™ã‚‹ä¼šç¤¾ã‚‚多ã„ã¨æ€ã„ã¾ã™ã€‚æƒ…å ±ã‚¢ãƒ¼ã‚テクãƒãƒ£ã¯ã‚µã‚¤ãƒˆã‚’見ãŸç›®ã®å°è±¡ã ã‘ã§ãªãã€ç›®ã«è¦‹ãˆãªã„ã‚µã‚¤ãƒˆæ§‹é€ ã‚’ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹ã“ã¨ã§ã€ã‚ã‹ã‚Šã‚„ã™ã„サイトã«ã™ã‚‹æŠ€è¡“。 [スライド] 社内㮠IAï¼ˆæƒ…å ±ã‚¢ãƒ¼ã‚テクãƒãƒ£ï¼‰ç ”ä¿®ã®è¬›å¸«ã‚’ã—ã¦ã¿ãŸã€‚：ãã®ãƒ•ã‚©ãƒãƒ¼ã‚¢ãƒƒãƒ— | future-proof
ã™ã¦ããªå…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ を作るãŸã‚ã«èª¿ã¹ã¦ã¿ãŸã“㨠- console.blog(self);
入力フォームã£ã¦ã€åŸºæœ¬çš„ã«å¿Œã¿å«Œã‚れるもã®ã€‚é …ç›®ãŒãŸãã•ã‚“ã‚ã‚‹ã¨ã€ãã£ã¨ã‚¿ãƒ–ã‚’é–‰ã˜ãŸããªã‚‹ã€‚ æ—…è¡Œã«è¡Œãã¨ãã«ã€ã„ã‚ã„ã‚ãªæ—…行会社ã®å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ を見ãŸã‘ã©ã€ã‚ã¾ã‚Šä½¿ã„ã‚„ã™ããªã‹ã£ãŸã€‚ã¨ã„ã†ã‹ã€è¦‹ãŸçž¬é–“ã«å…¥åŠ›ã™ã‚‹æ°—ãŒå¤±ã›ã¦ã—ã¾ã†ã‚ˆã†ãªå…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ ãŒå¤šã‹ã£ãŸã€‚ 入力フォームã®å¤šã„ページã«é–¢ã‚ã‚‹ã“ã¨ãŒã‚ã‚‹ã®ã§ã€å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ ã«é–¢ã™ã‚‹è³‡æ–™ã‚’ã„ã‚ã„ã‚èªã‚“ã 。タブを閉ã˜ã‚‰ã‚Œãªã„よã†ã«ã€ä½¿ã„ã‚„ã™ã„入力フォームを考ãˆãŸã„。 入力フォームã«ã¤ã„ã¦èªã‚“ã ã‚‚ã® å‚考ã«ãªã£ãŸã®ã¯ã“れらã®è³‡æ–™ã€‚ã©ã®è³‡æ–™ã‚‚æ–°ã—ã„ã‚‚ã®ã§ã¯ãªã„ã‘ã©ã€å‚考ã«ãªã‚‹ã“ã¨ã¯ãŸãã•ã‚“ã‚ã£ãŸã€‚ 僕ã¯è‹±èªžãŒè‹¦æ‰‹ã§ã€ãã‚“ãªåƒ•ãŒèªã‚“ã 感想を書ãã®ã§é–“é•ã„ãŒã‚ã‚‹ã‹ã‚‚。間é•ã£ã¦ã„ãŸã‚‰æ•™ãˆã¦ãã ã•ã„。詳細ã¯åŽŸæ–‡ã‚’èªã‚“ã§ãã ã•ã„。 RIAC：RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
スマフォやタブレットã«æœ€é©ãªãƒŠãƒ“ゲーションã®è€ƒå¯Ÿ -見ãŸç›®ã®ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã§ã¯ãªãæ“作性ã§ï¼
スマートフォンã€ã‚¿ãƒ–レットã€ãƒ©ãƒƒãƒ—トップタイプã®ã‚¿ãƒ–レットãªã©ã€ã‚¿ãƒƒãƒãƒ‡ãƒã‚¤ã‚¹ã«æœ€é©ãªãƒŠãƒ“ゲーションã®è€ƒå¯Ÿã‚’紹介ã—ã¾ã™ã€‚ å˜ã«è¦‹ãŸç›®ã®ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã§ã¯ãªãã€æ“作性を考慮ã—ãŸãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã§ã™ã€‚ Responsive Navigation: Optimizing for Touch Across Devices 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ å„デãƒã‚¤ã‚¹ã®ã‚µã‚¤ã‚º å„デãƒã‚¤ã‚¹ã®ã‚¿ãƒƒãƒæ–¹æ³• タッãƒãƒ‡ãƒã‚¤ã‚¹ã«æœ€é©ãªãƒŠãƒ“ゲーションã®ä½ç½® デモ スマフォ・タブレット・ラップトップタブレットã®ã‚µã‚¤ã‚º ã¾ãšã¯ã€ãƒ‡ãƒã‚¤ã‚¹ã”ã¨ã®ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºã‚’確èªã—ã¦ã¿ã¾ã™ã€‚ éŽåŽ»2ヵ月ã«ãƒªãƒªãƒ¼ã‚¹ã—ãŸä¸»è¦ãªã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã®ã‚µã‚¤ã‚ºä¸€è¦§ã§ã™ã€‚
UXã¨UIãŒæ··åŒã•ã‚Œã‚‹ãƒ¯ã‚±
最近 UX 㨠UI ã‚’æ··åŒã—ã¦è¡¨è¨˜ã•ã‚Œã¦ã„ã‚‹ã®ã‚’見ã‹ã‘るよã†ã«ãªã‚Šã¾ã—ãŸã€‚ç§ã‚‚ウケやã™ã„ã¨ã„ã†ã“ã¨ã§ã€æ··åŒã•ã›ãŸã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ã—ã‹ã—実際ã®ã¨ã“ã‚ UX 㨠UI ã¯åŒç¾©èªžã§ã¯ã‚ã‚Šã¾ã›ã‚“。良ㄠUI デザインをã™ã‚Œã°ã€UX ãŒå‘上ã™ã‚‹å¯èƒ½æ€§ã¯ã‚ã‚Šã¾ã™ãŒã€å¿…ãšã—ã‚‚ãã†ã§ã¯ã‚ã‚Šã¾ã›ã‚“。逆もã—ã‹ã‚Šã§ã™ã€‚最近も UX 㨠UIã®é•ã„を分ã‹ã‚Šã‚„ã™ã表ç¾ã—よã†ã¨ã€ã‚·ãƒªã‚¢ãƒ«ã¨ãƒœãƒ¼ãƒ«ã®å†™çœŸã‚’使ã£ãŸä¾‹ãŒç™»å ´ã—ã¾ã—ãŸãŒã€ã€Œãã†ã§ã‚‚ãªã„ã€ã¨ã„ã†æ„見も多数ã‚ã‚Šã¾ã—ãŸã€‚ ãã‚Œã§ã¯ã€ãªãœæ··åŒã•ã‚Œã‚„ã™ã„ã®ã‹ã¨ã„ã†ã¨ã€ä»Šã®ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³å‘ã‘ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’見るã¨ãƒ’ントãŒéš ã•ã‚Œã¦ã„ã¾ã™ã€‚例ãˆã° Twitter クライアントã®ä¸ã§äººæ°—ã®ã‚ã‚‹ Tweetbot を見ã¦ã¿ã¾ã—ょã†ã€‚ã“ã®ã‚¢ãƒ—リã®ä¸ã§è£…飾ã¨å‘¼ã¹ã‚‹ãƒ‡ã‚¶ã‚¤ãƒ³ã¯ã©ã‚Œã ã‘ã‚ã‚‹ã§ã—ょã†ã‹ã€‚ã»ã¼çš†ç„¡ã ã¨æ€ã„ã¾ã™ã€‚ スマートフォンã¨ã„ã†å°ã•ãªã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã«ã¯ã€UI ã—ã‹å˜åœ¨ã—ã¾ã›ã‚“。
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
MockFlow - Wireframe Tools, Prototyping Tools, UI Mockups, UX Suite, Remote designing
{{#tags}}- {{label}}
{{/tags}}