リンク先
コンセプト・世界観
キーメッセージはヒーローに配置した
「古いものを新しく 想いを紡ぐ」。
「古いものを新しく 想いを紡ぐ」。
「古いものを大切にしながら、新しい価値を生み出していく」
クライアントの想いやストーリーを丁寧に汲み取り、デザインで形にしていく
というスタンスをそのままコピーとビジュアルに落とし込みました。
色は 淡いブルーと生成りの背景＋黒のタイポ をベースに、
グラデーションの丸いシェイプを散りばめて、
「やわらかさ」「温度感」「思い出の粒」のようなイメージを表現しています。
グラデーションの丸いシェイプを散りばめて、
「やわらかさ」「温度感」「思い出の粒」のようなイメージを表現しています。
情報設計・ページ構成
First View
左側：キャッチコピーとテキストを大きな余白の中に配置し、静かで落ち着いた印象に。
右側：代表的な制作事例（LP）のビジュアルを大胆に配置し、「言葉よりも作品で見せる」構成にしています。
Services
「WEBデザイン」「WEB制作」「ECサイト運営」の3サービスをカード形式で並べ、
アイコン＋見出し＋短い説明文で、初見でも内容が瞬時に理解できるように整理しました。
アイコン＋見出し＋短い説明文で、初見でも内容が瞬時に理解できるように整理しました。
About
自身の想いや背景を文章で丁寧に説明しつつ、右側に世界観を象徴するビジュアルを配置。
下部に「制作実績数」「満足度」「リピート率」などの数字を置き、 信頼感を補強しています。
Works
不動産会社サイト、女性向けLP、バナー・ポスター、YouTubeサムネイル、EC運営画面など、
幅広いジャンルの制作物をカードレイアウトで一覧化。
幅広いジャンルの制作物をカードレイアウトで一覧化。
「Webサイトだけでなく、ECや広告クリエイティブまで一貫して任せられる」ことが伝わる構成です。
Contact
左カラムに説明文とメールアドレス、公式LINEの案内・QRコードを配置。
右カラムには問い合わせフォームを設置し、
「LINEで気軽に相談」から「フォームでしっかり依頼」まで、好みに合わせて選べる導線にしています。
「LINEで気軽に相談」から「フォームでしっかり依頼」まで、好みに合わせて選べる導線にしています。
Footer
黒背景に会社情報・対応エリア・連絡先・各種リンクをまとめ、
サイト全体を引き締める役割を持たせています。
サイト全体を引き締める役割を持たせています。
デザイン面のポイント
ヒーローの左右分割レイアウト
コピーを置いた余白たっぷりのスペースと、実績ビジュアルを対比させることで、
「言葉」と「作品」の両方から世界観が伝わるようにしています。
「言葉」と「作品」の両方から世界観が伝わるようにしています。
柔らかな背景と直線的なカードのコントラスト
背景には丸みのあるシェイプやグラデーションを使いつつ、
サービス・実績部分は直線的なカードで整理。
これにより、優しい雰囲気を保ちながらもビジネスサイトとしての読みやすさ・信頼感を両立させています。
サービス・実績部分は直線的なカードで整理。
これにより、優しい雰囲気を保ちながらもビジネスサイトとしての読みやすさ・信頼感を両立させています。
タイポグラフィ
見出しには品のある明朝体、本文には読みやすいゴシック体を使い分け、
「親しみやすいけれど、きちんとした仕事をする」というイメージを意識しました。
「親しみやすいけれど、きちんとした仕事をする」というイメージを意識しました。
スマホ版での工夫
ファーストビューはビジュアルとコピーを縦に並べ、
スクロールしながら自然に内容が頭に入ってくるようにレイアウトを再構成。
スクロールしながら自然に内容が頭に入ってくるようにレイアウトを再構成。
ServicesやWorksは1カラムのカード表示にし、
画像とテキストのサイズを拡大してタップしやすくしています。
画像とテキストのサイズを拡大してタップしやすくしています。
フッター情報も縦並びにしつつ、PC版と同じ黒背景でブランド感を統一しました。
担当範囲
コンセプト設計・コピーライティング
サイト全体のデザイン・レイアウト
コーディング（HTML / CSS ほか）
レスポンシブ対応、問い合わせ導線の設計
自社サイトとして、自分の世界観や得意分野、仕事へのスタンスが
そのまま伝わるように設計したWEBデザインです。
そのまま伝わるように設計したWEBデザインです。