意外と身近にある『かどまる』
noteに何かをあげるというのは初めてなので…こんにちは。こんばんは。
普段学校でwebやらなんやらと勉強している大学生のさんみです。
早速ではありますが今回は角丸についてお話ししていこうかなと思います。
角丸とは
そもそも角丸という文字だけでピンとこない方も少しばかりはいるのではないでしょうか？
角丸とはサイトによくあるボタンやテキストの背景など様々な場面で大活躍してくれる優れものです。もちろん紙なんかでも角丸は多く使われています。
ピンとこなかった方も画像のようなサイトを１度は見たことがあるのではないでしょうか？
どうですか？
画像のYouTubeでいうと動画のサムネはもちろん、右上のログインや上のジャンル分け、検索バナーなど上げきらないくらいたくさんあります。
きっと〇〇のサイトで見たな〜などと頭に浮かんだのではないでしょうか？
そのくらいどのサイトにも角丸は隠れているのです。
みなさんの身近にある角丸は何か、考えながらこれから読んでいただけると嬉しいです。
角丸の種類
ここではよく見かけるものを紹介していきます。
10px
遠目で見たら角丸？となるくらい自然で上品なイメージを持つことができます。
20px
個人的に１番しっくりくる角丸です。おそらく実際に１番使われているのではないかと思います。（さんみ調べ）
30px
丸すぎ？と思う方もいるかなと思います。フォーマルなサイトではあまり見かけない角丸です。
そういえばこんなものも作ってみました。
0pxはいわゆるただの長方形です。要素が長方形だけだとどうしても堅苦しい印象を持ってしまう、けれど右２つのようにやりすぎても何か違和感を感じてしまう…と比べると思ってしまいます。
ただ40pxくらいだったらワンポイントなどで使えそうですね。実際に必要な場面も出てくるのかな？と思ったり。
使用する意図をしっかり分かった上で使うのが重要だということですね！
身近にある角丸
冒頭で「みなさんの身近にある角丸は何か、考えながらこれから読んでいただけると嬉しいです。」とお伝えしたのを覚えていますか？
きっとここまで読んでくれた人の４人に１人くらいは考えてくれたのかなと思います。というか願望ですね。
サイトのボタンなどにも使われている角丸ですがみなさんの1番身近にあるものでいえば…
スマートフォン
or
アプリケーションアイコンのロゴ
の２つかなと思います。
どっちも結局スマホ関連じゃんなんてクレームは受け付けません！
スマートフォンの角丸
もちろんスマートフォンの中でもAndroid携帯には角ばった端末も多数存在します。しかしながら日本で普及率が高いiPhoneや一部のAndroid携帯は角丸です。
というのも角ばったスマートフォン端末は「角や側面部分のエッジが手に当たって痛い」といった意見があり、また端末のサイズが大きくなると同時に重量増加の影響で角ばったデザインでは手に馴染みにくくなってしまったようです。
アプリケーションアイコンの角丸
まず謝らせてください。Android携帯のみなさんごめんなさい！
というのもAndroid携帯を使ったことがなく、アプアイコンが角丸なのiOSだけ？と気がついた時には締め切りが迫っていたのでした…
と仕切り直してiOSアプリアイコンがなぜ角丸が使用されているかというと、スティーブ・ジョブズ氏のこだわりの１つのらしく、というのも最初は楕円や円で考えていたみたいですが、ティーブ・ジョブズ氏の角のない四角形にしようという一言で決まったようです。
専門家によれば、とがった角は思考のプロセスを断続的にしてしまう効果があり、四角形をみた時はそれを認識するために脳が4回の演算を無意識に行っているそうです。一方で丸い角の場合はこうした妨げ効果はなく、スムーズに視界に収まるとおり、脳は1回の演算で済むとのことです。
さいごに
わたし自身ここまで角丸について考えさせたれたこともそうそうないのですが奥が深いなと思いました。
角丸は図形のサイズが小さくなればなるほどpx数は小さくしていくと綺麗に見える？要素によって角丸の大きさを使い分けるコツは？などまだまだ模索中ではありますが、同時にとても奥が深いなと魅力がたくさんあります。
まだまだ勉強が必要だなと改めて痛感したと同時にデザインには答えがないとはこのことか！となっています。
ここまで駆け出しデザイナーさんみの記事を読んでくださりありがとうございました〜！
（本日ADVENTERから飛んで下さった方は明日もさんみの記事が上がりますのでもしお時間ありましたらチェックしてくれると泣いて喜びます！）
この記事が気に入ったらサポートをしてみませんか？