静的ホームページへのウェブアプリケーション実装事例 – 閲覧ユーザーに有益なツールとUIを提供しよう

PHP言語イメージ

今回は、静的ウェブサイトに不動産物件情報を一覧表示させるウェブアプリケーションの開発、実装事例のご紹介です。少し前おきが長いですがご了承下さい。

「ホームページを業者に作成してもらったけれど、静的ホームページだから更新しにくく不便だなぁ」

「やっぱり投稿機能を持った管理しやすい動的ホームページが良かったんだけど、また一からリニューアルしないといけないのかな?」

とお思いの方おられませんか?

心配いりません。当オフィスであればこのようなお悩みを解決できます。

知ってました?実はウェブアプリケーション作成の技術があれば、一からホームページをリニューアルし直す必要はないんです。現状の静的ホームページにウェブアプリケーションを追加実装すれば良いんです。

まず静的ホームページとは何なのかから説明します。対義語に動的ホームページという言葉もあります。

まず、旧来のホームページは、ホームページ作成の基本的なコンピューター言語であるHTML言語(ハイパー・テキスト・マークアップ・ランゲージ)のみで作成されており、HTML言語はタグと呼ばれる命令をテキストエディタ等で記述して拡張子がhtml(またはhtm)のファイルを作成し、それをブラウザが1行ずつ読み込んで記述された命令通りの表示をするというものでした。

例えば、

<h1>これはタイトルです。</h1>

と、HTML言語で命令を記述したファイルを作成すると、ブラウザはその支指示を読み取り、そのとおりに画面上に表示してくれるわけです。

しかしこの場合、テキストエディタで記載し作成した内容は、ファイルをテキストエディタで編集し直す等しない限りは固定であり、決まった内容でしかなく、条件に応じた動的な表示はできませんでした。

これが、HTML言語で作成されたホームページは静的ページであるという理由です。

この静的ページの問題は、装飾やユーザーインタラクティブなユーザーの興味を引くようなページを作成できないばかりではなく、ブログ投稿やニュースリリース等のような定期的にコンテンツを追加したり、修正したりといった事が難しいという問題がありました。

そこで登場するのがASP(アプリケーション・サービス・プロバイダー)やワードプレスと言ったウェブアプリケーションです。

ASPとは例で説明すればわかりやすいかもしれません。わかりやすい例は、amebaやlivedoorブログ等のブログサイトです。

あのブログサイトは、使ったことがある方は分かるかもしれませんが、ログインして管理画面に入ると、ブログ作成のための設定や入力が可能となります。

本来であればブログ記事をテキストエディタでHTML形式のコードを用いて作成し、ブログを更新する際には、再びテキストエディタでファイルを開き追加編集してアップロードする等が必要なところ、あのようなインターネット上で作動するアプリケーションがあるおかげで、管理画面で簡単にブログを投稿し、保存したり、管理したりも自由にできるわけです。

つまり、ウェブ上のアプリケーションなわけです。

また、ワードプレスについても同じでありまして、サーバー上にワードプレスをインストールすることで、それ以降は、ウェブ上の管理画面にログインすれば、ブログサイト以上の高機能な編集機能を有し、ウェブ上で作動するブログ投稿システム(アプリケーション)として機能するのです。

ホームページによく備えてあるメールフォームですが、あれもウェブアプリケーションです。

このように、ウェブアプリケーションを導入することで、ウェブを閲覧するユーザーに有益なサービスをもたらすことができます。

自身が所有するホームページを頻繁に更新する必要がある場合は動的ホームページの導入を考えた方が良いのです。無料ブログサイト等のASPやワードプレスのような高機能な投稿機能を備えたCMS(コンテンツ・マネジメント・システム)の導入です。

つまり、動的ホームページとはウェブアプリケーション化されたホームページ管理システムと言っても良いでしょう。

冒頭のように、動的ホームページの導入を渋ったばかりに後から困ったことにならないためにも、本来は初めからよく仕様など検討のうえ、ホームページの製作依頼をして下さい。

でも、後からでもウェブアプリケーション技術者であれば、静的ホームページに動的コンテンツの実装を行うことは可能なんですよ!

当オフィスによる制作事例を紹介します。

別のブログ記事で当オフィス制作事例として紹介済みの(株)エスユーホームズ様のホームページですが、まさしく、今回のブログ記事の「困った」と同じ状況でした。

当初の打ち合わせでは、物件一覧の表示や管理機能は不要であり、ニュースリリースやブログ投稿等も不要の静的ホームページでのご依頼だったわけです。

それが納品間近になって、「やっぱり取扱い物件情報一覧を表示させたい」との要望がありまして、そこはやはりお客様ですし、物件情報を更新するたびに毎度手編集で記事投稿してね、とは言えないわけです。(^^;

方法論として、きちんとしたシステムを導入するのであれば、物件情報一覧ページのみワードプレスをインストールして作成するという方法があります。

実はワードプレスは我々開発者には優れたインターフェースとしての機能もありまして、外部ウェブアプリケーションからワードプレスにアクセスし、そのワードプレスで投稿したデータにアクセスし、投稿データ情報を取得、そして外部アプリケーション側でそのデータ、情報を使用するということも可能なのです。

つまり、既に作成していたメインの静的ホームページにウェブアプリケーションを埋め込むんです。

そのウェブアプリケーションの役割は、外部のワードプレスにアクセスして、ワードプレス上で投稿されたデータ(物件情報等)を取得、そのデータをメインのホームページ上に一覧表示させる、というもの。

ただ、既に納期を過ぎていたばかりでなく、上記方法論だと工数もさらにかさんでしまう。

そこで考えたのが、簡易的なCMS機能の実装です。この簡易CMS機能は以下のようなファイルシステム(ローカルファイルの読み書き)を用いた簡易的な仕組みでありまして、簡易的ではありますものの、お客様の負担は十分少なく、物件情報の更新作業ができるというものであります。

【(株)エスユーホームズウェブサイト、物件情報一覧表示用簡易CMS機能の概要】

1.物件情報はお客様の方でエクセルシートにご入力いただき、それをCSV形式のデータとして出力。

2.そのCSVデータをこちらが指定したサーバー上のフォルダにFTPアップロードしていただく。

3.当方でメインのホームページに埋め込んだウェブアプリケーションがそのCSVファイルからデータを読み取り、ホームページ上に物件情報を一覧表示させる。

トップページ物件一覧UI
トップページに表示される物件情報UI

個別物件一覧ページUI
物件一覧表示ページUI

https://www.office-tomo.net/wp-content/uploads/2021/05/簡易CMS機能説明書.pdf

実は、この程度の機能の実装でありましたらそんなには工数もかかりませんので、そんなにお高くはありません。是非一度お問い合わせください。

サイトマップを備えた独自404ページで、ユーザーへの心配りを

404エラー画像

最近、当オフィスによる事例として(株)エスユーホームズ様のウェブサイトをリニューアル納品いたしました。

こちらの会社様はブログ投稿や写真などのギャラリー等も必要ないとのことで、静的ホームページとして納品したのですが、いざ納品してみて良く考えると困ったことに。

インデックス情報がいまだ旧サイトのままであることから、検索エンジンで表示された検索結果をクリックしても、旧サイトのデータは現在サーバー上にはないことから「404エラーページ(ページが存在しない)」が表示されてしまうのです。

この404エラーページは、一般的にはレンタルサーバー会社側で用意したページが表示され、ロリポップの場合下記画像のようなページが表示されます。

ロリポップ404エラー画面

しかし、これはあまり好ましくありません。なぜならば、せっかくアクセスしてくれたユーザーはがっかりですしイメージダウンですし、面白味に欠けます。

また、この404エラーページが表示されたユーザーは直帰すること受け合いですし、心配りが足りません。

従いまして、せっかくアクセスしてくれたユーザーを逃さないためにも、404エラーというイメージダウンをプラスに変える方策として、サイトマップ付きの独自404ページを作成し設置する事を思いつきました。

ワードプレスの場合はサーバー設定不要で404ページを結構簡単に用意できますが、今回は一からコーディングした静的ホームページ。ユーザーが存在しないページをリクエストすると当方で用意した404ページが表示されるように.htaccessファイルでサーバー設定したわけです。

.htaccessの作成や設置方法はレンタルサーバー会社のマニュアルがあるので結構簡単です。

これなら、新たなリニューアル後のウェブサイトの全体像も掴みやすく、ユーザーも気を取り直し、元々アクセスしたかった情報にアクセスができます。そしてなによりユーザーを逃さない(直帰させない)で済むのです。

普段は何気に考えていた404ページですが、このような場面においては便利だし、ちょっとしたした心配りにつながるサービスだと思いました。

せっかくご注文頂き納品するわけですから、最後まで気を抜かず、お客様のイメージダウンにはならないような心配りをしたいものです。

ロリポップにおける.htaccessファイルの設置方法マニュアルはこちら。

https://lolipop.jp/manual/hp/htaccess/

そして新たに作成した404ページの全体像がこちら。

404エラーページ事例

不動産コンサルタント会社様のウェブサイトを制作、納品いたしました – 相模原市の株式会社エスユーホームズ様

エスユーホームズトップページ

先月(4月)12日に受注したウェブサイトの制作が終わり、ようやく納品となりました。

先方は、相模原市の不動産会社様でありまして、株式会社エスユーホームズ 様と仰ります。

先方が望むコンセプトは、不動産取引は安心安全なものであるという事を、不動産売却を検討中の方々にアピールしたいとの事でした。

このお客様は、先に当オフィスにて制作、納品を承ったSEKI不動産コンサルティング様からご紹介頂いた方となります。

SEKI不動産コンサルティング様のウェブサイトはワードプレスでの納品でしたが、今回は、静的ウェブサイト(htmlファイル形式)で制作を承り、当オフィスにて一からBootstrapテンプレートを作成しての納品となります。

下記、今回納品したホームページについて簡単にご紹介いたします。

トップページ

エスユーホームズトップページ
トップページヘッダー

〇下層ページ
当社取扱い売却物件一覧

当社取扱い売却物件一覧
「当社取扱い売却物件一覧」ヘッダー

不動産売却のご相談

不動産売却のご相談
「不動産売却のご相談」ヘッダー

不動産相続のご相談

不動産相続のご相談
「不動産相続に関するご相談」ヘッダー

その他不動産に関するご相談

その他不動産に関するご相談
「その他不動産に関するご相談」ヘッダー

当社について

当社について
「当社について」ヘッダー

お問い合わせ

お問い合わせ
「お問い合わせ」ヘッダー

〇コラムページ
不動産売却の一般的な流れ

不動産売却の一般的な流れ

相続の基本

相続の基本

相続を不動産コンサルタントに依頼するメリット

相続を不動産コンサルタントに依頼するメリット

相続以外の場面でも活躍!不動産コンサルタント

相続以外の場面でも活躍!不動産コンサルタント

【事例ホームページ詳細】

注文者株式会社エスユーホームズ 様
納品したホームページのURLhttp://www.s-youhomes.co.jp
ご依頼のコンセプト不動産売却を検討中の方へ向けた企業サイト。安心安全な不動産会社をイメージした内容とし、相続や不動産コンサルティング業務についても情報発信する。
推奨ブラウザ現行のEDGE(エッジ)、クローム、Safari、OPERA、FireFox、IE11
CMS使用の有無なし(HTML形式データにて納品)
フレームワークBootstrap5、Swiper4.5.1
仕様、機能・モバイルレスポンシブ対応
・ローディング画面の実装
・確認画面、完了画面を備え、お問い合わせ内容に応じて入力フォームが変化するメールフォーム
・モバイルユーザーを意識した横スクロール機能(一部ページにのみ搭載)
・ユーザースクロールイベントに連動した、コンテンツのフェードイン、スライドインアニメーションの実装

(動的ホームページとしての機能を追加実装)
・売却物件情報の簡易CMS機能
ホームページ構成1カラム、1ページタイプ
(A4に換算して概ね30ページ)

エスユーホームズ様が実際に取り扱う売却媒介物件情報や相続、不動産コンサルティングについて理解を深めることができるコラム等、情報満載な内容に仕上げました。

相模原市周辺で物件をお探しの方や、相続、不動産コンサルティングについて知りたい方等、是非、アクセスして頂きたく存じます。

よろしくお願いいたします。

株式会社エスユーホームズのウェブサイトスクリーンショット(PC)
株式会社エスユーホームズのウェブサイトスクリーンショット(レスポンシブ)

関連記事

ワードプレスサイトの修正およびSEO(検索エンジン最適化)改善業務を納品致しました – 那覇市の岡部公認会計士税理士事務所 様

サーチコンソール

4月10日に業務の依頼を請け、作業を進めていた案件が27日に納品の運びとなりました。

お客様は沖縄県那覇市に事務所を構える岡部公認会計士・税理士事務所様です。

元々、ご依頼を承った時点では税理士登録前であられまして、近々税理士登録されるにあたり、既存ウェブサイトの記載内容とロゴ画像の修正をお願いしたいというものでした。

また、ウェブサイトを立ち上げてから3か月が経過するが、検索結果に反映されないのが気になるというもの。

ウェブサイトの修正は、26日に税理士登録番号の取得を待ち、最後に税理士登録番号を加えて作業完了。

担当した作業内容はこちら。

岡部公認会計士税理士事務所トップページ
トップページ
岡部公認会計士税理士事務所業務内容
業務内容
岡部公認会計士税理士事務所紹介ページ
事務所紹介ページ
岡部公認会計士税理士事務所英語ページ
英語ページ

業務内容に追加したコンテンツ「料金表」は、PCでの閲覧する場合と、モバイルで閲覧する場合とで表示UIの出し分けを行っております。

税務業務価格表(PC)
パソコンで閲覧時の料金表のUI
税務業務価格表(レスポンシブ)
モバイルで閲覧時の料金表のUI

問題はSEO(検索エンジン最適化)改善の方でした。

当初、岡部様のウェブサイトをチェックした時に気づいたのが、ブログの投稿数がとても多い事。

私のウェブサイトも検索エンジン最適化対策として、ブログ投稿をしており、その記事数約40記事ほど。

岡部様はそれを優に越える投稿数なんです。

聞けば、ご自身のウェブサイトの検索順位を上げるべく、熱心にブログを投稿しておられるとの由。

しかし、次にチェックしたのはインデックス状況なのですが、何故かたったの4ページしかインデックスされていないという状況でした。

しかも、内3ページは404エラー(ページが存在しない)。

検索結果に全く表示されないのが当たり前の状態でした。

普通はこれだけ熱心にブログを書き綴り、投稿し続けていれば、もっとインデックスされていなければならないもの。

まずは、404エラーの原因を探るべく調査の結果、ワードプレスサイトでたまにあるパーマリンク異常が原因でした。

パーマリンクエラーが生じるに至った原因は、定かではないものの、MW WPフォームのパーマリンク変更機能とワードプレスのパーマリンク設定の干渉では?と思われるもの。

この異常を修正し、翌日くらいからようやくブログ記事のインデックスも進み始め、数日前からはスモールキーワードを用いた場合ではあるものの検索結果において比較的上位に表示され始めるに至り、改善されました。

最後に、SEO対策として、

・検索エンジンの検索順位決定の仕組みを良く知るべきである事

・SEO(検索エンジン最適化)における施策には内部対策と外部対策がある旨

・ブログ等の施策は内部対策にあたる旨

・内部対策だけではなく、外部対策も重要である旨

・外部対策として被リンク(バックリンク)の重要性

等を伝授させて頂きました。

当オフィスでは、ウェブサイトを一から制作するばかりではなく、ワードプレスサイトでたまにあるエラーの修正やウェブサイトの改修等の小さなお困り事からご相談を承っております。

また、基本的なSEO対策についても伝授致しますので、お気軽にお問い合わせ頂きますよう、よろしくお願い致します。

こちらもお読み下さい

フルスクリーン動画ヘッダー – サンプルソースコード(BootStrap版 ※コピペ、使用ともにフリー)

フルスクリーン動画ヘッダー(BootStrap版)

先に作成しましたフルスクリーン動画ヘッダー(HTML版)は、BootStrapがインストールされた環境においては相性が悪く(モバイルレスポンシブ時に右側に余白が生じてしまう)、「じゃあ、BootStrap版も作ってしまえ」と思い立ち、早速、BootStrap版を作成いたしました。

BootStrap版の方がソースコードが短くて済み、また、ナビゲーションも取り入れやすいと思います。

仕様

特徴レスポンシブ対応。画面サイズが切り替わっても動画中央部分が常時画面中央に配置されるように設定しており、ブラウザ画面一杯に動画が表示される。
使用コンピューター言語HTML、CSS、JavaScript
フレームワークBootStrap5
対応ブラウザ現行の各種ブラウザ(エッジ、クローム、OPERA、ファイアーフォックス、サファリ)
ライセンス動画ライセンスについて
「Pexels」(https://www.pexels.com/ja-jp)の無料動画を使用している。
●ソースコードライセンスについて
100%GPLとします。
使用動画MPEG4、フレーム幅1920×フレーム高1080
推奨動画サイズ動画のフレーム構成にもよりますが、フレームサイズは幅2000×高1000前後が良いと思われます。
使い方コピペして適当に書き換えてお使いください。尚、ソースコード中の動画「フレーム幅」と「フレーム高」の数値、および「動画のパス」は必ず書き換えてお使いください。

フル画面動画ヘッダーのサンプルソースコード(BootStrap版)

<doctype html>
<html lang="ja">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>フル画面動画ヘッダーのサンプルコード(BootStarp版 ※自由にコピペ、使用OK)</title>

		<!-- Bootstrap CSS -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

		<!-- 動画処理用JS -->
		<script>
			//動画サイズの定義
			const mw = 1920;	//動画フレーム幅。使用する動画サイズに応じて数値を書き換える。
			const mh = 1080;	//動画フレーム高。使用する動画サイズに応じて数値を書き換える。

			//ページ読み込み時の動画表示の動的処理
			window. addEventListener('DOMContentLoaded', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.classList.add('top-50');
					headerMp4.classList.add('translate-middle-y');
					headerMp4.classList.remove('start-50');
					headerMp4.classList.remove('translate-middle-x');
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.classList.add('start-50');
					headerMp4.classList.add('translate-middle-x');
					headerMp4.classList.remove('top-50');
					headerMp4.classList.remove('translate-middle-y');
				}
			});

			//ウィンドウリサイズ時の動画表示の動的処理
			window.addEventListener('resize', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.classList.add('top-50');
					headerMp4.classList.add('translate-middle-y');
					headerMp4.classList.remove('start-50');
					headerMp4.classList.remove('translate-middle-x');
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.classList.add('start-50');
					headerMp4.classList.add('translate-middle-x');
					headerMp4.classList.remove('top-50');
					headerMp4.classList.remove('translate-middle-y');
				}
			});
		</script>
	</head>

	<body>
		<header>
			<div class="w-100 vh-100 overflow-hidden">
				<video id="headerMp4" playsinline="" autoplay="" loop="" muted="" src="test4.mp4" class="position-relative"></video>
			</div>

			<div class="position-absolute top-50 start-50 translate-middle" style="z-index:1;">
				<h1 class="container display-6 text-white">貴社ウェブサイトを、ダイナミックで迫力のあるフル画面動画に</h1>
			</div>
		</header>

		<div class="container">
			<h2 class="display-6 text-center text-wrap p-5">フル画面動画ヘッダーのサンプルページです</h2>

			<p class="text-center text-wrap p-3">ブラウザのリサイズやモバイルレスポンスへの切り替え時等、いつでも全画面一杯に動画の中央部を表示する仕様です</p>
		</div>

		<!-- Option 1: Bootstrap Bundle with Popper -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
	</body>
</html>

フル画面動画ヘッダーのサンプルページ(BootStrap版)

フルスクリーン動画ヘッダー – サンプルソースコード(HTML版 ※コピペ、使用ともにフリー)

フルスクリーン動画ヘッダー

最近、フル画面動画ヘッダーへの改修案件に応募する機会がありまして、結果としては流れたのですが、せっかくの機会なので、オリジナルのフル画面動画ヘッダーを作成してみました。

動画は、静止画像のようなbackground系のCSSがないので、様々なブラウザのリサイズやモバイルレスポンシブの点において面倒です。

動画が画面サイズの変化に合わせて適切に表示されるように調整するにはJSを使うしかないと思われます。

仕様

特徴レスポンシブ対応。画面サイズが切り替わっても動画中央部分が常時画面中央に配置されるように設定しており、ブラウザ画面一杯に動画が表示される。
使用コンピューター言語HTML、CSS、JavaScript
フレームワークHTML5
対応ブラウザ現行の各種ブラウザ(エッジ、クローム、OPERA、ファイアーフォックス、サファリ)
ライセンス動画ライセンスについて
「Pexels」(https://www.pexels.com/ja-jp)の無料動画を使用している。
●ソースコードライセンスについて
100%GPLとします。
使用動画MPEG4、フレーム幅1920×フレーム高1080
推奨動画サイズ動画のフレーム構成にもよりますが、フレームサイズは幅2000×高1000前後が良いと思われます。
使い方コピペして適当に書き換えてお使いください。尚、ソースコード中の動画「フレーム幅」と「フレーム高」の数値、および「動画のパス」は必ず書き換えてお使いください。

フル画面動画ヘッダーのサンプルソースコード(HTML版)

<!doctype html>
<html lang="ja">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>フル画面動画ヘッダーのサンプルコード(HTML版 ※自由にコピペ、使用OK)</title>

		<!-- 動画処理用JS -->
		<script>
			//動画サイズの定義
			const mw = 1920;	//動画フレーム幅。使用する動画サイズに応じて数値を書き換える。
			const mh = 1080;	//動画フレーム高。使用する動画サイズに応じて数値を書き換える。

			//ページ読み込み時の動画表示の動的処理
			window. addEventListener('DOMContentLoaded', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');
				const mp4Wrap = document.querySelector('#mp4Wrap');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.style.top='50%';
					headerMp4.style.transform='translatey(-50%)';
					headerMp4.style.webkitTransform='translatey(-50%)';
					headerMp4.style.msTransform='translatey(-50%)';
					headerMp4.style.left='0';
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.style.left='50%';
					headerMp4.style.transform='translatex(-50%)';
					headerMp4.style.webkitTransform='translatex(-50%)';
					headerMp4.style.msTransform='translatex(-50%)';
					headerMp4.style.top='0';
				}
			});

			//ウィンドウリサイズ時の動画表示の動的処理
			window.addEventListener('resize', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');
				const mp4Wrap = document.querySelector('#mp4Wrap');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.style.top='50%';
					headerMp4.style.transform='translatey(-50%)';
					headerMp4.style.webkitTransform='translatey(-50%)';
					headerMp4.style.msTransform='translatey(-50%)';
					headerMp4.style.left='0';
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.style.left='50%';
					headerMp4.style.transform='translatex(-50%)';
					headerMp4.style.webkitTransform='translatex(-50%)';
					headerMp4.style.msTransform='translatex(-50%)';
					headerMp4.style.top='0';
				}
			});
		</script>

		<!-- 独自CSS -->
		<style>
			body{
				margin:0;
			}

			.movie-wrap{
				height:100vh;
				width:100%;
				overflow:hidden;
				z-index:0;
			}

			.branding-title{
				position:absolute;
				z-index:1;
				top:50%;
				-webkit-transform:translatey(-50%);
				    -ms-transform:translatey(-50%);
				        transform:translatey(-50%);
			}

			.title-font-style{
				padding:200px;
				color:white;
				font-size:40px;
				text-align:center;
			}

			@media screen and (max-width:768px){
				.title-font-style{
					padding:10px;
				}
			}
		</style>
	</head>

	<body>
		<header>
			<div class="movie-wrap">
				<video id="headerMp4" playsinline="" autoplay="" loop="" muted="" src="test3.mp4" style="position:relative;"></video>
			</div>

			<div class="branding-title">
				<h1 class="title-font-style">貴社ウェブサイトを、ダイナミックで迫力のあるフル画面動画に</h1>
			</div>
		</header>

		<div style="padding:50px;">
			<h2><center>フル画面動画ヘッダーのサンプルページです</center></h2>

			<p><center>ブラウザのリサイズやモバイルレスポンスへの切り替え時等、いつでも全画面一杯に動画の中央部を表示する仕様です</center></p>
		</div>
	</body>
</html>

フル画面動画ヘッダーのサンプルページ(HTML版)

「LIQUID PRESS(リキッドプレス) 導入事例 」に当オフィス制作事例を掲載いただきました

制作事例

当オフィスにおいて昨年中に制作いたしました(株)SEKI不動産コンサルティング様ホームページがLIQUID PRESSのウェブサイトに導入事例として掲載を賜りました。

制作事例記事
当オフィスによる制作事例の紹介記事。上記導入事例ページの中程あたりに順不同で掲載されております。

当オフィス側から直接LIQUID PRESS様に当オフィスの事例として掲載をいただけないか、厚かましくも問い合わせましたところ、こころよくご承諾を賜り掲載となった次第です。

とても良いワードプレステーマを提供しておられる開発元であられまして、今回納品させていただいたクライアント様にも満足をいただけております。

LIQUID PRESS様、誠にありがとうございました。

日本語対応高品質WordPressテーマ

ショッピングカートデモサイトをオープンしました

ECデモサイトスクリーンショット

当オフィスのオリジナルテーマ「SIMPLE FREE」とECサイトプラグイン「WooCommerce」を使ったECサイト(デモサイト)を立ち上げました。

デモECサイトのスクリーンショット
https://www.office-tomo.net/ec/

スモールビジネスとしてネット上でセレクトショップのオープンを考えておられる方等にECサイト構築支援をしていきたく考えております。

このデモサイトは、クレジット決済機能も備えておりまして、EC決済機能はストライプのアカウントを使っております。

実際に商品をカートに追加して、クレジット決済処理まで行える仕様です。クレジット決済はデモモードにしておりますので決済処理はされませんので、自由に使ってみてください(※クレジットカード番号は「4242424242424242」しか使えなくなっておりますので安心です)。

当オフィスオリジナルのワードプレステーマ「SIMPLE FREE」のご紹介

screenshot

当オフィスにて独自に制作したワードプレステーマ「SIMPLE FREE」をご紹介致します。

既にワードプレスのデフォルトテーマであります「Twenty Seventeen」に改修を加えた子テーマ(名付けて「Twenty Seventeen-改-」)を作成しておりましたが、新たに、子テーマではないオリジナルのテーマを作成致しました。

現在、ECサイト構築が可能なワードプレスプラグイン「Woocommerce」を使ったECサイト制作やサポートを進めていきたく考えておりまして、どちらかと言いますと、これからシンプルなセレクトショップ(ネットショップ)を立ち上げようと考えている方向けのテーマとなります。

【テーマ詳細】

テーマのコンセプトシンプルなセレクトネットショップ向け
推奨ブラウザ現行のEDGE(エッジ)、クローム、Safari、OPERA、FireFox
その他IE10
CMSワードプレス
ホームページ構成1カラム、1ページタイプ
特徴・トップタイトルバーにCTA用ウィジェットエリアを1ヶ所設定(レスポンシブ時は非表示)
・固定画像ヒーローヘッダー(表示/非表示の切り替えが可能)
・ナビゲーションはトップ(primary)のみ。「デフォルト」または「ハンバーガー」を選べる(レスポンシブ時には強制的にハンバーガーメニューとなる仕様)
・ウィジェットエリアは、タイトルバー、固定ページ上、固定ページ下、フッター、ハンバーガーメニューリスト上、ハンバーガーメニューリスト下の6ヶ所。各ウィジェットエリアは4カラムであり、レスポンシブ時には縦並び1カラムの仕様
・独自ウィジェットを搭載。「会社情報ウィジェット」、「特定商取引に関する表示ウィジェット」、任意の固定ページを挿入できる「カスタム固定ページウィジェット」、全幅バナーや全幅画像を挿入できる「カスタムイメージウィジェット」 と「カスタムHTMLウィジェット」、週間営業予定カレンダーが挿入できる「週間予定ウィジェット」等
その他Bootstrap、グーグルウェブフォント対応

当オフィス多言語サイトを作成

他言語サイトトップ

ワードプレスのマルチサイトネットワーク機能を用いて、当オフィスサイトの多言語サイトを作成しました。

https://www.office-tomo.net/en

デフォルト言語は英語ですが、ドロップダウンリストにより他言語を選択できます。

言語を選択しますと、グーグル翻訳機能にてページ全体が選択した言語で翻訳される仕組みです。

海外向けに情報発信をなさりたい方々の一助として、多言語サイトの制作も行いますので、気軽にお問い合わせください。