URL

https://clarisync.ymizomasa.com/

Source Code (GitHub)

https://github.com/mizonoel/it-service-concept-site

Production Period

・デザイン：25時間
・フロントエンド開発：18時間
・WordPress構築：7時間

Overview

中小企業やスタートアップ向けの業務管理クラウド「Clarisync（クラリシンク）」のコーポレートサイトを制作。
 企業の信頼性と先進性を両立させることを目的に、モダンなデザインと軽快な操作感を重視しました。
 トップから採用情報まで一貫したトーンで設計し、架空のSaaSスタートアップのブランディングを意識しています。

Design Concept

キーカラーに#009BC6（ブルー）× #DDDDDD（グレー）を採用し、
 クールでテック感のある印象を演出。
 フォントは「Source Sans 3」と「Noto Sans JP」を組み合わせ、
 スタイリッシュながらも読みやすさを確保しました。
 また、余白を広くとったレイアウトと滑らかなスクロールアニメーションにより、
 “次世代SaaSらしい軽やかさ”を体現しています。

Skills

HTML / CSS / JavaScript / WordPress / Figma

Technology

・HTML / CSS / JavaScript：レスポンシブレイアウトとフェード／スライドのアニメーションを実装。
・Figma：ワイヤーフレームからデザインモックまでを制作し、配色やタイポグラフィを統一。
・WordPress（オリジナルテーマ）：会社情報・NewsなどをCMS化し、UI上から簡単に更新できる仕組みを構築。
・Scroll Animation (Intersection Observer) を用い、スクロールに合わせて要素がフェードインする自然なモーションを実現。

Result / Learning

ブランドトーンを一貫させる重要性や、
 情報量の多い企業サイトを「シンプルに伝える」レイアウト設計の難しさを学びました。
 また、トップから採用・問い合わせまでの導線設計を意識することで、
 1つのサイト全体を“ストーリーとして見せる”設計力を強化できました。
 今後は、さらに動きやインタラクションの質を高め、
 ユーザー体験をデザインに落とし込む技術を磨いていきたいと考えています。