Search Options
close
Search the following clips:
All Clips
Everyone's Clips
My Guides
Sign Up
Install
Learn More
Login
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
schneemoca
follow
0
6-4-2009 10:32 PM
40 views
Add a Comment
Login
to Comment. Not a member yet?
Sign up
Today's Top Clips
Shock Therapy on internet Addicts
Beautiful Butterfly [PICS]
The Ultimate in Christmas Displays
Bush or Obama: The Quiz
Jim DeMint Proposes Term Limits For Congress
Homophobic is a “made-up word”
Code Pink target and taunt children of military families
Rape Witness: 'I'm No Snitch'
Professor punches woman in face over argument about race
Very Nice Animal Photographs for Your Desktop
visit the
Top Clips page
View the Top Clips from
June 4, 2009
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://www.clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/8022af5f-9796-40a0-b0fb-59074468379c/3816CD6A-D3AF-4B00-8143-B0BAF43A6696/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html" href="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html" style="font-size: 11px;">coliss.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H1>ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips</H1></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P>ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P><A href="http://www.webdesignerdepot.com/2009/06/10-tips-to-create-a-more-usable-web/">10 Tips to Create a More Usable Web</A></P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h201">1. Creating active navigation</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">アクティブ機能をもったナビゲーションの設置</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="mT1em">サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h202">2. Clickable labels & buttons</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">ラベルやボタンをクリック可能に</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="mT1em">フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="mT1em">例：</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><DIV class="dp-highlighter"><DIV class="bar"><DIV class="tools"><A href="#">view plain</A><A href="#">copy to clipboard</A><A href="#">print</A><A href="#">?</A></DIV></DIV><OL start="1" class="dp-css"><LI class="alt"><SPAN><SPAN>label, button, input[type=</SPAN><SPAN class="string">"submit"</SPAN><SPAN>]{</SPAN><SPAN class="keyword">cursor</SPAN><SPAN>:</SPAN><SPAN class="value">pointer</SPAN><SPAN>;} </SPAN></SPAN></LI></OL></DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h203">3. Linking your logo</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">ロゴはリンクとして活用</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="mT1em">多くのユーザーは、ウェブページ上のロゴがトップページへのリンクであることを期待します。</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="mT1em">ロゴのリンクがどの程度利用されているかは、例えばリンクの記述を「/index.html?ref=logo」として測定することができます。</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h204">4. Increasing the hit area on a link</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">リンクのヒットエリアは大きく</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h205">5. Adding focus to form fields</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">フォームのフィールドにはフォーカスの指定</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h206">6. Providing a useful 404 page</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">有用な404ページを設置</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h207">7. Using language to create a casual environment</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">カジュアルな雰囲気を言葉遣いで演出</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h208">8. Applying line height for readability</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">リーダビリティのために適切なline-heightを</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h209">9. Utilizing white space to group elements</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">ホワイトスペースを有効活用</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><H2 id="h210">10. Being accessible</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://coliss.com/articles/build-websites/architectonics/usability/usability-10-tips-to-create-a-more-usable-web.html"><P class="accent1">アクセシブルであること</P></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;"> </td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/3816CD6A-D3AF-4B00-8143-B0BAF43A6696/blog/" title="blog or email this clip"><img src="http://content6.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
Clipmarks
Home
New Clips
Top Clips
Dashboard
Popular Topics
News
Life
Science
Technology
Entertainment
Get Started
Sign Up
Install Clipping Tool
How Clipping Works
Clip-to-Blog™
ClipSearch
Tools and Resources
FAQ
ClipWeek
Top Clippers
Top Tags
Site Map
About Clipmarks
About Us
Contact
Blog
Copyright
Privacy
EULA
OK
