Save 37% off PRO during our Black Friday Sale! »

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

D06541b37cf4b0ddf202253d35e29c7e?s=47 yokizo
April 17, 2018

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

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

D06541b37cf4b0ddf202253d35e29c7e?s=128

yokizo

April 17, 2018
Tweet

Transcript

  1. ".1Ͱ σβΠϯΛ ؤுͬͯΈͨ %*(*5"-+&5*ODೳ໺ਔࢤ

  2. ೳ໺ਔࢤ %*(*5"-+&5 ιχοΫΨʔσϯ ΫϨΦϑʔΨ ϤΩϊώτγ:0,*;0 ೥݄ੜ·ΕԬࢁݝ૔ෑࢢग़਎ σΟϨΫγϣϯσβΠϯIUNMIBNMTBTTDTT σβΠφʔԻָΪλʔεϓϥτΡʔϯछࢠౡਆࣾ८Γ

  3. ".1 "DDFMFSBUFE.PCJMF1BHFT (PPHMFͷϞόΠϧϖʔδߴ଎Խن֨

  4. άάͬͨ෼ 4(ԕ౻ࢯʢͻʔ͘Μʣʹฉ͍ͨ෼ ֶͿ

  5. σβΠϯࢹ఺Ͱͷٙ໰ ͬ͘͞ͱ࡞ΕΔͩΖ͏͔ σβΠϯͷࣗ༝౓͸ ϋϯόʔΨʔϘλϯͲ͏͢Δ ͦͷଞ΋΍΋΍

  6. ࣌ؒ ຊؾͰσβΠϯͯ͠ΈΔ σβΠϯ͕ۤखͰ΋ Ͱ͖Δ͚ͩ؆୯ʹ ࣮Ҋ݅Ͱͷࢀߟʹ

  7. ʢ෼ֶशͨ͠ʣ".1Ͱ ʢ࣌ؒͰͰ͖Δ͚ͩʣσβΠϯΛؤுͬͯΈͨ εϐʔυॏࢹ ࡉ͔͍͜ͱແࢹ ͱʹ͔͘ݟͨ໨Λ੔͑ͯͦΕͬΆ͘ ΫϥΠΞϯτʹఏग़͢Δͭ΋ΓͰ

  8. ͨͱ͑͹ ͜ͷϖʔδΛʮ".1Խͯ͠ʯͬͯݴΘΕͨΒ IUUQTXXXTPOJDHBSEFOKQ@WFSJTFSWF

  9. ࣌ؒσβΠϯελʔτ

  10. ϋϯόʔΨʔϘλϯͲ͏͢Δ

  11. ".1TUBSU IUUQTXXXBNQTUBSUDPN

  12. ͜Εʹ͠Α͏

  13. ϋϯόʔΨʔϘλϯ͕ͳ͍ɾɾɾ

  14. ؾʹͤͣ ͲΜͲΜਐΊΔ

  15. ".1TUBSUͷIUNMΛ·Δͬͱϖʔετ

  16. 'POU"XFTPNF࢖͑Δ MJOLISFGIUUQTNBYDEOCPPUTUSBQDEODPNGPOUBXFTPNF DTTGPOUBXFTPNFNJODTTSFMlTUZMFTIFFU ".1༻͸63-͕ҧ͏

  17. 'POU"XFTPNFʮGBCBSTʯ഑ஔ

  18. ͍͍ͧ ͲΜͲΜਐΊΔ

  19. ը૾ BNQJNHTSDJNHCMPHMPHP@THQOHXJEUIIFJHIU MBZPVUpYFEDMBTTNZNYBVUPBMU5IF#MPHBNQJNH

  20. ௐ੔ʢϩΰɺΧϥʔɺݟग़͠ͳͲʣ

  21. ͜͜ͰλΠϜΞοϓ

  22. ੒Ռ෺

  23. ຊՈͰνΣοΫ

  24. IUNM

  25. DTT

  26. ؾʹͳΔ͚Ͳແࢹɾɾɾ

  27. ײ૝ w શମతʹ w ׳ΕΕ͹ͦΜͳʹۤʹ͸ͳΒͳ͍ w ී௨ͷIUNMΛ࡞੒͢Δײ֮ w ·͋·͋σβΠϯͰ͖Δ w

    IUNMʹ௚઀هड़ͳͷͰ্Լ͍ͬͨΓ͖ͨΓ͕໘౗ w ը૾ w ΋͏ͪΐͬͱϥΫʹࢦఆ͍ͨ͠ w ൺ཰͸कΓ͍ͨʢܭࢉͲ͏͢ΔʁXJEUI͚ͩͱ͔Ͱ͖Δͱ͍͍ͳʣ w ".1TUBSUςϯϓϨʔτ w Α͍ͷͰ͸ɻ͜ͷΫΦϦςΟΛθϩ͔Β࡞Ζ͏ͱࢥ͏ͱେม w ͻͨ͢Β௥هɺ্ॻ͖͔͠ͳ͍ɺগ͠ؾ࣋ͪѱ͍ w ඞཁͷͳ͍هड़΋ଟͦ͏ͳͷͰ࡟ͬͨ΄͏͕Αͦ͞͏ w ࠓޙ༏ΕͨςϯϓϨʔτతͳ΋ͷ͕΅ͪ΅ͪͰͯ͘ΔͷͰ͸
  28. ".1Ͱ΋ɺಡΈ΍͘͢ɺ ϢʔβʔϑϨϯυϦʔͳ σβΠϯΛ͍ͨ͠ͳ͋ɻ

  29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ εϚϗͰνΣοΫʂ