施工管理の会社のHPを作りました。

施工管理の会社のHPを作成しました。

株式会社サンテクノ・アルファ
ホーム - 株式会社サンテクノ・アルファ 施工実績 電気・通信工事設計・施工 空調設備の設計・施工 消防設備業務 施工・保守・販売 採用情報 いつも楽しく、一生懸命! 募集要項 先輩からのメッセージ 採用情報 ...
目次

デザインコンセプト

施工事例を紹介したい要望があり、施工事例の設置と弊社の採用に興味を持ってもらうようなHP作りをしました。また、ディレクターが作成したサイトマップから、求人に興味を持ってほしいという潜在的ニーズを発見し、求人への導線、入社したくなるデザインを意識しました。

ターゲットユーザー

20代~50代。仕事の受注をしたいBtoBと、これからこの会社に応募したいと考える学生や転職中の方向け。

担当領域

  • デザイン(ワイヤーフレームからレイヤーカンプまで作成)
  • WordPressを使った実装作業(使用テーマLightning+CSSを使った微調整)

プロジェクトメンバー

  • ディレクター
  • デザイナー(担当)※コーディングまで実施させてもらい、最終確認はコーダーが担当しています。
  • コーダー

製作期間

レイヤーカンプ及びラフ案から実装まで1か月

作成したワイヤーフレーム

サイトマップから作成したワイヤーフレームはこちらです。

ワイヤーフレームへの基礎知識はこの業務の際、上司から教えて頂きました。普段はラフ案から作成するため、ワイヤーフレームを作成する機会はあまり無いです。また、アナログで作成することが大半です。

施行事例

https://xd.adobe.com/view/5f3f669c-952e-4983-8820-571cfb088312-0a6c

事例別紹介

https://xd.adobe.com/view/cabc5548-f0dc-43f1-a605-17e8f96b5db5-9fef

施工実績

https://xd.adobe.com/view/923ab318-a559-4bee-9983-f8d711f8f5ef-c769

全体のワイヤーフレーム

プロトタイプもついています。御覧ください。

https://xd.adobe.com/view/2cb2a5e0-ff16-4a82-a42f-ff5666b1893a-79e1

ロゴも作成しました。

依頼されたわけではありませんが、ロゴをいくつか作成し、提案してみました。採用して頂きました。

使用ソフト

XD、PhotoShop、Illustrator

工夫したこと

デザインはデザインロゴと会社からもらった参考資料からアウトプットしました。採用の情報が多く、採用者を求めている、という隠れたニーズを汲み取り、採用ページを厚く作りました。施工実績のページ内容も見やすいデザインを心がけました。

今まで掲載できていなかった施工実績を載せることができました。

先輩からのメッセージを入れて、会社の雰囲気をアピールしています。

デザインから実装まで携わった初めての仕事

ディレクターから頂いた指示に従い、クライアントから頂いた資料、サイトマップからワイヤーフレームの作成から実施しました。その後、ラフ案作成の指示を頂き、最終的には実装まで担当させて頂きました。WordPressのLightning、HTML・CSSで作成しています。ラフ案を元にサイトを構築することはこちらが初でした。荒い部分もあった為、先輩コーダー・ディレクターに手直しして頂き納品に至っています。会社ロゴはAi操作に慣れる一環で、自主的に作成しましたが、採用して頂きHPに使って頂いています。ワイヤーフレームへの知識もこのお仕事で深まりました。

この仕事への繋がりは、長い努力の積み重ねと自己開示。

ワイヤーフレームから実装に至るまで、約1か月と長く時間はかかっていません。しかし、そこに至るまでコーディングの自己学習やIllustrator、Photoshop、XDを活用した自分なりの学習を1年以上かけて行いました。その成果を上司に見せて「自分はここまで出来るようになりました」という部分をアピールし続けたことが、このお仕事に繋がったと感じています。

挑戦はまだ続けていく。

様々なデバイスの出現により、WEB・IT業界は驚くべきスピードで進化しているなと感じています。この経験の努力だけでなく、これからも主流のソフトに触れ、情報を常にインプット・アウトプットしていけるデザイナーになりたいです。そんなことを、この記事を書くにあたって感じました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次