投稿者: イントコーポレーション

2005年に制作のご依頼をいただいてから何回目かの全面リニューアルです。
ファーストビューは、お料理の写真をズームインしていますが、この写真の縁にある透過枠は設置が少し大変でした。
この部分はswiperを使っているので、簡単にスライドショーにすることができます。

主な仕様

ズームイン
スライドイン
１文字アニメーション
水平スライダー
垂直スライダー
ゆらゆらアニメーション
フロート予約ボタン（スマートフォンではフッタに固定）
トピックス投稿機能
マイマップでおすすめ観光スポット作成

安心・安全をイメージしたグリーンをベースに、丸みを帯びた優しいデザインにしました。
ファーストビューは、右からスライドインしてズームアップします。キャッチコピーは時間差で下からのスライドインです。

主な仕様

スライドインアニメーション
１文字アニメーション
水平スライダー
パララックス

ファーストビューは、ズームインスライドショーにキャッチコピーがスライドインします。スライドショーの下部は曲線の図形を重なあわせデバイスの幅に応じて微妙な調整をしています。
施設はカテゴリーで分類されており、カテゴリーの一覧表示は自動生成です。
内部的なことになりますが、編集画面には繁体字と日本語の両方の入力欄がありサイトは繁体字欄のみを表示する仕様です。

主な仕様

ズームインスライドショー
水平スライダー
垂直スライダー
スライドインアニメーション
ふわふわアニメーション

ファーストビューのモルタル造形の写真は、微妙なパララックスをして時間差でキャッチコピーがスライドインします。

このサイトはコンテンツがある程度できた段階で、スギヨシ工業様にも文章の加筆修正をしていただきながら並行して作業を進めました。

主な仕様

パララックス
施工事例投稿
ホバーズーム
Instagram組込み
スライドインアニメーション

特殊な仕様

①トップページの施工事例4件は、単純に新しい順の4件ではなく特定の事例を指定できます。

②「スギヨシ工業ができること」では、写真と説明を左右に配置し、この配置を互い違いに表示しています。
このメンテナンスが難しくならないよう、編集画面では、左に説明右に画像で入力フォーマットを統一してあり、クラス名で配置を左右に振り分けてています。

ファーストビューはオリジナルイラストです。実際に建立されたストゥーパ（仏塔）に光が差している様子を描きました。
パノラマ写真はスライスして分割したものを合成して無限スクロールしています。
このサイトは、施設の工事と並行して制作が進んだため公開まで１年ほどを要しました。

主な仕様

水平スライダー
パノラマ写真無限スクロール
サムネイル付きスライダー
スライドインアニメーション
イラストマップ

ファーストビューは、スライスした6枚の写真を時間差でスライドインします。その後、時間差でキャッチコピーがスライドインします。

施工事例は、KIDO様がワードプレスのブロックエディタを活用し、文章に加えテーブルで見やすい表を作り、ギャラリーで多くの写真を掲載しています。

ワードプレスがクラシックエディタからブロックエディタに進化したたため、KIDO様ご自身でビジュアルなページを作ることができるようになりました。

主な仕様

施工事例投稿
スライドインアニメーション
１文字アニメーション
垂直スライダー
ホバーアニメーション数種

ファーストビューは、建物の外観やキャッチコピーが時間差で右と下からスライドインします。

釣果アルバムは、お客様が釣果情報を適宜掲載しています。
また、トップページのお知らせコーナーは、特別な仕掛けは無く、お客様の方でブロックエディタでこのコーナーを編集しています。

主な仕様

釣果アルバム
スライドインアニメーション
スクロールに連動した横文字移動
スクロールに連動したズームイン
Instagram組込み

ファーストビューは、背景画像にロゴがスライドインし、施設名がブラー効果の１文字アニメーションをします。

TOPIXのコーナーは、お客様が適宜記事を掲載しています。

営業カレンダーはプラグインWP Simple Booking Calendarを大幅にカスタマイズしたものを利用しています。

メニューは一見シンプルな料金表に見えますが、クリックすると写真や説明が表示されるアコーディオンを使っています。また、アコーディオンで開くメニュー内容はひとつひとつ投稿でできています。

主な仕様

スライドインアニメーション
１文字アニメーション
TOPIX投稿
営業カレンダー
アコーディオン
360°画像
施設紹介動画