ウェブデザインã®ã‚»ãƒ³ã‚¹ã‚’å¦ã¼ã†ã€2012年上åŠæœŸæ´—ç·´ã•ã‚ŒãŸãƒ‡ã‚£ãƒ†ãƒ¼ãƒ«ã®UIデザインã®ã¾ã¨ã‚2012年上åŠæœŸã€ãƒã‚§ãƒƒã‚¯ã—ã¦ãŠããŸã„UIデザインをdribbbleã‹ã‚‰ç´¹ä»‹ã—ã¾ã™ã€‚ ã»ã¨ã‚“ã©ã®ã‚‚ã®ãŒPSDファイルをダウンãƒãƒ¼ãƒ‰ã§ãã‚‹ã®ã§ã€å‹‰å¼·ã«ãªã‚Šã¾ã™ã‚ˆã€‚
Webサイトã®èªã¿è¾¼ã¿ä½“感速度ãŒ2秒ãらã„上ãŒã‚‹ã‹ã‚‚。SNSボタンã¯å¾Œã‹ã‚‰èªã¿è¾¼ã‚ï¼ - Webå¦ã³
2012å¹´ 6月 13æ—¥ æ–°ã—ã„サーãƒãƒ¼ã§ãƒ–ãƒã‚°ã‚’リニューアルã—ã¦æ°—ãŒã¤ã„ãŸã€SNSボタンã®æœ‰ç„¡ã§ã‹ãªã‚Šèªã¿è¾¼ã¿é€Ÿåº¦ã«å·®ãŒã‚る。ã¨ã„ã£ã¦ã‚‚2,3秒ã»ã©ã§ã™ãŒã€ã“ã‚Œã¯çµæ§‹å‘½å–ã‚Šã ã£ãŸã‚Šã—ã¾ã™ã€‚ ã¾ãç§ã‚‚ãã‚“ãªã«è©³ã—ã„ã‚ã‘ã§ã¯ãªã„ã®ã§æ–言ã§ãã¾ã›ã‚“ãŒã€‚ ・訪å•è€…ã¯ãã®æ•°ç§’ã§ã‚µã‚¤ãƒˆã‹ã‚‰é€ƒã’ã‚‹ ・Googleã¯ãã®æ•°ç§’を評価基準ã«å…¥ã‚Œã‚‹ ãŸã—ã‹é…延ãƒãƒ¼ãƒ‰(Lazy Load)ã¨ã‹ã„ã†æŠ€è¡“ã§ã™ã。 ã‚ã‚Šã¨ãƒãƒ”ュラーãªã‚³ãƒ¼ãƒ‰ã§ä½•ã¨ã‹ãªã£ãŸã®ã§æ›¸ã„ã¨ãã¾ã™ã€‚ ピュアãªJavaScriptã§ã¯ãªãã€jQuery使ã„ã¾ã™ã。 方法ãã®ï¼‘ 時é™å¼èªã¿è¾¼ã¿ bodyé–‰ã˜ã‚¿ã‚°ã®å‰ã‚ãŸã‚Šã«æ›¸ãã¾ã™ã€‚ . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ã“ã“ã«ã€SNSã®ã‚³ãƒ¼ãƒ‰ã‚’書ã' + '一行ã§ã¤ãªã’ã¦ã‚‚良ã„ãŒè¦‹ã«
立体感ã®ã‚ã‚‹UIãŒæ‰‹è»½ã«åˆ©ç”¨ã§ãるフリーUIã‚ットã¾ã¨ã‚「New Creative UI Kit Free Downloadã€
TOP  >  Design  >  立体感ã®ã‚ã‚‹UIãŒæ‰‹è»½ã«åˆ©ç”¨ã§ãるフリーUIã‚ットã¾ã¨ã‚「New Creative UI Kit Free Download〠webサイトやスマートフォン特有ã®UIデザインã¯ã€è¦–èªæ€§ã¨ã‚¯ãƒªã‚¨ã‚¤ãƒ†ã‚£ãƒ–性ã®ä¸¡æ–¹ãŒæ±‚ã‚られるクオリティã®ãƒ‘ーツ制作ãŒå¿…è¦ä¸å¯æ¬ ã¨ãªã£ã¦ãã¾ã™ã€‚ãã“ã§ä»Šå›žã¯ã€ç«‹ä½“æ„Ÿã®ã‚ã‚‹UIを手軽ã«åˆ©ç”¨ã§ãるフリーUIã‚ットをã¾ã¨ã‚ãŸã€ŒNew Creative UI Kit Free Downloadã€ã‚’紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ Simple UI Kit – Icon Deposit カラートーンã®ç•°ãªã‚‹UIã‚ットãŒã€ã„ãã¤ã‚‚紹介ã•ã‚Œã¦ã„ã¾ã™ã€‚ä¸ã§ã‚‚æ°—ã«ãªã£ãŸã‚‚ã®ã„ãã¤ã‹ãƒ”ックアップã—ã¾ã—ãŸã®ã§ã€ä¸‹è¨˜ã‚ˆã‚Šã”覧ãã ã•ã„。 詳ã—ãã¯ä»¥ä¸‹ â– Vector UI Bundle – Icon Deposit シンプルãªã‚«ãƒ©ãƒ¼ãƒªãƒ³ã‚°ã®UIã‚ットã§ã™ã€‚è½ã¡ç€
Photoshopã§ä½œæˆã—ãŸã‹ã®ã‚ˆã†ãªã‚¯ã‚ªãƒªãƒ†ã‚£ã®ãƒœã‚¿ãƒ³ã‚„ナビゲーションをCSSã§ä½œã£ã¦ã¿ãŸï¼çš„ãªã‚‚ã®ã ã‘を集ã‚ãŸã‚®ãƒ£ãƒ©ãƒªãƒ¼ãƒ»CSSDeck - ã‹ã¡ã³ã¨.net
CSS3ã§ã“ã‚“ãªã‚¯ã‚ªãƒªãƒ†ã‚£ã®ãƒœã‚¿ãƒ³ãŒä½œã‚Œã‚‹ï¼ ã¿ãŸã„ãªè¨˜äº‹ã‚’よã見ã‹ã‘ã‚‹ã¨æ€ã†ã‚“ã§ã™ãŒã€ ãã†ã„ã£ãŸã‚‚ã®ã ã‘を集ã‚ãŸãƒ‡ã‚¶ã‚¤ãƒ³ã‚®ãƒ£ãƒ© リーãŒã‚ã‚Šã¾ã—ãŸã®ã§ã‚·ã‚§ã‚¢ã€‚CSSã®å‹‰å¼·ã« 如何ã§ã—ょã†ã€‚ã•ã‚‚Photoshopã§ä½œã£ãŸã‹ã® よã†ãªã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆãŒè±Šå¯Œã«ã‚ã‚Šã¾ã™ã€‚ タイトルよã分ã‹ã‚‰ã‚“ã§ã™ãｗ　CSS3ã®ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚„box-shadowãªã©ã‚’駆使ã—ã¦ã€ä»Šã¾ã§ã¯Photoshopã§ä½œæˆã—ã¦ã„ãŸã‹ã®ã‚ˆã†ãªã‚¯ã‚ªãƒªãƒ†ã‚£ã®ãƒœã‚¿ãƒ³ãªã©ã‚’作ã£ãŸï¼ã¿ãŸã„ãªè¨˜äº‹ã‚’多々見ã‹ã‘ã¦ããŸã‹ã¨æ€ã„ã¾ã™ãŒã€ãã†ã„ã£ãŸã‚‚ã®ã ã‘を集ã‚ãŸãƒ‡ã‚¶ã‚¤ãƒ³ã‚®ãƒ£ãƒ©ãƒªãƒ¼ã§ã™ã€‚ 一見よãã‚るパーツデザインギャラリーやã€dribbbleã£ã½ã„æ„Ÿã˜ã§ã™ãŒã€ã“れらã®ãƒœã‚¿ãƒ³ç‰ã¯å…¨ã¦cssã§ä½œæˆã•ã‚Œã¦ã„ã¾ã™ã€‚ãã‚Œã ã‘ã§ãªãã€ã‚½ãƒ¼ã‚¹ã‚‚公開ã•ã‚Œã¦ã„ã¾ã™ã®ã§çµæ§‹é‡å®ã—ãã†ãªã‚µã‚¤ãƒˆã§ã™ã。 ã“ã‚“ãªç«‹ä½“æ„Ÿã®ã‚るボタンã¨ã‹ã€‚ ã“ã‚“ãªã‚½ãƒ¼ã‚·ãƒ£ãƒ«ãƒœã‚¿ãƒ³ã¨ã‹ã€‚ ソース
[CSS]金属ã®è³ªæ„ŸãŒç¾Žã—ã™ãŽã‚‹ã€ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã§å®Ÿè£…ã•ã‚ŒãŸãƒœã‚¿ãƒ³
ボタンをクリックã™ã‚‹ã¨ãƒ–ルーã«è¼ãã¾ã™ 対応ブラウザã¯Safari5.1, Chromeã§ã™ã€‚ 矩形ã«ä½¿ç”¨ã—ã¦ã„る線状ã®ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ï¼ˆæ•°å—ã®ãƒœã‚¿ãƒ³ï¼‰ã¯ä»–ã®ãƒ–ラウザã§ã‚‚表示ã§ãã¾ã™ãŒã€å††éŒçŠ¶ã®ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ï¼ˆé£›è¡Œæ©Ÿã®ãƒœã‚¿ãƒ³ï¼‰ã¯Safari, Chromeã®ã¿ã§ç¾Žã—ã表示ã•ã‚Œã¾ã™ã€‚ 円éŒçŠ¶ã®ä»•çµ„ã¿ã¯ã€Œradial-gradientã€ã‚’é‡ãã¦ã‚¹ã‚¿ã‚¤ãƒ«ã—ã¦ã„ã¾ã™ã€‚
[CSS]シンプルã§ä½¿ã„ã‚„ã™ã„GitHub風ã®ãƒœã‚¿ãƒ³ã‚’ç°¡å˜ã«å®Ÿè£…ã§ãるスタイルシート
GitHubスタイルã®ã‚·ãƒ³ãƒ—ルã§ä½¿ã„ã‚„ã™ã„ボタンをclassã®æŒ‡å®šã ã‘ã§ç°¡å˜ã«å®Ÿè£…ã§ãるスタイルシートを紹介ã—ã¾ã™ã€‚ CSS3 GitHub Buttons [ad#ad-2] 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ デモページã¯ãƒœã‚¿ãƒ³ã®æ–‡è¨€ã‚’日本語ã«ã—ã€ã‚·ãƒ³ãƒ—ルã—ãŸã‚‚ã®ã‚’アップã—ã¾ã—ãŸã€‚ デモページ（当方日本語化） 普通ã®ãƒœã‚¿ãƒ³ 注æ„を促ã™ãƒœã‚¿ãƒ³ 大ãã„ボタン グループ化ã—ãŸãƒœã‚¿ãƒ³ グループ化ã—ãŸã‚‚ã®ã‚’ã¾ã¨ã‚ãŸãƒœã‚¿ãƒ³ アイコンを伴ã£ãŸãƒœã‚¿ãƒ³ 対応ブラウザ ライセンス 普通ã®ãƒœã‚¿ãƒ³ 普通ã®ãƒœã‚¿ãƒ³ã¯ã€aè¦ç´ ã€buttonè¦ç´ ã€inputè¦ç´ ãªã©ã‚らゆるè¦ç´ ã§ä½œã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ ボタンを作るãŸã‚ã«ã¯ã€ã€Œclass="button"ã€ã‚’åŠ ãˆã‚‹ã ã‘ã§ã™ã€‚ デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
最近ã®ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ•ã‚§ã‚¤ã‚¹ãƒ‡ã‚¶ã‚¤ãƒ³ã‹ã‚‰å¦ã¶ã€7種類ã®ãƒœã‚¿ãƒ³ãƒ‡ã‚¶ã‚¤ãƒ³
ユーザーã®ã‚¢ã‚¯ã‚·ãƒ§ãƒ³ã‚’誘ã†è³¼å…¥ã‚„é€ä¿¡ã‚„検索ボタンãªã©ã€æœ€è¿‘ã®ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ•ã‚§ã‚¤ã‚¹ãƒ‡ã‚¶ã‚¤ãƒ³ã§ã‚ˆã見ã‹ã‘ã‚‹7種類ã®ãƒœã‚¿ãƒ³ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’紹介ã—ã¾ã™ã€‚ Common elements used in interface button design [ad#ad-2] 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ã¾ãŸã€å…ƒè¨˜äº‹ã§ã¯ãã‚Œãžã‚Œã®ãƒœã‚¿ãƒ³ã‚’作æˆã™ã‚‹Photoshopã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚‚掲載ã•ã‚Œã¦ã„ã¾ã™ã€‚ 1. テクスãƒãƒ£ã‚’使ã£ãŸãƒœã‚¿ãƒ³ 2. パターンを使ã£ãŸãƒœã‚¿ãƒ³ 3. 3Dを使ã£ãŸãƒœã‚¿ãƒ³ 4. 1ピクを使ã£ãŸãƒœã‚¿ãƒ³ 5. 背景をインデントã—ãŸãƒœã‚¿ãƒ³ 6. ã‚°ãƒã‚¦ã‚’使ã£ãŸãƒœã‚¿ãƒ³ 7. ãƒã‚¤ãƒ©ã‚¤ãƒˆã‚’使ã£ãŸãƒœã‚¿ãƒ³ 1. テクスãƒãƒ£ã‚’使ã£ãŸãƒœã‚¿ãƒ³ テクスãƒãƒ£ã¯ãƒœã‚¿ãƒ³ã«ã‚ãšã‹ãªå¥¥è¡Œãを与ãˆã€ã‚¯ãƒªãƒƒã‚¯ãŒå¯èƒ½ã§ã‚ã‚‹ã“ã¨ãŒåˆ†ã‹ã‚‹ã‚ˆã†ã«ã™ã‚‹ç´ 晴らã—ã„テクニックã§ã™ã€‚
グーグルã®ã€Œ+1ã€ãƒœã‚¿ãƒ³ã€ã‚¦ã‚§ãƒ–サイトã§å®Ÿè£…å¯èƒ½ã«--ソーシャルã«å¯¾ã™ã‚‹æ–°ãŸãªè©¦ã¿
Googleã¯ç±³å›½æ™‚é–“6月1æ—¥ã€ã€Œ+1ã€ãƒœã‚¿ãƒ³ã‚’ウェブ全体ã«å…¬é–‹ã—ãŸã€‚「Buzzã€ã§ã¯Facebookã‚„Twitterを上回るã“ã¨ãŒã§ããªã‹ã£ãŸåŒç¤¾ã ãŒã€ä»Šåº¦ã¯è‡ªç¤¾ãŒæä¾›ã™ã‚‹ã‚¦ã‚§ãƒ–サービスã«ã‚½ãƒ¼ã‚·ãƒ£ãƒ«ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯æ©Ÿèƒ½ã‚’構築ã™ã‚‹ã¨ã„ã†ã€ã‚ˆã‚Šå …実ãªæˆ¦ç•¥ã«å‡ºãŸã€‚ +1ボタンã¯ã€ã‚るウェブサイトã«ã¤ã„ã¦ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒè‡ªåˆ†ã®ã‚½ãƒ¼ã‚·ãƒ£ãƒ«ã‚µãƒ¼ã‚¯ãƒ«ã«æŽ¨è–¦ã™ã‚‹æ©Ÿèƒ½ã§ã‚る。ウェブサイトé‹å–¶è€…ã¯ä»Šå›žã€è‡ªåˆ†ã®ã‚µã‚¤ãƒˆã«+1ãƒœã‚¿ãƒ³ã‚’è¿½åŠ ã§ãるよã†ã«ãªã£ãŸã€‚Googleã§+1担当プãƒã‚°ãƒ©ãƒžãƒ¼ã‚’å‹™ã‚ã‚‹Evan Gilbertæ°ã¯ãƒ–ãƒã‚°æŠ•ç¨¿ã§ã€Googleã«åŠ ãˆã¦ã€Washington Postã€O'Reillyã€Best Buyã¨ã„ã£ãŸãƒ‘ートナーä¼æ¥ãŒã™ã§ã«ã“ã®æ©Ÿèƒ½ã‚’è¿½åŠ ã—ã¦ã„ã‚‹ã¨è¿°ã¹ãŸã€‚ 「1回クリックã™ã‚‹ã ã‘ã§ã€ãƒ¬ã‚¤ãƒ³ã‚³ãƒ¼ãƒˆã‚„ニュース記事ã€ãŠæ°—ã«å…¥ã‚Šã®SFæ˜ ç”»ã‚’ã€å‹äººã‚„知人や世界ä¸ã®äººã€…ã«å‹§ã‚ã‚‹ã“ã¨ãŒã§ãる。ã‚ãªãŸã¨ã¤
Photoshopã®ãƒ“ギナーã§ã‚‚ã§ãるディテールã«ã“ã ã‚ã£ãŸãƒœã‚¿ãƒ³ã‚’作æˆã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«
Photoshopã®æ¨™æº–機能ã ã‘ã§ã€ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚„レイヤースタイルをã¤ã‹ã£ãŸç¾Žã—ã„ボタンを作æˆã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’紹介ã—ã¾ã™ã€‚ Photoshop For Beginners: Creating buttons for web part 1 Photoshop For Beginners: Creating buttons for web part 2 [ad#ad-2] 上記ã€å››ã¤ã®ãƒœã‚¿ãƒ³ã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã¯Part 1, 2ã«åˆ†ã‹ã‚Œã¦ãŠã‚Šã€ãã‚Œãžã‚ŒäºŒã¤ãšã¤ã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ãŒæŽ²è¼‰ã•ã‚Œã¦ã„ã¾ã™ã€‚ å„ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã¯Photoshopã®ã‚ャプãƒãƒ£ä»˜ããªã®ã§ã€è‹±èªžãŒè‹¦æ‰‹ãªæ–¹ã§ã‚‚ã©ã®ã‚ˆã†ãªãƒ•ãƒãƒ¼ã§ã™ã™ã‚ã‚‹ã‹ç†è§£ã§ãã‚‹ã¨æ€ã„ã¾ã™ã€‚ ボタンã¯ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚„レイヤースタイルã¨ã„ã£ãŸçŽ‹é“ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã ã‘ã§ãªãã€ãƒŽã‚¤ã‚ºã‚’ã®ã›ãŸã‚Šãƒ©ã‚¤ãƒˆã‚’ãã‚ãˆãŸã‚Šã¨ç´°éƒ¨ã¾ã§ã—ã£ã‹ã‚Šæ‰‹ãŒã¯ã„ã£ãŸä½œã‚Šã«ãªã£ã¦ã„ã¾ã™ã€‚
CSS3ã ã‘ã§ã¤ãã‚‹Webボタンï¼æŠ¼ã•ãšã«ã¯ã„られãªã„ボタン簡å˜3ステップ
インターンシップã«ãã¦ã„ã¾ã™ã€‚ ã“ã‚“ã«ã¡ã‚。(・`д・ノ)ノ é¢ç™½æ³•äººã‚«ãƒ¤ãƒƒã‚¯ã§ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ³ã‚·ãƒƒãƒ—ä¸ã®ã©ã†ã‚‚ã½ã‚“ãŸã§ã™ã€‚ 先週ã€éŽŒå€‰æœ¬ç¤¾ã‹ã‚‰è‡ªç”±ãŒä¸˜æ”¯ç¤¾ã«ç§»ã‚Šã¾ã—ãŸã€‚ 自由ãŒä¸˜ã«æ¥ãŸã®ã¯åˆã‚ã¦ãªã®ã§ã€ã€Œä¸˜ãªã„ãªã。ã€ã£ã¦æ€ã„ã¾ã—ãŸã€‚ ãã—ã¦ã“ã¡ã‚‰ã¯ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ³ç ”ä¿®ã§ã€æ›¸ã„ã¦ã„るエントリーã§ã™ã€‚ ã©ã†ã‹æŸ”らã‹ã„ã¾ãªã–ã—ã§è¦‹å®ˆã£ã¦ä¸‹ã•ã„ã¾ã›ï¼ 今回ã¯ç”»åƒã‚’使ã‚ãšã€CSS3ã ã‘ã§Webボタンをã¤ãる方法を紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ã¨ã„ã£ã¦ã‚‚僕自身ã¤ãã£ãŸã“ã¨ãŒãªã„ã®ã§ã€ä¸€ç·’ã«æŒ‘戦ã—ã¾ã—ょã†ï¼ï¼ ã¤ã¥ãã‹ã‚‰ã©ã†ãžï¼ ã™ã”ã„よï¼CSS3 ≫ CSS3ã®ã¿ã§ã¤ãã£ã¦ã„るボタンを紹介ã—ã¦ã„る凄ã„サイトãŒã‚ã‚Šã¾ã™ã€‚ ラムãƒã®ã‚ˆã†ãªãƒ†ã‚¤ã‚¹ãƒˆã®ãƒœã‚¿ãƒ³ã§ã™ãªã€‚ ã“れを画åƒãªã—ã§ã¤ãã£ã¦ã‚‹ã£ã¦ã„ã†ã‹ã‚‰ã‚¹ã‚´ã‚¤ï¼ ã“ã“ã¾ã§ãƒ¬ãƒ™ãƒ«ã®é«˜ã„ボタンã¯ã¤ãã‚Œãªã„ã®ã§ã€ 基本é‡è¦–ã®ã‚·ãƒ³ãƒ—ルãªCSSボタンをã¤ãã‚ã†ã¨æ€ã„ã¾ã™ã€‚ ã¾ãšã¯C
ä¸å°ä¼æ¥ã®ãƒ“ジãƒã‚¹ã‚µã‚¤ãƒˆã«åŠ¹æžœã‚’与ãˆã‚‹5ã¤ã®ãƒ‡ã‚¶ã‚¤ãƒ³ãƒˆãƒ¬ãƒ³ãƒ‰
é™ã‚‰ã‚ŒãŸäºˆç®—ã¨æ™‚é–“ã®ä¸ã§ã€å•†å“ã®è²©å£²ã€è³‡æ–™è«‹æ±‚やダウンãƒãƒ¼ãƒ‰ãªã©ã®ãƒ“ジãƒã‚¹ã‚µã‚¤ãƒˆã®ã‚´ãƒ¼ãƒ«ã‚’é”æˆã™ã‚‹ãŸã‚ã«åŠ¹æžœçš„ãªãƒ‡ã‚¶ã‚¤ãƒ³ãƒˆãƒ¬ãƒ³ãƒ‰ã‚’紹介ã—ã¾ã™ã€‚ 5 Small Biz Web Design Trends to Watch 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ã¯ã˜ã‚ã« 1. ミニマリスト 2. 独自ã®å†™çœŸ 3. 大胆ãªã‚¿ã‚¤ãƒã‚°ãƒ©ãƒ•ã‚£ 4. アクションã®å‘¼ã³ã‹ã‘ボタン 5. A/B テスト ã¯ã˜ã‚ã« ä¸å°ä¼æ¥ã®ã‚¦ã‚§ãƒ–サイトã§ã¯ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®æ³¨æ„ã‚’å–ã‚Šè¾¼ã¿ãƒ–ラウジングをã†ãªãŒã—ã€ã‚ãªãŸã®ãƒ—ãƒãƒ€ã‚¯ãƒˆã‚ã‚‹ã„ã¯ã‚µãƒ¼ãƒ“スã«ãŠã‘る利害関係を起ã“ã—ã¦ã€è²©å£²ã¸ã¨çµã³ã¤ã‘ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ é™ã‚‰ã‚ŒãŸæ™‚é–“ã¨äºˆç®—ã®ä¸ã§ã€å°‘ã—ã§ã‚‚多ãã®å¯èƒ½æ€§ã®ã‚るユーザーã«èˆˆå‘³ã‚’ã‚‚ã£ã¦ã‚‚らã†ã«ã¯ãƒ‡ã‚¶ã‚¤ãƒ³ã¯å¿…é ˆãªè¦ç´ ã§ã™ã€‚ ã“ã“ã«ä¸å°ä¼æ¥ã®ã‚¦ã‚§ãƒ–サイトã«å¤§ããªåŠ¹æžœã‚’与ãˆã‚‹5ã¤ã®ãƒ‡ã‚¶ã‚¤ãƒ³ãƒˆãƒ¬ãƒ³ãƒ‰ãŒã‚ã‚Šã¾ã™ã€‚ 1. ミニマリスト Ambl
[JS]ã‚ãªãŸã®ã‚¦ã‚§ãƒ–ページを52ã®è¨€èªžã«è‡ªå‹•ç¿»è¨³ã™ã‚‹ãƒœã‚¿ãƒ³ã‚’ç°¡å˜ã«è¨ç½®ã§ãã‚‹ -Translate This Button
<textarea name="code" class="html" cols="60" rows="5"> <!-- Begin TranslateThis Button --> <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script> <script type="text/javascript"> Trans
後ã§ã¤ãªãŽåˆã‚ã›ã‚‹å¿…è¦ãªã—ï¼ Webページã®ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚·ãƒ§ãƒƒãƒˆãŒä¸€ç™ºã§æ’®ã‚Œã‚‹ã€ŒCapture Full Page〠| ライフãƒãƒƒã‚«ãƒ¼ãƒ»ã‚¸ãƒ£ãƒ‘ン
Webページã®ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚·ãƒ§ãƒƒãƒˆã‚’撮る時ã«ã€é•·ã€œã€œã€œã€œã„Webページを何回ã‹ã«åˆ†ã‘ã¦æ’®ã£ã¦ã€å¾Œã§æ‰‹å‹•ã§ç¹‹ãŽåˆã‚ã›ã‚‹ã®ã¯ã€æœ¬å½“ã«é¢å€’ã§ã™ã‚ˆã。ãã‚“ãªæ™‚ã«ã‚ªã‚¹ã‚¹ãƒ¡ã®WebアプリãŒã€ŒCapture Full Pageã€ã§ã™ã€‚ Capture Full Pageãªã‚‰ã€Webページã®ãƒ•ãƒ«ã‚µã‚¤ã‚ºã®ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚·ãƒ§ãƒƒãƒˆã‚’撮るã“ã¨ãŒã§ãã¾ã™ã€‚ã‚‚ã¡ã‚ã‚“ã€å¾Œã§ç¹‹ãŽåˆã‚ã›ã‚‹ã‚ˆã†ãªä½œæ¥ã¯ã€ä¸€åˆ‡å¿…è¦ã‚ã‚Šã¾ã›ã‚“。 Capture Full Pageã«ã‚¢ã‚¯ã‚»ã‚¹ã—ãŸã‚‰ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚·ãƒ§ãƒƒãƒˆã‚’撮りãŸã„ページã®URLを入力ã—ã€ã€ŒTake Screenshotã€ãƒœã‚¿ãƒ³ã‚’クリックã™ã‚‹ã ã‘ã§OKã§ã™ã€‚スクリーンショット画åƒã®ã‚µã‚¤ã‚ºã‚„ã€ãƒ•ã‚¡ã‚¤ãƒ«å½¢å¼ã‚’é¸æŠžã™ã‚‹ã“ã¨ã‚‚ã§ãã¾ã™ã€‚Capture Full Pageã§è©¦ã—ã«æ’®ã£ã¦ã¿ãŸã€ç±³ãƒ©ã‚¤ãƒ•ãƒãƒƒã‚«ãƒ¼ã®ãƒˆãƒƒãƒ—ページã¯ã‚³ãƒãƒ©ã§ã™ã€‚ Capture Full Pageã¯ã€ç™»éŒ²ãªã—ã§ä½¿ãˆã‚‹ã€ç„¡æ–™ã®We
æ–°ç€è¨˜äº‹
『フォトショップ・ブイアイピーã€ã®æ–°ç€è¨˜äº‹ã§ã™ã€‚フォトショップやデザインをãŸã®ã—むウェブサイト。2009年３月創刊以æ¥ã€3800を超ãˆã‚‹ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’æ›´æ–°ã—ã¦ã„ã¾ã™ã€‚フリーフォントãªã©ã®ç„¡æ–™ãƒ‡ã‚¶ã‚¤ãƒ³ç´ æï¼é…色やWeb制作ã¨ã„ã£ãŸæœ€æ–°ãƒˆãƒ¬ãƒ³ãƒ‰ã‚‚公開ä¸ã€‚
[CSS]ç”»åƒã«ã‚‚è² ã‘ãªã„クオリティã®ãƒœã‚¿ãƒ³ã‚’実装ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ | コリス
CSS3を使用ã—ã¦ã€ãƒ‡ã‚£ãƒ†ãƒ¼ãƒ«ã«ã“ã ã‚ã£ãŸãƒœã‚¿ãƒ³ã‚’実装ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’Inferenceã‹ã‚‰ç´¹ä»‹ã—ã¾ã™ã€‚ Creating a Realistic Looking Button with CSS3 実装ã•ã‚ŒãŸãƒ‡ãƒ¢ã¯ã€å…ƒè¨˜äº‹ã®ä¸‹ã€ŒShow and Tellã€ã§ç¢ºèªã§ãã¾ã™ã€‚ 対応ブラウザã¯Fx3.6, Safari4, Chromeã§ã€IE8ã§ã¯è§’丸ã¨ã‚¢ã‚¯ãƒ†ã‚£ãƒ–時ã®ã‚¹ã‚¿ã‚¤ãƒ«ãŒæ¬ ã‘ã¾ã™ã€‚ 実装：HTML ディテールã«ã“ã ã‚ã£ã¦ã„ã‚‹ãŸã‚ã€HTMLã¯ç…©é›‘ãªã‚‚ã®ã«ãªã£ã¦ã„ã¾ã™ã€‚ã“れらã¯CSSã®æŒ‡å®šã«æ„味をãªã—ã¾ã™ã€‚ <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>
ウェブåˆå¿ƒè€…も安心ã—ã¦ä½œæˆã§ãã‚‹ã€ç„¡æ–™HTMLãƒ†ãƒ³ãƒ—ãƒ¬ãƒ¼ãƒˆç´ æ24個ã¾ã¨ã‚ - PhotoshopVIP
『フォトショップ・ブイアイピーã€ã®æ–°ç€è¨˜äº‹ã§ã™ã€‚フォトショップやデザインをãŸã®ã—むウェブサイト。2009年３月創刊以æ¥ã€3800を超ãˆã‚‹ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’æ›´æ–°ã—ã¦ã„ã¾ã™ã€‚フリーフォントãªã©ã®ç„¡æ–™ãƒ‡ã‚¶ã‚¤ãƒ³ç´ æï¼é…色やWeb制作ã¨ã„ã£ãŸæœ€æ–°ãƒˆãƒ¬ãƒ³ãƒ‰ã‚‚公開ä¸ã€‚
ブãƒã‚°ã«Twitterボタンを付ã‘る方法
Webサイトã®è¨ªå•è€…を増やã™ãŸã‚ã«ã¯ã€ã‚½ãƒ¼ã‚·ãƒ£ãƒ«æ©Ÿèƒ½ã®æ´»ç”¨ã¯æ¬ ã‹ã›ã¾ã›ã‚“。ãã“ã§å…ˆé€±æœ«ã«å°‘ã—ã ã‘ã“ã®ãƒ–ãƒã‚°ã®æ©Ÿèƒ½è¿½åŠ ã‚’ã—ã¾ã—ãŸã€‚日付欄ã®å³ã«ä»˜ã„ã¦ã„るよã†ã«ã€ã¯ã¦ãªãƒ–ックマークã€Del.icio.usã€ãã—ã¦Twitterã«å¯¾å¿œã—ãŸãƒœã‚¿ãƒ³ã‚’è¿½åŠ ã—ãŸã®ã§ã™ã€‚ ã¯ã¦ãªãƒ–ックマークやDel.icio.usã®ãƒœã‚¿ãƒ³ã¯ã€ãã‚Œãžã‚Œã®Webサイトã«ãƒœã‚¿ãƒ³ã®ä½œã‚Šæ–¹ãŒç´¹ä»‹ã•ã‚Œã¦ã„ã¾ã™ã€‚ ã¯ã¦ãªãƒ–ックマークã¯ã€ã“ã®ãƒšãƒ¼ã‚¸ã§ãƒ–ãƒã‚°åˆ¥ã«ãƒœã‚¿ãƒ³ã®è¿½åŠ 方法ãŒç´¹ä»‹ã•ã‚Œã¦ã„ã¾ã™ã€‚ 自分ã®ãƒ–ãƒã‚°ã«ã€Œâ†‘Bã€ã‚¢ã‚¤ã‚³ãƒ³ã‚’表示ã™ã‚‹ Del.icio.usã§ã¯ã€ã“ã®ãƒšãƒ¼ã‚¸ã«ãƒœã‚¿ãƒ³ã®è¿½åŠ 方法ãŒç´¹ä»‹ã•ã‚Œã¦ã„ã¾ã™ã€‚Del.icio.usã®å ´åˆã¯ã©ã®ãƒ–ãƒã‚°ã§ã‚‚共通ã®æ–¹æ³•ã§ã™ã。 "Bookmark this on Delicious" Buttons 追記：Yahooï¼ãƒ–ックマークã¨Livedoorクリップã®ãƒœã‚¿ãƒ³è¨ç½®ã«ã¤ã„ã¦ã¯ã€ãã‚Œãžã‚Œä»¥
ユーザーã«ã‚¯ãƒªãƒƒã‚¯ã•ã‚Œã‚„ã™ã„ボタンデザインã®5ã¤ã®ãƒã‚¤ãƒ³ãƒˆ
ユーザーã®è¡Œå‹•ã¸ã®å‘¼ã³ã‹ã‘を促ã™ã€Œãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã€ã‚„「サインアップã€ãªã©ã®ãƒœã‚¿ãƒ³ã‚’デザインã™ã‚‹éš›ã«æ°—ã‚’ã¤ã‘ãŸã„5ã¤ã®ãƒã‚¤ãƒ³ãƒˆã‚’Lee Munroeã‹ã‚‰ç´¹ä»‹ã—ã¾ã™ã€‚ Web Design Trends: Call To Action Buttons 先日ã¨ã‚Šã‚ã’ãŸã€Œãƒã‚¤ãƒ‘ーテã‚ストリンクã®ã‚¹ã‚¿ã‚¤ãƒ«å¤§å…¨ã€ã®5. ボタンスタイルã§ç´¹ä»‹ã•ã‚Œã¦ã„ã‚‹ã‚‚ã®ã§ã™ã€‚ 以下ã¯ã€å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ã¯ã˜ã‚㫠サインアップやダウンãƒãƒ¼ãƒ‰ãªã©ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®è¡Œå‹•ã¸ã®å‘¼ã³ã‹ã‘を促ã™ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã¯ã‚¦ã‚§ãƒ–デザインã«ãŠã„ã¦é‡è¦ãªã‚‚ã®ã§ã™ã€‚ ボタンã¯ãã®ãƒšãƒ¼ã‚¸ã®ã‚´ãƒ¼ãƒ«ã®ä¸€ã¤ã§ã‚ã‚Šã€ãã®ç›®çš„ã®ãŸã‚ã«ãã‚Œãžã‚Œã®ãƒšãƒ¼ã‚¸ã‚’デザインã™ã‚‹ã¨ã„ã£ã¦ã‚‚éŽè¨€ã§ã¯ã‚ã‚Šã¾ã›ã‚“。 行動を呼ã³ã‹ã‘るボタン（Call to Action Button）ã¯ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®æ³¨æ„を引ãå¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚以下ã«ã€ãã®ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã®5ã¤ã®ç‰¹é•·ã‚’ã‚ã’ã¾ã™ã€‚
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Welcome to nginx!
https://jp.techcrunch.com/2010/02/26/20100224manage-twitter/
{{#tags}}- {{label}}
{{/tags}}