Analog Studio

Sample

なごみ園

レシポンシブデザイン対応の一般的な企業やショップの情報サイトで、実際に運用しています。
様々な機能を実装していますが、ご希望に応じてカスタマイズや削除・追加ができます。

ブラウジングに最低限必要な機能や動作は CSS と PHP で実装していますので、Javascript が利用できない環境でも正常に動作します。
Javascript が利用可能な環境ではより快適な機能がご利用頂けます。

ご要望があれば、更新履歴やイベント情報などを CMS 化 (ブラウザ上から管理) することもできます。


TOPページのスクリーンショット

レイアウトはブログに多いメインとサイドがヘッダーの下に横に並んでいる構成です。
一般的に浸透しているレイアウトなので、ユーザに分かりやすいサイトとなります。

TOP ページにはスライドショーを設置しており、ファーストビュー (ページを開いてスクロールせずに見える範囲) に複数の情報を表示できます。 スライドは時間で自動的に切り替わりますが、ユーザの操作で前のスライドへ戻ったり次のスライドへ進めることもできます。

メニューバーのスクロール追従とプルダウン動作

ヘッダ部分にあるメニューバーはスクロールに応じて常に最上部に表示されます。
これによりスクロールした状態でも他のページへスムーズに移動することができます。
※スクロール追従機能は Javascript により実装しているので Javascript が無効の環境では追従しません。

また、メニューバーにはカテゴリを表示してあり、マウスを近付けるとカテゴリ内のページをプルダウンして表示します。
プルダウン機能は、CSS のみで実装しているので Javascript が無効でも動作します。

画像の拡大機能

右上に虫眼鏡アイコンがある画像は、クリックすると画面いっぱいに拡大表示されます。
画面サイズが画像サイズよりも大きい場合は、画像のオリジナルサイズで表示されます。

また、複数の画像をグループ化することができ拡大した状態でグループ内の画像を切り替えられます。

画像の拡大機能は、Javascript によるので無効の場合は拡大画像へのリンクが動作します。

お問い合わせフォーム

上記以外にも、以下の機能を実装しています。
是非アクセスしてお試し下さい。

  • ページ内リンクをスクールで移動
  • ある程度スクロールするとページ先頭に戻るボタンを表示
  • インスタグラムのタイムラインを表示
  • お問い合わせフォームの設置
  • お問い合わせフォームで郵便番号から住所を自動入力

Photo Gallery

JavascriptとPHPを使ったレシポンシブデザイン対応のギャラリーサイトです。
画像やサイト名などを変更するだけでお使い頂くことも、機能追加などのカスタマイズも承ります。

画像のリサイズやリスト化などは全てPHPによる自動処理になります。
お客様が画像を追加する際にはサーバへのアップロードのみの手間で済みます。
Style3 のように CMS 化 (ブラウザ上から管理する仕組み) することも可能ですのでご相談下さい。

ユーザの利便性を考えて遅延読込を採用していますので、ネットワークの負荷も最小限です。
※画面上に表示されない要素を始めは読み込まず、スクロールされてから読み込む手法です。


扉ページのスクリーンショット

写真などの画像を展示するギャラリーとして使えるWebサイトです。
TOPページはランダムな画像を画面いっぱいに表示します。

Style2のスクリーンショット

画像を表示するページには3つのスタイルを用意しています。
もちろん、ここに挙げたもの以外でも製作しますのでご相談下さい。

画像拡大時の表示イメージ

画像は拡大表示することができます。
スマホではスワイプ動作で次や前の画像に移動できます。

拡大時に画像のEXIF情報を表示させたり特定のテキスト等を表示させることも可能です。

スマホでの表示イメージ

レシポンシブな設計ですので、スマートフォンから4Kディスプレイまで対応しています。
※スマートフォンでの表示をご確認頂く場合はスマートフォンからアクセス頂くか、ブラウザのサイズを変えてみて下さい。