React Conf Japan Design

2020年3月21日(土) に開催予定の React Conf Japan のキービジュアルデザインをしました。デザイン策定にいたるまでのプロセスを公開しています。

note: https://note.com/featherplain/n/na039cb933812
website: https://reactconf.jp/2020/

Transcript

1. “Dawn”
   

   View Slide

2. Reactっぽさ
   chaos
   unique
   simple
   

   View Slide

3. 日本っぽさ
   富士山
   東京の街並み
   鳥居
   日の丸 日の出
   紅・白
   

   View Slide

4. View Slide

5. View Slide

6. Logo
   

   View Slide

7. symbol
   3つの意味
   

   View Slide

8. Japan
   

   View Slide

9. 日本の React コミュニティとして、
   
   象徴的な日の丸・赤色を採用しました。
   銀朱
   ぎんしゅ scarlet
   #D33736
   

   View Slide

10. Earth
    Community
    

    View Slide

11. 35°
    React のシンボルマークを簡略化して、
    
    地球上の北緯35度線に位置する
    
    日本の React コミュニティを表現しています。
    

    View Slide

12. グラデーションで
    
    コミュニティの広がりや発展、
    
    イベント成功の願いを込めました。
    

    View Slide

13. “simple”
    React
    

    View Slide

14. この球体には何でも入ります。
    
    開発者の数だけ正解のパターンが
    
    あることを示唆しています。
    

    View Slide

15. View Slide

16. 数百種類ある日本の伝統的な文様を
    
    ランダムに組み合わせることで
    
    開発者にとっての React を表現します。
    

    View Slide

17. View Slide

18. 採用フォント
    文字詰めやタイプフェイスにアレンジを加えています。
    

    View Slide

19. 普遍性
    可読性
    耐久性
    時間を経ても使いやすい
    サイズに関わらず認識できる
    さまざまな媒体・印刷物に使われる
    

    View Slide

20. Fonts
    

    View Slide

21. Brand Text
    

    View Slide

22. Header Text
    Latin 日本語
    Montserrat ヒラギノ角ゴシック
    Google Fonts から使用可能
    Brand Font と親和性が高く、
    
    見出しとして目を引きつつ
    
    デバイス上でも使いやすいものを
    
    採用しました。
    Windows の場合はメイリオを採用する
    Mac のデバイスフォント
    

    View Slide

23. Paragraph Text
    Latin 日本語
    Open Sans ヒラギノ角ゴシック
    Google Fonts から使用可能
    可読性の高さを重視しつつ、
    
    デバイス上でも使いやすいフォントを
    
    採用しました。
    Windows の場合はメイリオを採用する
    Mac のデバイスフォント
    

    View Slide

24. Color
    

    View Slide

25. 銀朱 象牙 鳥羽
    scarlet ivory rich black
    Japan
    React
    本家で使われている
    
    カラースキーム
    日本の伝統色
    React の象徴的なカラーを使うと、
    
    本家サイトとの差別化が難しいため
    
    ブルーは採用していません
    

    View Slide

26. 正統派だけどモダンでかっこよさを感じさせる
    
    リオ五輪の閉会式・東京五輪に向けたセレモニーからインスパイアを受けました。
    https://youtu.be/sk6uU8gb8PA
    

    View Slide

27. Dawn
    日本の React コミュニティの夜明け
    

    View Slide

28. View Slide

29. View Slide

30. キービジュアルのひとつとして、
    
    React Conf Japan の開催実現に向けて
    
    「夜明け」をモチーフ化しました。
    暗がりにさす一本の光の線に
    
    コミュニティや開発者への光・発展の願いを込めました。
    

    View Slide

31. View Slide

32. View Slide

33. ボツ案やスケッチ色々
    ロゴの原型になったスケッチもあります
    おまけ
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. 現代の日本っぽい写真を使ってみたり
    

    View Slide

38. ドラゴンボールみたい もはや何か分からないw
    

    View Slide

39. Thank you!
    ここまで読んでくれて
    
    ありがとうございました！
    

    View Slide