tetopaint

白やグレーを基調としたクリーンなキャンバスに、落ち着きのあるグレーを配することで、信頼感と職人の誠実さを表現した配色です。写真素材は自然光を感じさせる柔らかいトーンで統一され、「塗り替えると、また好きになる」というコピーが持つ情緒的な温度感と美しく調和しています。タイポグラフィは、本文に親しみやすい丸みのあるゴシック体を採用しつつ、見出しには洗練された欧文サンセリフを添えることで、現代的なデザイン性をプラス。サイト全体のアートディレクションにおいても、清潔感が徹底されています。レイアウトは、要素間に十分な余白を設け、縦のラインを意識したグリッドで整えることで、視線が自然と下へ流れる心地よいリズムを構築。特にServiceセクションでのレイヤー表現や、Works・Flow・Contactにおけるカードの配置・回転が、整然としたグリッドに遊び心ある変化を与え、手仕事の温かみや空間的な奥行きを感じさせるアクセントになっています。スクロールに合わせて要素がふわっと浮き上がるフェードインを多用し、主張しすぎない静かな動きで統一。CTAは背景色と対比するカラーで視認性を高め、ホバー時の色反転といったマイクロインタラクションにより、ユーザーの操作を優しく後押しする丁寧な導線設計となっています。

Likenomad株式会社

ブランドの主役である「猫」の温かみを引き立てるオレンジやはっきりしたブルーを配した、親しみやすくナチュラルな配色設計。様々なテイストのイラストや写真の猫をふんだんに散りばめ、掲載写真のトーンも自然光を感じさせる明るく優しい質感で統一されており、企業の持つ「猫と人をつなぐ」というビジョンを視覚的に表現。タイポグラフィは、丸みを帯びたサンセリフ体を見出しに大きく配置してポップな印象を与えつつ、本文には可読性の高いゴシック体を採用し、情報の信頼性を担保。余白を広くとりながらセクションごとに明確な区切りを設け、縦スクロールの中でリズムよく情報が入ってくるよう設計されています。モーション言語は、スクロールに合わせて要素がふわっと浮き上がるフェードインや、画像が緩やかにズームする演出を取り入れ、ポイントに横方向のアニメーションやモーションを使用して猫のしなやかな動きを連想させるような心地よいテンポ感を創出。丸みを帯びたボタンで押しやすさを示唆し、ホバー時に色が反転するなどのマイクロインタラクションが、ユーザーの操作を軽やかに後押しする導線となっています。

IE3

徹底して装飾を排した白のキャンバスに、プロジェクトと黒のサンセリフ体のみを配置した、極めてミニマルでストイックなデザインです。背景を「無」にすることで、ヒーローエリアで再生される鮮烈な映像作品や、グリッド状に整然と並べられた実績サムネイルの色彩・質感を最大限に引き立てています。テキストは可読性は高くしつつも主張しない、デザインスタジオらしい論理的な知性を演出。厳格なグリッドシステムに基づきつつも、広大なホワイトスペースを確保することで、情報の羅列ではない作品鑑賞のための空間を構築しています。CTAやナビゲーションは黒のテキストリンクで統一され、主張しすぎず常にアクセス可能な位置に控え、あくまでコンテンツの引き立て役に徹した機能美が貫かれています。作品を見せるためのポートフォリオのように見やすさを追求した設計です。

yuppa(ゆっぱ)

湯葉を使ったヘルシーファストフードのシズル感と、ブランドの遊び心を体現したポップでモダンなサイト。湯葉の白やベージュを基調にしつつ、食材由来の鮮やかなオレンジやグリーン、イエローをアクセントに散りばめ、食欲をそそる彩度の高い写真素材が高コントラストで配置されています。タイポグラフィは、太めのサンセリフ体で力強いインパクトを与えながら、和文には可読性の高いゴシック体を採用し、カジュアルさと信頼感を両立。レイアウトは、雑誌のように写真とテキストを大胆に重ね合わせたり、斜めのラインや不規則なグリッドを用いることで、ファストフードらしい軽快なリズムと躍動感を生み出しています。角丸や太めの線の装飾がカジュアルな印象を与えて、具材が飛び出すような「賑やかさ」も演出。ホバー時にはボタンの色が反転したり、アイコンが回転するなどのマイクロインタラクションが仕込まれ、ユーザーの操作に心地よいフィードバックを返しつつ、店舗や商品ページへの導線をスムーズに繋ぐ設計となっています。

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901