【基本情報】

• 担当範囲: 企画 / 構成 / デザイン / コーディング

• 使用ツール: Figma / VS Code

• 言語・スキル: HTML / CSS / JavaScript

• 制作期間: 1か月半

​

【クライアントの課題・ご要望】
既存のホームページ作成サービスを利用されていましたが、「維持費が高く、コスト面で困っている」という明確な課題を抱えていらっしゃいました。
今回のリニューアルにあたり、「問い合わせフォームなどは不要なので、とにかく維持費をカットしたい」「紹介案件がメインのため、名刺代わりとなるシンプルなホームページにしてほしい」というご要望をいただきました。

 

【コンセプト】

新規取引先の多くが「他社からの紹介」であるというクライアント様のビジネスモデルに寄り添い、コストパフォーマンスを最大化した設計を行いました。
Webからの直接的な新規獲得は狙わず、紹介を受けた企業への「安心感・信頼感の提供」と「身分証明」として、必要十分な情報を美しくまとめたホームページです。

​

【課題へのアプローチ】
コスト削減という最優先事項を達成するため、CMSや外部システムに頼らない、HTMLとCSSのみで完結する極めてシンプルなサイト構造を提案・実装しました。
さらに、無料ドメインと無料のホスティング環境を活用することで、「維持費（ランニングコスト）ゼロ」を実現。クライアント様の固定費負担を完全に解消しました。

​

【デザインの根拠】

ビジネスにおける実用性と、企業のアイデンティティを視覚的に両立させる設計を施しています。

​​

• 1. 演出と情報設計（UI/UX）：無駄を削ぎ落とした機能美
  アニメーションなどの派手な演出はあえて一切排除し、ビジネスにおいて最も重要となる「情報の取りやすさ」を最優先に設計しました。紹介を受けた取引先が知りたい情報（会社概要、事業内容）へ迷わずシームレスにたどり着けるよう、ノイズのないレイアウトを徹底。「名刺代わりのWebサイト」として必要かつ十分な機能美を追求しました。

​​

• 2. 配色戦略：作業着から着想を得たアイデンティティの表現

  • ベースカラー（紺色）: クライアント様が実際に着用されている「作業着の色」をベースに採用。企業のアイデンティティを表現するとともに、インフラを支える企業としての「高い信頼感」を演出しています。

  • アクセントカラー（オレンジ・グリーン）: 単に堅い印象になりすぎないよう、ポイントで温かみや安心感をプラスする差し色を配置しました。

  • サブカラー（グレー・ホワイト）: 全体をクリーンなグレーとホワイトでまとめることで、クライアント様が持つ「堅すぎない誠実さ」を視覚的に表現しています。