「【Webデザイン/TOPのみコンペ】自社コーポレートサイトリニューアルのデザイン。」へのydreamanさんの提案一覧
ydreamanさんの提案
-
14
-
13
-
提案日時 2026年03月15日 12:56 -
提案日時 2026年03月15日 12:55メンバーからのコメント
https://pebble-bolt-63162732.figma.site/
Sokoage コーポレートサイト
________________________________________
1 デザインコンセプト
本サイトのデザインコンセプトは
「集客を底上げするクリエイティブパートナー」
です。
Sokoage様は
単なる制作会社ではなく
企画 → 制作 → 運用
まで一貫して支援する
マーケティングパートナーであるため
TOPページでは
・成長
・戦略
・クリエイティブ
・成果
をビジュアルで表現しています。
________________________________________
2 ファーストビュー設計
ファーストビューでは
巨大コピー + アニメーション演出
により
訪問者に強い印象を与える設計にしています。
キャッチコピー
「工務店の集客を底上げする」
というメッセージを
画面中央に大きく配置し
ユーザーがサイトの目的を
一瞬で理解できる構造にしています。
________________________________________
3 立ち上がりアニメーション
参考サイトでも特徴的であった
・m-hand
・zeroten
・unicell
の共通要素である
サイト立ち上がり時の演出
を取り入れています。
具体的には
・ロゴ表示
・ラインアニメーション
・コピー出現
などを
数秒かけて演出し
ユーザー体験を高めています。
これにより
「クリエイティブ会社らしい
印象的な体験」
を実現しています。
________________________________________
4 コンセプトセクション
コンセプトセクションでは
テキストと写真の左右レイアウト
を採用しています。
これは
参考サイト
・unicell
・toyokoh
などで採用されている
読みやすい構造を参考にしています。
また
余白を広く取ることで
企業の思想を
丁寧に伝える設計としています。
________________________________________
5 サービス紹介
サービスセクションでは
以下の4つの事業を
カード型UIで整理しています。
・Web制作
・グラフィックデザイン
・映像制作
・NAISEI
カード型デザインにすることで
ユーザーが
直感的にサービスを理解できる構造にしています。
また
ホバーアニメーションを設けることで
クリエイティブ企業らしい
インタラクションを演出しています。
________________________________________
6 制作実績（WORKS）
制作実績は
グリッドレイアウト
を採用しています。
このデザインは
参考サイト
・m-hand
・zeroten
の構造を参考にしています。
複数の作品を
一覧で視覚的に見せることで
制作会社としての
信頼性・実績
を強く訴求しています。
________________________________________
7 お客様の声
お客様の声セクションでは
実際のクライアントの評価を掲載することで
新規ユーザーの
信頼形成
を目的としています。
制作会社サイトにおいて
実績と同様に重要な要素であるため
TOPページにも配置しています。
________________________________________
8 イベント / お知らせ
イベント・お知らせセクションでは
最新情報を表示することで
サイトが
継続的に更新されている企業
であることを表現しています。
これは
企業サイトにおける
信頼性向上
にもつながります。
________________________________________
9 CTA設計
ページ下部には
大きなCTA（Call To Action）を設置しています。
内容
・オンライン相談
・お問い合わせ
このエリアでは
背景を変えることで
視線を集中させ
ユーザーの行動を促しています。
________________________________________
10 デザイン方向性
本デザインは
募集要件にある
・シンプル
・余白多め
・先進的
・クリエイティブ
という方向性に合わせて設計しています。
また
参考サイト
・12-office
・toyokoh
・m-hand
・zeroten
・unicell
のデザイン思想を分析し
共通要素である
・大きなビジュアル
・大胆なタイポグラフィ
・アニメーション演出
・作品グリッド
を取り入れています。
________________________________________
11 今後の拡張性
本デザインは
コンペ段階のTOPページですが
今後のサイト展開を想定し
以下のページにも
展開しやすい構造になっています。
・サービス詳細
・制作事例
・イベント
・お客様の声
・会社情報
また
レスポンシブ対応も考慮し
スマートフォン版への
展開もしやすい設計としています。
________________________________________
まとめ
本デザインは
Sokoage様の強みである
「集客を底上げするクリエイティブパートナー」
という価値を
・印象的なファーストビュー
・洗練されたレイアウト
・アニメーション演出
によって表現した
コーポレートサイトデザインです。
ユーザーにとって
「信頼できる制作会社」
であると同時に
「クリエイティブな企業」
であることを伝えることを目的としています。
メンバーからのコメント
https://pebble-bolt-63162732.figma.site/
Sokoage コーポレートサイト
________________________________________
1 デザインコンセプト
本サイトのデザインコンセプトは
「集客を底上げするクリエイティブパートナー」
です。
Sokoage様は
単なる制作会社ではなく
企画 → 制作 → 運用
まで一貫して支援する
マーケティングパートナーであるため
TOPページでは
・成長
・戦略
・クリエイティブ
・成果
をビジュアルで表現しています。
________________________________________
2 ファーストビュー設計
ファーストビューでは
巨大コピー + アニメーション演出
により
訪問者に強い印象を与える設計にしています。
キャッチコピー
「工務店の集客を底上げする」
というメッセージを
画面中央に大きく配置し
ユーザーがサイトの目的を
一瞬で理解できる構造にしています。
________________________________________
3 立ち上がりアニメーション
参考サイトでも特徴的であった
・m-hand
・zeroten
・unicell
の共通要素である
サイト立ち上がり時の演出
を取り入れています。
具体的には
・ロゴ表示
・ラインアニメーション
・コピー出現
などを
数秒かけて演出し
ユーザー体験を高めています。
これにより
「クリエイティブ会社らしい
印象的な体験」
を実現しています。
________________________________________
4 コンセプトセクション
コンセプトセクションでは
テキストと写真の左右レイアウト
を採用しています。
これは
参考サイト
・unicell
・toyokoh
などで採用されている
読みやすい構造を参考にしています。
また
余白を広く取ることで
企業の思想を
丁寧に伝える設計としています。
________________________________________
5 サービス紹介
サービスセクションでは
以下の4つの事業を
カード型UIで整理しています。
・Web制作
・グラフィックデザイン
・映像制作
・NAISEI
カード型デザインにすることで
ユーザーが
直感的にサービスを理解できる構造にしています。
また
ホバーアニメーションを設けることで
クリエイティブ企業らしい
インタラクションを演出しています。
________________________________________
6 制作実績（WORKS）
制作実績は
グリッドレイアウト
を採用しています。
このデザインは
参考サイト
・m-hand
・zeroten
の構造を参考にしています。
複数の作品を
一覧で視覚的に見せることで
制作会社としての
信頼性・実績
を強く訴求しています。
________________________________________
7 お客様の声
お客様の声セクションでは
実際のクライアントの評価を掲載することで
新規ユーザーの
信頼形成
を目的としています。
制作会社サイトにおいて
実績と同様に重要な要素であるため
TOPページにも配置しています。
________________________________________
8 イベント / お知らせ
イベント・お知らせセクションでは
最新情報を表示することで
サイトが
継続的に更新されている企業
であることを表現しています。
これは
企業サイトにおける
信頼性向上
にもつながります。
________________________________________
9 CTA設計
ページ下部には
大きなCTA（Call To Action）を設置しています。
内容
・オンライン相談
・お問い合わせ
このエリアでは
背景を変えることで
視線を集中させ
ユーザーの行動を促しています。
________________________________________
10 デザイン方向性
本デザインは
募集要件にある
・シンプル
・余白多め
・先進的
・クリエイティブ
という方向性に合わせて設計しています。
また
参考サイト
・12-office
・toyokoh
・m-hand
・zeroten
・unicell
のデザイン思想を分析し
共通要素である
・大きなビジュアル
・大胆なタイポグラフィ
・アニメーション演出
・作品グリッド
を取り入れています。
________________________________________
11 今後の拡張性
本デザインは
コンペ段階のTOPページですが
今後のサイト展開を想定し
以下のページにも
展開しやすい構造になっています。
・サービス詳細
・制作事例
・イベント
・お客様の声
・会社情報
また
レスポンシブ対応も考慮し
スマートフォン版への
展開もしやすい設計としています。
________________________________________
まとめ
本デザインは
Sokoage様の強みである
「集客を底上げするクリエイティブパートナー」
という価値を
・印象的なファーストビュー
・洗練されたレイアウト
・アニメーション演出
によって表現した
コーポレートサイトデザインです。
ユーザーにとって
「信頼できる制作会社」
であると同時に
「クリエイティブな企業」
であることを伝えることを目的としています。