アプリアイコンのデザイン「フィボナッチ数列を使う」

今回はiPhoneのTwitterアプリ、Twitee(鳥のほう)のデザインについて書こうと思います。

style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-3481943934845626"
data-ad-slot="8806407289">

Twiteeにはフィボナッチ数列が使われている

みなさんはフィボナッチ数列をご存知ですか？

名前は聞いたことあると思いますが、シンプルな曲線で描かれたTwiteeはこのフィボナッチ数列を使ってデザインしました。

フィボナッチ数列とは

フィボナッチ数列とは、下に示すような前の２つの項の和が次の項の値になる規則の数列のことです。

1,1,2,3,5,8,13,21,34,55,89,……

数字だけではなんのこっちゃかわかりませんが、
フィボナッチ数列は「ウサギのつがいの増加」や「細胞の分裂による増加」や「木の枝分かれの規則」、有名なものだと「オウムガイの貝の渦」などに現れ、
自然の生成規則を表したとても不思議な数列です。

一辺の長さの比が上記で示した1,1,2,3,5,…の正方形たちをぐるぐると外側に向かってまわるように綺麗に並べると
下の画像のようなひとつの長方形ができあがります。

それぞれの正方形の一辺の長さを半径とした円の曲線をその正方形に接するように、かつ1段階小さい正方形の曲線と繋げるように描くと、
下の画像のように螺旋ができあがります。

 

この螺旋こそまさに「オウムガイの貝の渦」ですね。

 

これだけでもすごい素敵なんですが、
実はこの正方形をくっつけて出来た長方形は、縦と横の辺の比が黄金比なんです。

黄金比とは「1 : 1.618…」の比のことで、もっとも美しい比と言われています。

 

Twiteeのどこにフィボナッチ数列が使われているのか

本題に戻ります。

率直に言うと、Twiteeの翼と胴体と頭にフィボナッチ数列を利用しています。

↓翼の部分は上記で示した螺旋をつかって描きました。
 

ちなみにこの螺旋には、
どんなに螺旋を途中で切ってもその螺旋に外接する(曲線に接する)長方形は黄金比を持つという特徴があります。

つまり少し大げさに言えば、
Twiteeは黄金比の翼を持っている、ということになります(笑)

 

 

頭と胴体は、フィボナッチ数列の比が3と8の正方形に接する円を使いました(うろ覚え)。
 

 

翼の上の部分の曲線は胴体に使った8の円をそのまま利用しています。
 

製作に取りかかる前に書いた下書きは3つ

前回紹介したように「Twitee」という名前が浮かんだのは2012年8月30日ですが、
アイコンにも使われている鳥の案が浮かんだのはその1ヶ月後の10月3日です。

この日にふと頭に浮かんだ鳥を紙に書き出しました。

“Twitee”という名前が発案されるまでに出てきた様々な名前たちを網羅 | Fum’style

参考

Twitee Lite紹介ムービーの冒頭にも出ていましたが、
下書きは下記の３つの鳥だけです。

 

左側から先に描いたんですが、
２つ目に描いた鳥(真ん中)が気に入り、「よし、これでいこう」と即決定。

右端の鳥の頭には既に円が描かれていますよね。
この時から、円を用いて描くことも決めていました。

Inkscapeの教本がTwiteeデザインのヒントになった

下の画像を見てわかる通り、Twiteeは２つの曲線をくっつけて１つの太い曲線に仕上げています。

もちろん、デザイン素人なので最初からこの方法を知っていたわけではないですｗ

 製作に取りかかる前に買っていたGimpとInkscapeの教本にその方法が書かれていたのです。

その部分が以下の画像です。

 

これを見た瞬間、「これだ！」とピンときましたね。

この手法であの鳥(下書きの鳥)を描いてやろうと思いました。

Twiteeの誕生

鳥の発案から一ヶ月後の11月14日、ようやくデザイン作成ソフトInkscapeで鳥のデザインに取りかかりました。

11月末には開発を終えて動画制作に移ったので、Twiteeの製作に取りかかったのはかなりギリギリでしたｗ

Inkscapeを使うのも初めてなので操作方法もわからない状態でTwiteeのデザインをスタート。

悪戦苦闘しながらもなんとか完成。
製作時間は3時間ほどでした。

“Twitee”という名前が生まれてから2ヶ月半後、
ようやくその名前の主が誕生しました。

僕が人生で最初の本格的なデザイン製作で作り上げた作品でもあります。