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

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

02 Webサイトの各部名称と機能

サイト名URL
MyBookEditor for Machttp://www.mybook.co.jp/mac/
ANA公式サイトhttp://www.ana.co.jp/

03 Webレイアウトの基本6パターン

サイト名URL
Bootstraphttp://getbootstrap.com/
Foundationhttp://foundation.zurb.com/
Code Gridhttp://www.codegrid.net/
Newsweekhttp://www.newsweek.com/
Pinteresthttp://jp.pinterest.com/
CHANELhttp://www.chanel.com/ja_JP/
Bootstraphttp://getbootstrap.com/
Media Querieshttp://mediaqueri.es/

04 シングルカラム型レイアウト

サイト名URL
Made in the Futurehttp://madeinthefuture.co/
People & Storehttp://people.st/
インド手刺繍の店 タンカhttp://www.tanka.in/

05 マルチカラム型レイアウト

サイト名URL
Yahoo! JAPANhttp://www.yahoo.co.jp/
MSN Japanhttp://jp.msn.com/
日本経済新聞http://www.nikkei.com/
CORUMhttp://www.corum.ch/en
AND READYhttp://www.dot-and-ready.net/
KITTEhttp://jptower-kitte.jp/

06 カード型レイアウト

サイト名URL
Lonely Planethttp://www.lonelyplanet.com/food-and-drink
Zitehttp://zite.com/
Flipboardhttps://flipboard.com/
Masonryhttp://masonry.desandro.com/

07 1ページアプリケーション型レイアウト

サイト名URL
Airbnbhttps://www.airbnb.jp
SoundCloudhttps://soundcloud.com/
Backbone.jshttp://backbonejs.org/
AngularJShttps://angularjs.org/
Ember.jshttp://emberjs.com/
Airbnbhttps://www.airbnb.jp/
USA TODAYhttp://www.usatoday.com/

08 フルスクリーン型レイアウト

サイト名URL
Long Story Shorthttp://www.longstory-short.co.uk/
Solar weekendhttp://solarweekend.com/
The Boxtrollshttp://www.theboxtrolls.com/experience/the-cavern
RADICAL TESTA S.C.http://www.radicaltesta.com/index_d.php

09 グリッドを利用したレイアウト手法

サイト名URL
Bootstraphttp://getbootstrap.com/
Foundationhttp://foundation.zurb.com/
960 Grid Systemhttp://960.gs
Golden Grid Systemhttp://goldengridsystem.com/
VOGUE USAhttp://www.vogue.com/?us_site=y
可変グリッドレイアウトのデモhttp://www.profoundgrid.com/examples/fluid.html
レスポンシブに対応した可変グリッドレイアウトのデモhttp://www.profoundgrid.com/examples/fluidresponsive.html

10 レスポンシブなレイアウトパターン

サイト名URL
Media Querieshttp://mediaqueri.es/

Column レイアウトの役割とは

サイト名URL
Awwwardshttp://www.awwwards.com/
BEST WEB GALLERYhttp://bestwebgallery.com/

Indexへ戻る