Webお久しぶりです。noteにQiitaなど媒体が増えたことでめっきりここに書かなくなりましたが、ひさびさにネタができたので書いていきます。今回の話題はNeumorphismというデザイン手法についてです。Qiitaにも記事を書かせていただいたのですが、まだ出始めたばかりのものでトレンドになるのはもう少しかかりそうだなという印象です。個人的には気に入っていたりもするので、先日インターンの課題として制作した作品にもこんな感じで取り入れていました。たくさんの方に見ていただいたのですが、そこでこの完了ボタンのところの影が逆になっているよという指摘を受けました。たしかに凹型のNeumorphismは本来インセットの影をつけるべきで、これは完全に見落としていたことだったのですが(そもそもインターンのメインコンテンツはデザインではなくバックエンドのほうだったので...)なんで違和感をもたなかったのかというところを考えて、それがまとまりそうなのでこうして記事にしています。凹型neumorphismとミスで生まれた表現まずは実物を見てもらったほうが早いと思うので、こちらをご覧ください。この左側が今回ミスで生まれた表現で、右が凹型のNeumorphismです。みるとたしかに正規のほうがキレイなのですが、これを違和感に感じていなかったのにはneumorphismの捉え方に関係していました。Neumorphismをどう捉えていたかNeumorphismはそもそも色の違う影を2つつけることで立体が出っ張っているような状態のメタファーをしています。このにゅっとしている感じが個人的にはこのような状態に見えていました。左が凸型、右が凹型のneumorphismをもし断面で見たらと想定したときの個人的解釈です。この白い部分が実際のオブジェクトで黄色がゴムのイメージです。このように水平な面にゴムが固定されていて間が引っ張られて湾曲している感じがneumorphismっぽさなのかなという解釈をしていました。ミスで生まれた表現はどうなるか個人的な解釈を知ってもらった上であらためてボタンに話を戻します。今度は出っ張っているボタンと並べた状態を見てみましょう。このときポイントとなるのはCSS上でこの2つの状態のボタンは影の向きと背景色以外変わっていないということです。影の内側の輪郭が同じ大きさということになります。するとこのボタンはゴムとボタンの組み合わせとして見たときにこのような状態であると解釈できます。上が凹型で、下が凸型です。このようにボタンと枠が離れていて、ボタンの上面にゴムがぴったりくっつけられていると考えるとこの表現がメタファーとして成立してしまうのです。これがすぐにミスを見つけられなかった原因でした。結局なにがいいのか?さて、ここまでなぜ自分がミスで生まれた表現も自然に感じてしまっていたのかについて説明したのですが、この話をしていたときにTwitterで「そもそも凹型のボタンが押せそうな気がしないのでオンオフの表現に無理がありそう」という意見ももらいました。これはたしかにそのとおりで、今回の場合はToDoという(ちゃんと運用するなら)完了から未完了に戻ることのない性質のものなのである意味この感覚を持ってもらえるのは体験として正解と捉えることもできます。こちらの記事で行われているようないいねボタンとか、もっとオンオフが行ったり来たりすることが当たり前の要素でこの感覚を持たれてしまうと致命的です。オンオフはどのように表現するのがよいのでしょうか?自分はこれを以下のようなボールペンのノックを表現できるようにすればいいのではないかと考えています。オン・オフどちらも凸型であり、その出っ張り具合が変わることでオンとオフを表現するという形になります。その上でホバーするときなどに影をなくしたり、あるいは凹型を使えばわかりやすい挙動になるのではないかなぁと思っています。これは影のオフセットの量を切り替えていけばいいので比較的簡単にできるのではないかと考えています(特にWeb)またホバーと実際押したときでまた影の量を変えてみたりとかできるとよりそれっぽくなるのではないでしょうか。まとめというわけで今回は個人的な凡ミスから生まれたメタファーのあれこれを考えてみました。Neumorphismも確立しきれてないものなのでこういう解釈があってもいいんじゃないかなと思っています。いろんな表現をみんなで試して、フラットデザインやマテリアルデザインがそうであったようにアップデートしながらNeumorphismも浸透させていきたいですね。今回は全体見ても難問回でした。1024->1058(+...2011-12-20クイズで外国人の方が日本語問題を出来る人が多いわけあくまでも個人的な意見ですのであしからず。これに思い至った...2011-04-07地震すごいね。久しぶりに来た地震はめちゃくちゃ大きかったですねwしかも合...2011-03-20SRM500は...遅くなりましたが報告します。今回は一問目、102点のコードが書...2011-02-17人生初のGUIアプリを作った一日。BookmarkTopHatenarはてなブログをはじめよう!touyou1121さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。