ユニゼロワングループ
DEMO①
このページについてのお問合せは、照会番号でお願いします。
e-mail:office@uni-01.com
照会番号：DEMO1-
UNI-01は、ここが違います！
●各機能は、設定・カスタマイズが可能です。
●各機能は、個別に追加型のオプション機能として制作されており、サイト全体、ページ全体の修正を必要とせず、複数機能の組合せ、新規機能作成・設定変更・削除にいつでも個別に対応できます。
●従来、非常に困難だった多くの機能を組み合わせて同時に利用することが、問題を独自に解決して可能になりました。
多くの機能を組み合わせてのホームページ制作が可能です。
Google Slidesとは、Gmailなど無料のGoogleアカウントがあれば無料で使用できるプレゼンテーションツールです。今回ご紹介する機能は、Google Slidesで作成されたプレゼンテーションと連携する機能です。連携することにより、ホームページ上の操作は一切不要で、Google slidesのサービスでプレゼンテーション（スライドショー）を編集することができます。連携として設定されたプレゼンテーションをご自身で直接編集するだけで。ホームページ上にも自動反映される機能です。
One driveに保存したPowerPointと連携しています。
ご自身で、ファイルを編集更新すると、ホームページにも自動的に反映されます。
長文に適したI目次機能です。
目次機能やページスクロールを合わせて約３万８千字におよぶテキスト表示をしてみました。
ポップアップで詳細を表示します。
画像をフェード効果で背景に設定しています。
【Slide Up】
画像のスライドを背景に設定しています。
【Slide Right】
画像のスライド効果を背景に設定しています。
【Slide Left】
画像のスライドを背景に設定しています。
画像のフェード効果を背景に設定しています。
進捗状況の表示に適したBAR表示です。
計算フォームとは、高度な計算式を組み込みことができるフォームです。
ボックスの内容がマウスのホバー操作で変化します。
ページ内でのセクションでの縦スクロール機能です。
ページをスクロールしてみてください。
写真や動画などのメディアをグリッドでカタログ表示します。
WEBページのタイトルを電子版表示する「TICKER」とよく似ていますが、この機能では、文字をスクロールして表示します。
また、文字以外のスクロールも可能です。
クリックやマウスホバーに対応して、イメージ（画像）が拡大表示されます。
アイテム（子猫）をクリックすると、設定した音（鳴き声）が鳴ります。
紙吹雪効果です。
様々な効果音を出すこともできます。
ご注意】この機能はタブのないスマートフォンなどでは機能しません。
従来ページのタイトルが表示されているブラウザで表示されるタブを、任意の文字列でアニメーションします。
アイコンを円形に配置したデザインです。
メニューなどに応用できます。
*ページに記載のあるボタンは、DEMOのため制作しておりません。
タグ クラウドです。代表的なデザインを３つご紹介します。
FAQとは、Frequently Asked Questionsの略語で、「よくある質問」と訳され、WEBページでもよく利用されています。
このページでは、太陽系の紹介にFAQでよく利用されるアコーディオン機能を利用してみました。
カウントアップは初回表示時のみアニメーションします。
ページ保護の解除条件として設定した任意の値で判定され、ページを保護します。
年齢確認などにも使用されます。
マウスを重ねることにより文字列を15種類のアニメーションで装飾します。
マウスをホバーするとボックスの内容がアニメーションします。
マウスをホバーするとボックスの内容がアニメーションします。
マウスをホバー又はクリックするとボックスの内容が変化します。
マウスのカーソルを、任意の画像やアイコン、文字などに変更することができます。
背景にグラディエーション色を設定して変化（アニメーション）させています。
マウスをホバー（重ねる）した時の21種類のアニメーションをご確認ください。
文字列を装飾します。
初回表示時のみアニメーションします。
クリックすると、設定した任意の効果音が再生されます。
マウスホーバーで再生する設定も対応しています。
表示やスクロールなどの開始時１回のみに適用されるアニメーションです。
世界中 さまざまなバーコードを生成できます。
文字、アイコン、画像などをスィッチにして、表示を入れ替えます。
営業日の案内表示です。
現在時間や「営業時間外」「営業時間中」などの自動表示に対応します。
3Dで流れるようなスライドです
大きな画像を自動スクロールします。
マウスを画像に重ねた状態と、外した状態をご確認ください。
水平スクロールなどにも設定できます。
テキストを、40種類のアニメーション効果です。
フルレスポンシブデザインでも、Data Table（表）のデザインには注意が必要です。
テキストを吹き出し枠にして、設定したアバターと共に表示します。
アバターやテキスト枠のアニメーション等、多くの設定項目があります。
マウスを重ねる（ホバー）すると、画像表示が拡張され、クリックすると表示が変わります。
Google driveなどに保存したファイルとの連携表示が可能です。
Driveにあるファイルを更新すると、自動的に更新されます
Q＆Aページ等によく利用されます
世界時計の表示例です。
時間の経過でアニメーションする画像を何枚か重ねたセクションです。
スタッフなどMemberの紹介などによく利用されるカードです。
Parallax効果(視差効果）と呼ばれる機能です。
画面上でマウスを動かしてみてください。（スクロールではありません）
マウスの動きに合わせて動く何枚かの画像を重ねて表示しています。
アイデア次第で様々な表現が可能です。