【レビュー】学習カスタムリモコン「HUIS REMOTE CONTROLLER」でビジュアルリモコンの作り方を紹介!

image

ボタンの概念をなくした学習カスタムリモコン
「HUIS REMOTE CONTROLLER」でビジュアルリモコンを作ってみました!

HUIS-100RC(HUIS学習マルチリモコン)

先日アプリがMacOSにも対応して
より幅広いユーザーに使っていただける商品となりました。

今回は僕が最初から思い描いてた
ビジュアルリモコンを作成したので、作り方も含めご紹介したいと思います。

それでは行ってみよう!

image

HUISでよく紹介されているのは、
こういう複数登録したリモコンの必要なボタンを一つにまとめて
カスタムな画面を作成するってのが一般的に紹介されていますが、
僕はこんなのがしたいわけではありません。

image

HUISの素材ダウンロードページで
ボタンの画像もたくさん用意されていますが、
そもそもボタン用に画像を用意するという概念も捨てて作ってみました。

image

こんな感じでデザインしてみました。
これはとあるお客様用に作ってみました。
っていうか、お客様のリモコンをお借りして
レビュー用に使わせていただいたといっても良いかな(笑)

ここでの操作は各機器の電源のON/OFFと
アンプのソース切換とボリューム調整だけのシンプル操作にしています。

実はこのイラストは全て1枚の絵で背景として描いています。
ボタン用のイラストは一つも用意していないので
その作り方を簡単にご紹介したいと思います。

image

作り方は簡単で、
HUIS UI CREATORでまず「新規作成」を選びます。

image

デザインしたイラスト(画像)を背景にセット。

image

後は登録しているリモコンから
必要なボタンをドラッグ&ドロップしていく。
電源マーク付きのボタンが配置できました。

image

次に配置したボタンを「透明ボタン」にする手順です。

1.配置したボタンを選択
2.赤枠のアイコンを選択
3.テキストボタンを選択

image

ラベル編集画面で
デフォルトで”TEXT BUTTON”と入力されているので、
文字を消すだけ。

image

これでテレビのイラストの上に透明のボタンが配置できました。
たまたまピッタリのサイズでしたが、サイズ調整は網目のステップで変更できる。

image

透明ボタンにすると、
これ何のボタンだったっけ?という心配もなく、
カーソルをボタンの上に持っていけば内容が表示されるので安心です。

こんな要領で各リモコンの電源ボタンを登録していきます。

image

あと、もうひとつのアドバイスとして、
電源ボタンって、うっかり誤操作で当たって切れてしまうとショックですよね。
そこでタップじゃなくって長押しでもいいんじゃないかなって思います。

ボタンを選択して、操作のところを「長押し(連続発信)」にすれば
長押し操作で電源の入り切りができるのでご参考までに。

image

とりあえず一つはこんな感じで出来ました。
もっとリモコンボタンを配置しても良いんですが、
電源を入れたり切り替えたりの操作だけにシンプルにまとめています。

ちなみに背景画像を作成する際は(540×870)で作ればOKです。

image

そして何よりも、
リモコンをこのようにつかんだ時に
ボタンに干渉しないようにも考えています。

image

そしてもう一つ、この画面で基本操作が行えるようにまとめてみました。
ここでも親指の置き場所を考慮してスペースを開けています。
あと左右にフリックしてページも変えられるので、
この場所にボタンを避けるようにすれば快適そのものです。
1画面に全てを納めなくても気軽に切り替えができるように発想すれば便利かも。

image

これも1枚の背景画像にして透明のボタンを配置するだけで簡単に登録できます。
ちなみに少しだけ濃い色のボタンがありますよね。
これは長押しすると使えるように色分けしてます。

でも正直詰め込みすぎたので、
片手操作ではボタンがもうちょっと大きめのほうが使いやすいかも。
片手で持って、もう片方の手でボタンを押す場合は問題なしです。

とまぁこのようにボタン画像を配置するのではなく、
背景に1枚の画像で用意して透明ボタンを配置していけば
デザインの幅が広がって便利かも。

画像ならイラストでも写真でもなんだってOKです。

image

背景に好きな画像を持って来れば
このようにお気に入りのリモコンが楽々作れます。
今大人気の「劇場版ソードアート・オンライン-オーディナル・スケール-」
の画像を持ってきてルームライトのリモコンを作ってみました。
個人で楽しむ分であれば何でもありでしょう(笑)

image

「艦これ」好きならこんな『痛リモコン』とかね(笑)
なので1画面にすべてのリモコンを登録してシンプルにしても良いし、
自分の趣味にあったイラスト画像を使って自己責任で
自分専用にカスタマイズして楽しんでもらえればなと思います。

image

ちなみにですが、背景となる画像は「アドビ・イラストレーター」で作っています。
透明ボタンを配置するにも僕はテンプレートを作っているので
背景作成時にボタンの配置となる位置をここで合わせています。
出来上がったイラストを「アドビ・フォトショップ」に張り付けてPNG形式で保存するだけ。

image

あとからボタンを配置するにしても
これで正確な位置も事前に確認してバッチリ合わすことができます。

image

Adobe Illustrator用に作ったテンプレート
せっかくなのでダウンロードして使っていただけたらなと思います。
Photoshop用とillustrator用をご用意しました。

ダウンロード(huis_template_photoshop_illustrator.zip)944KB

image

描き上げたらこの青レイヤーの作業場所をコピーして
フォトショップに新規作成すれば(540×870)でキャンバスができ、
張り付けてPNGで保存すればOKです。

image

それにしてもどんどんバージョンアップで便利になっています。
最初できなかったカスタム画面でのボタンに学習ができるようになったりと
すごく便利になりました。

image

ルームライトの操作くらいなら、
1枚お気に入りの背景画像を用意し、細かなボタンを取っ払って
中心に大きな透明ボタンを一つ配置。
この一つのボタンに対して操作を追加していけば、
一つで6パターンも作れちゃいます。

操作1:タップ(電源ON/OFF)
操作2:長押し(連続長押し)(全消灯)
操作3:上フリック(明るさ+)
操作4:下フリック(明るさ-)
操作5:左フリック(好みの明るさ)
操作6:右フリック(常夜灯)

などなどを割り当てて、
お気に入りのイラストをタップしたりフリックで操作が楽しめる。
あとはいろいろ発想して楽しんでいただけたらなと思います。

image

あとこういう何もボタン配置してないページもありだと。
リモコンをつかむときに画面をつかんでも信号飛ばないので自由に発想してください。

image

いかがでしたか?
ボタン画像配置という概念をなくせば自由に描いて、
透明のボタンで好きなところをボタン化できれば自由自在にデザインできますよね!

ぜひ世界に一つしかないオリジナルリモコン製作してみませんか?

おまけ(提案)
ひとつこの商品で機能アップを提案したいのですが、
ボタンはリモコン信号だけでなく、
作ったリモコンページにリンクできるようにもしてほしい。
できればひとつ前のリモコンページに「戻る」ってこともできれば最高です。
ブラウザ的な感じの操作って言ったほうがいいかな。
これさえできれば無敵のカスタムリモコンになると思いますよぉ~。
余裕ができたら個人的
にも欲しいなぁ~。

imageimage image
▼HUIS 学習マルチリモコン
HUIS-100RC:25,880円+税 → 詳細・ご購入はこちら
image image
複数のリモコンを一つに、「HUIS」 リモートコントローラーが届いたので開梱レビュー!

imageimageimage
▼HUIS Bluetoothクレードル
HUIS-200CR:6,880円 → 詳細・ご購入はこちら
image image

image image
大人気コラボ商品WALKMAN Aシリーズ「ソードアート・オンライン アスナ Edition」WALKMAN Aシリーズ「ソードアート・オンライン キリト Edition」h.ear on Wireless NC(MDR-100ABN)「ソードアート・オンライン キリト Edition」h.ear on Wireless NC(MDR-100ABN)「ソードアート・オンライン アスナ Edition」

image image
【コラボ商品】劇場版ソードアートオンラインの刻印サンプル展示中!

▼コラボ商品
カゲロウデイズ 刻印モデルウォークマンSシリーズ NW-S14 SNOOPY’S FRIENDS COLLECTIONウォークマンSシリーズ NW-S14K SNOOPY’S FRIENDS COLLECTIONPS4 ProPS4 Pro
image image

▼2月14日10時より先行予約販売が開始された新商品
FE 100mm F2.8 STF GM OSSE 85mm F1.8「SEL85F18」E 85mm F1.8「SELP18110G」ガイドナンバー45「FVL-F45RM」

▼1月~2月に発表された新商品
WALKMAN Aシリーズ「ソードアート・オンライン キリト Edition」WALKMAN Aシリーズ「ソードアート・オンライン アスナ Edition」h.ear on Wireless NC(MDR-100ABN)「ソードアート・オンライン キリト Edition」h.ear on Wireless NC(MDR-100ABN)「ソードアート・オンライン アスナ Edition」ワイヤレスノイズキャンセリングステレオヘッドセット「MDR-XB950N1」ワイヤレスステレオヘッドセット「MDR-XB650BT」
ステレオヘッドホン「MDR-XB550AP」ステレオヘッドホン「MDR-XB510AS」ステレオヘッドホン「MDR-XB510AS」ステレオヘッドホン「MDR-AS210」UHS-II対応SDカード「Gシリーズ」UHS-II対応SDカードリーダー「Gシリーズ」対応
カゲロウデイズ 刻印モデルFE 100mm F2.8 STF GM OSSE 85mm F1.8「SEL85F18」E 85mm F1.8「SELP18110G」ガイドナンバー45「FVL-F45RM」KOOV アドバンスキット
KOOV スターターキットKOOV 拡張パーツセットサウンドバー「HT-MT500」サウンドバー「HT-MT300」

▼おすすめ製品



▼VAIOラインナップ
VAIO ZVAIO S13VAIO S11VAIO S15VAIO C15
VAIO Z フリップ 勝色VAIO Z クラムシェル 勝色VAIO S13 勝色

▼VAIO店頭限定特典!
image[8] image[14]

▼ソニーストア購入特典
image image

image image

VAIO購入特典の「VAIOロゴ入り」オリジナルPCケースとオリジナルマウスをご紹介

ちょっとしたお願いごとです。
もし、ソニーストア直営店(銀座・名古屋・大阪・福岡天神)で
商品ご購入の際には、当店のショップコード「2029001」をお伝えいただければ幸いです。

image_thumb52_thumb

当店はソニーストアと業務提携をしている「e-ソニーショップ」です。
ホームページ・ブログを通してソニー製品の魅力をお伝えしつつ、
ご購入のアシストをさせていただいています。
ソニーストア直営店「銀座・名古屋・大阪・福岡天神」など
リアル店舗でご購入の際には
当店のショップコードをお伝えいただくと当店の成績となります。
もし、ブログの内容など参考になり気に入っていただけるのであれば
ぜひともご協力いただければ幸いです。
厚かましいですが、よろしくお願いいたします。

image112[2] 

ワンズのホームページへ 

▼店舗情報 -----------------------------
ソニーショップ ワンズ (ショップコード:2029001)
〒675-1371 兵庫県小野市黒川町1687
TEL:0794-63-7888、URL:http://www.ones.co.jp

-------------

LINEで送る
Pocket