What's important is that all project members are happy | 17design. & Calmhectic inc. [Big Idea]

Project Background – "There's someone who seems like a perfect fit for this direction."

First, how did this project get started? Also, how were the project members assigned?

Inada:I previously worked with them on a different matter.Crossing the border Mr.They approached us saying, "We're working on the branding for Bic Camera's private brand, and we'd like to collaborate on creating their website." It was a situation where the brand's direction had solidified, and they reached out to us when it was time for the web phase.

It was a large project and required solid project management, so I asked Saori Minato, a PM/director with whom I had worked before, to handle it. After that, as we proceeded with the planning and design..."There's someone who seems like a perfect fit for this direction."So, Mr. Minato introduced me to Mr. Daishima.

I see. So, Ms. Inada basically works alone, and assigns members according to the project, is that right?

Inada:For small-scale projects, I sometimes handle the direction myself, but for medium-sized and larger projects, I assign a PM/director. It's been 6-7 years since I left my previous design company, and during that time, many of my former colleagues have become freelancers, so I often ask them to take on projects. I was impressed by Minato-san's direction when we worked together before, and I've always wanted to work with her someday.

Site direction – Through repeated discussions, the direction has shifted from "emphasizing visual identity" to "showcasing products."

So, how did you respond to their order with your proposal?

Inada:The first meeting was a hearing, and we proceeded by having discussions between the three of us: Koshoku-san, Bic Camera, and myself.At this point, I brought seven ideas, which I called "website planning seeds."Since the visual identity (the brand logo "B-frame" and the visuals for the project) had already been decided, we proposed expressions that would make the most of the VI and incorporate the important keyword "materialism" into the visuals. We had a clear direction for the visuals, which sparked a lot of ideas, from a relatively early stage, and the three of us discussed this initial idea.

When we first showed it to them, the proposal that utilized the B-frame, which had good visuals and was easy to understand, received high praise. Initially, there was also talk of placing the brand movie in the first view.Common issues include:As we continued our discussions, we suddenly came to the realization that perhaps communicating through the product itself is more important than communicating through words or making it look cool.

From there, it became clear that we wanted to aim for expressions that evoked a greater sense of excitement rather than just being "visual" or "explanatory." This led to a presentation style that overflowed with ideas, based on the brand name "Big Idea." The direction became clearer as we discussed various proposals as drafts.

While there are other factors like visual identity (VI) that tend to be visually oriented, through repeated discussions, we were able to tune the approach in a direction that evokes "excitement."

Inada:Initially, our goal was to clearly convey the concept and message, but at the same time, we didn't want to give the impression of "talking about ourselves," and because it was a new brand, we also wanted to quickly introduce the "product." Therefore, we thought it would be best to let people get to know the brand by showing the "actual product (product plan)" rather than just words.

The project members on their end also mentioned that they were "planners," and to reinforce that point, we've made the copy larger using hover effects and modals. There are many ways to present a brand website, but this approach of "letting people see the product first" really resonated with me.

Point 1 – A "mutual exchange" between Mr. Daishima's high-level implementation and Mr. Inada's ideas.

Let's talk while looking at the website. First, about FV.

Inada:As mentioned earlier, we prioritized the "sense of arrival" of the new brand and the "excitement" of communicating through the products, creating an expression that overflows with many "big ideas." Mr. Daishima also implemented the initial motion when the site is displayed, which resembles an overturned "toy box" bursting with many ideas.

In the implementation phase after the design was approved, I first explained the overall flow to Mr. Daishima, and then he showed me how it worked based on the implementation.The level of implementation at that time far exceeded my expectations. After seeing that, I gave Mr. Daishima feedback on the ideas and images I had come up with.We were able to refine our ideas by going back and forth between ideas, implementation, and more ideas.

Daishima:My role began by checking the feasibility of the detailed requests that Ms. Inada had provided in bullet points before the design proposal. In the implementation phase, we proceeded using the actual website rather than mockups, and made adjustments based on feedback from Ms. Inada during the test upload stage.

The way the B-frame appears when you hover over it, and how the visual identity is seamlessly integrated with the idea, is brilliant.

Daishima:The hover animation was left to our imagination. We wanted to create an exciting animation that was as pleasant as possible and matched the site's atmosphere. Regarding the technology selection, we implemented the text using CSS because using Three.js resulted in jagged edges as the text zoomed in, and loading the fonts made the site heavy. Actually, this font is Noto Sans with a condensed version applied. When I showed it to the designers at Nauts, they were all excited, saying, "What font is this!?" (laughs). They were surprised when I revealed the secret.

Daishima:In addition, Ms. Inada requested that "it would be monotonous if the product just got bigger, so I'd like to add some movement that makes it rotate slightly," but we found that implementing this with CSS would make it too heavy, so instead we added an element where the camera moves slightly in response to the mouse movement.

Inada:Some of the ideas I came up with based on my imagination weren't realistic when it came to actually implementing them, so Mr. Daishima was very helpful in that regard by offering alternative suggestions like, "How about this?"

Point 2 – The "black background + rainbow" combination evokes a sense of exhilaration.

The statement area here features a wide variety of font patterns, colors, and sizes, which, in conjunction with the message, evokes a sense of exhilaration. I wonder if it's an homage to the old Bic Camera shopping bags.

Inada:That's right. It was used in the past, and it seems that quite a few people within Bic Camera still associate Bic Camera with the "black background + rainbow (a visual with colorful text on a black background)." The other party also wanted to use it again when launching their new private brand, so we thought that if we were going to use it, we should use it in places where we want to convey a strong message, and that's why we're using it in statements, footers, and other places where we want to convey our "thoughts."

The original shopping bags had a row of logos from each manufacturer, so the fonts were all different, making them colorful and lively. Respecting that, we intentionally used a variety of fonts in this web design as well. There's a mix of rounded gothic, serif, and thin typefaces, but we aimed for a composition where, when viewed from a distance, it looks like a "rainbow" is superimposed on a black background.

The black background and rainbow effect are also utilized in this area where "user desires" are summarized.

Inada:Originally, I thought this space could work with a static design, but Mr. Daishima did a great job of creating a sense of excitement and an atmosphere of having all kinds of desires.

Daishima:This is something I really wanted to make work (laughs). I thought it wasn't a high priority, but you can now swipe and do other unnecessary things.

Point 3 – The "pleasant feeling to touch" that you experience throughout the entire site.

The way the featured area is presented and the attention to detail are also interesting.

Inada:Here too, we've utilized the B-frame to create a "magazine cover" style design, but when you hover over it, the layered effect comes through, making the frame stand out. The original idea was mine, but Mr. Daishima proposed the specific implementation method.

Daishima:Inada-san initially created a mock-up of this place using Figma.

Inada:I irresponsibly deployed a sample generated with Figma Make (Figma's AI tool) (laughs). Also, regarding the "angled movement effect" when you click on the arrows that move left and right, Mr. Daishima added an effect that made the process enjoyable, something I hadn't even considered.

The way these little B-frames bounce around is really cute (laughs). Was that Mr. Daishima's idea?

Daishima:Yes, that was my idea (laughs).

Inada:During the test update, Mr. Daishima commented, "We'll do something here" (laughs). I figured something would be implemented, so I was looking forward to it.

What is the intention behind the color coding of each product in the PRODUCTS section?

Inada:This is a spreadsheet where I've assigned the key colors for the product to the client, but the actual product packaging is also color-coded. The basic products are red, but other lines are black. I wanted to match the actual packaging, so each product is color-coded.

Daishima:This area was originally the same 3D space as FV when it was first released, but after its release, we realized we needed a product list, so we recently made some changes.

Below that is the area for the desires section. Regarding desire-related posts, it seems you can extract user feedback.

Inada:The "Desire Window" was something that was present from the orientation, and it was about wanting to create products that reflect customer feedback. This area is a declaration that the brand will not just provide products, but will work together with users to create products that are "not just good, but truly excellent," by taking into account the user's experiences, emotions, and desires.

Now that we've finished looking at the footer area, could you tell me what you both like about it?

Inada:From the individual easing effects to the colorful hover animations, the little pop-ups that appear when you scroll, and the pleasant easing of the modal elements in the First View, Mr. Daishima has infused a sense of "comfort" into every movement, from the big details to the smallest ones. I really love the overall pleasant feeling when interacting with the site.

Daishima:I always strive for a pleasant and tactile experience in every project, but this one is clearly different from any website I've created before. Normally, I try to avoid creating too many different animation patterns on a single site to maintain a sense of unity, but this time, since it's a "website that's exciting like turning over a toy box," I deliberately added a variety of animations throughout. It was a challenge for me to prioritize excitement over uniformity.

It's only been a short time since its release, but what have the results been like since launch?

Inada:We received many kind words from our clients, such as "We're excited!" and "We're deeply moved." In addition, the "Greed Window Project" that we proposed during the website creation has become a cornerstone in establishing the brand's direction, so we were pleased that the project was effective.

Furthermore, various visuals created for the web, including the black background + rainbow design, were also used at the brand launch event and when featured on various media sites. It was a gratifying achievement that the web-based creatives transcended the web and played a part in reaching users as part of the brand image and product.

"The groove of the entire team" and "everyone involved getting along well."

What did the team members gain from this project?

Inada:What I learned was the importance and enjoyment of "not setting constraints on the production side." Normally, you inevitably have to consider various constraints such as budget, schedule, and difficulty of implementation, but for me, it was a big plus that the project could proceed "with enthusiasm first," thanks to the client's enthusiasm to "create something exciting" and the reassurance that anything I proposed could be realized with the team of Minato-san and Daishima-san.

Daishima:If I had to sum it up in one word, it would be "groove." Both Inada-san and Minato-san were incredibly kind, always anticipating our needs and taking care of things so that we wouldn't have any unnecessary burdens. As a result, I was able to concentrate purely on "making the site better" and work on it, and my desire to "create something that exceeds the team's expectations" naturally grew stronger. I think this created a very positive cycle for the entire team.

Inada-san chose "feelings," and Daishima-san chose "groove." Both are related to communication, and it seems that what they both felt was quite similar.

Inada:That's right. First of all, the client was enthusiastic. So we were able to reciprocate with enthusiasm. And thanks to Minato-san's solid project management and Daishima-san's technical skills, we were able to overcome our anxieties about feasibility and proceed with the feeling of "we'll do it because it has to be done."

Daishima:I think what we've been talking about in today's interview is exactly what "groove" is. When we have a discussion with mutual respect, saying things like, "Let's do it this way, let's do it even better like this," good vibes start to emerge, and a "groove" like that of a band is born. I only experience this kind of groove a few times a year, if at all, but Mr. Inada was very sincere and responsive to everything, so it was very easy to work with him.

I see. Following up on what you just said about enthusiasm and groove, I'd like to ask you what you always prioritize when working with clients?

Inada: What I prioritize is "making sure everyone involved in the project gets along well."I believe that having good relationships allows us to help each other with various challenges and approach them positively. This will naturally lead to positive results.

To achieve this, I focus on keeping my promises, staying cheerful, avoiding harsh language, being honest and confronting challenges, and ensuring that project members don't end up unhappy. Freelance designers often find themselves caught between various roles,I want to be able to design not only the "visual aspects" but also the "overall atmosphere of the project."
Daishima:Since I've been assigned this project, I always strive not only to meet expectations but also to go the extra mile to "enhance the value of the finished product." And,This might be a feeling I share with Ms. Inada, but I think there's a limit to how many people you can work with in your lifetime.Since we're going to be working together anyway, it would be great if we could become friends through the project and work together again on the next project. I believe that these connections, which go beyond work, will become valuable assets in my life.

"Designing the atmosphere of a project" and "connections that go beyond work." I felt that these are feelings that arise from working with different people each time as a freelancer. "Quality" and "human relationships" tend to be contradictory (in organizations, people tend to be harsh), but do your sensibilities stem from not belonging to an organization?

Inada:Fundamentally, I live my life wanting to make friends. No matter how wonderful a website is, it would be very sad if it resulted in everyone falling out and never being able to see each other again.While striving for quality, we want to prioritize ensuring that "all project members are happy." That's what we want to cherish.Of course, if the quality is low, no one will ask you to do the work, so I was happy that everyone on this project was able to maintain a high level of quality while building good relationships.

Daishima:If you really think about why we work, I believe it's ultimately "to be happy." That's why it's such a shame when relationships end on bad terms.Like Ms. Inada, the thing I'm most careful about is maintaining a sense of respect for others.No matter how tough the exchanges may be, I think that will help us get through it.

Inada:In that respect, Bic Camera treated us with enthusiasm and respect. That's why our production team felt a strong desire to reciprocate and was able to maintain our motivation. I think the client's respect for our production team was one of the factors that contributed to the success.

Ms. Daishima, you're also involved with the design collective Nauts, aren't you? You mentioned earlier that the members were having a lively discussion about fonts. Does Nauts function as a place where you can share information, both professionally and mentally?

Daishima:Yes, quite a lot. We chat about all sorts of things on Slack. Most of the members work alone, so I'm sure they get lonely and are happy to be able to talk to everyone (laughs). Talking and consulting with each other provides emotional support, which I personally am very grateful for.

I see. Lately, I've noticed a trend of freelancers returning to full-time employment. I'd love to hear your thoughts on the possibilities of "individual creators who aren't affiliated with a company," especially in light of your current situation.

Daishima:Looking back on the past two years we've been doing this as Nauts,Of course, being able to collaborate with each other is important, but even more so, the "emotional support" we provide each other is a huge factor.When you're alone, it's hard to find someone you can easily talk to, and you tend to feel lonely, especially when you're exhausted. Just knowing that you have friends you can talk to at times like that is incredibly reassuring. Plus, being able to see the amazing output that the members have produced is a great source of inspiration.

In addition, Nauts' Slack platform even has a "general chat channel," where we often have lively discussions about topics completely unrelated to our main job, such as craft beer, beauty products, and cats.I feel that these seemingly trivial interactions enrich my life and give me even more energy.

Inada:I believe the strength of an individual creator lies in their ability to approach their work with a strong sense of responsibility. Even when feeling unwell, they have no choice but to do the work themselves, and there's the pressure of knowing that their output serves as their business card. But that's precisely why a sense of determination to see things through to the end develops, and the ability to persevere through that "final step" is a good thing.

Also, I find it interesting that I can freely think for myself about things like proposals, assignments, project management methods, and how to create design files, without being bound by organizational constraints.What kind of work allows me to unleash my full potential? I can freely experiment and customize that each time.I think that's one of the unique and appealing aspects of being a freelancer.

Big Idea Brand Site: Production Credits
Project Manager/Director: Saori Minato
Art Director/Designer: Takuro Inada (17design.)
Front-end Developer (Big Idea Official Website): Masayuki Daishima (Calmhectic inc.) Front-end Developer (BicCamera.com Special Feature Page): Ciraf inc.
Brand Owner/Brand Direction: Bic Camera
Creative Direction/Planning/Produce: Cross-border
Art Direction/Logo Design/Graphic Design: terminal Inc.
Movie Production: zow films