Asking the Art Director: How the 20th Anniversary Logo Was Created
Hello, this is Saka from the Shiftbrain PR team.
This is the third installment of our series introducing the Shiftbrain 20th Anniversary project, and today we are introducing the “20th Anniversary Logo.”
We spoke with Creative Director Ryohei Kamada and Art Director Hiroki Miyamoto. Since we had the chance, we also asked them about the special website! We will delve into the worldview of the entire project, focusing on the logo that symbolizes our 20th anniversary.
If you haven't seen the Shiftbrain 20th anniversary special website yet, please be sure to check it out before reading this article!
The Thoughts and Concept Behind the Logo
——How did you approach the art direction for the 20th anniversary project?
Kamada: Once the core copy for the 20th anniversary, "FEEL DRIVEN," was decided, we determined the content to be created and passed it on to Miyamoto-san.
Miyamoto: That's right. For "FEEL DRIVEN," planner John-san and Kamacho (*Kamada-san) worked as CD to decide on production items like the original font, variable goods, Showreel, and VR office. Once the specific items to be created were decided, I stepped in to figure out, "What kind of expression should we use?"
Miyamoto: Regarding the design, when looking back at the past 20 years, I had an image from the beginning that even though everyone has their own individuality, it would be great if we could come together to create a sense of team. I wanted graphics that felt like various things gathering, sticking together, and changing. While inheriting the worldview that Shiftbrain originally possessed and the keywords from our 2021 site renewal—"PIONEER," "CRAFTED," and "GENEROSITY"—
we added "JOY" to that. I wanted to express a sense of team through this "JOY" element, so I thought about the logo based on these keywords.
——Please tell us about the process until the logo was actually decided.
Miyamoto: We proposed a total of three logos. I'll introduce them while showing you the proposal materials.
Miyamoto: Proposal A was based on the themes of immersion and divergence. When you're doing things you want to do or things you love, you tend to forget the time and get completely absorbed in them, right? At the same time, the feelings and impulses from the bottom of your heart, like "I want to make this!" or "I want to do it this way!," sometimes diverge from within... This logo expresses those states.
This Proposal A was the one actually adopted, and its shape is close to the finished logo as well. In the initial draft, we expressed the concept of "immersion and divergence" by layering many colors on a "20" logo drawn with multiple lines. We were thinking of a style that goes in and out, but that part changed in the end.
Miyamoto: Proposal B was based on the idea that even if the roots and the direction everyone is heading are the same, our preferences are all different, so only the "0" would transform under a certain rule. The number "2" is common to everyone, but we thought we could create a sense of team by having the "0" part change depending on the person.
Proposal C is simple, expressing two rings in three dimensions. The black hole-like expression inside the ring was discussed as being good for web use, so it remained as a development plan for the expression.
Ultimately, the concept and shape of the logo from Proposal A, and the expression of the timeline moving in and out of the foreground and background from Proposal C were adopted to create the worldview of the logo and the website.
Until the Logo Starts Moving
——Since the logo is constantly moving on the website, the idea is that it's a "logo without a fixed shape." How was this movement born?
Miyamoto: At first, Kamacho and I were thinking that it would be good to have a flat gradient, and to express space with the logo by having each individual line spread out and scatter. We wanted to express the connection to the background and the timeline of the foreground and background that we had talked about when proposing the logo.
Miyamoto: When I showed the image summarizing that concept to Heo from the Dev Department (short for Developer Department), “This is a bit too clean, wouldn't it be better if it felt a little more scattered?” he said. From there, it suddenly changed into the current logo (laughs).
—When you say “suddenly,” does that mean Heo created a prototype for you?
Miyamoto: Yes, even though we didn't specifically talk about this part, he made and showed me a version of the logo that was already moving from the start.Where it was originally an expression that moved cleanly into the background and foreground, Heo shifted things around nicely, and by displaying the current scattered layers, it became an expression that makes you feel depth.
Miyamoto: Heo is always like this, and he surprises me by showing me expressions that go beyond my imagination. This time, too, it turned out incredibly cool.
Kamata: Heo is usually like that, isn't he? He always just makes things look good on his own (laughs).
Miyamoto: I feel it's a waste to limit the expression by telling him too much, so I often choose not to talk about it. Of course, I properly convey the direction I want to aim for and the theme I want to express, but I feel like I don't specify anything regarding the method of expression.
[Right] The 1-color version of the logo for merchandise. The image shows a pin badge.
We also asked Heo, who was in charge of the motion!
Initially, I implemented it according to the design, but it didn't have the impact I expected. So, I reconsidered the concept and intent, and while keeping the final goal in mind, I created various prototypes. I frequently discussed things with the designer, exchanged opinions, and it reached its current form.
I also heard that there was talk of creating music, so I added a feature where the 20 logo animates in sync with the sound. In my case, it's easier for me when I'm given flexibility, and I like to create while also making various suggestions. The designer understands that, so I was able to work on this production happily as well.
Derivation into Web design
—The logo is also used impressively on the website. The smooth transition between content feels pleasant, but what points were you conscious of when designing it?
Miyamoto: The effect of entering the ellipse when changing from MESSAGE to the VR office was inspired by the logo's concept of “immersion and divergence.”
Kamata: I made the video that follows, touring the VR office.
Miyamoto: How many days did it take to export this video...?
Kamata: Rendering took 14 days (laughs). I spent the whole time with my computer left on.
Miyamoto: If the power had gone out, we wouldn't have made it in time (laughs).
Kamata: That was a close call; I was worried the whole time. I was working on a Mac back then. When I rendered it on Windows afterward, the same thing finished in about two hours (laughs).
▼ For more on the VR office, please check out the note below!👇
——The font area that follows also features animation that makes the concept easy to understand.
Miyamoto: Michiai-kun, who was in charge of fonts, made this. I think he created about four rough patterns for it.
Kamata: It really shows Michiai-kun's style, doesn't it? Miyamoto-san and I gave some instructions, but in the end, we left it up to him.
▼ The original font is introduced in detail in the note below!👇
Miyamoto: For the font list area, I researched and referenced font foundry websites. I implemented the buttons that allow you to widen the character width and toggle between black and white while consulting with Fujiyoshi-san and Michiai-kun, who were in charge of font production.
Kamata: It's a variable font, so we had to include those features to convey its quality.
Miyamoto: The staff icons aren't variable, so we made it show the staff members' names instead. That was Kato-san's request.
Miyamoto: I left the final production of the site to Heo-san, and the way various '20's appear scattered and finally come together into a single logo is close to the expression in Logo Proposal B.
In closing
——Looking back on the entire 20th-anniversary project, could you share your thoughts or comments?
Miyamoto: After the logo was decided, we had to proceed with the variable font, original merchandise, 360° Showreel, and VR office all in parallel, so it was tough! Each part had a different person in charge, and everyone was working solo, so I had no idea what kind of graphics would come in at the end... I was really feeling my way through the web design. Since the content was so different, it was hard to provide solid art direction to set a core theme, and I was worried about whether the tone and manner would match when we brought it all together at the end. As it turned out, it matched up naturally and nicely, so I'm glad.
Kamata: This was true for everyone, but since we were working on the 20th-anniversary project and production while handling our regular duties, that was a major point of struggle. Especially with the web design adjustments, since the content was coming in at the last minute, I think it was really difficult until the very end.
Miyamoto: It was difficult, but this time it really felt 'FEEL DRIVEN,' and we were able to create while valuing our instincts and having fun!
▼SHIFTBRAIN GOODS STORE
We have opened an online store that handles SHIFTBRAIN merchandise! The lineup includes the 20th-anniversary goods announced this year, as well as the 15th-anniversary T-shirts, Misatoto. goods, and INVENTORY items produced in the past. We will continue to develop new products, so please look forward to them!
▼ Recruitment Information
SHIFTBRAIN is looking for new team members. Since the entire company is fully remote, we accept applications from all over the country. Please check Wantedly for details on the openings!
Cover image design: Kento Ishizuka