ボタンの概念をなくした学習カスタムリモコン
「HUIS REMOTE CONTROLLER」でビジュアルリモコンを作ってみました！
先日アプリがMacOSにも対応して
より幅広いユーザーに使っていただける商品となりました。
今回は僕が最初から思い描いてた
ビジュアルリモコンを作成したので、作り方も含めご紹介したいと思います。
それでは行ってみよう！
- HUIS
HUISでよく紹介されているのは、
こういう複数登録したリモコンの必要なボタンを一つにまとめて
カスタムな画面を作成するってのが一般的に紹介されていますが、
僕はこんなのがしたいわけではありません。
HUISの素材ダウンロードページで
ボタンの画像もたくさん用意されていますが、
そもそもボタン用に画像を用意するという概念も捨てて作ってみました。
こんな感じでデザインしてみました。
これはとあるお客様用に作ってみました。
っていうか、お客様のリモコンをお借りして
レビュー用に使わせていただいたといっても良いかな（笑）
ここでの操作は各機器の電源のON/OFFと
アンプのソース切換とボリューム調整だけのシンプル操作にしています。
実はこのイラストは全て1枚の絵で背景として描いています。
ボタン用のイラストは一つも用意していないので
その作り方を簡単にご紹介したいと思います。
作り方は簡単で、
HUIS UI CREATORでまず「新規作成」を選びます。
デザインしたイラスト（画像）を背景にセット。
後は登録しているリモコンから
必要なボタンをドラッグ＆ドロップしていく。
電源マーク付きのボタンが配置できました。
次に配置したボタンを「透明ボタン」にする手順です。
１．配置したボタンを選択
２．赤枠のアイコンを選択
３．テキストボタンを選択
ラベル編集画面で
デフォルトで”TEXT BUTTON”と入力されているので、
文字を消すだけ。
これでテレビのイラストの上に透明のボタンが配置できました。
たまたまピッタリのサイズでしたが、サイズ調整は網目のステップで変更できる。
透明ボタンにすると、
これ何のボタンだったっけ？という心配もなく、
カーソルをボタンの上に持っていけば内容が表示されるので安心です。
こんな要領で各リモコンの電源ボタンを登録していきます。
あと、もうひとつのアドバイスとして、
電源ボタンって、うっかり誤操作で当たって切れてしまうとショックですよね。
そこでタップじゃなくって長押しでもいいんじゃないかなって思います。
ボタンを選択して、操作のところを「長押し（連続発信）」にすれば
長押し操作で電源の入り切りができるのでご参考までに。
とりあえず一つはこんな感じで出来ました。
もっとリモコンボタンを配置しても良いんですが、
電源を入れたり切り替えたりの操作だけにシンプルにまとめています。
ちなみに背景画像を作成する際は（540×870）で作ればOKです。
そして何よりも、
リモコンをこのようにつかんだ時に
ボタンに干渉しないようにも考えています。
そしてもう一つ、この画面で基本操作が行えるようにまとめてみました。
ここでも親指の置き場所を考慮してスペースを開けています。
あと左右にフリックしてページも変えられるので、
この場所にボタンを避けるようにすれば快適そのものです。
1画面に全てを納めなくても気軽に切り替えができるように発想すれば便利かも。
これも1枚の背景画像にして
透明のボタンを配置するだけで簡単に登録できます。
ちなみに少しだけ濃い色のボタンがありますよね。
これは長押しすると使えるように色分けしてます。
でも正直詰め込みすぎたので、
片手操作ではボタンがもうちょっと大きめのほうが使いやすいかも。
片手で持って、もう片方の手でボタンを押す場合は問題なしです。
とまぁこのようにボタン画像を配置するのではなく、
背景に1枚の画像で用意して透明ボタンを配置していけば
デザインの幅が広がって便利かも。
画像ならイラストでも写真でもなんだってOKです。
背景に好きな画像を持って来れば
このようにお気に入りのリモコンが楽々作れます。
今大人気の「劇場版ソードアート・オンライン－オーディナル・スケール－」
の画像を持ってきてルームライトのリモコンを作ってみました。
個人で楽しむ分であれば何でもありでしょう（笑）
「艦これ」好きならこんな『痛リモコン』とかね（笑）
なので1画面にすべてのリモコンを登録してシンプルにしても良いし、
自分の趣味にあったイラスト画像を使って自己責任で
自分専用にカスタマイズして楽しんでもらえればなと思います。
ちなみにですが、背景となる画像は「アドビ・イラストレーター」で作っています。
透明ボタンを配置するにも僕はテンプレートを作っているので
背景作成時にボタンの配置となる位置をここで合わせています。
出来上がったイラストを「アドビ・フォトショップ」に張り付けてPNG形式で保存するだけ。
あとからボタンを配置するにしても
これで正確な位置も事前に確認してバッチリ合わすことができます。
Adobe Illustrator用に作ったテンプレート
せっかくなのでダウンロードして使っていただけたらなと思います。
Photoshop用とillustrator用をご用意しました。
＞ダウンロード（huis_template_photoshop_illustrator.zip）944KB
描き上げたらこの青レイヤーの作業場所をコピーして
フォトショップに新規作成すれば（540×870）でキャンバスができ、
張り付けてPNGで保存すればOKです。
それにしてもどんどんバージョンアップで便利になっています。
最初できなかったカスタム画面でのボタンに学習ができるようになったりと
すごく便利になりました。
ルームライトの操作くらいなら、
1枚お気に入りの背景画像を用意し、細かなボタンを取っ払って
中心に大きな透明ボタンを一つ配置。
この一つのボタンに対して操作を追加していけば、
一つで6パターンも作れちゃいます。
操作１：タップ（電源ON/OFF）
操作２：長押し（連続長押し）（全消灯）
操作３：上フリック（明るさ＋）
操作４：下フリック（明るさ－）
操作５：左フリック（好みの明るさ）
操作６：右フリック（常夜灯）
などなどを割り当てて、
お気に入りのイラストをタップしたりフリックで操作が楽しめる。
あとはいろいろ発想して楽しんでいただけたらなと思います。
あとこういう何もボタン配置してないページもありだと。
リモコンをつかむときに画面をつかんでも信号飛ばないので自由に発想してください。
いかがでしたか？
ボタン画像配置という概念をなくせば自由に描いて、
透明のボタンで好きなところをボタン化できれば自由自在にデザインできますよね！
ぜひ世界に一つしかないオリジナルリモコン製作してみませんか？
おまけ（提案）
ひとつこの商品で機能アップを提案したいのですが、
ボタンはリモコン信号だけでなく、
作ったリモコンページにリンクできるようにもしてほしい。
できればひとつ前のリモコンページに「戻る」ってこともできれば最高です。
ブラウザ的な感じの操作って言ったほうがいいかな。
これさえできれば無敵のカスタムリモコンになると思いますよぉ～。
余裕ができたら個人的にも欲しいなぁ～。
▼HUIS 学習マルチリモコン
・HUIS-100RC：25,880円＋税 → 詳細・ご購入はこちら
＞複数のリモコンを一つに、「HUIS」 リモートコントローラーが届いたので開梱レビュー！
▼HUIS Bluetoothクレードル
・HUIS-200CR：6,880円 → 詳細・ご購入はこちら
＞【コラボ商品】劇場版ソードアートオンラインの刻印サンプル展示中！
▼コラボ商品
▼2月14日10時より先行予約販売が開始された新商品
▼1月～2月に発表された新商品
▼おすすめ製品
▼VAIOラインナップ
▼ソニーストア購入特典
＞VAIO購入特典の「VAIOロゴ入り」オリジナルPCケースとオリジナルマウスをご紹介
ちょっとしたお願いごとです。
もし、ソニーストア直営店（銀座・名古屋・大阪・福岡天神）で
商品ご購入の際には、当店のショップコード「2029001」をお伝えいただければ幸いです。
当店はソニーストアと業務提携をしている「e-ソニーショップ」です。
ホームページ・ブログを通してソニー製品の魅力をお伝えしつつ、
ご購入のアシストをさせていただいています。
ソニーストア直営店「銀座・名古屋・大阪・福岡天神」など
リアル店舗でご購入の際には
当店のショップコードをお伝えいただくと当店の成績となります。
もし、ブログの内容など参考になり気に入っていただけるのであれば
ぜひともご協力いただければ幸いです。
厚かましいですが、よろしくお願いいたします。
・ワンズのホームページへ
▼店舗情報 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ソニーショップ ワンズ （ショップコード：2029001）
〒675-1371 兵庫県小野市黒川町1687
TEL：0794-63-7888、URL：http://www.ones.co.jp
－－－－－－－－－－－－－