オフィス家具ブランド「TOYOSTEEL」

https://www.toyosteel.com/

SP、タブレット対応のレスポンシブデザインサイトへリニューアル

サイトが古くスマートフォンやタブレットへの対応もできていなかったことからフルブラウザのレスポンシブデザインサイトへリニューアルしました。
また、CMSで商品情報の追加・削除・表示順の入れ替えを可能にした仕組みを導入、急な更新にも対応できるようにしました。

デザインコンセプト

1カラムのロングスクロール型デザインで、商品写真を際立たせるために白黒ベースのシックでシンプルなデザインにしました。

画像点数が多いサイトのためサイトサイズの圧縮を検討

サイトの本質上、画像点数が多くなるのと、きれいな画像を掲載したかったので、ロゴやアイコンに関してはsvg、写真（サイズが大きい画像）に関してはwebp拡張子にして画像関連の圧縮を行いました。

ロゴやアイコンはsvgにすることで従来拡張子（pngやgif）の1/10程度、画像に関してはjpegの1/5程度に圧縮でき、サイトを軽くすることができました。

特にロゴなどはsvgにすることでRerinaディスプレイ対応する必要がないので、開発側にとってもメリットが高い拡張子です。

清栄運輸株式会社

https://seieiunyu.co.jp/

名古屋の本社を置く専門輸送の企業サイト

名古屋で専門輸送を手掛ける企業のサイトを構築しました。
企業カラーであるブルーをベースに、モバイルファーストを踏まえ、急速に普及しはじめている１カラム「ロングスクロール」でレイアウトしました。

デザインコンセプト

レスポンシブ化しやすいようシンプルな構成にしつつ丁寧に作り込むみ、WEB サイトを通じて「誠実感」や「信頼感」などのイメージを与えられるようデザインいたしました。

ドメインのレジストラ移管

WEB、メールを一元当社で一元管理するため、ドメインのレジストラ移管を行いました。
当社管理にすることで、セキュリティ設定であるWAFの設定や海外IPアクセス制限をかけたりすることが可能になりました。

愛知バリューのフェスタ用特設ページ

https://www.aichi-value.com/festa2023/

フェスタ用特設サイトを1ページにまとめて表示

背景を斜めに配置したデザインを採用したので、コンテンツをあえてセンターには集めず、空いている場所に表示させる仕様にしました。

イベント専用受付管理システムも構築

当日のイベント会場での受付を非接触で行えるよう、QR読み取りシステムを開発しました。
事前登録すると当日、専用ページにログインして当日受付用QRを読み取り、受付状況を確認できるシステムです。

これにより、当日の受付スタッフの削減と、非接触による仕組みによるコロナ対策を両立しています。

企業ブースにもQRを配置し、そこでも受付QRを読み込むことで、企業ごとの受付状況が把握できる仕組みになっています。もちろん、個人もどの企業に訪問したかの履歴を把握することができます。

トヨタループス株式会社

https://www.toyota-loops.co.jp/

CMSを使ったサイト構築とレスポンシ対応サイトへのリニューアル。

CMSによる簡単な更新と、サイトが古くスマートフォンやタブレットへの対応もできていなかったことからリニューアルしました。

CMSにより、ドラック&ドロップでページ内コンテンツ順番等の入れ替え等ができる仕組みを導入。

会社見学フォームのカスタマイズ

ラジオボタンのチェック場所により、その下の入力項目を変更させる仕組みや、カレンダーの選択日付を閲覧日より特定日数先から表示させる仕組みなど、フォームを要望に合わせてカスタマイズしています。

デザインは主流となってきているワンカラム、ロングスクロールタイプ。

TOPページはロゴのオレンジをベースにスクロールで左右からフェードしてくる処理を施し、下層ページはある程度、コンテンツをセンターに配置して見やすさに注意しました。
背景を左右フェード風にすることで、センターにコンテンツが集まっているイメージにはならない様にしました。

株式会社エフエスケー

https://fsk-j.co.jp/

愛知県の軸付砥石シェアNo.1企業のサイトリニューアル

旧サイトは幅750pixほどでスマートフォン対応もしていなかったことから、全面リニューアルを行いました。

軸付砥石でシェアNo.1であり、商品も多数あることから、しっかり商品情報を掲載する構成にしました。
写真についてはプロのカメラマンに依頼して外観から工場内の写真まで撮影してもらいTOPのメイン画像にも使用しました。

海外顧客向けに多言語対応

FSK社の軸付砥石は海外取引もあることから多言語に対応した仕組みを導入しました。

株式会社フォース

https://force-net.jp/

建設業界のために特化した サービスを展開するフォース

デザインはロゴのカラーであるワインレッドをベースにワンカラムのレスポンシブデザインで構築しました。

メイン画像（右）と左の背景の高さをあえてずらすデザインにしてみました。
最初は同じ高さでデザインしたのですが、なんの代わり映えのないデザインになったので、少し高さをずらしてみたところ、メイン画像部分に目線が行ったのでこのデザインで提案しました。

建設業で働くための求人・転職サイト TEAM-Z

https://team-z.jp/

オリジナルDataBaseで管理画面も全て構築

他のサイトとの求人情報共有やユーザー情報管理の仕組みの観点から、VPSサーバーで全てオリジナルでシステムを構築していまます。

会員限定情報の共有のためにシングルサインオン

会員限定メニューのログインを1つにするため、先方システムのログイン情報の共有のため、シングルサインオンを導入しています。

社会福祉法人岐阜市社会福祉事業団　本部サイト

https://www.gifusiji.com/

古さのあったデザインを一新

幅760pixで作成されていた古さのあった旧サイトをスマートフォン対応のレスポンシブデザインでリニューアルしました。

コンテンツ自体はある程度センターに配置していますが、背景の左右をあえてなくすことで、はやりのレイアウトを実現しています。

カラーは複数のサービスを展開していることからメインカラーは策定せず、カラフルに仕上げています。

全拠点情報の掲載と求人情報を本部で簡単に管理できるCMSを導入

特に、採用情報は本部側で簡単に追加、削除等が行るようにCMSをカスタマイズ。
同じ仕組みを使い、経営状況のPDFアップロード管理も行っています。

社会福祉法人岐阜市社会福祉事業団

https://www.gifusiji.com/

9拠点の児童館それぞれで更新できる仕組みを。

今まで各拠点がそれぞれでサイトを構築していたため、イメージや掲載情報などにばらつきが出ていたのと、サイトの管理をまとめたいとのことで、サイトリニューアルに伴い、9つの拠点で統一性のあるデザインと、各拠点で更新できる仕組みを合わせて導入しました。

各拠点で更新してもデザイン性の統一性を損なわない仕組み。

各拠点は色違いにしてサブドメインで構築しています。更新してもらうページのパーツテンプレート化や更新コンテンツを統一させることで、イメージデザインがバラバラになることを回避しています。
運用していく上でどうしても統一できない内容のコンテンツが出てきた場合は、私たちがデザインして配置します。運用面でもサポートすることで安心してサイトを運営してもらっています。

児童館としての情報をしっかり伝える。

住所はもちろん、開館時間や休館日、利用料の情報など児童館としての基本情報を伝える箇所を見やすく配置し、それらを伝えたうえで各拠点の想いやコンセプトが伝わるように心がけました。

メンタルクリニック　ナイアちた

https://www.naia-c.jp/

開院にともないWebサイトを構築！

開院にともないWebサイトを新規構築をお考えで、お問合せをいただき当社で構築しました。

ページ数は多くないので、最新のサイトのイメージで作成。

メンタルクリニックで、ページも多くなく、建物もカフェかと思うようなオシャレなものでしたので、最近多い背景と写真が重なるタイプのデザインで、ゆったりとレイアウトしました。

クリニックとしてのイメージを崩さず、オシャレにレイアウト。

建物はきれいでオシャレでしたので、TOPにイメージ写真をフルブラウザで配置しましたが、クリニックとしてのサイトですから、コンセプトや診療案内をしっかり掲載しクリニックサイトとしてのイメージも両立できるようにしました。

株式会社ティーズ

https://tslabo.net/

高精度歯科技工物のプロフェッショナル集団会社のサイト構築

歯科技工所である株式会社ティーズ社のサイト構築及び、ロゴの作成も行いました。
メインカラーをエメラルドグリーンにして、清潔感を感じるデザインにしました。

ドメインはすでに持っていたことからWEBサーバーだけ当社で構築しDNS設定でこちらに向けてももらう運用を行っています。

知多厚生病院

https://chita.jaaikosei.or.jp/

スマフォ対応サイトへのリニューアル！

サイトが古くなり、スマートフォンサイトへの対応もされていなかったことから全面リニューアルになりました。

基本は病院側でページ追加、更新ができる仕組み。

各診療科内のコンテンツはパーツごとにテンプレート化し、更新ができる様にCMSをカスタマイズしました。
また、緊急情報や休診情報等も即座に公開、非公開ができるようにカスタマイズしました。

情報をシンプルに伝えられるように情報ポータルサイトとしてのイメージを。

デザイン性に重点を置くのではなく、伝えるべき情報をしっかり目立つように配置するなど情報ポータルサイトとしてのイメージを大切にしました。また地域柄、高齢の方が多いため、ボタンや文字を部分的に大きくしたり考慮しました。

トヨタWG共通EDI推進協会

https://www.twg-edi.or.jp/

トヨタWG共通EDIの紹介サイトを構築。

デザインは2カラムで、左がのメニューサイズを固定、右側は残り画面でフルサイズ表示にしてあります。
メイン部分に動画を配置し、コンテンツ部分のみスクロールする仕様にしました。

マルタ留学斡旋サイト「マルタナビ」

https://www.malta-navi.com/

マルタの留学情報と斡旋情報を掲載するサイトを新規で立ち上げ！

マルタは地中海にありながら、英語を公用語とする珍しい国で、そのマルタへの留学斡旋サイトを新規で立ち上げたいとの話を頂き構築させて頂きました。

学校情報等はお客様が追加、更新ができる仕組み。

学校情報は随時追加できるように、お客様側で追加、更新ができる様にWordPressのブログをカスタマイズしました。Google Mapの設置から、「校内設備・施設」、「学校周辺情報」のアイコンの設置まで簡単に入力可能にすることでスピーディーな情報公開を実現しました。

情報量がある程度あったので情報ポータルサイトとしてのイメージを。

お客様からの写真の提供、情報の量など十分なコンテンツがありましたので情報ポータルサイトとしてのイメージは構築できたかなと思います。ただ、情報量が多いのでSPで見た際の情報量を制限するなどしてストレスにならないようにしています。

一宮市立市民病院 公式サイト

http://municipal-hospital.ichinomiya.aichi.jp/

病院のウェブサイトは、従来のホームページ作成ソフトを利用して作成しており、リアルタイム性に欠け、またタブレット、スマートフォンへの対応もなされていないため、ウェブサイト更新システム（CMS）を導入し全面的にリニューアルすることを検討されていました。

CMSはWordPressを採用。更新がしやすいようにパーツのテンプレート化。

WordPressを使っても、固定ページのデザインを変更したりするのは知識が必要でしたが、ページに内に使われているバーやレイアウト、スタッフ1人分のコンテンツ、表など10種類以上のパーツをCSSごとテンプレート化して、そのパーツを組み合わせることでページを作成できるようにしました。パーツをテンプレート化することでオリジナルのレイアウトであるにも関わらず他のページとデザインや色合いの整合性が取れる仕組みになっています。

シンプルなデザインで「見やすく」、「わかりやすく」、「使いやすい」 をコンセプトに。

総合病院、総合医療機関の特徴はコンテンツ量が他のサイトに比べて莫大に多いことが挙げられます。
こういったサイトで重要なことは情報を整理し、いかにわかりやすくデザインするかが重要です。
デザインに凝りすぎると、どこになにあるのか分かりづらくなることもあるので、シンプルにデザインし利用者（患者様）に使いやすいサイトを心がけました。

※画像やコメントは製作当時のものです。2023年4月より　他社でリニューアルします。

一宮市立市民病院 　看護局専用サイト

https://municipal-hospital.ichinomiya.aichi.jp/nursing/

看護局はコンテンツ量が豊富であることと病院の公式サイトより親しみやすい暖色系のカラーにしたかったため、オリジナルデザインで別サイトとして構築しました。

公式サイトのディレクトリ下にWordPressを導入。

サブドメインにするとそこにもSSLやVhostの費用が掛かるため、ディレクトリ下に置くことで費用を抑えました。ただ、サイトやCMSとしては別管理にしたかったのでディレクトリ下にWordPressを入れ独立したサイトとして構築しました。
WordPressのアカウントは管理者と寄稿者とに合わけ、編集権限、公開権限を振り合分けています。承認フローを入れることで、寄稿者が直接公開できない仕組みを導入しています。

デザイン重視で親しみやすさを演出。

看護局のサイトは親しみやすさを出すために、写真にも様々な加工を施しました。レイアウトも公式サイトとは違い全ページがオリジナルレイアウトで構築されています。パーツのテンプレート化はできなくなりましたが、親しみやすさは演出できたと思います。

※画像やコメントは製作当時のものです。2023年4月より　他社でリニューアルします。

トレサンパ　オム 公式サイト

http://homme.tres-sympa.jp/

PCサイトとSPサイトが別々で作成されていたので、更新の手間がかかっていた。レスポンシブデザインでリニューアル。

1つのURLでPC,SPを同時に表示するレスポンシブデザインにすることで、更新も1回でできるようにしました。

CMSはWordPressを採用。

当初はトレサンパ金山のMovableTypeの中に作成していましたが、古いMTだとCMSの管理画面がSP対応になっていないので、スタッフがスマフォで簡単に更新ができるようにWordPressを採用しました。
細かな更新等はやはりPCがあった方が効率が良いのですが、新着を更新したりカレンダーを更新したりするぐらいであればスマフォで充分更新できます。

コンテンツの一元管理

背景にも記載しましたが、まずはSPとSPが別々で存在し、別々の会社が保守管理を行っていたのをレスポンシブデザインにすることで一元化することが最大の目的でした。その制作の過程の中でWordPressの利点でもある豊富なプラグインを活用し、カレンダー管理機能等を加え、顧客側でのタイムリーな更新ができる様にオリジナルのカスタマイズを行っています。

※画像やコメントは製作当時のものです。2021年8月より　他社でリニューアルしています。

岐阜県総合医療センター 公式サイト

http://www.gifu-hp.jp

CMSを導入した全面リニューアルと医療関係者向けネット診療予約システムの開発。

病院公式サイトをCMSを導入した全面リニューアル及び、ネットを活用した診療予約システムの開発がしたいとのことで岐阜ＩＴ協同組合の組合員として入札に参加。

CMSを本格導入。

Web開発をCMSに変更して構築しました。デザインは青をベースに2カラムで配置。上部を一般者向け情報、下部に医療関係者向け情報を掲載し、コンテンツの配置を明確化しました。
新着情報はカテゴリーに分け、病院側でカテゴリー選択して投稿すると当該カテゴリーに掲載される仕組みを構築しました。

ページ追加、編集・変更を病院側で構築できる仕組みを導入。

病院側がCMSでページの作成をする際、レイアウトやページイメージが他のページとの統一性を保つため、ページ構成に使っているパーツのテンプレートを複数用意。ページ制作画面でテンプレートを選択するとバーや写真が右、テキストが左の様なテンプレートが挿入されます。
挿入されたテンプレートのテキストの変更や写真の入れ込みを行うだけで簡単にページが作成できるようにしました。これにより全体の開発費用を抑えることができたのと、運用面では業者に依頼してアップするまでのタイムラグがなくなり情報公開までの時間も短縮できました。

安城更生病院　看護部専用サイト

http://www.kosei.anjo.aichi.jp/nurse/index.cfm

スマートフォンに対応した看護部専用サイトの構築。

看護部専用のサイトを構築するにあたり、スマートフォンに対応したページを構築。

スマートフォンサイトは専用サイトを構築。コンテンツはＰＣと連動。

ＰＣサイトはブロックタイプで作成したので、スマートフォンサイトの当初レスポンシブにしてブロックタイプにしようかと考えていましたが、スマートフォンサイトでは求人情報などを効果的に表示させたかったので別レイアウトで新たに構築しました。ただ、ページ内コンテンツを別にすると、更新の際に2つ制作、編集をする必要が出てくる為、コンテンツページ内の情報はPCサイトの情報と連動させ、1つで表示できるようしました。

コンテンツをブロックで全面に出すデザインでわかりやすく配置。

近年増えてきたコンテンツがブロックで配置されているデザインを採用。重要コンテンツのブロックを大きくし、さらに上部に配置することで自然に訴求コンテンツに目が行きやすいようにしました。
解像度が高く、良質のjpeg画像を提供いただいたので、きっちりしたサイトに仕上がったと思います。

※画像やコメントは製作当時のものです。現在は他社でリニューアルしています。

もりレディースクラブクリニック 公式サイト

http://www.mori-lcc.jp

古い感じするホームページをリニューアル、更新作業をCMSで管理したい。

全体的に古さを感じるサイトをリニューアルしたいとのことで、幅を1000pixにしたサイトを作成することになりました。
また現在ではスマートフォンでサイトを見る人が多くなったとのことで、スマートフォンサイトも同時に作成することになりました。

更新の手間を省くため、新着情報などはPCとスマフォの情報を共有

MTのブログで製作している部分（新着等）はスマートフォンサイトを作成する際に、更新の手間を少しでも省くため情報を連動させました。PC版を更新すれば、スマートフォンサイトも更新される仕組みです。
Webページで製作している部分は連動できませんので、今後の課題かと思いますが、ブログで製作されているページは全て連動させてあります。

ロゴの色に合わせたブロックサイトで古さを無くしました。

ロゴの色に合わせたオレンジと茶色のカラーで構成しました。ロゴのオレンジはサイトで使用しているオレンジとは別にしています。ロゴの方が少し濃いため、サイト全体にそのオレンジを使うと圧迫感のようなものを感じたため、少し薄くし、肌系のカラーを使用しています。
またTOPのレイアウトのみは、最近多い、コンテンツをブロックで区切る仕様にしてみました。
サイトの見た目に影響する写真素材も、お客様の方でプロのカメラマンの写真を用意していただいたので全体的にきっちりしたサイトに仕上がったと思います。

株式会社ダイキ

http://www.web-daiki.jp/

これまで企業ホームページを保有していなかったため、新規で作成。

今までホームページを保有しておられませんでしたが、このタイミングだからこそ費用も抑えてCMSも導入することが可能であるため、Movable Typeを活用したサイト構築を提案しました。

ワイドモニター意識して横幅を980pixに。

サイトのレイアウトは派手すぎず、かといって古さはイメージされないように意識しました。またサイトの横幅も980pixにして最近のサイトサイズにしました。古いパソコンではほぼ場面いっぱいになりますが、コンテンツが切れることの無い最大値。Javascriptで自動的にコンテンツ幅を調整しても良かったのですが、固定の方が容量が少ないため表示スピードも上がるため固定スタイルで制作しています。

TOPの画像にお客様の要望である「即対応」の文字をデザインして配置。

この企業様の強みであるキーワードをTOPの画像に大きく配置して「素早く対応してもらえるイメージ」を全面に出しました。

また、当該企業様はロゴもありませんでしたので、Webサイトを作成する際、同時に作成させていただきました。
ロゴは「通信」のイメージがつきやすいイメージにしました。

愛知バリュー　公式サイト

https://aichi-value.com/

愛知県の運営する「愛知県留学生総合支援サイト」

親会社であるMan to Manが受託する愛知県の留学生事業専用サイト。

デザインはワンカラム、ロングスクロールレイアウトを採用し、Wovnの多言語ソリューションを導入しています。

インターンシップ管理システムを構築。

裏側には留学生、大学、企業のインターンシップの受け入れに関する管理システムを構築しています。
オンラインでエントリーシートを作成、大学側の推薦、企業側の受け入れ管理まで全てオンラインで完了するシステムを駆逐していまます。
契約書関連の書類もオンラインでサインし、PDFを生成する仕組みを構築しています。

お番菜とお酒と「おっこん」

http://www.okkon.jp

TOPに動画を配置し、お店の雰囲気を感じられるように。

「おっこん」様のサイトリニューアル。
TOPに動画は配置し、お店の雰囲気が伝わりやすいようにしました。

デザインはワンカラムのロングスクロールレイアウト。黒をベースに夜のシンプルに仕上げてました。
営業日カレンダーにはプラグインをいれ、客先で簡単にカレンダーを変更できる仕組みを導入。

コロナ禍で休業時期がありましたが、本当に全ての料理がおいしいので、みなさんも、ぜひ一度立ち寄ってください。

医療法人和光会　川島病院

https://www.kawashima-hp.jp/

名古屋市守山区の川島病院サイト

2カラムレイアウトで、左サイドメニューには診療時間や施設住所などの最も患者が欲しい情報を配置しました。

病院系のサイトは情報量が多くなる傾向があることから、各ページ上部にページ内リンクを設置し、当該コンテンツまでスムーズに遷移できる導線を意識して構築しています。

同医療法人の介護老人保護施設のサイトも別ドメインで構築

清風苑
https://www.wako-seifuen.jp