GRAPHENT WEB SITE
ブランドの本質を掘り下げ、静けさの中に強さを宿すビジュアルを設計。タイポグラフィとシンプルなアニメーションを中心に設計されています。コーディングは、体験の滑らかさと余白の美学を織り込み、情報が自然と届く、静謐で研ぎ澄まされたインターフェースを目指しました。
GRAPHENTの公式サイトでは、ブランドの哲学と美意識を言葉より先に伝えるよう、ミニマルでありながら奥行きを感じさせる構成とタイポグラフィ設計を行いました。色調はニュートラルで統一し、情報と余白の関係性を大切にすることで、見る人の解釈を妨げない「静かな強さ」を表現しています。
技術面では、シームレスな体験を提供するため、Swup.jsによる非同期遷移を採用。さらに小さなアニメーションを複雑に組み合わせることで、静寂を邪魔しない、細やかで質の高い動的演出を加えています。
さらに、ProjectページではWebGLの描画技術を基盤に、ユーザーの動きとグラフィックが呼応するインタラクティブな体験を実装。グラフィック要素とユーザーの動きが連動する体験により、ブランドの創造性や技術的感度を可視化し、静的な構成の中にも動的で没入感のある空間を生み出しています。
画像のプリロード管理やマスクアニメーション、コンテンツマネージメント・システム、WordPress側の更新性も実装し、デザイン性とCMSの実用性の両立を図っています。構造的にはセマンティックなHTML、SCSSによる設計的なスタイル管理、アクセシビリティとレスポンシブデザインにも配慮しています。
結果として、デザインと技術が有機的に連動した、GRAPHENTの思想を伝えるメディアとしてのウェブサイトを実現しました。
GRAPHENTの公式サイトでは、ブランドの哲学と美意識を言葉より先に伝えるよう、ミニマルでありながら奥行きを感じさせる構成とタイポグラフィ設計を行いました。色調はニュートラルで統一し、情報と余白の関係性を大切にすることで、見る人の解釈を妨げない「静かな強さ」を表現しています。
技術面では、シームレスな体験を提供するため、Swup.jsによる非同期遷移を採用。さらに小さなアニメーションを複雑に組み合わせることで、静寂を邪魔しない、細やかで質の高い動的演出を加えています。
さらに、ProjectページではWebGLの描画技術を基盤に、ユーザーの動きとグラフィックが呼応するインタラクティブな体験を実装。グラフィック要素とユーザーの動きが連動する体験により、ブランドの創造性や技術的感度を可視化し、静的な構成の中にも動的で没入感のある空間を生み出しています。
画像のプリロード管理やマスクアニメーション、コンテンツマネージメント・システム、WordPress側の更新性も実装し、デザイン性とCMSの実用性の両立を図っています。構造的にはセマンティックなHTML、SCSSによる設計的なスタイル管理、アクセシビリティとレスポンシブデザインにも配慮しています。
結果として、デザインと技術が有機的に連動した、GRAPHENTの思想を伝えるメディアとしてのウェブサイトを実現しました。
We designed visuals that delve into the essence of the brand, embodying a strength within serenity. The design is centered on typography and simple animations. In our coding, we aimed for a serene and refined interface where information is conveyed naturally, weaving together a smooth user experience with an aesthetic of negative space.
On the official GRAPHENT website, we crafted a composition and typography that is minimal yet conveys a sense of depth, communicating the brand's philosophy and aesthetic before words are needed. The color palette is unified with neutral tones, and by carefully considering the relationship between information and whitespace, we express a "quiet strength" that does not obstruct the viewer's interpretation.
On the technical side, we adopted asynchronous page transitions using Swup.js to provide a seamless experience. Furthermore, by intricately combining subtle animations, we've added delicate, high-quality dynamic effects that do not disturb the tranquility.
On the Project page, in particular, we implemented an interactive experience based on WebGL rendering technology, where graphic elements respond to user movements. This experience visualizes the brand's creativity and technical sensibility, creating a dynamic and immersive space within an otherwise static structure.
We also implemented image preloading, mask animations, and a content management system, ensuring updatability via WordPress to achieve a balance between compelling design and practical CMS functionality. Structurally, we prioritized semantic HTML, design-oriented style management with SCSS, and gave careful consideration to accessibility and responsive design.
The result is a website that serves as a medium to convey the philosophy of GRAPHENT, where design and technology are organically integrated.
On the official GRAPHENT website, we crafted a composition and typography that is minimal yet conveys a sense of depth, communicating the brand's philosophy and aesthetic before words are needed. The color palette is unified with neutral tones, and by carefully considering the relationship between information and whitespace, we express a "quiet strength" that does not obstruct the viewer's interpretation.
On the technical side, we adopted asynchronous page transitions using Swup.js to provide a seamless experience. Furthermore, by intricately combining subtle animations, we've added delicate, high-quality dynamic effects that do not disturb the tranquility.
On the Project page, in particular, we implemented an interactive experience based on WebGL rendering technology, where graphic elements respond to user movements. This experience visualizes the brand's creativity and technical sensibility, creating a dynamic and immersive space within an otherwise static structure.
We also implemented image preloading, mask animations, and a content management system, ensuring updatability via WordPress to achieve a balance between compelling design and practical CMS functionality. Structurally, we prioritized semantic HTML, design-oriented style management with SCSS, and gave careful consideration to accessibility and responsive design.
The result is a website that serves as a medium to convey the philosophy of GRAPHENT, where design and technology are organically integrated.