プロとして恥ずかしくない 新・WEBデザインの大原則

CHAPTER 3─掲載サイトリンク集

02　閲覧環境の変化

サイト名URL
Apple - Apple Watchhttp://www.apple.com/jp/watch/
情報通信白書平成26年版http://www.soumu.go.jp/johotsusintokei/whitepaper/h26.html
平成25年通信利用動向調査http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
インターネットの利用動向（1）（情報通信白書平成26年版）http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h26/html/nc253120.html
インターネットの利用動向（2）（情報通信白書平成26年版）http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h26/html/nc253220.html
平成25年通信利用動向調査http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
平成25年情報通信メディアの利用時間と情報行動に関する調査（PDF）http://www.soumu.go.jp/iicp/chousakenkyu/data/research/survey/telecom/2014/h25mediariyou_1sokuhou.pdf
Mobile-Friendly Testhttps://www.google.com/webmasters/tools/mobile-friendly/

03　表示パフォーマンス

サイト名URL
PageSpeed Insightshttps://developers.google.com/speed/pagespeed/insights/
Googleによる英語圏でのページ表示速度の反映http://googlewebmastercentral.blogspot.jp/2010/04/using-site-speed-in-web-search-ranking.html
その他の言語圏でのページ表示速度の反映http://www.suzukikenichi.com/blog/page-speed-is-now-a-ranking-factor-in-google-japan/
Greg Linden氏によるAmazonでのページ表示速度に関する報告（PDF）http://www.gduchamp.com/media/StanfordDataMining.2006-11-28.pdf
サイトパフォーマンスの最適化 | SEO 検索エンジン最適化http://www.searchengineoptimization.jp/optimizing-site-performance
HTTP Archivehttp://httparchive.org/
ImageOptimhttps://imageoptim.com/
PNGGauntlethttp://pnggauntlet.com/
gulp.js - the streaming build systemhttp://gulpjs.com/
Perf Rockshttp://www.perf.rocks/tools/

04　制作作業に入る前の設計段階で決めておくこと

サイト名URL
lonely planethttp://rizzo.lonelyplanet.com/styleguide

05　アクセシビリティの確保

サイト名URL
Web Content Accessibility Guidelines（WCAG）2.0http://www.w3.org/TR/WCAG20/
JIS X 8341-3:2010 関連文書http://waic.jp/docs/jis2010/
The Web KANZAKI「ハンディがあっても利用できるページづくり」http://www.kanzaki.com/docs/html/accessible.html
WAI-ARIAhttp://www.w3.org/TR/wai-aria/
小田原市公式ホームページhttp://www.city.odawara.kanagawa.jp/

06　ユーザビリティの重要性

サイト名URL
GhostRechttp://info.ghostrec.jp/
UIscopehttp://uiscope.com/
ポップインサイトhttp://popinsight.jp/
Silverback 3http://silverbackapp.com/

07　IAサイトマップ

サイト名URL
User Experience Designhttp://semanticstudios.com/user_experience_design/
Wikipediahttp://ja.wikipedia.org/
はてなブックマークhttp://b.hatena.ne.jp/
Flickrhttps://www.flickr.com/

08　ワイヤーフレーム制作

サイト名URL
Dribbblehttps://dribbble.com/

09　モックアップ制作

サイト名URL
Bootstraphttp://getbootstrap.com/
ペーパープロトタイピング入門（fladdict）http://fladdict.net/blog/2013/11/paper-prototyping-0.html
HTML5 Boilerplatehttp://html5boilerplate.com/
Sasshttp://sass-lang.com/
Lesshttp://lesscss.org/
インブラウザデザイン（CSS Radar）http://css.studiomohawk.com/in-browser-design/2011/04/16/designing_in_browser/
UXPinhttp://uxpin.com/
Flintohttps://www.flinto.com/
Marvelhttps://marvelapp.com/
InVisionhttp://www.invisionapp.com/
Webflowhttps://webflow.com/
POPhttps://popapp.in/
Protthttps://prottapp.com/
Goodpatchhttp://goodpatch.com/
Stand Inhttp://standin.io/
Compositehttp://www.getcomposite.com/
Origamihttp://facebook.github.io/origami/
Framerhttp://framerjs.com/

10　レスポンシブWebデザイン

サイト名URL
Responsive Web Design JPhttp://responsive-jp.com/
Yahoo!https://www.yahoo.com
Microsofthttps://www.microsoft.com
Emmet Re:Viewhttps://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp

11　フレームワークを使った実装

サイト名URL
Bootstraphttp://getbootstrap.com/
Bootstrap Lesshttps://github.com/twbs/bootstrap
Bootstrap Sasshttps://github.com/twbs/bootstrap-sass
GLYPHICONShttp://glyphicons.com/

Column　フレームワークの紹介

サイト名URL
Foundationhttp://foundation.zurb.com/
Purehttp://purecss.io/
Web Starter Kithttps://developers.google.com/web/starter-kit/
Material Uihttp://material-ui.com/
Maplehttps://github.com/t32k/maple
Kitehttps://github.com/hiloki/kitecss

Indexへ戻る