table of contents
- ◾️Background – A project to define the value that the school will provide to society as it approaches its 100th anniversary.
- ◾️MVV – Philosophy writing is about uncovering "words that clients can naturally be proud of."
- ◾️Design – "Illustrative Imagination" to Express the Future of Hachimoji Academy
- ◾️Key point of the site ① – A scrolling experience where "the function of the illustrations changes"
- ◾️Key point of the site ② – The "reading rhythm" of decorative elements and each section
- ◾️Key point of the site ③ – "Design comprehension skills" to understand the message conveyed through the design.
- ◾️ Connecting copy, visuals, and interactions into a single "story"
- ◾️By creating "space for thought" for the client and making choices together, the result is something they can be truly satisfied with.
◾️Background – A project to define the value that the school will provide to society as it approaches its 100th anniversary.
First, how did this project come about?
Payan:This story is about a related company of Hachimoji Gakuen, which was previously produced under the leadership of SHIFTBRAIN.College 8It all started when they appreciated our work on the mission logo and website for "[Project Name]". In that project, I was in charge of concept creation, copywriting, and direction, while Nakagawa-san was in charge of art direction and design. Following that, we were asked to take on the "Hachimoji Gakuen 70th Anniversary Project".
Regarding the project background,Hachimonji Gakuen was facing a "generational transition" in various aspects, including management and the way the school operates. It was in the process of reforming its education, shifting from its previous vocational school education to one that placed more emphasis on practical learning and learning in collaboration with society and industry.Therefore, at this milestone of the 70th anniversary, the project began not with simply creating an anniversary website, but with redefining "the value that the school will provide to society as we move towards the 100th anniversary."

How did the project proceed from this point?
Payan:First, in order to shape the future of Hachimoji Gakuen, we conducted interviews with the management team based on a "philosophy creation sheet" that we had prepared. Next, we conducted interviews that also served as roundtable discussions with the principals and department heads of each school that are driving the reforms. We articulated from multiple perspectives the strengths and culture of Hachimoji Gakuen, as well as the future we want to realize.
What became clear through this process was that Hachimoji Gakuen is not merely a "school for obtaining qualifications," but rather "an entity that opens up the future for people, communities, and industries through purposeful practical learning."Furthermore, the idea that graduation is not the end, but that students can return to the school as many times as they like to continue their studies, has emerged as a distinctive feature of Hachimoji Gakuen.

Based on this, we began by organizing the present and future of Hachimoji Gakuen.
◾️MVV – Philosophy writing is about uncovering "words that clients can naturally be proud of."
What aspects of Hachimoji Gakuen became clear through the interviews? How did you incorporate those characteristics into the school's design?
Payan: From here, we started formulating the mission and vision. For the main copy of the site, we presented a wide range of options, including a straightforward approach to conveying the mission, a catchy approach that would resonate with students, and a playful approach, and discussed them extensively with the client.
The one that was ultimately chosen was "People, Things, and Work."The school's core values—nurturing people, working alongside the Mito community, and contributing to the future of work and industry—are expressed in a concise manner, and the name was also praised for its pleasant sound and ease of memorization.



I understand that the phrase "home port of learning" in the vision came from a client. I was particularly struck by Payan's post on X, where he said, "Philosophy writing is about unearthing words that the stakeholders of the business can be proud of in a natural way."
Payan: I believe that the words that come naturally from clients are the words they can actually use themselves.Copywriting isn't the end of the process; it's crucial that it continues to be used in practice. Especially with company philosophies and MVVs, while polishing them is important, simply making them neat can make them too detached from the character of the business or organization. Ultimately, this means no one will use them.
MVV (Mission, Vision, Values) is something that the CEO, management team, and people in key positions should articulate in their own words and then disseminate throughout the entire organization.That's why, instead of imposing a single correct answer, we work with our clients to choose "the language that is easiest for their organization to use."To achieve this, the key is how to extract keywords from the client. We always try different approaches, such as engaging in numerous conversations and delving deeper from various angles.
◾️Design – "Illustrative Imagination" to Express the Future of Hachimoji Academy
Mr. Nakagawa, how did you approach translating the main tagline, "People, Things, and Work," into visuals?
Nakagawa:When considering the "connections between people" and "the way new value is created" that this copy conveys, and the theme of "school,"I thought a pop and lively atmosphere centered around illustrations would be a good fit.
I also wanted to express a sense of optimism and forward momentum. At the same time, I wanted to maintain an academic impression befitting a school. I explored how to visually represent that balance.From thereWe created an image board to define our goals and ensure we shared the same vision with the other party.

At this point, we've also made suggestions for illustrators.
Nakagawa:Based on this, we shared the overall tone, manner, and feel of the site, and then translated it into the design. At this point, we also proposed illustrators, and the one we liked best was...Jintaro-sanWe have decided to ask them for help.
Incidentally, the design I proposed afterward is also quite similar to the current one. I started putting the design together after it was decided that I would ask Jintaro-san to do it.Jintaro's illustrations are appealing for their "dynamic composition with a sense of perspective," and we wanted to create a key visual that would make the most of that appeal.The final site structure was also largely finalized at this stage. We designed the scrolling behavior and the transition to the second view while considering these aspects at this point.
Payan:This project wasn't about looking back on the anniversary, but rather about showcasing "the future of Hachimoji Academy,"Rather than using photos and text as concrete information, I thought it would be good to have some blank space, allowing viewers to imagine the future of the school through illustrations.

◾️Key point of the site ① – A scrolling experience where "the function of the illustrations changes"

Now, let's take a look at the actual website and hear about the points that you both focused on. What impressed me most about the site was the way the role of the illustrations changes as you scroll, starting from the first view.
Nakagawa:In a long, vertical website like this one,I believed it was important not only to organize information and create a detailed worldview, but also to create a memorable experience as the user scrolls through the page.Initially, there was a plan to present the five illustrations as a single key visual, but that would only be viewed once and then forgotten. Therefore,How about creating a visual effect where five illustrations move around the site, changing their "role" and "meaning" as they go?
Furthermore, I thought that the repeated appearance of these illustrations would create a sense of "storytelling" throughout the entire site, allowing them to function not merely as decoration, but as "visuals that convey a concept."

I see. "Scrolling experience" and "storytelling."
Nakagawa: I think that the scrolling experience allows readers to naturally pay attention to the site and its content as they read on. When the movements of each section are connected and unfold as a single story, I think readers will continue reading while wondering, "What will happen next?"
The illustrations used here correspond to each of the five vocational schools, clearly showcasing the unique characteristics of each institution.
Nakagawa: Jintaro's illustrations have a very strong impact, one by one. That's why I thought that showing them one by one, rather than all at once, would allow viewers to appreciate the unique charm of each illustration more.

Payan: The map of Mito in the About section, where the illustrations ultimately settle, wasn't necessarily a required piece of content, but I included it because I thought it would be important to emphasize the location of "Mito" in order to express the regional characteristics that are unique to Hachimoji Gakuen. The intention was to "clearly convey the regional characteristics of Mito."

◾️Key point of the site ② – The "reading rhythm" of decorative elements and each section

Payan:Distributed throughout the siteThe geometric patterned parts are,Nakagawa designed it to match Taro's illustrations. Combining these decorative parts is typical of Nakagawa's style.
Nakagawa: Jintaro's illustrations are characterized by a slightly rough texture and a noise-like feel. I drew inspiration from that and scattered colorful elements around them.The aim was to create a rhythm throughout the entire design.
Payan:When I reviewed the introduction after implementing it, I felt it was a bit too long, so I refined it by highlighting only the important parts in blue. The idea was that the main points would be conveyed by reading just these four sections.
Next is the history section, and this cobalt blue section creates a nice rhythm within the overall design. The design changes dramatically with the insertion, shifting the viewer's perspective from vertical to horizontal, and making the scroll stop. It creates a rhythm that makes you want to read.
Payan: The content presentation here is also impressive. The way the cards appear as you scroll is a great way to grab attention. It's through the accumulation of these small details that the site not only displays information but also conveys the brand's atmosphere.
Nakagawa: HereThe first time you play, the card appears slightly tilted. I thought that kind of animation suited this design well.

Payan: Also, it's important to show the content of Hachimoji Gakuen with numbers. Brand sites like this can sometimes seem a little weak if they only rely on the worldview. In that respect, having information backed by numbers gives a sense of credibility. Rather than expecting people to read everything carefully, we are conscious of conveying the message that "they have a solid track record" even if they just glance at it.

Even in the "Voices of Faculty and Staff" section, the overall rhythm of each section is very pleasant.
Payan: It has a rhythm to it, doesn't it? This was also Nakagawa's design idea. I thought that the meaning of this content was not so much about people carefully reading the content, but rather in the fact that "teachers are commenting." By having teachers from each of the five vocational schools appear, it becomes easier for faculty and staff to feel that "this is their site." It's more of an internally focused piece of content. But when we opened it up, everyone gave us really great comments.

◾️Key point of the site ③ – "Design comprehension skills" to understand the message conveyed through the design.
The final section, "Vision Beyond 100," is structured to convey the future we aim for as we approach our 100th anniversary.
Nakagawa: Wang Sheng (Shiftbrain), who is in charge of development, did a great job implementing this. I only told him something like, "It would be nice if they came out alternately from the left and right," but he finished it in a really great way.

It seems like some ideas have been added to the implementation as well.
Nakagawa:Yes, that's right. I basically left the hovering part up to them, and the way the History cards appear tilted slightly was exactly what I had hoped for, and they brought it to life.
Payan: "Design comprehension skills," right?The design, with the cards stacking on top of each other, is cool and very much in Nakagawa's style, and it really showcases Wang Sheng's design interpretation skills.
Design comprehension. That's a great phrase.
Nakagawa: When working with Shiftbrain members, even though we're on the same team, the sense of distance is a little different than when working with members of the same company. So I'm always thinking about "how much can I ask them to do?" when I'm communicating, and in that respect, having someone like Wang Sheng with "design comprehension skills" makes things go much more smoothly.
And the final illustration, which looks like the character is about to start running, is quite striking.
Nakagawa:This is a part that I decided on after talking with Payan-san, saying, "We want to create a sense of closure at the end." Wang Sheng-san also directed this part. When the illustrations came in, we were talking about how it might be interesting to slightly shift and move the layers, and he brought that idea to life in the implementation.
Payan:Actually, the illustration that concludes this vision is a frontal view of the mission illustration. It gives off the feeling of "moving forward into the future from here."


◾️ Connecting copy, visuals, and interactions into a single "story"
Were there any key points or difficulties you encountered during the production process?
Payan:What we focused on most this time was creating a website structure that would keep readers engaged until the very end. The theme of the 70th anniversary tends to involve a lot of information, and there was a lot of substantial content, so we paid close attention to the amount of text, the placement of content, and the rhythm of presentation. As a branding site, we aimed to create a structure that would convey all the necessary information while also providing a pleasant reading experience.
Also, this time, I tried a bit of a challenge in terms of the overall flow.We start by stating our "mission," then introduce our various initiatives, and finally conclude with our "vision" for the future.I think it was a good idea to present the mission and vision as a "story" rather than just "showing them side by side."


Payan:Visually, what left the biggest impression on me was definitely the first view. Jintaro's illustrations and Nakagawa's art direction skills in translating the concept into visuals are fully on display. I feel that a major strength of this site is that the copy, visuals, and interactions are not separate entities, but are connected as a single story.
Nakagawa:Because it's a vertically oriented website, I paid particular attention to maintaining a consistent worldview while organizing a lot of information to avoid monotony. Finding the right balance between readability and visual appeal was something I experimented with until the very end.
It's definitely the illustrations created by Jintaro-san and the way they're used in the key visual leading into the About section. The dynamic composition of the illustrations, with their effective use of perspective, has given the entire site a unique worldview and depth. In addition, to bring out its full potential, Ousei-san repeatedly tested and adjusted the finer details of the motion. Although many of the requests were abstract, he carefully grasped our intentions and brought them to life, so I think the site has turned out to be both visually pleasing and enjoyable.
◾️By creating "space for thought" for the client and making choices together, the result is something they can be truly satisfied with.
What did you gain from this project?
Payan:What I realized again this time is that in order to produce good output, it is important to first align your perspective with that of the client.
In branding and concept design, the creators aren't the only ones who hold the right answer.I believe it's essential to deeply understand the future our clients aspire to and the challenges they face, and then work together to find solutions. In this regard, we were able to proceed with the project through careful and thorough dialogue, which allowed us to build a strong relationship of trust.
Nakagawa: What I realized was important again in this project was the "relationship between words and visuals."This time, having the tagline "People, Seeing, and Work" allowed us to stay true to our direction of expression while giving meaning to the visuals and motion.
That's because the katakana copy, "Hito Mito Shigoto," was very easy to work with as a graphic. The copy placed vertically in the bottom right corner was also created first, before the illustrations were finalized. By creating this typography first, we were able to get a sense of the overall tone and atmosphere of the site.
From there, the image of "it would be nice if illustrations like this were included and moved like this" naturally spread. Also, this copy made it easy to understand what the client wanted. Considering that,I think the starting point for this design was the very phrase "People, Things, and Work."

What do you both value most in your client work?
Payan:In this project,Rather than presenting a single correct answer, we valued the process of proposing multiple approaches and creating something together with the client, making choices along the way.As a result, I feel that not only the finished output, but also the time spent thinking about "which words best represent us" and "what future we want to aim for" contributed to increased client satisfaction. The "joy of making our own choices" and the "sense of satisfaction" are definitely significant.
For example, when it comes to copywriting, we propose multiple approaches, such as Option A, Option B, and Option C. We explain each one, including the background, such as "This one conveys this message" and "This one has these advantages." For example, we could use "People, Things, Work" as the main copy, or we could put "A Home Harbor for Learning" front and center. Both have their merits. That's why, after explaining the advantages and disadvantages of each,I believe it's important to have the client consider the most important message they want to convey through this website.
The idea is that by giving clients time to think and choose for themselves, the words they use will be more convincing and heartfelt. In a sense, it's a workshop-like approach.
Payan: That's right. Instead of just making a proposal unilaterally, we "think together with the client." I think it's because we go through that process that our ideas are accepted as their own.
How about you, Nakagawa-san?
Nakagawa: I always think about design before anything else.Understanding "why" something is being made.We value this approach, and while we certainly meet our clients' requests, we believe that by deepening our understanding through dialogue and delving into what they truly aspire to, we can offer more essential proposals.
Client work isn't simply about receiving a request and producing something; it's a collaborative effort to solve problems together. That's why I think it's crucial to align our understanding through repeated dialogue and move forward in the same direction. Ideally, the entire process, not just the final output, should be a positive experience. That's the difficult part, even after all these years.
Mr. Nakagawa previously said on the podcast " Rice Roadside Conference " that "it's important to define the core principle that lies beyond the concept."
Nakagawa:Yes, for example,In this case, it's not about "looking back on 70 years of history," but rather "connecting it to the future."Because we have that core foundation, we can build upon everything from the layout and motion to the use of illustrations in a way that conveys a sense of future potential and positive energy.
The concept indicates the direction of the project, but I believe the core principle serves as the "criterion for all decisions" in the production process. As production progresses, ideas for expression, direction, and so on tend to expand, but without a clear core principle, it becomes impossible to determine whether those ideas are truly suitable for the project.
On the other hand, having a clear core principle allows you to return to it when you're unsure, and by expanding your ideas without wavering from that principle, you won't stray too far from your direction. Connections with copy and words will also naturally emerge, resulting in a more consistent overall expression.
Ms. Nakagawa also served as an instructor at CREATIVE CLASS last year, and even then she said, "It's important to be able to put into words why you do things the way you do." But she also said, "But finding that 'why' is extremely difficult."
Nakagawa:I believe that exploring "why" is less about creating a concept and more about creating a situation where you can properly explain "why this design." Once that "why" becomes clear, the core of the project naturally becomes established, and the overall expression gains consistency and persuasiveness.
To achieve this, it's important to understand the challenges through repeated dialogue with the client and consider "how to express them," but at that time, instead of applying existing role models or trends,Because it's that particular project, we keep searching for the most natural and effective way to communicate. Ideally, the result of this meticulous process will be an unprecedented output.
Finally, could you tell us about your future plans?
Payan:The biggest change in the three years since I became independent is,I've become more conscious of creating things that "function" and "contribute to the business."Originally, I chose this profession because I love "beautiful things" and "cool things," but now, rather than the output itself, I place more emphasis on how it contributes to the company's activities as my criteria for making decisions.
In that sense, I find formulating the MVV (Mission, Vision, Values) very rewarding. I would also like to take on the challenge of continuously supporting the brand building of companies beyond that. It would be interesting to not just create the MVV and be done with it, but to accompany them until those words take root in the organization and are reflected in their business activities.
I'm still searching for the answer to the question of what the CHO-P should be. While I appreciate the agility that comes with being a solo operator and the excitement of being able to assemble the optimal team for each project,Having been nurtured by many mentors and seniors, it's challenging to figure out how to pass on my experience to the next generation.To consistently aim for a truly high level, I've come to deeply realize the "strength of the organization"—the kind of team where you have a president and employees, and where you "share the same pot of rice" and "are in this together." I hope to find my own answer to this over the next few years.

Nakagawa: It's been nine years since I went independent, but even now I constantly feel like I'm no good at all, and each time I end up hating myself (laughs). But I can't just keep worrying like that, so I'm not planning to make any big changes, but I want to cherish the time I spend purely enjoying the process of making things more than ever before.

They are very active, having recently held an event called "Engineer Sessions."
Also, I definitely want to develop Nauts into an even more interesting space. I think it would be great if it became a community where people who love design and making things can easily connect, inspire each other, and give rise to new challenges. I myself hope to continue enjoying making things while receiving feedback from such connections.

Hachimoji Gakuen 70th Anniversary Special Website "People, Things, and Work."
Client:Yatsumonji-Gakuen incorporated educational institution
Producer: Tamami Maekawa (SHIFTBRAIN Inc.)
Director, Planner, Copy Writer: Pahyan Kitagawa (CHO-P inc.)
Art Director, Designer: Hirofumi Nakagawa (ANDMADE Inc.)
Developer: Serika Ikurumi (SHIFTBRAIN Inc.)
Interview Writer: Sakura Sugawara (freelance)
Illustrator: jintaro (vision track)
Photographer: Kenichi Aikawa (freelance)
Agent: Yukari Murayama (vision track)
