【Webデザイン】サイトリニューアルデザインのプロセスを徹底解説！
私たちShumiは2022年10月に創業した横浜市のWEBブランディング事務所です。
『Shumi』という名前は、
“美しさがゆきとどく”
“美しさが整っている”
デザインを制作する意味を込めて名付けられました。
私たちは、企業ブランドを向上や信頼を持っていただくためにどんなデザインをするのが良いか。サービスの魅力を伝えるには、どんなコンテンツが良いかを考えてブランディングをおこなっております。
今回は、私たちが手がけるサイトリニューアルをデザインの面からまとめさせていただきました。
内田工事株式会社様サイトリニューアル
この度ご依頼いただいた内田工事株式会社様は、岩手県北上市の配管工事の専門会社です。主なサービスとして『製缶加工取付』『加工缶製作取付』などをおこなっています。
今回、メインサービスの変更に伴い、サイトリニューアルとパンフレット制作のご依頼をいただきました。
内田工事株式会社様(以下、敬称略)
1. サイトリニューアルの背景
今回、クライアント様のおこなうメインサービスの変更に伴い、『サイトも新しく一層したい』とのことでリニューアルのご依頼をいただきました。
サイトリニューアルの目的は、
・事業のサービスをわかりやすく、かつ、魅力的に見せたい
・サイトで企業の信頼性を伝えたい
という2点でした。
2.現状サイトの分析
まずは、ディレクターとデザイナーでリニューアル前のサイトの分析をおこないました。
リニューアル前のサイトの課題点
・コンテンツが薄く、企業の透明性が出せていない。
・トップページをみただけで離脱の可能性が高い。
・現場の写真を使われていたが、魅力・企業イメージアップにつながる写真ではなかった。
・サイト全体的にデザイン性が無いことから、企業への印象までも下がっている。
リニューアルにおこなうこと
・サービス内容を充実させる
・メインビジュアルの作り込み、キャッチコピー作成
・サイトのデザインコンセプトの見直し
以上を踏まえクライアント様にフィードバックをおこない、リニューアルに向けてのデザイン設計に移りました。
3.カラーコンセプト設計
リニューアル前のサイトカラーを元にカラーを決定。
・青やグラデーションを使用し、誠実さや信頼性を主張
・アクセントカラーに合わせ、背景色は黒に近い紺を選択
・サービスの写真に目がいくよう全体的に落ち着いた色合いに
4.ワイヤーフレーム
まずは、おおまかなワイヤーフレームを作成。
お問い合わせまでの導線を設計しました。
5.メインビジュアル決定
Shumiでは、HP制作にあたり、毎回メインビジュアルを2案提案しております。
今回もテイストの違う2案をご提案させていただきました。
1つ目は、社員さんの写真を全面に器用したパターン
・社員さんの仕事に向き合う姿勢から企業の信頼感を表現
・写真の彩度を落とし、キャッチコピーを際立たせる
2つ目は、サービス内容の写真を起用したパターン
・あしらいと写真を融合させた流行のレイアウトで企業への先進的な印象を与える
・背景にアクセントカラーのグラデーションを置き、キャッチコピーへの自然な視線誘導をおこなう
クライアント様との協議の結果、メインビジュアルはパターン②に決定。
6.初稿デザイン
初稿を元にディレクターとデザイナーでデザイン会議をおこなう。
※会社概要セクションについては、2パターンデザインしています。
・会社を説明するセクションの印象が弱く、このセクションで離脱が予想される。
・サービスセクションの写真の上に文字を置くレイアウトのテキスト量が多いため、pタグを無くしサービスタイトルとボタンのデザインのみにする。
・会社概要セクションは、1つ目のパターンでいく。
全体をダークモードにするのはどうか？
デザイン会議の中で、全体をダークモードにしてみるのはどうか？という案が出ました。
理由は、
・競合は白背景でサイトを構成しているパターンが多い中での差別化になる
・モダンで洗練された印象を与え企業のクールさを演出
・情報や写真などのコンテンツが強調され、より印象的になる
などが上げられました。
修正版がこちら
サービス内容UI/UX
サービス内容は、サイトの一番核となる部分です。
今回のリニューアルの中でも一番時間をかけてデザインをおこないました。
クライアント様の
『事業のサービスをわかりやすく、かつ、魅力的に見せたい』 という希望にお応えし、デザインのUI/UXを追求いたしました。
こだわったポイント
・一目見てサービスの内容がわかる写真を選定
※いただいた写真に加え、こちらで画像をご用意させていただきました
・何のサービスをおこなっているのかを瞬時に理解できるよう、
一つ一つのサービスの名前を大きめのフォントでしっかりと提示
・テキストと一緒に『詳しく見る』のボタンのデザインを乗せることで「押せる」という印象を与え、下層ページへの遷移を誘導
最終ブラッシュアップ（背景あしらい追加）
ダークモードでデザインを完成後、さらにコンテンツに目がいくようあしらいを追加いたしました。
メインカラーを使い2色のブラーボックスを作成
写真の下、読ませたいテキストの上などに配置し、視線誘導をおこなった
パンフレット制作
最後に、パンフレットの制作もさせていただきました。
パンフレットは、会社の名刺代わりともなる大切なコンテンツです。
HPのデザインのテイストに合わせ、スタイリッシュにデザインいたしました。
以上がサイトリニューアルのデザイン面のステップになります。
今回はデザイン面のお話だけでしたが、Shumiではこの他にもマーケティング戦略を含めたブランディングをおこなっております。
私たちShumiは、WEBブランディングの定義を
『届けたい人に届ける力』
と掲げてサービスをおこなっております。
ぜひホームページ制作でブランディングを目指したい人は、こちらから
ホームページをご覧ください。
▶ Shumi公式ホームページ
