ウェブマスター・制作者ã¯å¿…èªï¼ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒã‚µã‚¤ãƒˆã‹ã‚‰é›¢è„±ã—ã¦ã—ã¾ã†8ã¤ã®è¦å›
ナビゲーションãŒåˆ†ã‹ã‚Šã«ãㄠナビゲートã™ã‚‹ã“ã¨ãŒé›£ã—ã„サイトã¯ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚’失望ã•ã›ã¾ã™ã€‚複雑ã ã£ãŸã‚Šã€ä¸€è²«ã—ã¦ãªã‹ã£ãŸã‚Šã€ãã†ã„ã£ãŸãƒŠãƒ“ゲーションã¯ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚’困惑ã•ã›ã€è‹›ç«‹ã¡ã‚’æ„Ÿã˜ã•ã›ã‚‹ã‚‚ã®ã§ã™ã€‚
ã‚‚ã†ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚’è¿·ã‚ã›ãªã„ï¼ãƒŠãƒ“ゲーションメニューè¨ç½®ã®ã‚³ãƒ„
2013å¹´11月22æ—¥ Webサイト制作, ユーザビリティ ã©ã®Webサイトã«ã‚‚å¿…ãšã‚ã‚‹ã®ãŒãƒŠãƒ“ゲーションメニュー。å„コンテンツページã¸ãƒªãƒ³ã‚¯ã•ã‚Œã¦ã„る「Webサイトã®ç›®æ¬¡ã€ã§ã™ã€‚ã“ã®ç›®æ¬¡ã‚’ãã¡ã‚“ã¨è¨ç½®ã—ã¦ã„ãªã„ã¨ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¯æ¬²ã—ã„æƒ…å ±ãŒè¦‹ã¤ã‘られãšã€é›¢è„±çŽ‡ãŒé«˜ããªã‚Šã¾ã™ã€‚ãã®ã‚µã‚¤ãƒˆã§ã—ã‹æ‰‹ã«å…¥ã‚‰ãªã„ã€æœ¬å½“ã«å¿…è¦ãªæƒ…å ±ã§ãªã„é™ã‚Šã€ã“ã¡ã‚‰ã‹ã‚‰æ¡ˆå†…ã—ãªã„ã¨ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¯ã‚³ãƒ³ãƒ†ãƒ³ãƒ„を探ãã†ã¨ã—ã¾ã›ã‚“。ãã‚“ãªãƒŠãƒ“ゲーションメニューã«ã¤ã„ã¦è€ƒãˆã¦ã¿ã¾ã—ょã†ã€‚ ↑ç§ãŒ10年以上利用ã—ã¦ã„ã‚‹ä¼šè¨ˆã‚½ãƒ•ãƒˆï¼ ãƒŠãƒ“ã‚²ãƒ¼ã‚·ãƒ§ãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã®è¨ç½®ãƒã‚¤ãƒ³ãƒˆ ã™ã¹ã¦ã®ãƒšãƒ¼ã‚¸ã« 基本ä¸ã®åŸºæœ¬ã§ã™ãŒã€ãƒ¡ã‚¤ãƒ³ã®ãƒŠãƒ“ゲーションメニューã¯ã©ã®ãƒšãƒ¼ã‚¸ã«ã‚‚åŒã˜å ´æ‰€ã«è¨ç½®ã—ã¾ã—ょã†ã€‚ホームページã§ã—ã‹è¡¨ç¤ºã•ã‚Œãªã„…ãªã‚“ã¦ã“ã¨ãŒãªã„よã†ã«ã€‚ã¨ã„ã†ã®ã‚‚ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒæœ€åˆã«ãŸã©ã‚Šç€ãã®ãŒå¿…ãšã—もホームページã¨ã¯é™ã‚‰ãªã„ã‹ã‚‰ã§ã™ã€‚検索ã§ç‰¹å®šã®ã‚³ãƒ³ãƒ†ãƒ³
フォームã®ãƒ©ãƒ™ãƒ«ã¨å…¥åŠ›æ¬„を縦一列ã«é…ç½®ã™ã‚‹ã¨ã‚ˆã‚Šé€Ÿã書ãã“ã‚る三ã¤ã®ãƒã‚¤ãƒ³ãƒˆ
フォームã®ãƒ©ãƒ™ãƒ«ã¨å…¥åŠ›æ¬„を縦一列ã«é…ç½®ã™ã‚‹ã¨ã€æ¨ªä¸€è¡Œã«æ¯”ã¹ã¦ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒã‚ˆã‚Šé€Ÿã書ãã“ã‚る三ã¤ã®ãƒã‚¤ãƒ³ãƒˆã‚’紹介ã—ã¾ã™ã€‚ Why Users Fill Out Forms Faster With Top Aligned Labels 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ visual fixation visual direction vertical space ã¾ã¨ã‚ visual fixation 「visual fixationã€ã¯ä¸€ç‚¹ï¼ˆé¢ï¼‰ã‚’ã¿ã¤ã‚る固視ã®ã“ã¨ã§ã€ä¸Šè¨˜ã®äº”ã¤å…¥åŠ›é …ç›®ãŒã‚るフォームã§ã¯ã€æ¨ªä¸€è¡Œï¼š10箇所ã€ç¸¦ä¸€åˆ—：5箇所ã«ãªã‚Šã¾ã™ã€‚ 縦一列ã¯ä¸€ã¤ã®å…¥åŠ›é …ç›®ã«å¯¾ã—ã¦ã€åŠåˆ†ã®å›ºè¦–ã§ã™ã¿ã¾ã™ã€‚ visual direction 「visual directionã€ã¯è¦–æ–¹å‘ã§ã™ã€‚横一行ã¯æ°´å¹³ãƒ»åž‚ç›´æ–¹å‘ã®äºŒã¤ã‚’å¿…è¦ã¨ã—ã€ç¸¦ä¸€åˆ—ã¯æ°´å¹³æ–¹å‘ã®ä¸€ã¤ã®ã¿ã§ã™ã€‚ vertical space
ã‚ャズムを超ãˆã‚ï¼ - 団塊～シニア層å‘ã‘ã®Webè¨è¨ˆã€€ã‚„ã£ã¡ã‚ƒã„ã‘ãªã„10ã®ï¼µï¼©
一時期パソコン教室ã®è¬›å¸«ã‚’ã‚„ã£ã¦ã„ãŸã“ã¨ã«ã‚ˆã‚‹çµŒé¨“ã¨ã€æ˜¨ä»ŠWebサービスé‹ç”¨ã«ã‚ãŸã£ã¦ä¸é«˜å¹´å±¤ã‹ã‚‰ã®ã‚¯ãƒ¬ãƒ¼ãƒ ãªã©ã‚’自分ãªã‚Šã«ã¾ã¨ã‚ãŸçµæžœã¨ã—ã¦ã€50代以上ã®ãƒ¦ãƒ¼ã‚¶ã«å¯¾ã™ã‚‹Webサービス＆PCアプリケーションã®UIè¨è¨ˆã«ãŠã‘る以下10ã®TIPSを公開ã—ã¦ã¿ãŸã„ã¨æ€ã†ã€‚...ã¨ã„ã£ã¦ã‚‚ãŸã‹ã ã‹10個ã§åŽã¾ã‚‹ç°¡å˜ãªè©±ã§ã¯ãªã„ã®ã§ã€æ€ã„ã¤ã„ãŸã‚‰éƒ½åº¦è¿½åŠ ã—ã¦è¡ŒããŸã„。 ID，ニックãƒãƒ¼ãƒ を考ãˆã•ã›ã¦ã¯ã„ã‘ãªã„。åŠè§’英å—開始é™å®šã¯è«–外 IDやニックãƒãƒ¼ãƒ ãŒæ€ã„ã¤ã‹ãªã„æ–¹ãŒå¤šã„。ã“ã‚Œã¯ã‚·ãƒ‹ã‚¢ã«é™ã‚‰ãšã€ITリテラシーãŒãã‚Œã»ã©é«˜ããªã„若年層ã«ã¤ã„ã¦ã‚‚言ãˆã‚‹ã“ã¨ã€‚作るå´ã®äººé–“も「éŽåŽ»ã«Webã§ä½¿ã£ãŸID,Nicknameã¯å…¨ã¦ä½¿ã£ã¡ã‚ƒãƒ€ãƒ¡ã€‚何ã‹æ–°ã—ã„ã®ã‚’考ãˆã¦å…¥ã‚Œã¦ã¿ã¦ã€‚ã€ã¨è¨€ã‚れるã¨çµæ§‹æ‚©ã‚“ã˜ã‚ƒã†ã‚‚ã®ã€‚ãã‚Œã¨åŒã˜çŠ¶æ…‹ã«é™¥ã‚‹ã¨æ€ã£ã¦ã„ãŸã ã‘ã‚‹ã¨ã‚ã‹ã‚Šã‚„ã™ã„。「IDã®ã‹ã‚ã‚Šã«é›»è©±ç•ªå·ã§ã‚‚ã„ã„ã§ã™ã‚ˆã€ã¨ã„ã†ã¨çµ
充実ã—ãŸFAQã§ã€ãƒ¦ãƒ¼ã‚¶ã®å•é¡Œè§£æ±ºï¼‹æ…‹åº¦å¤‰å®¹ã‚’促㙠(ユーザビリティ実践メモ)
FAQã«é–¢ã™ã‚‹éŽåŽ»ã®å®Ÿè·µãƒ¡ãƒ¢ã€ŒFAQã®éš ã‚ŒãŸå½¹å‰²ã€ã§ã¯ã€FAQã®2ã¤ã®ç›®çš„ã‚’è¿°ã¹ã¾ã—ãŸã€‚ 1. ユーザã®ç–‘å•ã«ç”ãˆã‚‹ã“ã¨ã§ã€å•ã„åˆã‚ã›æ•°ã‚’削減ã™ã‚‹ 2. ユーザをサイトã®ã‚´ãƒ¼ãƒ«ã¸ã¨å°Žãæ”»ã‚ã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã¨ã—ã¦æ´»ç”¨ã™ã‚‹ 今回ã¯ã€ç‰¹ã«ã€Œæ”»ã‚ã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã€ã¨ã—ã¦ã®å…·ä½“çš„ãªå®Ÿè·µæ–¹æ³•ã‚’ã”紹介ã—ã¾ã™ã€‚ FAQã®ä¸ã§ãƒ¦ãƒ¼ã‚¶ãŒé–¢å¿ƒã‚’æŒã¤é …ç›®ã¯ã€ã‚µãƒ¼ãƒ“スや製å“ã®é¸å®šãƒã‚¤ãƒ³ãƒˆã¨ãªã£ã¦ã„ã‚‹å¯èƒ½æ€§ã‚‚ã‚ã‚Šã€ç«¶åˆä»–社ã«å‹ã‚‹ãŸã‚ã®è¨´æ±‚ãƒãƒ£ãƒ³ã‚¹ã¨ã—ã¦ã‚‚æ‰ãˆã‚‰ã‚Œã¾ã™ã€‚ユーザã«ã¨ã£ã¦å•é¡Œè§£æ±ºã¨ãªã‚‹æƒ…å ±æä¾›ã¯ã‚‚ã¡ã‚ã‚“ã§ã™ãŒã€ãã®ä¸ã§ã†ã¾ãサービス・製å“ã®è¨´æ±‚ã‚‚è¡Œã†ã“ã¨ã§ã€ãƒ¦ãƒ¼ã‚¶ã®æ…‹åº¦å¤‰å®¹ã‚’促ã™ã“ã¨ãŒã§ãã¾ã™ã€‚ ã¨ã‚ã‚‹æ•™æサイトã®ãƒ¦ãƒ¼ã‚¶è¡Œå‹•è¦³å¯Ÿèª¿æŸ»ã§ã¯ã€ã€Œä»•äº‹ã¨ä¸¡ç«‹ã§ãã‚‹ã®ï¼Ÿã€ã¨ã„ã†èª°ã—ã‚‚ãŒæŠ±ãä¸å®‰ãƒ»ç–‘å•ã‚’FAQã®ä¸ã«å‡ºã—ã€ãã®å›žç”ã¨ã—ã¦å…·ä½“çš„ãªå¼·ã¿ã‚’訴求ã™ã‚‹ã“ã¨ã§ã€ãƒ¦ãƒ¼ã‚¶ã®æ…‹åº¦å¤‰å®¹ã‚’å¼·ã促ã™ã“ã¨ã«æˆåŠŸã—ã¦ã„ã¾ã—ãŸã€‚ 方法2　体験
[JS]ユーザビリティã«é…æ…®ã—ãŸã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ã‚’実装ã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«
ユーザビリティã«é…æ…®ã—ã¤ã¤ã€jQueryã®ãƒã‚°ã«ã‚‚対応ã—ãŸã‚·ãƒ³ãƒ—ルãªã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ã‚’実装ã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’Soh Tanakaã‹ã‚‰ç´¹ä»‹ã—ã¾ã™ã€‚ Simple Accordion w/ CSS and jQuery デモページ アコーディオンã®ãƒã‚¸ãƒƒã‚¯ã¯ä¸‹è¨˜ã®é€šã‚Šã§ã™ã€‚ 最åˆã«ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã®è¨å®šã—ã¾ã™ã€‚ 一番目ã®ã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ã‚’é–‹ã„ã¦ã€ã‚¢ã‚¯ãƒ†ã‚£ãƒ–ãªçŠ¶æ…‹ã«ã—ã¾ã™ã€‚ クリックをã™ã‚‹ã¨ã€‚ クリックã•ã‚ŒãŸã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ã®ã‚¢ã‚¤ãƒ†ãƒ ã¯é–‹ãã®ã‹é–‰ã˜ã‚‹ã®ã‹åˆ¤å®šã—ã¾ã™ã€‚ 「hiddenã€ï¼ˆé–‰ã˜ãŸçŠ¶æ…‹ï¼‰ã®ã‚¢ã‚¤ãƒ†ãƒ をクリックã™ã‚‹ã¨ã€ å…¨ã¦ã®ã‚¢ã‚¤ãƒ†ãƒ ã‹ã‚‰ã€Œactiveã€ã‚’å–り去りã€é–‰ã˜ã¾ã™ã€‚ クリックã•ã‚ŒãŸã‚¢ã‚¤ãƒ†ãƒ ã¯ã€Œactiveã€ã«ãªã‚Šã€ã™ãã«ã‚¹ãƒ©ã‚¤ãƒ‰ãƒ€ã‚¦ãƒ³ã—ã¦é–‹ãã¾ã™ã€‚ ãƒã‚¸ãƒƒã‚¯ã®ã‚¤ãƒ¡ãƒ¼ã‚¸ã¯ã€ä¸‹è¨˜ã®ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚ <textarea name="code" class="html" cols="60" row
コンãƒãƒ¼ã‚¸ãƒ§ãƒ³ç›´å‰ã®ãƒ¦ãƒ¼ã‚¶ãŒã¤ã¾ãšãã‚„ã™ã„ãƒã‚¤ãƒ³ãƒˆ (ユーザビリティ実践メモ)
コンãƒãƒ¼ã‚¸ãƒ§ãƒ³çŽ‡å‘上を考ãˆãŸå ´åˆã€ã‚¨ãƒ³ãƒˆãƒªãƒ¼ãƒ•ã‚©ãƒ¼ãƒ 最é©åŒ–（EFO）ãªã©ã€ãƒ•ã‚©ãƒ¼ãƒ 内ã®æ”¹å–„ã«æ„è˜ãŒå‘ããŒã¡ã§ã™ãŒã€å®Ÿã¯ãƒ•ã‚©ãƒ¼ãƒ ã«å…¥ã‚‹å‰ã®æ®µéšŽã«ã‚‚改善ã™ã¹ã点ãŒæ®‹ã•ã‚Œã¦ã„ã‚‹å ´åˆãŒã‚ã‚Šã¾ã™ã€‚ 今回ã¯ãƒ•ã‚©ãƒ¼ãƒ ã«å…¥ã‚‹å‰ã®ãƒšãƒ¼ã‚¸ã§ã‚ˆãã¿ã‚‰ã‚Œã‚‹ã€ãƒ¦ãƒ¼ã‚¶ã®ã¤ã¾ãšãã‚„ã™ã„ãƒã‚¤ãƒ³ãƒˆã‚’ã”説明ã—ã¾ã™ã€‚ ウェブサイトを訪å•ã—ã¦ã„るユーザã«ã¨ã£ã¦ã€å€‹äººæƒ…å ±ã®å…¥åŠ›ãªã©ã®æ‰‹ç¶šã行為ã¯ä¸»ç›®çš„ã§ã¯ã‚ã‚Šã¾ã›ã‚“。商å“を購入ã—ãŸã‚Šã€ç”³ã—è¾¼ã¿å¾Œã«ã‚µãƒ¼ãƒ“スを利用ã™ã‚‹ã“ã¨ãŒæœ¬å½“ã®ç›®çš„ã§ã™ã€‚ãã®ç›®çš„ã«æ—©ã到é”ã™ã‚‹ãŸã‚ã€æ‰‹ç¶šã行為ã«ã¯ã§ãã‚‹ã ã‘手間をã‹ã‘ãšã€æ‰‹æ—©ã終ã‚らã›ã‚ˆã†ã¨ã™ã‚‹å‚¾å‘ãŒè¦‹ã‚‰ã‚Œã¾ã™ã€‚ ã“ã“ã§ã€æ³¨æ„ãŒå¿…è¦ãªã®ãŒæ‰‹ç¶šãã®é€”ä¸ã«ä¼šå“¡ç™»éŒ²ã®ã‚¹ãƒ†ãƒƒãƒ—ãŒã‚るケースã§ã™ã€‚ ECサイトã§ã¯ã€Œè³¼å…¥ã€ã®æ‰‹ç¶šãã®é€”ä¸ã§ã€Œæ—¢å˜/æ–°è¦ãƒ¦ãƒ¼ã‚¶ã€ã®æŒ¯ã‚Šåˆ†ã‘ãŒè¡Œã‚ã‚Œã‚‹å ´åˆãŒã‚ã‚Šã¾ã™ãŒã€ãƒ¦ãƒ¼ã‚¶ã¯æ‰‹ç¶šãã®ã‚¹ãƒ†ãƒƒãƒ—ã¨ã—ã¦ã€Œä¼šå“¡ç™»éŒ²ã€ãŒå¿…è¦ã‚ã‚‹ã“ã¨ã‚’å¿…ãšã—も事å‰
WEBページã«å¿…é ˆãªã‚·ãƒ³ãƒ—ルãªãƒ¦ãƒ¼ã‚¶ãƒ¼ãƒ“リティ「Five Simple but Essential Web Usability Tipsã€
TOP  >  WebDesign  >  WEBページã«å¿…é ˆãªã‚·ãƒ³ãƒ—ルãªãƒ¦ãƒ¼ã‚¶ãƒ¼ãƒ“リティ「Five Simple but Essential Web Usability Tips〠WEBを制作ã™ã‚‹ä¸Šã§ã€ã„ãã¤ã‹ãƒã‚¤ãƒ³ãƒˆãŒã‚ã‚‹ã‹ã¨æ€ã„ã¾ã™ãŒã€WEBã¯ä½¿ã‚れるもã®ãªã®ã§ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãƒ“リティã¯æœ€ã‚‚考ãˆãªãã¦ã¯è¡Œã‘ãªã„ã‚‚ã®ã®ä¸€ã¤ã§ã™ã€‚今日紹介ã™ã‚‹ã®ã¯WEBページを制作ã™ã‚‹ä¸Šã§ã€å¿…é ˆãªã‚·ãƒ³ãƒ—ルãªãƒ¦ãƒ¼ã‚¶ãƒ¼ãƒ“リティ「Five Simple but Essential Web Usability Tipsã€ã§ã™ã€‚ WEBページを制作ã—ã¦ã„ã上ã§ã€çŸ¥ã£ã¦ãŠã„ãŸæ–¹ãŒè‰¯ã„è¦ç´ ãŒç°¡å˜ã«ã¾ã¨ã‚られã¦ã„ã¾ã—ãŸã€‚今回ã¯æ„訳ã—ã¦ç´¹ä»‹ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ 詳ã—ãã¯ä»¥ä¸‹ 1.検索機能 ユーザーãŒæ±‚ã‚ã¦ã„ã‚‹æƒ…å ±ã‚’å«ã‚€ãƒšãƒ¼ã‚¸ã‚’ã¿ã¤ã‘られる検索機能。鮮やã‹ãªè‰²ã‚„ã€è™«çœ¼é¡ã‚¢ã‚¤ã‚³ãƒ³ç‰ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒåˆ†ã‹ã‚Šã‚„ã™ã„仕組ã¿ã‚‚å¿…è¦ã€‚ 2.Fã®æ³•å‰‡
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}