増田晶文

作家 増田晶文さんのブランディング、グラフィックデザイン、ウェブサイト構築を手がけました。 小説や書籍などの作品をオンライン上で公開し、増田晶文さん自身の魅力を広めたいという願いを視覚的に具現化するお手伝いをしました。 ウェブサイトは、国内外の多数の主要デザインアーカイブに掲載され高い評価をいただくことができました。 ウェブサイトはタイポグラフィにも気を配り、独自技術である合成ウェブフォントを使っています。

Masafumi Masuda

I worked on the design and development for the author Masafumi Masuda. I helped visually realize his desire to showcase his works online and expand his appeal. The website received high acclaim and was featured in numerous major design archives both in Japan and abroad. The website also pays close attention to typography and utilizes proprietary technology in the form of synthesized web fonts.

Images

増田晶文さんの独自性を尊重し、名前の書体には上品さとラフな雰囲気を兼ね備えたGaramond Classicoと筑紫オールド明朝を選択し、日本語とアルファベットの大きさのバランスを調整した合成フォントをつくりました。 この選択は、増田晶文さんの個性を視覚的に引き立たせるとともに、独自の魅力を伝える手段となりました。 一方で、本文には読みやすさを考慮し、リュウミンとAdobe Garamond Proを選択しています。

For his name, I chose Garamond Classico and Tsukushi Old Mincho, which combine elegance with a relaxed atmosphere. I created a synthesized font by adjusting the balance between Japanese and alphabetic character sizes. This choice not only visually highlights Akifumi Masuda’s personality but also serves as a means to convey his unique charm. For the body text, I selected the highly readable Adobe Garamond Pro.

名刺デザインにおいて、増田晶文さんの独自の作家らしさと上品さを最大限に表現するため、余白を巧みに活用したシンプルで洗練されたデザインを採用しました。 このアプローチにより、情報がクリアに配置されつつも、余白が空間を演出し、洗練された印象を与える効果を生み出しています。 デザインのシンプルさは、紙の手触り感と相まって、名刺全体に温かみと独自性をもたらし印象に残るものとなっています。

For his business card design, I utilized a layout that makes the most of white space to fully express his unique identity and refined style as an author. The design ensures that the information is clearly presented while the use of white space creates a sense of balance and sophistication. The simplicity of the design, combined with the tactile quality of the paper, adds warmth and individuality, leaving a lasting impression.

Images

ウェブサイトの制作においては、コストを抑えつつも品質を損なわないため、Windows環境でも美しく表示されるNoto Serifを選択しました。 この配慮により、増田晶文さんの作品が異なるプラットフォームや環境でも一貫して高品質に魅せることを可能にしています。 またアルファベット部分には日本語との細かいサイズ調整がされた欧文書体を指定し、読みやすく美しいタイポグラフィを実現しています。

In creating the website, I chose Noto Serif to ensure beautiful display even in Windows environments, keeping costs low without compromising quality. This careful selection allows his works to maintain consistently high quality across different platforms and environments. Additionally, I specified a Latin typeface finely adjusted for size compatibility with Japanese text, achieving typography that is both legible and visually appealing.

増田晶文さんは作家として活動されており、自身の作品をネット上で広く公開し、読者との繋がりを深めたいと考えていました。 また、増田さん自身の魅力や作品のエッセンスを的確に伝え、その名前を広めることが求められました。 増田晶文さんの大切にする要素を詳細にヒアリングし、その要素を視覚的に表現するブランディングを実施しました。 シンプルなデザインに、どこか人間らしい温かみを取り入れることで、繊細さを表現しました。

He wanted to widely share his works online and deepen his connection with readers. It was also essential to accurately convey his unique appeal and the essence of his works, helping to spread his name further. I conducted interviews to understand the elements his values most and implemented branding that visually expresses those elements. The design incorporates a simple aesthetic with a touch of warmth.

Images

文字や文章が主役になるウェブサイトのためタイポグラフィにも気を配りました。 グラフィックデザインでは、ブランドのための独自の合成フォントを作成しデザインに個性を持たせながら一貫性を持たせますが、合成フォントをウェブサイトでも使用できる独自の技術をつかい美しい文字組みを再現しています。 この技術は日本語とアルファベットの大きさをAdobe Illustratorと同じように微調整できる技術です。

I paid close attention to typography, as this website revolves around text and writing. In graphic design, I create unique composite fonts for branding, ensuring both individuality and consistency in the design. Using proprietary technology, I have made it possible to use these composite fonts on the website as well, faithfully reproducing beautiful typography. This technology allows for fine adjustments, just like Illustrator.

Images

ウェブサイトの全体的な魅力を一層引き立てるために、サイト全体にアニメーションを組み込んでいます。 例えば、ページ遷移時における画面のちらつきを排除し、シームレスで滑らかなページ遷移を実現するために、Nuxtを活用したコーディング手法が採用されています。 このアニメーションの導入により、読者はウェブサイト内を移動する際に、不快な遷移効果から解放され、より快適で没入感のある体験が得られます。

To enhance the overall appeal of the website, I have incorporated animations throughout the site. A coding method utilizing Nuxt has been adopted to eliminate screen flickering during page transitions and achieve seamless, smooth page navigation. By introducing this animation, readers are freed from unpleasant transition effects, providing an immersive experience as they navigate through the website.

Nuxt開発によるアニメーションの取り入れにより、増田晶文さんの文学的な世界観がウェブサイト上でよりダイナミックに表現され、訪問者に深い印象を与えることでしょう。 増田晶文ブランディングの成果として、ウェブサイトとグラフィックで一貫性のあるデザインが増田さんの作品と響き合い、作品の本質を的確に伝えるプラットフォームが完成しました。 増田晶文さんの名前を世に広める一助となれたことを嬉しく思います。

Through the incorporation of animations via Nuxt development, his literary world is dynamically expressed on the website, leaving a deep impression on visitors. As a result of the branding efforts, a consistent design across the website and graphics resonates with his works, creating a platform that effectively conveys the essence of his creations. I am happy to have been able to contribute to spreading his name.

Links

Website

Release

2022

Credits

Art Direction

.

Yohei Hashimoto

Logo

.

Yohei Hashimoto

Design

.

Yohei Hashimoto

Coding

.

Yohei Hashimoto

System

.

Yohei Hashimoto

Technologies

Google Spreadsheet

Vue and Nuxt2+Typescript

Composite Web Font

  • Parade Artist

  • どこでも待合室

  • Brew

  • Password Transmitter

  • THOUGHT

  • Parade Artist

  • Parade Artist

  • THOUGHT Theme 1

  • Brew - Printing System