WORKS
コーポレート
クライアントワーク
学校課題
Design・Coding・Wire・Direction・Writing・Photograph
製造業サイトのリニューアル
View Site
- 概要
- Webデザインスクールの卒業課題として制作したコーポレートサイトです。初の実案件で、ヒアリングから公開作業まで実施しました。
- 使用ツール
-
- Figma
- Photoshop
- Illustrator
- Dreamweaver
- 制作時期／期間（1日作業時間平均約4時間）
-
Webデザインスクール入学5ヶ月目
- 企画・ワイヤー14日
- デザイン21日
- コーディング 21日
- 特に意識したこと
- クライアント様の品質・技術力・丁寧さを伝えられるような演出表現。
気軽にお問い合わせできるような文言と動線の確保。
More Details
案件の概要
- クライアント
- 金属加工の製造業者
- 目的
- 既存サイトが古いのでリニューアルする。新規顧客の受注・問い合わせが受けられるサイトにする。
- コンセプト
- 自社工場で、「こだわり」を形に。
- ターゲット
ユーザー - ノベルティを製作したい法人・団体の担当者（新規の顧客）
制作にあたっての考え方
- 情報設計
-
トップページのメインビジュアルからリードには、コンセプトやクライアント様の強みを掲載し、会社の自己紹介をするとともに同業他社との違いがわかるようにしています。これによりサイト訪問者とクライアント様のマッチングをはかります。
トップページで、サイト全体が把握できるよう見出し的に各ページの概要を掲載し、サイト訪問者が興味のあるコンテンツに直接移動できるようにしています。
ご注文への誘導をはかるためページ下部に固定リンクを設置し、また、気軽にお問い合わせいただけるよう、全ページにお問い合わせに関するバナーを掲載しています。
専門技術がわからないかたでも安心して発注いただけるよう、クライアント様の技術を分かりやすい図や文言、写真で説明しています。（「脇井の技術」のページ）
お問い合わせフォームは、見積もりに便利なデータファイルを安心して送付いただけるよう、ウイルス対策などのセキュリティ面を考慮してお問い合わせフォームの既存サービスを利用しました。
- デザイン
- 質・こだわり・技術力が感じられる「職人感」のあるデザインをめざしました。クライアント様のご要望で、シンプルで上品さを感じられるテイストにしています。
余白感を意識してレイアウトし、クライアント様の精度の高い加工技術を演出するため、装飾は繊細なものにしました。
サイト訪問者に安心して発注いただけるよう工場や製品の写真を多数掲載しています。
トップページはコンセプトや強みなどを読み進めていただけるよう、演出の意図もこめて、表示にアニメーションをつけましたが、下層ページは情報をすぐに取得いただけるよう、アニメーションはつけていません。- 配色
- クライアント様の製品であるノベルティから「お祝い」を連想し、赤とベージュの配色にしました。上品さを感じられる落ち着いたトーンにしています。
- フォント
- 見出しは上品さを演出するため明朝体を、16px以下の本文は可読性を優先してゴシック体を使用しました。
- その他
- どんな画面幅でも閲覧ができる（壊滅的なデザイン崩れがない）よう細かくブレイクポイントを設定しました。