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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. ΢
    Σ
    ϒ
    ͷݱࡏ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. ࣮ྫΛࢀর
    ͠
    ͯ
    Έ
    Δ

    View full-size slide

  19. ϑ
    Ο
    ϧ
    Ϝ
    Ξ
    ʔ
    τ

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. た だし、

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. ͜
    Ε͔
    Β
    ͷ
    ΢
    Σ
    ϒ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  38. ະདྷ͸໌
    Δ
    ͍

    View full-size slide

  39. Enjoy,
    editorial !

    View full-size slide

  40. おわり

    View full-size slide