カテゴリー: 制作事例

このサイトはワードプレスのテーマの中でもフルサイト編集ができる公式テーマを採用しました。

ファーストビューの背景パララックスはJQueryを使ったカスタムスクリプトです。

トップページの物件群はスクロールに応じて明度を変化させています。これもJQueryを使ったカスタムスクリプトです。

カテゴリーページネーションはオリジナルブロックをプラグインとして開発しました。

主な仕様

パララックス
リロードランダム画像
スライドイン
スクロールアニメ（明度変化）
カテゴリーページネーション
スティッキー
ふきだしアニメーション

キャンプやグランピングの魅力を味わいながらも、より快適な空間で心地よい休息が得られることが特長のロッヂです。

カラフルなロッヂの色合いを元に、空と海や緑あふれる大自然を感じてもらえるよう明るいイメージで作成し、画像の縁は大きめの角丸にしてやさしい印象を演出しました。

主な仕様

ズームイン
スライドイン
１文字アニメーション
水平スライダー
フロート予約ボタン（スマートフォンではフッタに固定）
アコーディオン
ルートマップ

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

主な仕様

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

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

主な仕様

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

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

主な仕様

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

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

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

主な仕様

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

特殊な仕様

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

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

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

主な仕様

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

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

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

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

主な仕様

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