弊社BPSのコーポレートサイトをリニューアルしました。

BPSのデザイナー スギヤマです。
今回、BPSコーポレートサイトのリニューアルプロジェクトでデザインを担当させていただきました。
簡単に、リニューアルに関しての記事を書かせていただきます。


世界は日々変化し、技術は進歩しています。
その中でBPSは、常に最先端技術を追求し成長し続けていく会社です。
メインとしているエンジニアリングに新たにデザイン分野を加え、さらに前進してゆく。
そんな、常に攻め続ける姿勢を意識して、コーポレートサイトをリニューアルしました。

以前の弊社HPはPCサイトしかなく、またコンテンツ(事業)も増え各ページが肥大化している状態でした。
このことから、情報整理の意味も含め刷新が必要でした。
そこでまず、スマートフォン(以下SP)対応をするためPC/SPレスポンシブデザインを採用。また、小さい画面内でも斜めデザインを維持しつつコンテンツの見易さを重視しました。
このように、新しくなったBPSコーポレートサイトはデザイン性とモバイルフレンドリーを意識したWebサイトとなっています。

リニューアルしたBPSコーポレートサイトはこちら

1.TOP メインビジュアル

2.TOP サービス紹介

3.サービス詳細(epub)

4.スマートフォン

新HPのこだわり

「斜め」と「三角形」

グラフィカルな部分として、モチーフに「右斜め」の表現と「三角形」をふんだんに取り入れ、BPSの攻めの姿勢を表す、切れ味の強い印象を目指しました。また、これらのモチーフにはそれぞれ意味があります。「右斜め」は「業績の右肩上がり」。「三角形」は「安定」の意味を込めています。

遊びながらも落ち着いた雰囲気の配色

コーポレートカラーの青を生かしながら、ポリゴンスタイルを適用し様々な青を見せることで賑やかな印象にしました。その一方で、写真の上に色を透過で被せる事で透明感と、濃いめの紺を使いバランスのとれた配色にしました。

シームレスなフルスクリーンレイアウトと、通常レイアウトの融合

TOPページでは、フルスクリーンレイアウトと通常レイアウトが綺麗に切り替わります。弊社のサービスを一つ一画面で紹介する事によって、見ていただいた皆様の印象に残りやすくする事を目指しています。

ランディングページの様なサービスページ

各サービスページは、配下ページでありつつもランディングページ(以下LP)の様な構成とし、単独としても成り立つページにしました。

SVGでのRetina対応

スマートフォンなど、高解像度化が進むRetinaディスプレイへの対応として、アイコンなどの画像にSVGを取り入れました。

個人として本プロジェクトから得たこと

新人教育も含めたプロジェクトを成功させる

デザイン作成時に「デザイン性を一番重視してほしい」と依頼があったので、見た目も構造も「変わったもの」になる様に作成を行いました。しかし、「変わったもの」と言うのは絵では簡単でも実装面でやはり難しい場合が多く、時間を要する部分が多々ありました。

今回のコーディングは、新人コーダーの教育も目的の一つでした。
ただ、コーダーに関わらずデザイナーはデザイン性の高いサイトにしなくてはいけない。こういったときに、どのように若手をカバーするか、かつスケジュールを遵守するかが課題となりました。

結果的には、プロジェクトの早い段階で綿密なスケジュール管理・タスク管理を行う。もし遅れが出たなら、すぐに取り戻すよう熟練のコーダーがサポートする。ということで達成しました。

この記事をよんでくれた皆さまへ

ここまで記事を読んでくださった皆様、ありがとうございました。

弊社の強みとして、開発経験のあるデザイナーだからこそ「開発者が組み込みやすいデザイン」を提供できます。なおかつ、「Webサイト制作は企画とライティング、さらにSEO施策も取り入れたデザイン」を考案できます。
つまり、デザイナーが企画段階から関わることで、デザインの手戻りが少なくプロジェクトを進められます。

また、社内外問わず、開発だけの部隊とも円滑に情報共有し、よりクライアントの要望に応えるデザインかつ開発側にとって無理のないデザインを提案できます。
これは、10年かけて集めた優秀な開発メンバとの協業経験があるからなせる技です。

昨年からは新たに、デザインチームへ2人のメンバーが入社し、イラスト、写真のレタッチ、テキストライティング、ディレクションとチームに必要な技術を持った仲間が揃いました。
以前は、デザインの仕事は外部へ発注することもありましたが、デザインチームの発足によってBPSに開発+デザインという新たな選択肢も増えました。

今後はデザインチームとして、全デザイナーが専門のデザイン領域(例として、タイポグラフィ、写真加工技術、ライティング等)のスキルセットと経験をつみあげていきます。
個人でもチームでも柔軟なデザインを提供し、プロジェクトの成功に貢献できる部隊を目指します。

またデザインチームの実績が増えましたら、どんどん紹介していきたいと思います。
これからのデザインチームの活躍にぜひご期待ください。

BPSコーポレートサイトはこちら。webデザインのお仕事のお問い合わせもお待ちしております!

他のデザイン部の実績

以下、過去に弊社で担当させていただきました、Webサイトになります。

コーポレートサイト (株式会社 日通総合研究所 様)

コーポレートサイト (株式会社 日通総合研究所 様)

物流改善、物流コスト削減、物流事業戦略策定など、物流コンサルティングを手掛ける日通総合研究所様のコーポレートサイトのリニューアルを実施いたしました。

URL: https://www.nittsu-soken.co.jp/

キャリア採用サイト (株式会社 日通総合研究所 様)

キャリア採用サイト (株式会社 日通総合研究所 様)

日通総研様のキャリア採用サイトをお写真の撮影からWebデザインまでお手伝いさせていただきました。

URL: https://recruit.nittsu-soken.co.jp/

長島大陸市場 (株式会社 JFA 様)

長島大陸市場 (株式会社 JFA 様)

鹿児島県最北端の長島町はブリの養殖で海外27カ国に輸出するなど、売上高世界一を誇ります。そんな長島町の自然の幸を販売するECサイト制作をご支援いたしました。

URL: https://nagashimatairiku.com/

ろじたん (株式会社 日通総合研究所 様)

ろじたん (株式会社 日通総合研究所 様)

物流・交通に関するリサーチ・分析・コンサルティング業務を行う日通総研様の倉庫内作業の見える化を促進する分析ツール「ろじたん」のサービスサイトを制作いたしました。

URL: http://www.logitan.jp/

デザインに関するお問い合わせ

キャンペーンサイトやメディアサイト、コーポレートサイト制作など、幅広く対応致します。デザインに関するお問い合わせ、ご相談は下記ページより承っております。気軽にお問い合わせください。

BPS x DESIGN

URL: https://design.bpsinc.jp

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

スギヤマ

2012年4月エンジニアとして入社。主業務であるバックエンド開発を担当しがてら、当時会社全体が弱かったフロントエンドも兼務。 元より「絵を描く」「デザインする」事が好きであり、プライベートな時間ではそれらをすることがもともとあり、徐々に社内のデザイナ業務も拾いながら実績と経験を積み上げる。 2017年現在、新たに2名のデザイナが入社し、ともに切磋琢磨中。

スギヤマの書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ