今回はアプリなどで「ボタンを作ることがある人」へ向けたボタンのご提案をします。

なにかすごく画期的なデザインというわけではなく、
自作タブレット向けアプリでページのセンター配置のボタンを設置するにあたり、急きょ思いついたちょっとしたデザインです。

そのボタンがこちら↓

じゃじゃん

ながーーい。


ご覧の通り、特別画期的なものではありません。


ページ全体のスクリーンショットで見てみるとこんな感じです。





一般的な角丸ボタンの場合ですとこんな感じになります。

特徴

このデザインの特徴は、

1. 横幅いっぱいに広がっていること
2. ボタンを形どるものが上下２本のボーダーのみ

という点です。

ここからが大事なんですが、
このデザインの肝は「壁とのコラボ」です。

壁というのは見ての通り「左右の端っこ」のこと。

そして、「ボーダーデザインと縦軸要素の撤廃によるミニマル化」を果たしていることにあります。



たとえば、修正前の角丸ボタン(フォントサイズが小さめですが）で、ボーダーのみにすると（用途的に）存在感が薄くなってしまいます。
かといってあれ以上面積を広げると存在感が強まりすぎてしまうわけです。

しかも指を画面中央に持っていかないとタップできません。


では壁コラボデザインについて、もう少し具体的に掘り下げてみましょう。

メリット

思いつく限りのメリットを箇条書きにします。

・タブレット本体を両手で握った状態でも親指が容易に届く。

・握った状態でなくとも、面積が広いため指の照準が外れにくい（スタンドや外付けキーボード使用中など）

・シンプルな横線ボーダーで画面いっぱいに広げているため、ボーダー自体がページに溶け込みやすく、装飾そのものにもなる。

・目立ちすぎず、地味すぎず。

・変更要素はボーダーの幅、色、フォントサイズ程度のため、デザイン時の迷いが減る。

・技術的ハードルが比較的ひくい。

・購入する、ダウンロードするなどの「締めの一発」系ボタンに良さげ。

・画面の大きいファブレットにも◯

・もちろんスマホでも問題なし。

・Webサイトにも使えそう。

こんなところでしょうか。

個人的には技術的ハードルのわりに、ほどよいデザイン性と機能性を兼ね備えているのではないかと思いました。

特に本体を握った状態でも難なくタップできるという部分が気に入っています。
ボーダーの幅を少し太くして、フォントを少し大きくするだけで適度な強調感を出せます。

ちなみに技術的には、通常のボーダーボタンをページ幅よりわずかに広めの幅にし、左右縦軸のボーダーを隠しているだけです。

こんな使い方も

まずボーダーデザインを取り入れる前のスクリーンショットをご覧ください。





まあ普通にボタンの用途に沿って色やサイズなどを変えた角丸ボタンです。



それを壁コラボデザインにリニューアルしたものがこちら。







片方の壁からヒョコっと出す使い方です。

ユーザーに押してもらうために壁から出てきたって感じで躍動感がありますが、
奇抜でも大げさでもありません。
しかし、いい感じに目に刺激が来るデザインになったのではないかと思います。

もちろん本体を握っている手の親指で一刀両断です。



ただ、決してユニークすぎるものではないため、
もしかしたらあちこちのWebサイトで既に使われているかもしれませんね。


以上、タブレットで押しやすいデザインにしたら意外と良いものができたので
ひとつの手段としていかが？というお話でした。



ではでは。