iOS 7のアイコンがダサいと感じるのは何故か?という考察。

uncool

先のiOS 7テンプレートを作るにあたって、色々と錯視調整について調べたりしました。
そこで、至ったひとつの考えをちょろっと書いてみようかな、と。

いきなりタイトルで『ダサい』と断言しちゃってますが、もちろん賛否両論あるのは理解しているつもりです。

だけど、個人的にはダサく感じる。というのが本音。
でも、それを可愛いと感じる人たちがいる。その感覚も分からないでもない。

では、なぜ、ダサいと感じるのか?

さらになぜ、可愛いと感じる人がいるのか?

その答えの一端がなんとなく見えた気がしたので軽く説明していきます。

— 追記 —
この記事を書いてしばらくしてから、別の視点からもアイコンについて考えた記事をアップしました。
ご興味のある方は下のリンクも是非。

関連記事:iOS 7 時代に良質なアプリアイコンをデザインするための十ヶ条
————

錯視調整とは?どうして必要なのか?

illusion

ちなみに冒頭の錯視というのは、テレビのクイズ番組とかで時々見かける『目の錯覚効果』的なものなので、知ってる人も多いんじゃないでしょうか?
(同じ太さ同じ長さの線を縦と横に一本ずつ並べて見ると、太さや長さが違って見える、とかそーゆうヤツです。)

で、この錯視が特に厄介になるのが、フォントやロゴをデザインするとき。

文字ごとの曲線やフォルムによって、同じ太さに見せたいのに全く同じ太さで作ってしまうと均一に見えない。カーブが歪んで見える。などの問題が起きてしまう。。

それを解決し、美しく自然に見えるようにするために、あえて微妙に線の太さを変えたり、曲線を微調整したりして、錯視効果を相殺する。というのがフォントデザインやロゴデザインの際の必須テクニックです。

ちなみにこんな興味深い記事もみつけました。

N°19 感覚による間隔の調整  – デザインのこと、日常のこと―ワカイ日報III
(モリサワのフォントのという文字の内側にある4つの四角はすべて大きさが違う、というお話。)

iOS 7のアイコンの角丸にはジョナサン・アイブの意向からか、そんな錯視調整が施された 直線と曲線が自然につながるフォルム が採用されています。(β版ですが。)

この錯視調整が今回のお話のキーになります。

ダサいのは Jonathan’s Cornersのせい??

rouded_corners

iOS 6 以前のアイコンはすべて一般的な角丸でした。
つまり、四隅に正円を引いて、その円の頂点をそれぞれ直線で繋げただけの単純な角丸。

iOS 6までの角丸と新しい角丸。個人的に、どちらがより美しいと感じるか?といったら確実に後者です。

流れを止めてしまうようなカド(変わり目)が一切なく、円のように滑らかに見えることがそう感じさせるのかも知れないですね。

なので、この新しい角丸自体は悪いどころか良いと思っています。
ただ、Appleが新しくiOS 7用にデザインした実際のアイコンを良く見てみると、この角丸がひとつの障害になってしまっているんじゃないかと思うのです。

どんなに美しい入れ物も、中に入れられるのがゴミクズならゴミ箱でしかない。

さて。
上の見出しは気にせずに、下の画像を見てください。

a

この画像をAとします。
外側の角丸は例の錯視調整された角丸です。

角丸の中に円が描かれていますね。次も見てみてください。

b

この画像はB。Aと同じ条件ですが、どう見えるでしょう?
AとBでなにか違うように見えるでしょうか??

a_vs_b

ふたつを並べてみました。
こうすると違いが少し分かりやすいんじゃないかと。

実は片方が完全な正円で、もうひとつは正円ではありません。
では、どちらがキレイな/正確な円に見えますか?

重ねてみるとこんな感じです。

each

Aの円の方が若干幅広くなっているのが分かりますね。
それから、少しカーブの曲がり方も違っています。

答えはAが正円。Bは僕がカンタンに錯視調整した円です。

ちなみに錯視の感じ方には個人差があるので、必ずみんなが同じように感じる。というものではないようです。
なので『平均的にこう錯覚する傾向にある』という観点から、正確に調査する場合は時間をかけて多くの人の感覚を調べる必要があるのだとか。

僕の目には明らかにAが歪んで見えたのですが、以下は、僕の目に見えた感じと、正しく見えるように調整した箇所です。

adjustment

これらを通じて何が言いたいのかと言うと、iOS 7の角丸は、アイコンの内側の要素により影響を与えるようになったのではないか?ということです。
また、フチに近ければ近いほどその影響は強くなると考えられます。

今までの単純な角丸の中に円を描いても『歪んで見える』なんてことはほとんどなかったと思います。ですが、角丸に錯視調整が施されていることで、中身の形状の見え方がよりシビアになったのではないかと。

僕の目には、この角丸自体が少し横に伸びているように見える(辺の長さが同じに見えない)ので、この中に正方形を描こうと思ったら、少し縦を長くしないと正方形に見えないかもしれません。

つまり錯視調整された枠内に入れるなら、中身もしっかり調整するべきなのではないかと。
中身を今までの感覚で描いていると、モノによっては歪んで見えちゃうんじゃないかと感じています。

iOS 7 のアイコンの中身は錯視調整されているのか?

では、改めて現在公開されているiOS 7のアイコンを見てみましょう。

ios7_icons

iTunes Storeアイコンの上に描かれた青い円は普通の正円です。分かる限りでは錯視調整されていないようですね。
ここまで読んでくれた方の中には、これらのアイコンが少し歪んで見える。という人もいるのではないでしょうか?

よりよく見てみると、この円の線の太さも一定ではないように見えてきたりしませんか?

なぜダサいのか?可愛いのか??

ここまでで、僕が感じたのは『正しい形に見えないことで、美しく感じられないからダサい』んじゃないかと。
(微妙なグラデーションについては今回は除外します。)

逆に『カッチリしていないせいで、なんとなくユルく見えるから可愛い』と感じるのではないでしょうか?

つまり、ゆるキャラ的な可愛さですね。
本当に可愛いかといわれれば可愛くないけど、気の抜けた感じが可愛い的な。

もちろん『角丸と円』というほんの一部分についての考察(妄察)なので、これが絶対的な答えだとは思っていません。
でも、アイコンを作る側からすると、こういった部分って見落としがちだけれど、実はかなり重要なポイントだと思ったりもするのですよね。

ってなワケで。

これからAppleって、ゆるキャラを作るような感じのご当地ブランドになって新境地を開拓していったりするのでしょうか?

(おわり)

広告

iOS 7のアイコンがダサいと感じるのは何故か?という考察。」への16件のフィードバック

  1. ピンバック: 【おはあぷ】個人製作のアプリがアノ通信会社に導入! | あぷまがどっとねっと

  2. 言ってる事と内容は理解できるが、そんなに言うならAppleやGoogleの入社試験を受けて入って変えてくれよ。万人が美しいと感じるように少しでもデザインして欲しい。

    この記事にはひねくれしか感じない。自分の考えが1番美しいと酔いしれてるように思える。
    あなたの髪型と服装はダサくないのか?きっとそちらの方が生活や周りに影響するだろう。

    円がずれてようが数字の1のセンタリングがずれてようが機械を使ってでしか比較できなく、目視で確認できないズレやブレやデザインは株価も売り上げも変わらん。

    • まぁ、『この記事がひねくれてる』というよりは、僕自身がどちらかと言えばひねくれてる感じなので、ご了承くださいませ。

    • 「文句があるならお前がやれ」
      という返し言葉は、よくある批判だと思います。

      「政治に文句があるなら、お前が国会議員になれ」とか
      「お笑い芸人のネタが面白くないなら、お前がネタを作れ」とか
      よく言いますよね?

      言い出したらキリがありません。

      もし、文句がある人全員がプレイヤーにならないといけないとしたら、
      この社会では、何も意見を述べられないことになってしまいます。

      ユーザーは、製品に感想を持つとき「作る側の立場」に立つ必要はないはずです。

  3. 私は「ひねくれている」とは感じませんでしたよ。むしろ、なぜ「ひねくれている」とキレるのかが意味不明です。

    ただし、考察自体は興味深いものの、意見には同意できなかったというか、サンプルを見ても目がちらちらしてよく分からず、納得はできませんでした。「通りすがり」さんとは逆ですね。

    私は、iOS 7 のデザインは全体としてシンプルで悪くないと思いますが、標準アプリのアイコンは気に入るものとそうでないものがあります。錯覚調整だけが問題ではないと思います。その後、すでにいろいろ語られていますが、色遣いとか統一感のなさとかシンプルさが足りないとか。正式発表までに、アイブさんをはじめとするデザインチームならもっと良いデザインにしてくれると期待しています。

    • コメントありがとうございます。
      錯視に関しては文中にもあるとおり個人差が否めないので、ぼくが感じたのと他の方が感じたものが同じとは限らないですね。

      『錯覚調整だけが問題ではないと思います』というご意見にはぼくも共感しています。
      今回はどちらかと言うと作り手側の視点で、iOS 7向けアイコンで見直すべきポイントとして書いた感じです。

      とは言え、iOS7も間もなくリリースされるでしょうし、それまでに急激な修正はないかもしれませんが、その後のバージョンアップでより素晴らしいデザインになるとよいなぁと思っています。

  4. ここまで書いているとこ申し訳ないですが、正直慣れかと。beta1から開発、日常含め使い倒して来ましたが、今ではiOS7の方が好みですね。

  5. 私はアルミを使った高級志向の筐体デザインと、iOS7のポップなデザインとのミスマッチが気になります
    またMacとiOSとの整合性の鎖を断ってしまったこと
    Jobsがいたらこのような変化は望まなかったような気もします
    いっそのこと、従来デザインとポップデザインを好みで選択できるようにしてほしいです

  6. 通りすがりで失礼します。☆

    ぼくはデザイナーではないので、細かなことは判りませんが、
    何とはなしにも、勉強になりました。

    見え方、ですね。

    素敵な記事を、ありがとうございました。

    ps. tempさんの「従来デザインとポップデザインを好みで選択できるようにしてほしい」
    とのご意見には、ぼくも同意です♪

  7. はじめまして、iOS7のアイコンが気に入らなくて彷徨っていたら辿り着きました。
    おそらく、アイコンでの変化は立体感(写実的)を弱めたアイコンの変化が大きいと思いました。アイコンの中のグラデが単純化したんです。グラデも単純に下から上になり、
    Appleのアイコンの象徴でもあった「ハイライトと影」の部分が無くなっています。素人がPhotoshopを使っても作ることが可能なクオリティーです。
    「メッセージ」「メール」「電話」など単純化されたピクトが多い中、「Safari」と「設定」はやや複雑な絵を使っているようにトンマナが統一されていないのも気になります。
    ひどいのは「電話」の「キーパッド」ですかね。数字がセンターに来ていませんね、上にいるように見えますよね。英語入るから上に持ってきているようですが、[*]と[#]がセンターに入っています。またトンマナが合っていません。
    要は中途半端な印象を受けてしまうのです。
    使い慣れるよう頑張ってみますが、出来る事なら、私も従来のデザインに戻したいです。
    ジョブスの偉大さを感じた日でした。

  8. はじめまして。iOS7は見識不足のオンパレードですよね。
    この記事の考察にはとても説得力があり、素晴らしいと思いました。

    また、アイコンを並べたときに以前より雑然とした印象を受けるのも、
    このRが原因なのだと気付きました。

    アイコンに関しては、これまで『幼稚な色使い』と『形状を無視した直線的な
    グラデーション』が素人くささの原因だと思っていましたが、シンプルな
    アイコンにとってこのRは致命的なのだろうと感じます。

    アイコンだけでなく、角丸全般に対して素晴らしい着眼点を与えてくれたことに感謝します!

  9. 僕もiOS7のアイコンはダサいと感じています。
    アイコンのグラデがノッペリとしすぎている、高級感と先進性が感じられない。
    角丸についても、しまっているデザインが好きなので寧ろ、真四角のほうが良かったですね。
    なにより嫌なのがフォントです。基本的に太めのゴシックなどが好きなので。
    今回のデザイン傾向は女性向けという気がします。
    丸より角、細より太、白より黒!可愛さより高級感!な男性向けデザインも欲しかったです。
    なにより、選ぶことが出来ないのは、スマートフォンとしていかがなんですかね。
    カバーをメタル基調のものを使っているのでどうにかしてほしいところです。
    フラットデザインはすでに使い古されてますし、、、
    ジョブスが存命ならアイコンを一新するだけでなく、もっと違ったベクトルで革新していたのではないでしょうかね。

  10. 同感です!! よくぞいってくださいました! 私はまったくデザインに関して素人なのですが、そんな私の目にもボワーンと膨張した感じになって超ガックリきてたんです(/_;)

    特にメモのアイコンの変更が大嫌い。 前のはもっと引き締まった感じだったのに。。
    全体的にNTTが出すタブレットにあるアイコンみたいでダサいし、安っぽいし、デカすぎる。

    最初のロックを解除するときの透明感は好きですけど。。。

  11. 膨張して見えるのは錯視調整以外にもアイコンのグリッドを変えたことも影響してますね。
    1年前の記事なので状況変わってますがさすがに慣れました。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中