AMPでデザインを頑張ってみた

リアル案件をもとに、デザイナー視点で「AMP HTML 組んだらどうなるの？」を、ざっくりと。AMP Start を利用してのナビゲーション設置テストも。

Transcript

1. ".1Ͱ
   σβΠϯΛ
   ؤுͬͯΈͨ 
   
   
   
   %*(*5"-+&5
   *OD
   
   ೳ໺ਔࢤ
2. ೳ໺ਔࢤ %*(*5"-+&5 ιχοΫΨʔσϯ ΫϨΦϑʔΨ ϤΩϊώτγ
   
   
   :0,*;0
   ೥݄ੜ·Ε
   
   
   Ԭࢁݝ૔ෑࢢग़਎
   σΟϨΫγϣϯ
   
   
   σβΠϯ
   
   
   IUNM
   
   
   IBNM
   
   
   TBTT
   
   
   DTT
   
   
   
   σβΠφʔ
   
   
   Իָ
   
   
   Ϊλʔ
   
   
   εϓϥτΡʔϯ
   
   
   छࢠౡ
   
   
   ਆࣾ८Γ
3. ".1 "DDFMFSBUFE
   .PCJMF
   1BHFT (PPHMFͷϞόΠϧϖʔδߴ଎Խن֨
4. άάͬͨ
   
   ෼
   4(ԕ౻ࢯʢͻʔ͘Μʣʹฉ͍ͨ
   
   ෼ ֶͿ
5. σβΠϯࢹ఺Ͱͷٙ໰ ͬ͘͞ͱ࡞ΕΔͩΖ͏͔
   σβΠϯͷࣗ༝౓͸
   ϋϯόʔΨʔϘλϯͲ͏͢Δ
   ͦͷଞ΋΍΋΍
6. ࣌ؒ
   ຊؾͰσβΠϯͯ͠ΈΔ σβΠϯ͕ۤखͰ΋
   Ͱ͖Δ͚ͩ؆୯ʹ
   ࣮Ҋ݅Ͱͷࢀߟʹ
7. ʢ෼ֶशͨ͠ʣ".1Ͱ
   ʢ࣌ؒͰͰ͖Δ͚ͩʣσβΠϯΛؤுͬͯΈͨ εϐʔυॏࢹ
   ࡉ͔͍͜ͱແࢹ
   ͱʹ͔͘ݟͨ໨Λ੔͑ͯͦΕͬΆ͘
   ΫϥΠΞϯτʹఏग़͢Δͭ΋ΓͰ
8. ͨͱ͑͹ ͜ͷϖʔδΛʮ".1Խͯ͠ʯͬͯݴΘΕͨΒ IUUQTXXXTPOJDHBSEFOKQ@WFSJTFSWF
9. ࣌ؒσβΠϯελʔτ
10. ϋϯόʔΨʔϘλϯͲ͏͢Δ
11. ".1
    TUBSU IUUQTXXXBNQTUBSUDPN
12. ͜Εʹ͠Α͏
13. ϋϯόʔΨʔϘλϯ͕ͳ͍ɾɾɾ
14. ؾʹͤͣ
    ͲΜͲΜਐΊΔ
15. ".1
    TUBSU
    ͷ
    IUNMΛ·Δͬͱϖʔετ
16. 'POU"XFTPNF
    ࢖͑Δ MJOL
    ISFGIUUQTNBYDEOCPPUTUSBQDEODPNGPOUBXFTPNF DTTGPOUBXFTPNFNJODTT
    SFMlTUZMFTIFFU
    ".1༻͸63-͕ҧ͏
17. 'POU"XFTPNFʮGBCBSTʯ഑ஔ
18. ͍͍ͧ
    ͲΜͲΜਐΊΔ
19. ը૾ BNQJNH
    TSDJNHCMPHMPHP@THQOH
    XJEUI
    IFJHIU
    MBZPVUpYFE
    DMBTTNZ
    NYBVUP
    
    BMU5IF
    #MPHBNQJNH
20. ௐ੔ʢϩΰɺΧϥʔɺݟग़͠
    ͳͲʣ
21. ͜͜ͰλΠϜΞοϓ
22. ੒Ռ෺
23. ຊՈͰνΣοΫ
24. IUNM
25. DTT
26. ؾʹͳΔ͚Ͳແࢹɾɾɾ
27. ײ૝ w શମతʹ
    w ׳ΕΕ͹ͦΜͳʹۤʹ͸ͳΒͳ͍
    w ී௨ͷIUNMΛ࡞੒͢Δײ֮
    w ·͋·͋σβΠϯͰ͖Δ
    w IUNMʹ௚઀هड़ͳͷͰ্Լ͍ͬͨΓ͖ͨΓ͕໘౗
    w ը૾
    w ΋͏ͪΐͬͱϥΫʹࢦఆ͍ͨ͠
    w ൺ཰͸कΓ͍ͨʢܭࢉͲ͏͢ΔʁXJEUI͚ͩͱ͔Ͱ͖Δͱ͍͍ͳʣ
    w ".1
    TUBSU
    ςϯϓϨʔτ
    w Α͍ͷͰ͸ɻ͜ͷΫΦϦςΟΛθϩ͔Β࡞Ζ͏ͱࢥ͏ͱେม
    w ͻͨ͢Β௥هɺ্ॻ͖͔͠ͳ͍ɺগ͠ؾ࣋ͪѱ͍
    w ඞཁͷͳ͍هड़΋ଟͦ͏ͳͷͰ࡟ͬͨ΄͏͕Αͦ͞͏
    w ࠓޙ༏ΕͨςϯϓϨʔτతͳ΋ͷ͕΅ͪ΅ͪͰͯ͘ΔͷͰ͸
28. ".1Ͱ΋ɺಡΈ΍͘͢ɺ
    ϢʔβʔϑϨϯυϦʔͳ
    σβΠϯΛ͍ͨ͠ͳ͋ɻ
29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ εϚϗͰνΣοΫʂ