$30 off During Our Annual Pro Sale. View Details »

React Conf Japan Design

React Conf Japan Design

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

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

はのめぐみ / Megumi Hano

February 12, 2020
Tweet

More Decks by はのめぐみ / Megumi Hano

Other Decks in Design

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