界 草津、2泊3日旅のすすめ
星野リゾートが提案する草津温泉での滞在の魅力を、まるで絵巻物を紐解くように情緒豊かに描いたプロモーションサイトです。和紙のような温かみのある細かなテクスチャのサンドベージュをベースカラーに据え、温泉の湯や豊かな自然を連想させる柔らかなブルーグリーンと、湯上がりの高揚感や活気を表すようなコーラルの赤を巧みに組み合わせています。ファーストビューで目を惹く円形のイラストアニメーションは、草津で体験できる多彩なアクティビティを一つの輪として表現し、訪れる前の旅への期待感を膨らませます。画面全体を通して、湯けむりやなだらかな丘陵を思わせる曲線のレイアウトを採用。その余白に、散策する人々や温泉でくつろぐ様子を描いた可愛らしミニチュアのようなイラストをちりばめることで、格式高い老舗リゾートのイメージに親しみやすさをプラス。背景でもゆっくりと動くイラストの配置でリズムを作り出しています。ページ下部では一転して、深い森の静寂を捉えたダークトーンの実写写真を配置。ポップで軽やかなイラストの空想的な世界観から、上質で深みのあるリゾートのリアルな空気感へと引き込む、コントラストが効いたストーリー設計になっています。
もりおか眼科
眼科クリニックという医療機関特有の冷たく無機質なイメージを、木の温もりが溢れる空間写真と柔らかな配色で見事に払拭したWebサイトです。ファーストビューで広がる自然光に満ちた院内の風景のスライドショーと「目を拓く」という美しいコピーが、これから診察に訪れる患者の心理的な不安を優しく解きほぐすと同時に、知りたい情報の診療時間も掲載して安心感を与えています。ベースカラーには美しい木目の建築と調和する温かなオフホワイトやペールベージュを採用し、たっぷりと余白を取ることで清潔感と開放感を演出。一方で、テキストやアイコンのメインカラーには、誠実さと高度な医療の信頼感を担保するクリアなロイヤルブルーを使用しています。この知的で澄んだブルーがサイトを引き締め、眼科ならではのはっきりと澄み渡る視界を表しているようです。さらに、特徴を紹介するカードUIの背景には、波紋や細かなグリッドの繊細なラインアートをさりげなく配置。視覚やレンズのピントを連想させる細部のあしらいが、デザインに知的な奥行きを与えています。医療機関に不可欠な信頼感と、患者に寄り添うホスピタリティが、洗練されたレイアウトと和やかな表情の写真との調和から真っ直ぐに伝わるデザイン設計です。
BlueBank（ブルーバンク）株式会社
金融という硬質な業界イメージを、先進的かつ洗練されたトーンで見事に覆すFintech企業のコーポレートサイトです。ファーストビューで出迎えるのは、深海や宇宙を思わせる神秘的で鮮やかなブルーの球体グラフィックと、グラスモーフィズムの円形ガラスが、「経営者を解き放つ」という力強いメッセージと重なり合い、未来へ向けた企業のスケール感やイノベーションへの期待を視覚的に表現。このファーストビューからすりガラスやリキッドガラスの質感が随所で光り、サイト全体を現代的で洗練された印象を与えています。構成はクリーンなライトグレーをメインに、広々とした余白が特徴です。しかし、サービス紹介のセクションでは一転して背景をソリッドな漆黒へと切り替え、暗闇に浮かび上がるようにスマートフォンのアプリ画面を配置。この明暗の劇的なコントラストが、デジタルプラットフォームとしての高い機能性と、スタイリッシュな没入感を際立たせています。さらに、各情報を収めるカードUIやボタンには柔らかい角丸を採用し、主な見出しは安定感のあるゴシック体とMarcellusのアルファベットを組み合わせ、金融サービス特有の堅苦しさを巧みに排除しています。確かな信頼感と、テクノロジーがもたらす新しい体験のワクワク感を両立させ、経営者の挑戦を後押しするブランドの姿勢が隅々から伝わる美しいデザイン設計です。
株式会社日東物流
清潔感と信頼感を象徴するホワイトとコーポレートカラーのブルーを基調とし、そこに柔らかな水彩画の色彩をアクセントとして散りばめた、温かみのあるカラーリング。物流やインフラといった堅実で力強いイメージを持たれがちな業界において、あえて手描きの温度感を取り入れることで、企業としての誠実さと人々の生活に寄り添う優しさを視覚的に両立させています。構成の最大の特徴は、街並みやトラック、そこで暮らす・働く人々を描いた水彩タッチのイラストの静かなアニメーション。このファーストビューから絵本の世界のように広がるイラストが、「ミライを、人で、つなぐ。」というコーポレートメッセージの人の温度感にマッチしています。また、見出しには親しみやすくも品のあるフォントを採用し、たっぷりと余白を取ることで、ゆったりとした心地よい空気感を醸し出しています。スクロールに呼応するモーションは、イラストがふんわりと浮かび上がる穏やかなフェードイン。情報量を詰め込みすぎず、ユーザーの呼吸に合わせるような優しいインタラクションとクリアな導線設計が、企業への安心感と好感を自然と高める、コーポレートサイトの良質なアプローチとなっています。
魔改造の夜 マブチモーターの挑戦
クリーンなホワイトをベースに、マブチモーターのブランドカラーである信頼と技術のブルーと、モノづくりへの熱い情熱を象徴する赤を組み合わせた、ドラマチックでエネルギーに満ちた配色設計です。人気テレビ番組と連動した企画の特設サイトにふさわしく、知性の青と熱量の赤が交わるグラデーションが、技術者たちの限界を超える挑戦を視覚的に熱く盛り上げています。テレビ番組を想起させるファーストビューのチーム写真はスライドショーでドラマチックに。コンテンツはグラデーションの枠線を効果的に用いたカード型レイアウトでわかりやすく。開発を手掛けたモンスターの紹介や開発秘話などの各コンテンツで区切り、その枠線に青〜赤のグラデーションを施すことで、方眼紙を広げた白基調の読みやすく整理された空間の中に、熱気を閉じ込めています。全体のレイアウトは、奇をてらったモーションをあえて抑え、技術者たちの真剣な表情を捉えた写真や、開発の裏側を語るテキストをじっくりと読ませることに特化した実直な情報設計となっています。エンターテインメント性の高い企画でありながら、世界を牽引するモーターメーカーとしての技術への誇りと真摯な姿勢を感じさせる特設サイトとなっています。
日経電子版 for Education｜公式サイト
大胆なカラーブロックと角丸のカードが、堅いメディアのイメージを親しみへ書き換えるカラフルなサイト。背景はクリーンなホワイトで、イエロー、ライトブルー、ライトグリーンといった明るいビタミンカラーをセクションごとに大胆に切り替え、ポップで親しみやすいマルチカラーの配色。「日本経済新聞」という伝統的で堅実なメディアのイメージを良い意味で裏切り、学生や教育現場に向けたフレッシュな活力とワクワク感を視覚的にアピールしています。角を大きく丸めた巨大なカラーブロックと、その中で展開されるカードUIの組み合わせがサイトの顔になっています。事例や教材紹介など、情報量が多くなりがちなコンテンツをカルーセルのカードUIに収めることで、縦方向のスクロール量を抑え、ユーザーに圧迫感を与えないスマートな情報設計を実現しています。また、見出しには知性を感じさせるエレガントなセリフ体を使いつつ、ファーストビューにはコラージュのようなあしらいをミックスさせることで、アカデミックな品格と親近感を両立させています。カードやCTAのホバー時には丸い矢印ボタンが直感的に反応するなど、誰にでも使いやすいUIが徹底されています。豊富な教育コンテンツを楽しく、かつ論理的に整理して届ける、メディア企業ならではの質の高いサイトとなっています。
横浜銀行 IT・デジタル人財向け採用サイト
ファーストビューから続く巨大なタイポグラフィと、スマートフォンやノートPCなどのデバイスが空間を浮遊するような3Dのビジュアル表現が特徴的なサイトです。背景にはテクノロジーや正確性を暗示するドットグリッドが敷き詰められており、IT・デジタル人材の知的好奇心を刺激するサイバーでモダンな空間が構築されています。ABOUT USでは、実績や数値を大きなタイポグラフィでインフォグラフィックのように配置し、説得力と情報の見やすさを両立させています。配色は、清潔感あるホワイトをベースに、銀行の持つ信頼感や誠実さを象徴する深いブルーと、先進性やデジタルの広がりを感じさせる淡いライトブルーのグラデーションを組み合わせた、知的で未来志向な設計です。伝統的な金融機関の堅いイメージを払拭し、テクノロジーを駆使した新しい銀行の姿を視覚的に発信しています。スクロールに呼応するモーションは、デバイスの画像が視差効果を伴ってダイナミックにスライドしたり、見出しが下から滑らかにフェードインする洗練された挙動で統一されています。浮遊するデバイスと精緻なドットグリッドが魅せる、先進的なイメージとクリーンな世界観のリクルートサイトです。
にじのわクリニック
清潔感と青空、虹色のロゴが映えるサイトです。配色や余白の取り方から優しさを感じられる設計。ファーストビューの虹がかかったようなシェイプからロゴや世界観の統一を図っています。文字色には真っ黒ではなく深いネイビーを採用し、可読性を保ちつつも威圧感を排除。アクセントとしてロゴ由来の柔らかなパステルカラーや自然を感じさせるグリーンを配し、多世代を受け入れる包括的な姿勢を視覚化。タイポグラフィは、親しみやすさを重視したゴシック体を広めの字間・行間で組み、専門的な情報も咀嚼しやすいよう配慮。レイアウトは「輪」を想起させる曲線や円形のモチーフをセクションの境界や画像のトリミングに多用し、視線が滑らかに循環するよう誘導。モーション言語は、スクロールに呼応して要素がゆっくりとフェードインする「静かな動き」で統一され、閲覧者を急かさない配慮が徹底されています。しっかりと情報を掲載し信頼感を与えると同時に、静かに優しい世界観を作り上げています。
株式会社エムハンド
薄いグレーメインのたっぷりな余白のセクションとテキストデザイン鮮やかなセクションのコントラスト。コンセプトセクションではStickyでユーザーを立ち止まらせ背景動画、スクロールエフェクトはUXのポイントに。多種多様なクライアントのクリエイティブが持つ本来の色味を最大限に引き立て、制作会社としての柔軟性と品質の高さをアピールすると同時にサイトのオリジナリティを出しています。レイアウトは、グリッドシステムをベースにしながらも、視認性の高いゴシック体のテキストを、あえて要素をずらしたり重ねたりすることで動的な緊張感を生み出し、スクロールを飽きさせません。モーション言語は「静と動」のコントラストを意識し、ファーストビューのアニメーションから静的な情報セクションへの遷移を滑らかなフェードやパララックスで繋ぐことで、シームレスな閲覧体験を提供。ボタンのホバー時は控えめながらもユニークな動きを添えるなど、機能美を損なわない洗練された振る舞いで統一。
ソラマメデザイン
屋号を象徴する鮮やかなソラマメのグリーンのアクセントカラーが白や青のベースに光る、親しみやすさと清潔感が同居する配色。また優しく印象付けるのはテクスチャのあるイラスト。デジタルの冷たさを排除した温かい世界観を構築しユーザーを惹きつけます。タイポグラフィは、イラストとマッチするゴシック体を選定。ポイントになるセクションは、デザイナーと愛犬のキャラクターによる「会話形式」でコンテンツを展開するストーリーテリングの手法を採用し、読み手を飽きさせない工夫が凝らされています。モーションは、スクロールに合わせて要素がふわっと浮き上がるフェードインや、背景でゆっくりと流れるテキスト、イラストなど、心地よいゆらぎを感じさせる演出が特徴。CTAボタンは丸みを帯びた形状で押しやすさを担保し、ふわりと変わるエフェクトが、ユーザーの心理的なハードルを下げ、細部まで世界観を崩さないよう設計されています。
