株式会社Minori
- Stack
- HTML / SCSS / JavaScript / PHP / WordPress
- Duration
- 3週間
- Design
- PC・SPデザイン制作(Figma) / 最終調整はディレクション担当者
企業の想いを伝える情報設計から、デザイン・実装・CMS構築までを担当。公開後の更新や運用も見据えて設計しました。
Context
「brunest.studio」は、温かさを感じる “brun” と、安心できる居場所を意味する “nest” を重ねて名付けた、自身の屋号です。
ただ制作物をつくるだけではなく、相手の想いや背景を丁寧に受け取り、整理し、必要な人へきちんと届く形にすること。そんな制作のあり方を「想いを、正しく届ける。」という言葉に込めています。
ポートフォリオの再設計をきっかけに、この屋号に込めた想いや制作姿勢まで含めて、brunest.studioらしさを視覚的に伝えられるロゴを制作しました。
目指したのは、職種や頭文字をそのまま記号化したマークではなく、自分が「どうつくるか」まで感じられるシンボルです。
現在のWeb制作・実装だけに意味を限定せず、これから深めていきたいUXや情報設計にもつながることを意識しながら、造形と言葉の両面からブランドの軸を整理していきました。
Target
主に想定したのは、制作会社のディレクター・PM・デザイナーなど、Web制作をともにつくる人たちです。
「何ができる人か」だけでなく、「何を考え、どう向き合って制作する人なのか」まで伝わることを大切にしました。
また、現在のWeb制作・実装領域だけに閉じず、将来的なUX/UI・情報設計への展開も見据え、特定の職種や技術だけに意味が限定されないブランドを目指しています。
Overview
自身の屋号「brunest.studio」のブランドロゴを制作しました。
形を探る中で、もともと制作で大切にしていた「異なる視点を捉え、整理し、つなぐ」という考え方と、重なり合う矩形の構造が結びつきました。
3つの矩形をClient・User・Business、それらの先に置いたひとつのドットをIntentと定義し、複数の視点を整理・接続しながら、ひとつの意図へ向かう自身の制作姿勢をシンボルへ落とし込んでいます。
Project Information
Production Note
コンセプトや造形を検討する過程では、AIを壁打ちや思考整理の補助として使用しました。
形の制作、比較検討、採否の判断、細部の調整から最終データの制作までは自身で行い、ブランドとして何を残し、何を削るかを検討しながら完成形へ落とし込んでいます。
Approach & Implementation
案件ごとに異なる目的やデザイン、
運用条件に合わせて、
実装方法や情報の見せ方を考えています。
いつも大切にしていることは、
Processへ。
自身の制作姿勢を、単なる頭文字や装飾的なシンボルではなく、意味を持つ構造として表現したいと考えました。
円や四角形、シェイプ、タイポグラフィなど複数の方向から造形を検討。その中で見つけたのが、3つの正方形が重なり合う形です。
この形を探る中で、もともと制作で大切にしていた「Client / User / Business、それぞれの視点を捉え、整理する」という考え方と結びつきました。
3の視点は、互いに切り離されたものでも、相反するものでもありません。それぞれが重なり合う部分を見つけ、整理し、ひとつの方向へ調和させていく。その関係性を、3つの正方形が重なる構造として表現しました。
重なった部分は、あえて色が薄くなる設計にしています。異なる視点が整理されることで複雑になるのではなく、伝えたいことがよりクリアになり、届く形になっていく。そんな意味を、重なり方と色の変化にも込めています。
異なる視点を、重ねる。
整理し、調和させる。
伝えたいことを、よりクリアな形へ。
3つの四角形によって異なる視点の重なりは表現できた一方、それらを「何のためにつなぐのか」という方向性までは表現できていませんでした。
四角形とは別に、小さなドットをひとつ配置。このドットをIntent=「想いの軸 / 向かう先」と位置づけました。
ドットの位置や数も複数パターンを比較し、最終的には上部に1点のみ配置。Client / User / Businessという3つの視点を整理・接続し、その先にあるひとつのIntentへ向かう構造として意味を整理しました。また、このドットには屋号「brunest.studio」に含まれる「.」の意味も重ねています。
整理することは、ゴールではない。
届けたい意図へ、向かうために。
ひとつのドットに、目的地を込めました。
「3つの視点は対等」という考えから、初期案では3つの四角形をすべて同じサイズで設計していました。しかし、中央の四角形だけを塗りで表現すると、同じ寸法でもアウトラインの矩形より視覚的に大きく見えます。数値上は均等でも、実際の見え方では一つの要素だけが強く感じられる状態になっていました。
対等であることを「すべて同じ数値」に固定せず、最終的な見え方によって均衡させることを優先しました。
1000×1000pxの制作フレームと10pxグリッドを基準に、四角形のサイズ・重なり・線の濃度などを比較。中央の塗りは310pxまで調整し、アウトラインとの視覚的な重量差を補正しました。線についても、構造を認識できながら主張しすぎない濃度へ調整しています。
対等だからこそ、同じにしない。
数値ではなく見え方を基準に、
3つのバランスを整えました。
ひとつの完成形だけでは、背景色や表示サイズなど使用環境が変わった際に、ブランドマークを適切に使用できません。また、ロゴだけが独立した意匠になるのではなく、ポートフォリオサイトを含めたブランド全体との一貫性も必要でした。
基本構造を変えず、用途に応じたバリエーションを設計。同時に、ロゴを構成する視覚要素をポートフォリオサイトにも展開しました。
基本となるFull colorに加え、すべてを線で構成するMono-line、中央の塗りを残したMonotoneを制作。Figma上でベクターデータとして設計し、SVGで運用できる状態にしています。また、矩形の重なり・細い線・ドット・余白といったロゴの要素を、ポートフォリオサイトのグリッドや装飾にも展開しました。ロゴタイプと組み合わせるタイポグラフィについても、ニュアンスを持ちながら個性が強くなりすぎない書体を選定し、サイト全体との一貫性を意識しています。
ロゴだけで、ブランドは完結しない。
重なり・線・ドット・余白を、
サイト全体の視覚表現へつなげました。
Visual