ホームページ制作はユニゼロワンに
お任せください

ユニゼロワン DEMOページサイト
sample.uni-01.com

ホームページ制作はユニゼロワンにお任せください

ホームページ制作 ユニゼロワン DEMOページサイト

QR Code

【デザイン機能】
UNI-01は、最新の技術を駆使したアニメーションデザインを始め、様々なデザインを制作することができます。
サーバーやPC、そしてブラウザーの性能向上、プログラミング言語のバージョンアップなどにより、大画面でのアニメーションデザインが可能になりました。
最新のデザイン機能を十分に生かした素敵なホームページを、オーダーメイドで制作できます。
スマートフォン画面でもご利用いただける動きのあるデザインも数多くあります。
デザイン機能の一部をDEMOページでご確認頂けます。
全ての機能は、お客様のご要望に応じて、様々にカスタマイズできます。

お客様のホームページ制作に対するご希望をお伝えください。
数多くある機能の中から最適なものをご提案します。DEMOページでご紹介できるのは、ほんの一部です。DEMOページに無いお客様のご希望があれば、どうぞご連絡ください。

【特集】デザイン機能／ 基本画像スライダー・・・同じ一つの機能でも設定の変更により様々な効果が得られます。

ユニゼロワン Hero section

スライダー（Slider）は別名カルーセル（Carousel）とも呼ばれています。
メリーゴーランドで回転しているイメージです。

近年多くのホームページでは、イラストや写真・動画などの素材を、スライドによる切替表示で取り入れています。
通常ホームページのTOPページの一番目につく場所（通常ヘッダーなどの最上部セクション）に表示されており、「Hero section」「Eye catch」「Main visual」「Key visual」など多様な呼ばれ方をされますが、ホームページの顔として大変重要なものとされています。
ユニゼロワンのHero sectionでは、アイコンなどから独自に制作したアニメーション動画を全画面の背景として設定していますが、ユニコーンの走るアニメーション画像のスライダー効果（基本スライダーを利用しています）を素材として効果的に利用して、動きのあるものにしています。

ユニゼロワンの制作には非常に多くの機能がありますが、特に画像のスライダー機能にスポットを当てて、特集としてより多くの事例をご紹介しています。

ユニゼロワンでは、スライダー機能を含め多くの種類の機能によるデザイン制作に対応しております。
ほとんどのスライダー機能では、スライダーを一部の領域だけで表示したり、ダイナミックな全画面表示にも対応しています。
スライダー表示は動画やイラスト、文章、ボタンなどの素材の背景として利用するこどができます。

各スライダー機能は、数多くの設定項目により、様々なカスタマイズができます。
スライダー機能に限らず殆どの機能は多くの設定項目を有しており、その設定を変えるだけで多くの効果が望めるように制作されています。

基本画像スライダーは、数多くあるスライダー機能の中の一つです。一つの機能だけでも、設定によって、様々な効果が得られることもご確認ください。
リストにある機能は、全て一つの基本機能の設定を変えただけのものであり、任意に設定を変えた例の一部をご紹介しています。

【特集】デザイン機能／ スライダー

基本スライダー以外にも、非常に多くのスライダー機能があります。
それぞれのスライダー機能にも基本スライダーと同様に多くの設定項目があります。
任意に設定がされた、基本スライダー機能以外のスライダー機能の一部をご紹介しています。

このリストでご紹介している設定以外のデザイン効果や、ご紹介しきれないスライダー機能も多くあります。
他の機能についてご興味のある方は、別途お問合せください。

* 全て基本スライダー機能とは別の機能プログラムによるものですが、基本スライダーと同じ効果となるものも含まれています。

ページスクロール（縦）

中身がないページをサンプルにしていますが、画像のスライドでは無く、ページまたは、ページ内でのセクションでの縦スクロール機能です。
スクロールの種類は、「BASIC」「Parallax」「Zoomed Parallax」「Cube」から選べます。（DEMOはCubeです）
ナビメニューやドッドメニューの表示にも対応しています。

スライダー -3D

ご注意】横幅の狭いスマートフォンなどでは、３D効果が十分に機能しません。
デザイン機能応用例（スライド ３D効果）

スライダー -動画カタログ 1

画像及び動画を混在して、スライド（カルーセル）表示します。
選択した画像あるいは動画は、ポップアップ表示されます。

スライダー -動画カタログ 2

画像及び動画を混在して、スライド（カルーセル）表示します。
選択した画像あるいは動画は、ページ内に表示されます。

デザイン機能

Flip BOX

ボックスの内容がマウスのホバー操作で変化します。

メディアカタログ

写真や動画などのメディアをグリッドでカタログ表示します。
多くの設定項目があり、様々なスタイルに変更できます。

テキスト　スクロール

WEBページのタイトルを電子版表示する「TICKER」とよく似ていますが、この機能では、文字をスクロールして表示します。また、文字以外のスクロールも可能です。

イメージアコーディオン

クリックやマウスホバーに対応して、イメージ（画像）が拡大表示されます。
それぞれにボタンを表示して、目的のページへ誘導することなどの利用が考えられます。

紙吹雪効果／Confetti Effects

設定した値で判定されます。
このページに18（歳）を設定して、年齢確認として利用しています。
一度解除されると、1時間（設定により変更可能）は再表示されません。

メニュー -サークル メニュー

アイコンを円形に配置したデザインです。
メニューなどに応用できます。
*ページに記載のあるレシピは、DEMOのため制作しておりません。

タグ クラウド／Tag cloud

タグ クラウドです。代表的なデザインを３つご紹介します。
本DEMOサイトのタグクラウドとしても機能しています。

メニュー -メガメニュー2

メガメニューと呼ばれるメニュー機能です。
メガメニューの効果は「CoverGirl」１項目のみに適用しています。
MEGAメニューでは、メニュー項目の内容とデザインを自由に制作できます。
アイデア次第では、メニュー以外の用途も考えられます。

ホバー アニメーション

マウスをホバーするとボックスの内容がアニメーションします。
比較的控えめなアニメーションに適しています。

カーソルチェンジ

マウスのカーソルを、任意の画像やアイコン、文字などに変更することができます。

背景可変グラディエーション

背景にグラディエーション色を設定して変化（アニメーション）させています。
前面の画像と背景をブレンドすることもできます。

ボタン アニメーション4

通常の使用では、クリックすると設定したページに遷移しますが、サンプルに付きクリックした場合の機能は設定していません。
マウスをホバー（重ねる）した時のアニメーションをご確認ください。

Switcher

文字、アイコン、画像などをスィッチにして、表示を入れ替えます。

イメージ Scroll

大きな画像を自動スクロールします。
マウスを画像に重ねた状態と、外した状態をご確認ください。
水平スクロールなどにも設定できます。

Dark mode

ページ右下にダークモードの切替アイコンがあります。
ページ素材は、文字アニメーション　Group2で、文字列をアニメーションで装飾します。

吹き出しテキスト

会話対話型のテキスト内容の表示に適しています。
テキストを吹き出し枠にして、設定したアバターと共に表示します。
アバターやテキスト枠のアニメーション等、多くの設定項目があります。

Image expand

マウスを重ねる（ホバー）すると、画像表示が拡張され、クリックすると表示が変わります。

Member card

スタッフなどMemberの紹介などによく利用されるカードです。
SNS関連のカード例ですが、アイデア次第で様々な活用が考えられます。
* サンプルにつき、ボタンはクリックしても機能しません。
* Parallax効果(視差効果）を背景に利用しています。

Parallax効果

Parallax効果(視差効果）と呼ばれる機能です。
画面上でマウスを動かしてみてください。（スクロールではありません）
マウスの動きに合わせて動く何枚かの画像を重ねて表示しています。
アイデア次第で様々な表現が可能です。

ホバーアニメーション -セクション

テキストや画像などで制作されたセクションにマウスを重ねるとアニメーションします。
動きは、上下・左右・回転など様々な調整設定が可能です。

ビフォーアフター2

ビフォー・アフターの比較写真機能です。
マウスのホバーによって変化したり、境界線のドラッグや領域のクリックで変化したり設定できます。

メニュー -アイコンサイドバーメニュー

アイコンで表示されるメニューです。
NAVメニュー項目は、本サイトのページ以外にも、このページを含め設定したページの特定の段落部分や他のサイトのページなどにもLINKできます。

Hover Video Box2

上下方向に分割されたビデオ上にマウスを重ねる（ホバー）ことにより、ビデオ表示が変化します。
*ボタンはサンプルにつき機能しません。

Hover Video Box

マウスをボタン上に重ねる（ホバー）ことにより、ビデオ表示が変化します。
*ボタンはサンプルにつき機能しません。

デュアルボタン

二者択一を明確にしたボタンです。
２つのボタンを一体化して制作しています。

チャート表示

各種チャートを表示します。
作成済画像の貼り付けではなく、入力した値に応じてグラフが表示される機能です。

Progress Bar

プロジェクトの進捗状況を視覚的に表現できます。
初回表示時のみアニメーションします。

ボタン アニメーション3

通常の使用では、クリックすると設定したページに遷移しますが、サンプルに付きクリックした場合の機能は設定していません。
マウスをホバー（重ねる）した時のアニメーションをご確認ください。

3D テキスト

テキストの3Dアニメーション装飾です。
マウスの動きに追従して動きます。

テキストアニメーション４

アニメーションの種類は、
①X,Y軸での移動
②X,Y,Z軸での回転
③X,Y軸での拡大・縮小
等を、
①時間経過
②画面スクロール
③マウスの移動
に合わせた変化を設定できます。

Cloud アニメーション

画像背景に、雲のアニメーション機能を設定しています。
雲は半透明の設定にして、霧のように表現しています。

ホバーアニメーション -水滴

Water Drop ２つの機能のDEMOです。①マウスを動かすと反応してアニメーションします。②マウスを重ねると水滴が変形します。サンプルのため、ボタンは機能しません。 Click! Water Drops Card

虫眼（拡大）鏡機能

写真を虫眼鏡で拡大表示します。大きなサイズの写真を用意してください。
サンプルでは、2560x1920pxのサイズの写真を使用しています。

メニュー -サークルメニュー2

スライダーでは、ありません。従来は縦にスクロールするセクションを、範囲を指定して横スクロールにすることができます。
注）スマートフォンでは機能せず、従来の表示となります。

３D（360°）アイテム（商品）表示

アイテムを３D表示します。商品などの表示などに適しています。
多くの枚数の写真から制作します。ご希望の方は「お問合せ」ください。

横スクロール

スライダーでは、ありません。従来は縦にスクロールするセクションを、範囲を指定して横スクロールにすることができます。
注）スマートフォンでは機能せず、従来の表示となります。

Hover Box３

マウスをホバーさせることにより、BOX化された表示が変化します。
*テキストをクリックしてもサンプルにつき機能はしません。

Hover Box２

マウスをホバーさせることにより、BOX化された表示が変化します。
*ボタンはサンプルにつき機能しません。

Hover Box

マウスをホバーさせることにより、BOX化された表示が変化します。
*ボタンはサンプルにつき機能しません。

Translate »