フルCSSテンプレートの制作事例
ホームページビルダーのフルCSSテンプレートで制作した事例をご紹介します。
テンプレートなので、ベースのデザインは変えられませんが、文章や画像・写真の変更は可能です。
病院・クリニック様のホームページ制作事例(PC・スマホ)
病院様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
個人経営のクリニック様です。ロゴマークを既にお持ちでしたので、ロゴマークとマッチする色合いのテンプレートで制作しました。
フルCSSテンプレートの為、比較的低予算の制作となりました。
病院・クリニック様のホームページ制作事例(PC・スマホ)
病院様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
個人経営の病院様です。
病院の場所と診療科目を大きく目立つように表示し、診療時間をトップページの見やすい位置に配置しました。
初見のお客様を重視したレイアウトです。
フルCSSテンプレートの為、比較的低予算の制作となりました。
美術関連会社様のホームページ制作事例(PC・スマホ)
美術を取り扱う会社様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
元々ホームページビルダーのフルCSSテンプレートで制作したホームページをお持ちでしたが、バージョンが古いためスマートフォンに対応していませんでした。
今回のご依頼で新しいバージョンのフルCSSテンプレートで制作をし直しました。
基本的なデザインは同じですが、スマートフォンでも見やすいように各所を調整しています。
フルCSSテンプレートのため、比較的低予算の制作となりました。
玩具製作企業・販売店様のホームページ制作事例(PC・スマホ)
玩具製作企業様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
実店舗をお持ちの企業様でしたので、会社案内のページ1P、店舗のページ1Pを配置。それぞれGoogleマップを埋め込みました。
店舗ページには、店内写真とともにユーチューブ動画を埋め込みました。
サイドバーにインスタグラムとX(旧ツイッター)へのリンクを配置。
フルCSSテンプレートの為、比較的低予算の制作となりました。
受験塾様のホームページ制作事例(PC・スマホ)
受験塾様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
個人経営をされている塾です。得意なジャンルに特化されているので、ロゴマークを配置する左上に得意ジャンルを大きく記載しました。
納品後、ご自身で更新出来るように、なるたけテキストで処理するようにしました。
フルCSSテンプレートの為、比較的低予算の制作となりました。
同窓会様のホームページ制作事例(PC・スマホ)
同窓会様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
YouTube動画をサイドバーに配置しました。
昔の同窓会活動を記載したページは、リニューアルせず、メインになるページだけリニューアルすることで、予算を抑えました。
納品後、ご自身で更新出来るように、テキスト、画像を修正しやすいように制作しました。
フルCSSテンプレートの為、比較的低予算の制作となりました。
不動産会社様のホームページ制作事例(PC・スマホ)
不動産会社様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
山梨県の不動産会社様で、地元の紹介をご希望されましたのでサイドバーに地元情報の紹介を設置しました。
都会から田舎暮らしをしたい人向けの物件もあった為、ノンビリした雰囲気の写真をメイン画像に配置しました。
更新は不動産会社様がご自身で行われます。
フルCSSテンプレートの為、比較的低予算の制作となりました。
測量会社様のホームページ制作事例(PC・スマホ)
測量設計会社のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
写真は、お客様にご提供いただいた作業写真や社内風景の写真を入れました。
人材採用の側面から、社内の情報提供をしたいとのご希望もありましたので、レクリエーションのスナップ写真も入っています。
スタイルシートに変更を行い元のテンプレートよりも文字サイズを大きめにしてあります。
メガネ・コンタクト等販売店様のホームページ制作事例(PC・スマホ)
メガネ、コンタクトレンズ、時計など販売店様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
写真・画像は、お客様からご指示をいただきご希望に沿って制作いたしました。
プロモーション用の動画をYouTubeにアップロードされていらっしゃったので、トップページにYouTube動画を埋め込みました。
スマートフォン表示の際は、画面の横幅に合わせて自動で縮小表示されます。
水回りリフォーム会社様のホームページ制作事例(PC・スマホ)
マンション、住宅などの水回り修理・リフォーム会社様のホームページをフルCSSテプレートでリニューアル制作しました。スマートフォン対応(レスポンシブデザイン)です。
写真は、フリー素材写真とメーカー様のお写真を利用しました。
ガス(給湯器、フロ)、台所、トイレのリフォームを手掛けられるので、工事事例を多く掲載しました。
また、排水管洗浄を手掛けられているので、独立した1Pにお客様ご用意の動画を埋め込みました。
個人病院様のホームページ制作事例(PC・スマホ)
内科のお医者様、個人病院様のホームページをフルCSSテプレートでリニューアル制作しました。スマートフォン対応(レスポンシブデザイン)です。
ロゴマークは、以前からお使いのロゴマークを配置。
お写真はご自身で撮影された写真をトップページに配置しました。
診療科目と診療時間をトップページの目に入りやすい位置に配置する事で、初見の患者様の利便性を高めています。
元のホームページのページ数がやや多かった為、メニューボタンは左側に縦配置にしました。
鍼灸・整骨院様のホームページ制作事例(PC・スマホ)
鍼灸整骨院様ののホームページリニューアル制作事例です。
フルCSSテンプレート・スマートフォン対応(レスポンシブデザイン)でリニューアルをいたしました。
ロゴマークやお写真は以前のホームページでお使いの物をそのまま利用しました。
全体的な文字のサイズ(フォントサイズ)がテンプレートだと小さいので、文字サイズを大きくして欲しいとご要望を頂きました。
ベースの文字サイズを大きくし、全体のバランスを整えてあります。
ヘッダーエリアも少し縦長に拡張してあります。
医大医局様のホームページ制作事例(PC・スマホ)
大学医学部の医局様のホームページをフルCSSテプレートでリニューアル制作しました。スマートフォン対応(レスポンシブデザイン)です。
ロゴマークは、お写真は、お客様ご指定の物を配置。
お客様のご希望によりメインビジュアルの下にFacebookを埋め込んであります。
SNS(Facebook)とホームページを連携される事で、最新情報の配信が気軽に出来るので利便性がアップしました。
ページ数が多いサイトでしたので、横メニューは第一階層、右側サイドバーに第二階層までの詳細なメニューを配置しました。
不動産会社様のホームページ制作事例(PC・スマホ)
千葉県の不動産会社様のホームページをフルCSSテプレートでリニューアル制作しました。
スマートフォン対応(レスポンシブデザイン)です。
元はフルCSテンプレートの古いバージョンのホームページでしたので、スマートフォン対応(レスポンシブデザイン)になっていませんでした。
今回、スマートフォン対応(レスポンシブデザイン)をしている新しいバージョンでリニューアル制作をいたしました。
物件情報の追加や削除などの更新作業は不動産会社様がご自身で行われます。
調剤薬局会社様のホームページ制作事例(PC・スマホ)
調剤薬局会社様社のホームページに、新しいバージョンのフルCSSテンプレートを適用しました。
古いバージョンのフルCSSテンプレートのホームページに、新しいバージョンのフルCSSテンプレートを適用する事でスマートフォン対応(レスポンシブデザイン)になりました。
元々のホームページがフルCSSテンプレートのベースを崩していなかった為、新しいバージョンに適用可能でした。
カイロプラクティック店様のホームページ事例(PC・スマホ)
カイロプラクティック店様のホームページをスマートフォン対応(レスポンシブデザイン)にしました。特殊なケースのご紹介です。
こちらのお店のホームページは、店長様がホームページビルダーで自作をされていました。
自作方法はテーブルレイアウト(表で枠を作って、枠の中に写真や文字を入れる方法)です。
PCでは問題ないのですが、スマートフォンでホームページを表示するとスマートフォンの画面に表示が収まらないのが問題でした。
今回のご依頼で、テーブルレイアウトのままスマートフォン対応(レスポンシブデザイン)に変更をいたしました。
スマートフォンで表示すると、メニューボタンが画面右上に表示されます。
メニューボタンを押すと画面左からメニューがスライドして表示されます。(メニューを書いたセルが表示される)
また、コンテンツ(画像や文章)が縦並びになりスマートフォンの画面に収まるように設定をしました。
大学研究室様のホームページ制作事例(PC・スマホ)
大学の研究室様のホームページ新規制作事例です。
フルCSSテンプレートでご依頼をいただきました。
ロゴマークは、大学の公式ロゴを配置。
スマートフォン対応(レスポンシブデザイン)のテンプレートでしたので、スマートフォン表示の際に、見ずらくならない様に、レイアウト等を気を付けました。
作成ページ数が少なかった為、低予算案件となりました。
現在では、研究室のスタッフ様にて、更新作業を行っておられます。
物流会社様(倉庫業)ホームページ制作事例
物流会社様(倉庫業)のホームページのリニューアル制作事例です。
文章を沢山入れたいお客様でしたので、背景が白地で文字が読みやすいテンプレートをオススメしました。
いくつかの画像は、お客様の方で加工して、ご送付いただきました。
スマートフォン表示のテンプレートの為、表の取り扱いに苦労しました。
手作業・流通加工、倉庫・物流代行のマルワロジックス
リフォーム・塗装会社様のホームページ
外壁塗装・屋根の塗装を専門にされているリフォーム会社様のホームページ新規制作です。
一般的に職人さんは、ちょっと怖いイメージがあると思いましたので、親しみやすいポップな色調のテンプレートをオススメしました。
地域密着のアットホームなリフォーム会社さんでしたので、明るいオレンジと緑のホームページは、親しみやすく良いと思います。
ロゴマークはお持ちでしたので、サイズ調整をして配置。
文章は、ご送付いただき、工事の写真も沢山掲載しました。
SEO内部設定も済みです。
リフォームのホームページは激戦区なので、地域+専門性(外壁や塗装)+リフォーム、のキーワードを中心にまとめることで、競合との住み分けがしやすい様に作ったところがポイントです。
「ホームページからの問い合わせ・工事受注がちょこちょことあり、ホームページを仕上げてくださった保科様には感謝しております。」とお言葉をいただきました。
リフォーム・内装工事会社様のホームページ
企業の水廻り・内装の改装工事企業様のホームページをリニューアルしました。
ちょうどロゴマークと同じ色味のフルCSSテンプレートがありました。リフォーム業でも、企業向けですので、ややカッチリ目に作成しました。
メイン画像は弊社からサイズをお伝えして、お客様の方で作成されました。
お写真(工事や改装後)は、お持ちでしたので、適宜サイズ調整をして配置。
見やすく、まとまりがあり、企業イメージも伝わるホームページになったと思います。
デザイン、情報量、ともにOKなので、これなら、BtoBホームページとして、企業さんが安心して問合せ出来ると思います。
SEO内部設定も済みです。
『新規お取引先担当者様より「HP拝見しました」
といわれると、やはりうれしいです。
お願いしてよかったな と思っております』とお言葉をいただきました。
動物病院(獣医)様のホームページ
動物病院様のホームページの新規作成です。
お色のご希望をいただいたので、希望の色でやわらかめの雰囲気のテンプレートをチョイスしました。
ロゴマークに、同系色の鳥のマークをあしらいました。
動物病院でも専門性が高いので、SEO内部設定は、地域、専門性、動物病院、獣医、などで、検索にヒットしやすいようにしました。
オープン3ヶ月後にチューニング。
トップページに診療時間、診察出来る鳥の種類などを増やし、各ページコンテンツを増やしました。
チューニングした事で、新規の予約が入ってきているとの事です。
中古車買取り販売店様のホームページ
中古車買取り・販売企業様のホームページ新規制作です。
既に会社としてのホームページはお持ちで、今回は「買取り」を強調した別のホームページが欲しいとの事。
トップページのメイン画像はフラッシュ対応。お客様がインパクトのある車の写真をたくさんお持ちでしたので、6枚切り替えています。
本文エリアすぐのところには、オリジナル作成のフラッシュを配置。中央から光が飛んでいくような効果を付けて、海外のネットワークや顧客のメリットを画像でわかりやすく伝えています。
メイン画像のフラッシュと本文エリアのフラッシュのの違いは、下記の様な感じです。
・メイン画像のフラッシュ
⇒ホームページビルダー付属の機能。簡易なフラッシュ。写真の切替や、簡単なメッセージが入れられる。(複雑な動きは出来ない)
・本文フラッシュ
⇒デザイナーがデザインして、お客様の希望にあわせて画像を動かしている。(基本的になんでも出来る)
SEO関連は、会社名・業種よりも、「買取り」や「車種」を重視して設定しています(お客様希望)。既にある会社ホームページとの役割分担に気を付けました。
。
何度も追加で注文をい頂いているお客様で、今回も、「大変気に入った!」と満足していただけた様子。
制作側も張り合いに感じています。
社会保険労務士事務所(社労士)様のホームページ
社会保険労務士様のホームページ新規作成です。
ホームページビルダーのフルCSSテンプレートを改造しています。
メイン画像、ロゴマーク、メニュー変更等を行っています。
大きなデザイン変更は行っていませんが、お顔写真やプロフィールページに趣味の写真を入れる事で、オリジナル感があるホームページになりました。
SEO的には、地域+社会保険労務士(社労士)、で、検索にひっかかりやすい様に調整しました。
お仕事柄どうしても説明文が長くなってしまうので、見やすくなるように、見出し、段落、箇条書きをうまく使って、読みやすい様にレイアウトをまとめました。
短納期で納品させていただきました。
「こんなに短期間でアップまでこぎ着ける事ができるとは思ってませんでしたので感激です。」 とお言葉を頂きました。
社会保険労務士(社労士)様のホームページ
社会保険労務士様のホームページ作成代行です。
一度ご自分でテンプレートを使って作成されたのですが、なかなかうまくいかないとの事で、フルCSSテンプレートで作り直しをさせて頂きました。
誠実なお人柄伝わるように、困った人が安心して相談出来る様にと、誠実・安心を心がけながら制作しました。
写真のご用意や文章が出来あがっていたので、短納期で納品させていただきました。
文章は、長すぎず、短すぎず、で要点を抑えた説明で、サスガ!
ページ数は少なめですが、全体的に良くまとまった、訪問者が見やすいホームページに仕上がったと思います。SEO内部設定も済みです。
ペットグッズ販売店様のホームページ
ペットグッズ販売店・会社様ののホームページ新規制作です。ページ数が5Pと小規模でしたので、低予算、短納期で対応させて頂きました。
メイン画像はフラッシュで、子犬、子猫の写真を3枚切り替え。サイドバーに、ブログ、フェイスブック、ネットショップへのリンクを設定。
クリアーですっきりしたホームページに仕上がりました。SEO内部設定も済みです。
ペットサロン(トリミング)様のホームページ
ペットサロン、わんちゃんのトリミングサロン様のホームページ新規作成です。
犬好きの私は、大変楽しくお仕事をさせて頂きました♪♪♪
女性のオーナー様なので、カワイイ感じのテンプレートをお選びになりました。
メイン画像等は、ホームページビルダーに添付された写真で、ちょうど良い感じのがありました。
サイドバーの写真は、ご自身で撮影されたお写真を弊社の方で、切り抜き、サイズ調整して配置しました。
フェイスブックのリンクをご希望でしたので、サイドバーに配置。
同じエリアに競合店がありましたが、オシャレなデザイン、丁寧なサービス、利用しやすい価格帯にまとまったので、住み分けが出来るホームページになったと思います。
幼稚園様のホームページ
幼稚園のホームページをリニューアル作成しました。
ホームページビルダーのフルCSSテンプレート改造です。
幼稚園向けのかわいいテンプレートをお選び頂きました。
背景画像は、違う物に入れ替えました。
将来的に違う背景にしたい場合は、画像ファイルを入れ替えれば背景画像が変わるようになっています。
お写真は、元あるホームページの物をサイズ変更して利用。
比較的短い期間で納品出来ました。
SEO内部設定も済みです。
フラワーアレンジメント教室様のホームページ
フラワーアレンジメント教室様のホームページのリニューアルです。ホームページビルダーのフルCSSテンプレートで制作しました。
女性らしい品のある白+ピンクベースのテンプレートをお選びいただきいました。
下層ページのデザインをトップページに一部適用するのにスタイルシートを変更。
サイドバーには、フェイスブックのリンクを配置。
お写真は、ホームページビルダー添付の写真と、お客様のブログにアップしてあった写真を利用しました。
スマートフォン向けのホームページも同時に作成させていただきました。
SEO内部設定も済みです。
中古重機・建機買取り販売店様のホームページ
中古の重機・建機・農機の販売店様のホームページリニューアル制作です。
一目見て建設関係とわかるように、黄色系のテンプレートをチョイス。黄色はパワーショベル等、工事現場をイメージする色なので、わかりやすくなったと思います。(前はオレンジ)
トップページには、最新在庫の写真を表示。
このエリアは「表」で作ってあるので、後々、自分で写真を入れ替えたり編集するのに簡単です。
「表」は、エクセルと似たような操作で、「行の追加」が出来るので、どんどん下に在庫を増やしてい行くことも出来ます。
前のホームページでは、買取り方法や販売方法に説明不足の印象を受けましたので、こちらで加筆。1、2、3の様に、手順をわかりやすく説明するページを設けました。
SEO的には、
リニューアル前:重機、建機、農機、販売、中古など
リニュアル後:上記+パワーショベル、メーカー名
の様に、通称・機種にあたるキーワードやメーカー名も盛り込みました。調べたら通称の方が検索数が多かったんですよ(^^;
インパクトがあってわかりやすいホームページに仕上がりました。
機械メインテナンス会社様のホームページ
機械メインテナンス会社様のホームページ新規制作です。
東海地方のお客様でいわゆる有限会社規模。
機械保守の会社様なので、信頼感のある青の真面目な雰囲気のフルCSSテンプレートを改造。
メイン写真や本文の写真は、無料で使える写真を利用してトータルの予算を抑え、全体的にオーソドックスに制作。
制作ページ数が少なかったため、低予算・短納期の制作となりました。SEO内部設定も済みです。
海外向けビジネス企業様の英語ホームページ
アジアエリアでビジネスを展開する企業様のホームページ新規作成です。ホームページビルダーのフルCSSテンプレートを改造。
メイン画像はフラッシュにして、複数の写真を切替。
メッセージは、後々お客様の方で書き換えられるようにしてあります。
原稿(英文)はお客様の方で書いていただきました。
プロダクト・サービスが複数に渡るので、トップページにサービスごとに写真を配置、そこから各サービスのページに飛ぶようにわかりやすく作りました。
サービスのホームページも同時にご注文頂きました。
理化学機器輸出企業様の英語ホームページ
理化学機器の輸出企業様のホームページのリニューアル作成です。
ホームページビルダーのフルCSSテンプレートを改造。
専門家が使う機器の為、SEOは、機器名を中心に検索にヒットしやすい様に、英語対応で設定しました。
メイン画像はフラッシュにして複数の写真を切替。
日本語で書きたい箇所が1箇所ありましたので、そこは画像で処理する事で文字化けを避けました。
廃番リストページは、お客様がちょこちょこ編集する機会が多いとの事でしたので、シンプルな一覧表にして、お客様が編集しやすい様にしました。(エクセルみたいに行削除、行挿入で対応できる)
別デザインの企業向けホームページも同時ご注文。サイドバーからリンクをかけてあります。
中古農機・中古建設機械輸出業様の英語ホームページ
中古農機、建設機械を輸出する業者様のホームページを新規作成です。ホームページビルダーのフルCSSテンプレート改造。
サイドバーに、日本時間の表示、予定表の表示、ユーチューブ動画の表示、ツイッターの表示、グーグル翻訳機能を配置しました。
英語がベースのホームページですが、グーグル翻訳でもって、ロシア語など他の言語にも自動翻訳してもらえます。(正確性はなんとも言えませんが、概要が伝われば良いとの事で)
どれも外部サービスをホームページに埋め込んでいます。
ホームページ編集時にプレビューが重くなってしまう欠点がありますが、多国のユーザーに対応出来るメリットは大きいと思います。
英文原稿、ユーチューブ動画は、お客様作成です。
ユーチューブも写真があれば、かなり簡単に動画作れちゃうんですよね。