Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ウェブ・エディトリアルのすゝめ

sekig
April 06, 2017

 ウェブ・エディトリアルのすゝめ

FONTPLUS DAYセミナー Vol. 8[デザインの基礎体力をつけるには?]
https://fontplus.connpass.com/event/53149/

フォントプラスのセミナーで発表したLTの増補版です。

sekig

April 06, 2017
Tweet

More Decks by sekig

Other Decks in Design

Transcript

  1. Editorial web
    designing
    のす













    Yutaka SEKIGUCHI



    2017.4.6
    FONTPLUS DAY

    View Slide

  2. ?
    Τ
    σ
    Ο
    τ
    Ϧ
    Ξ
    ϧ
    ͱ
    ͸

    View Slide

  3. editorial
    e.g. the editorial policy / the editorial staff
    ฤूऀͷɺ
    ฤू
    ʢ্ʣ
    ͷɺ
    ʢ৽ฉͳ
    Ͳ
    ͷ
    ʣ
    ࣾઆͷ
    【 エ ディト リ ア ル 】

    View Slide

  4. ฤू͢
    Δ
    ͜
    ͱ
    ʢ௚઀తʹʣ

    View Slide

  5. Τ
    σ
    Ο
    τ
    Ϧ
    Ξ
    ϧ
    σ
    β
    Π
    ϯ ࢴͷ
    σ
    β
    Π
    ϯ

    View Slide

  6. ฤूతͳ
    ߦҝɺ
    ί
    ϯ
    ς
    ϯ
    π
    Λద੾ʹ
    Ճ޻
    ɾ
    ੔ܗ͢
    Δ
    ͜
    ͱ
    【 広 義 の エ ディト リ ア ル 】

    View Slide

  7. ΢
    Σ
    ϒ
    ͷݱࡏ

    View Slide

  8. Responsive Web Design
    Մม
    Ϩ
    Π
    Ξ
    ΢
    τ
    マ ル チ デ バ イ ス が 一 般 化 し 、 ひ と つ の コ ン テ ン ツ が 取 り う る 形 は 幅 広 い グ ラ デ ー シ ョ ン に

    View Slide

  9. Multi Touch Point
    Ϛ
    ϧ
    ν
    ɾ
    λ
    ο
    ν
    ϙ
    Π
    ϯ
    τ
    コ ン テ ン ツ へ の 接 触 点 は 媒 体 か ら 独 立 し は じ め て い る 。 ユ ー ザ ー を 流 入 さ せ る の で は な く コ ン テ ン ツ を 拡 散 さ せ る 考 え 方

    View Slide

  10. Design System
    σ
    β
    Π
    ϯ
    ͷ
    γ
    ε
    ς
    Ϝ
    Խ
    コ ン ポ ー ネ ン ト の 考 え 方 に よ る 、 維 持 管 理 の で き る デ ザ イ ン の 必 要 性

    View Slide

  11. governance
    「 ウ ェ ブ の 現 在 」 に 求 め ら れ る こ と
    ʲ ౷࣏͢
    Δ
    ͜
    ͱ
    ɻ
    ͦ
    ͷ
    ͋
    Β
    Ώ
    Δ
    ϓ
    ϩ
    η
    εɻ
    ʳ
    ʹ
    σ
    β
    Π
    ϯ
    ͷ
    ϧ
    ʔ
    ϧઃܭ
    Ψ
    ό
    φ
    ϯ
    ε

    View Slide

  12. デザインの文脈で考えれば
    ΢
    Σ
    ϒ͚ͩͷ
    ΋
    ͷ
    Ͱ͸ͳ
    ͍
    普遍的な課題
    こ れ ら は

    View Slide

  13. Responsive Web Design
    Մม
    Ϩ
    Π
    Ξ
    ΢
    τ
    ૊൛
    ϑ
    Υ
    ʔ
    Ϛ
    ο
    τ
    ͷઃܭ
    増 減 す る コ ン テ ン ツ や ス ペ ー ス へ の 対 応 を 考 慮 し た デ ザ イ ン 設 計

    View Slide

  14. Multi Touch Point
    Ϛ
    ϧ
    ν
    λ
    ο
    ν
    ϙ
    Π
    ϯ
    τ
    ෳ਺Ξ
    Π
    ς
    Ϝ
    ͷల։
    タ ッ チ ポ イ ン ト ご と の デ ザ イ ン の 最 適 化 と ト ー ン & マ ナ ー の 統 一

    View Slide

  15. Design System
    σ
    β
    Π
    ϯ
    ͷ
    γ
    ε
    ς
    Ϝ
    Խ
    ά
    Ϧ
    ο
    υ
    γ
    ε
    ς
    Ϝ
    ɺ
    Ξ
    ʔ
    τ
    σ
    Ο
    Ϩ
    Ϋ
    γ
    ϣ
    ϯ
    精 緻 で ロ ジ カ ル な デ ザ イ ン 設 計 や 、 媒 体 を 通 し た ア ー ト デ ィ レ ク シ ョ ン の 制 御

    View Slide

  16. Τ
    σ
    Ο
    τ
    Ϧ
    Ξ
    ϧσ
    β
    Π
    ϯ
    ͷߟ͑ํͰ
    【 ウ ェ ブ の 現 在 】
    ରԠͰ
    ͖
    Δ

    View Slide

  17. View Slide

  18. View Slide

  19. ?

    View Slide

  20. ?
    ΢
    Σ
    ϒ
    ϝ
    σ
    Ο
    Ξ
    ͸ ϖ
    ʔ
    δ ͳ
    ͷ͔

    View Slide

  21. ࣮ྫΛࢀর
    ͠
    ͯ
    Έ
    Δ

    View Slide

  22. ϑ
    Ο
    ϧ
    Ϝ
    Ξ
    ʔ
    τ

    h t t p : / / f i l m a r t . c o . j p
    FONT PLUS

    View Slide

  23. View Slide

  24. ৽ைࣾ
    h t t p : / / w w w. s h i n c h o s h a . c o . j p

    View Slide

  25. View Slide

  26. LISSAGE MEN
    h t t p : / / w w w. l i s s a g e . j p / m e n /

    View Slide

  27. View Slide

  28. ࢴͷ
    Α
    ͏
    ͳ
    ΢
    Σ
    ϒ
    ɺ
    ΢
    Σ
    ϒ
    ͷ
    Α
    ͏
    ͳࢴɻ

    View Slide

  29. Θ͔
    Β
    ͳ
    ͍ɻ
    ΢
    Σ
    ϒ
    ϝ
    σ
    Ο
    Ξ
    ͸ ϖ
    ʔ
    δ ͳ
    ͷ͔

    View Slide

  30. た だし、

    View Slide

  31. ΋
    ͏
    ׬શʹɺ
    ࢴͱ
    ͔
    ΢
    Σ
    ϒ
    ͱ
    ͔
    ݴ
    ͬ
    ͯ
    Δஈ֊
    ͡
    Ό
    ͳ
    ͍

    View Slide

  32. ͞
    ·
    ͟
    ·
    ͳ
    ϝ
    σ
    Ο
    Ξ
    ͷ
    ҧ͍͕ຒ·
    ͬ
    ͯ
    ͖
    ͯ
    ͍
    Δ

    View Slide

  33. ͜
    Ε͔
    Β
    ͷ
    ΢
    Σ
    ϒ

    View Slide

  34. ΢
    Σ
    ϒ
    ͸ރΕ
    ͍ͯ
    ͘
    技 術 の 進 歩 で 表 現 は 枯 れ て い く 。 印 刷 媒 体 の よ う に 、 枯 れ た メ デ ィ ア に 向 か っ て い る

    View Slide

  35. 枯れた技術の水平思考
    ԣ Ҫ ܉ ฏ
    ೚ ఱ ಊ 1 9 4 1 – 1 9 9 7
    「最先端ではないが、すでに広く使われてノウハウも固まり不具合も出し尽くして安定して使える技術」
    をうまく使い、
    「今まで無かった使い道を考える」
    という考え方、
    視点のこと。
    「枯れたメディア」
    こそ本質的なデザインが必要なのでは。

    View Slide

  36. զʑ
    ͷखݩʹ໭
    ͬ
    ͯ
    ͘
    Δ
    ΢
    Σ
    ϒ
    ͷ
    σ
    β
    Π
    ϯ

    View Slide

  37. ΘΕ
    Β
    จࣈ
    Ϋ
    ϥ
    ε
    λ
    ͷ
    ग़൪ͩ

    View Slide

  38. Content is King
    By Bill Gates 1996
    ί
    ϯ
    ς
    ϯ
    π
    ɾ
    Π
    ζ
    ɾ
    Ω
    ϯ
    ά
    © 2 0 0 1 M i c r o s o f t C o r p o r a t i o n . A l l r i g h t s r e s e r v e d . Te r m s o f U s e

    View Slide

  39. Τ
    σ
    Ο
    τ
    Ϧ
    Ξ
    ϧͷ
    ࿹ͷ
    ݟͤॴ

    View Slide

  40. Instagram や Airbnb などの UI デザインに見る新しい
    トレン
    ド | UX MILK
    http://uxmilk.jp/48364
    ༨෼ͳ
    ΋
    ͷ͕࡟
    ͗མͱ
    ͞
    Ε
    ͍ͯ
    ͘
    Π
    ϯ
    λ
    ʔ
    ϑ
    Σ
    Π
    ε

    View Slide

  41. The Future of Mobile Content: Facebook Instant Articles vs. Google AMP
    http://www.business2community.com/brandviews/upwork/future-mobile-content-facebook-instant-articles-vs-google-amp-01589166#E86CERx0y6rvcIQt.97
    ί
    ϯ
    ς
    ϯ
    π
    ͸
    ͻ
    ͱ
    Γ
    Ͱʹग़า
    ͘
    Α
    ͏
    ʹͳ
    ͬ
    ͨ

    View Slide

  42. ࠷ޙʹ࢒Δ
    ͷ
    ͸
    ฤू
    ͱ
    λ
    Π
    ϙ
    ά
    ϥ
    ϑ
    Ο

    View Slide

  43. Typography is King
    Content is King, in other words,
    λ
    Π
    ϙ
    ά
    ϥ
    ϑ
    Ο
    ɾ
    Π
    ζ
    ɾ
    Ω
    ϯ
    ά

    View Slide

  44. ະདྷ͸໌
    Δ
    ͍

    View Slide

  45. Enjoy,
    editorial !

    View Slide

  46. おわり

    View Slide