🗾

日本人のための電卓…Neumorphism（ニューモーフィズム）…

2021/06/17に公開

CSS

「4」を表示しない電卓をつくってみた。

「4」のボタンも存在しない、計算結果も「4」が表示されない。

Neumorphism（ニューモーフィズム）

Neumorphism（ニューモーフィズム）可愛くて好きだ。

DailyUIで「電卓」のお題が出たので、Neumorphism（ニューモーフィズム）を意識して作った。
せっかくだから計算するように実装してみた。

電卓は世の中にたくさんある。

日本で嫌がられがちな「4」を表示しない電卓をつくってみた。

電卓デモ

4が含まれているかのチェック

配列作成
計算結果を文字列に変換
2の文字列を1文字ずつ分割
「4」が含まれていたら計算結果の表示欄にエラー表示
「AC」ボタン以外押せないようにする

function fourchek() {

//新しい配列をつくる
  let array = new Array;

//計算結果を文字列に変換
  let num = String(answer);
  
//文字列を1文字ずつ分割
  array = (num).split('');
  
  
  if (array.includes('4')) {
  
    $("#answer").val("");
    answer = "";
    
    $("#answer").val("error!");
    errorflag = true;
    console.log('4 が見つかりました');
    
    $("#clear").val("AC");
    clear();
    return false;
  }
}

// ACボタン以外無効にする
function clear() {
  $(".number").prop("disabled", true);
  $(".kigou").prop("disabled", true);
}

CSS

下記のコードでニューモーフィズムっぽくしてみた。

ボタンをホバーしたら水色に変化
ボタンを押したら凹んだ感じに


 /* 計算結果表示エリア */
#answer{
  color: #5A88FF;
  font-weight: bold;
  font-size: 36px;
  width: 330px;
  height: 120px;
  text-align: right;
  padding: 16px;
  border-radius:5px;
  margin:  24px 16px;
}

.button {
  width: 60px;
  height: 60px;
  text-align: center;
  cursor: pointer;
  margin: 16px;
  background: linear-gradient(134.17deg, #EEF0F5 4.98%, #E6E9EF 94.88%);
  box-shadow: -12px -12px 20px rgba(255, 255, 255, 0.8),
    10px 10px 20px rgba(166, 180, 200, 0.7);
  border-radius: 40px;
}

 /* ボタンホバー */
.button:hover {
  background: #def1ff;
}

 /* ボタン押したら */
.button:active {
  background: #def1ff;
  box-shadow: inset 11px 11px 22px #d6dadd,
    inset -11px -11px 22px #fcffff;
}

便利なツール

ありがたや

https://neumorphic.design/

まとめ

見にくいが、やっぱりかわいい。
色数は抑えてあるほうが好き。

確かにニューモーフィズムはおしゃれなデザインですが、ユーザビリティに考慮されたデザインであるかどうかについては、議論の余地がありそうです。

Neumorphism（ニューモーフィズム）

電卓デモ

4が含まれているかのチェック

CSS

便利なツール

まとめ

Discussion