考動アカデミー

エネルギーに満ちた鮮やかなオレンジをメインカラーに据え、「考えて、動く。」というコンセプトを体現した、企業向け研修・人材育成、組織づくりの取り組みのサイトです。企業向けの施策でありながら、堅苦しさを全く感じさせないポップで親しみやすいトーンが画面全体を包み込んでいます。まずファーストビューで目を惹くのは、親近感のあるポップな線画イラスト。オレンジ色の差し色がサイト全体の配色とリンクし、学ぶことの楽しさや前向きな活力を視覚的に伝えています。動きのあるレイアウトと実写の組み合わせが特徴。背景に散りばめられた手描き風の波線や、カタカタと動くイラスト、取り組みを紹介するカードUIがスクロールで積み重なるなど、思考から行動へと移る「考動」の活力をサイト全体で表しているようです。そこに、グリッドをメイン背景に実際の研修風景を収めた高品質な写真を合わせることで、ポップな世界観の中に説得力とリアリティを付与しています。そして、オレンジとライムグリーンという元気なカラーの組み合わせが、画面全体にポップな活気と親しみやすさを生み出しています。人材育成の場でありながらも決して堅苦しくならず、これから学ぶ人たちの背中を明るくポジティブに押してくれるような、温かみに溢れたデザイン設計です。

【公式】ツクリオ(Tsuklio) | 手料理サブスク

角を丸めた豊富な写真レイアウトと、フラットで可愛らしい食材のイラストレーションの組み合わせが特徴的なサイトです。単なる美味しそうな料理の写真だけでなく、家族が笑顔で食卓を囲むシーンや、温かな光が差し込むキッチンの風景を多用することで、このサービスを利用することで得られるゆとりある時間や幸せな日常といったベネフィットを情緒的に訴求。また、見出し回りなどに散りばめられた野菜や調理器具のシルエットイラストが、手作りのような温もりと楽しさを演出しています。カラーリングは清潔感のある柔らかなオフホワイトをベースに、食欲を刺激し、家庭的な温もりを感じさせるオレンジをメインカラーに据えた、非常に親しみやすくアットホームな配色。アクセントとして新鮮な野菜を連想させるグリーンを配置することで、食品を扱うサービスとしての安心感とフレッシュさを表現しています。配色とイラスト、写真の色彩がこのサイトの清潔感と温かさのイメージを決定づけています。スクロールに呼応するモーションやレイアウトは奇をてらわず、見出しがポンと浮き上がり目を引き、要素がじわっとフェードインするバランスの取れたモーション。オレンジの背景色で視覚的な区切りを明確に行うことで、豊富なコンテンツ量を感じさせず、さらにホバーアクションなどの細かなこだわりを細部まで感じさせ、心地よいリズムと高いユーザビリティを実現した導線設計となっています。

FOOTAGE(フッテージ)中途採用サイト

ファーストビューから画面いっぱいに広がる、笑顔の職員のダイナミックな切り抜き写真と、「ぜんぶまるごとたのしめ!」という躍動感のある巨大なタイポグラフィから世界観が溢れ出しています。堅苦しいグリッドにとらわれず、ポップなイラストや大きな文字、縦書きのコピーなどをリズミカルに配置することで、まるで楽しい雑誌を見ているかのような、ワクワクする視線誘導を実現しています。配色は、クリーンなホワイトとベージュをベースに、温かみのあるオレンジと深みのあるネイビーなど、他の色とのグラデーションで極めてエネルギッシュでポジティブな設計。訪問看護という医療・福祉分野にありがちな堅さや静けさを払拭し、働くことの楽しさやチームの明るい雰囲気を視覚的に強く印象付けています。モーションは、各要素がポンと飛び出してきたり、背景のテキストが流れたりする楽しげな挙動で、サイト全体に活き活きとした生命感と勢いを与えています。ホバー時にはカード要素がズームしたり、視認性の高いボタンが鮮やかに変化するといった直感的なインタラクション。ユーザーを迷わせることなく、自然とインタビューや募集要項へと導く、元気で使いやすい導線設計となっています。

Likenomad株式会社

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

yuppa(ゆっぱ)

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

villa itsutsu

長崎・新上五島の自然と静けさを主軸に据えた構成により、閲覧者に「非日常の上質な滞在体験」を直感的に伝えるデザインになっています。落ち着いたベージュオレンジをベースカラーに、文字色には落ち着いたダークトーンを用いることで、全体に余計な主張を抑えた上品で静かな印象を与えています。その中で、写真の色味が自然なアクセントとして機能し、空間の魅力を際立たせています。写真の明度や色温度も統一されており、視覚的に心地よいリズムが生まれています。タイポグラフィは、見出しが大きめで存在感を持たせつつ、本文は細めのウェイトで抑制的に設計されているため、落ち着きと読みやすさの両立が図られています。レイアウトは余白を広く取り、情報を詰め込みすぎない構成によって「ゆったりとした時間の流れ」を感じさせ、サイト全体でどこか海外風のサイトデザインに仕上がっています。写真とテキストの配置も整っており、視線が自然に下方向へ導かれるため、無理なく読み進められます。モーションはフェードインや軽微なスライドが中心で、動きは緩やかかつ一定で、上質感を支えています。導線は物語をたどるように構成されており、施設紹介から予約導線までが自然につながることで、「体験への期待感」を段階的に高める役割を果たしています。

Coral Capital

幕開けを飾るのは、ユニークなイラストと意志を宿したフォントが躍動する、独創的なアニメーションです。その鮮烈な演出は、瞬時に観る者を深い没入へと誘います。細部にまで抜かりなく施されたホバーアクションや、スクロールに呼応するエフェクトも、一貫した世界観を精緻に描き出し、サイト全体に心地よいリズムを与えています。独特な余白の取り方と、理知的な強さを秘めたSans Serif体のタイポグラフィは、情報の解像度を極限まで高めています。特筆すべきは、全編に漂う粒子のテクスチャが生む、類稀なる統一感でしょう。デジタルな空間に有機的な温度感を宿すことで、洗練された可読性とアーティスティックな質感が美しく共鳴しています。革新的な精神と誠実な姿勢が同居した、唯一無二のブランド体験を鮮やかに可視化しています。

全ての猫を幸せに。│ 株式会社ねこぜん

肌馴染みの良いベージュとオレンジを基調とし、ブラウンや三毛猫カラーをアクセントに忍ばせた、ぽかぽかと陽だまりのように温かい配色設計。猫ちゃんの幸せを大事にするコンセプトを、色彩の温度感と柔らかさで見事に体現しています。柔らかな流体シェイプとノイズテクスチャが、猫ちゃんの写真と相性120点のファーストビューから始まり、セクションごとの強弱やイラストの配置によって視線が自然に誘導される構成です。要素を丸く切り抜き、アナログな手触り感を持たせることで、丸まった背中や肉球のような柔らかさを視覚的に表現。特にアクティビティセクションでは波形のレイヤーデザインと質感が最も活きています。また、合間から猫ちゃんの手が伸びてきたり、並んで座っていたりと、随所に散りばめられた愛らしいイラストが、ユーザーの心を優しく掴みます。加えて、ループするロゴの猫模様や、魚のアイコンで1・2・3が示される演出などの細部での工夫が、猫ちゃんの茶目っけを連想させるようです。掲載写真も毛並みや仕草の可愛らしさが伝わるものを厳選して配置。保護猫活動やドネーションといった真面目で大切なテーマを、徹底的に優しく、親しみやすいデザインで包み込むことで、ユーザーの共感と応援を自然な形で引き出す、愛情に満ちた導線設計となっています。

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