![](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/twiteeMovie.png?fit=600%2C337&ssl=1)
今回はiPhoneのTwitterアプリ、Twitee(鳥のほう)のデザインについて書こうと思います。
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-3481943934845626"
data-ad-slot="8806407289">
Twiteeにはフィボナッチ数列が使われている
みなさんはフィボナッチ数列をご存知ですか?
名前は聞いたことあると思いますが、シンプルな曲線で描かれたTwiteeはこのフィボナッチ数列を使ってデザインしました。
フィボナッチ数列とは
フィボナッチ数列とは、下に示すような前の2つの項の和が次の項の値になる規則の数列のことです。
1,1,2,3,5,8,13,21,34,55,89,……
数字だけではなんのこっちゃかわかりませんが、
フィボナッチ数列は「ウサギのつがいの増加」や「細胞の分裂による増加」や「木の枝分かれの規則」、有名なものだと「オウムガイの貝の渦」などに現れ、
自然の生成規則を表したとても不思議な数列です。
![TWITEE](https://i2.wp.com/fum-s-tyle.com/wp-content/uploads/S-2013-05-11-20.55.51.png?resize=230%2C300)
![twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/S-2013-05-11-20.56.21.png?resize=300%2C289)
一辺の長さの比が上記で示した1,1,2,3,5,…の正方形たちをぐるぐると外側に向かってまわるように綺麗に並べると
下の画像のようなひとつの長方形ができあがります。
![twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/g3043.png?resize=599%2C371)
それぞれの正方形の一辺の長さを半径とした円の曲線をその正方形に接するように、かつ1段階小さい正方形の曲線と繋げるように描くと、
下の画像のように螺旋ができあがります。
![twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/g3051.png?resize=600%2C371)
この螺旋こそまさに「オウムガイの貝の渦」ですね。
![twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/NautilusCutawayLogarithmicSpiral.jpg?resize=500%2C378)
これだけでもすごい素敵なんですが、
実はこの正方形をくっつけて出来た長方形は、縦と横の辺の比が黄金比なんです。
黄金比とは「1 : 1.618…」の比のことで、もっとも美しい比と言われています。
![twitee](https://i2.wp.com/fum-s-tyle.com/wp-content/uploads/g30431.png?resize=599%2C371)
Twiteeのどこにフィボナッチ数列が使われているのか
本題に戻ります。
率直に言うと、Twiteeの翼と胴体と頭にフィボナッチ数列を利用しています。
↓翼の部分は上記で示した螺旋をつかって描きました。
![Twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/S-2013-05-11-21.34.35.png?resize=547%2C600)
ちなみにこの螺旋には、
どんなに螺旋を途中で切ってもその螺旋に外接する(曲線に接する)長方形は黄金比を持つという特徴があります。
つまり少し大げさに言えば、
Twiteeは黄金比の翼を持っている、ということになります(笑)
![twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/RetinaTwiteeCOPY.png?resize=576%2C600)
頭と胴体は、フィボナッチ数列の比が3と8の正方形に接する円を使いました(うろ覚え)。
![Twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/S_2013-05-11_21.34.08.png?resize=502%2C600)
翼の上の部分の曲線は胴体に使った8の円をそのまま利用しています。
![twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/Shot-2012-11-14-22.26.00.jpg?resize=441%2C529)
製作に取りかかる前に書いた下書きは3つ
前回紹介したように「Twitee」という名前が浮かんだのは2012年8月30日ですが、
アイコンにも使われている鳥の案が浮かんだのはその1ヶ月後の10月3日です。
この日にふと頭に浮かんだ鳥を紙に書き出しました。
参考
Twitee Lite紹介ムービーの冒頭にも出ていましたが、
下書きは下記の3つの鳥だけです。
![twitee](https://i1.wp.com/fum-s-tyle.com/wp-content/uploads/IMG_0268.png?resize=600%2C450)
左側から先に描いたんですが、
2つ目に描いた鳥(真ん中)が気に入り、「よし、これでいこう」と即決定。
右端の鳥の頭には既に円が描かれていますよね。
この時から、円を用いて描くことも決めていました。
Inkscapeの教本がTwiteeデザインのヒントになった
下の画像を見てわかる通り、Twiteeは2つの曲線をくっつけて1つの太い曲線に仕上げています。
もちろん、デザイン素人なので最初からこの方法を知っていたわけではないですw
![twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/Shot-2012-11-14-22.26.00copy.jpg?resize=394%2C426)
製作に取りかかる前に買っていたGimpとInkscapeの教本にその方法が書かれていたのです。
その部分が以下の画像です。
![twitee](https://i1.wp.com/fum-s-tyle.com/wp-content/uploads/IMG_0269.png?resize=600%2C238)
これを見た瞬間、「これだ!」とピンときましたね。
この手法であの鳥(下書きの鳥)を描いてやろうと思いました。
Twiteeの誕生
鳥の発案から一ヶ月後の11月14日、ようやくデザイン作成ソフトInkscapeで鳥のデザインに取りかかりました。
11月末には開発を終えて動画制作に移ったので、Twiteeの製作に取りかかったのはかなりギリギリでしたw
Inkscapeを使うのも初めてなので操作方法もわからない状態でTwiteeのデザインをスタート。
悪戦苦闘しながらもなんとか完成。
製作時間は3時間ほどでした。
“Twitee”という名前が生まれてから2ヶ月半後、
ようやくその名前の主が誕生しました。
僕が人生で最初の本格的なデザイン製作で作り上げた作品でもあります。
Twiteeに込めた想い
この鳥、Twiteeには
余分なものを極限まで削ぎ落とし、シンプルさと美しさを兼ね備え、上(空・未来)を見据える
という想いを込めています。
だから頭が斜め上を向いているんです。
3つの曲線と尖った直線だけで鳥を表した様はシンプルさの象徴です。
![Twitee](https://i0.wp.com/fum-s-tyle.com/wp-content/uploads/RetinaTwitee1.png?resize=600%2C375)
まとめ
いかがでしたか?
デザイン素人なりにがんばってデザインしました。
ちなみに黄金比とフィボナッチ数列に関しては下記のサイトが詳しいです。
とても面白い内容です。
おまけ
ちなみに偶然発見したことなんですが、
このTwiteeに接する長方形(ほぼ正方形)の中心をとらえると、
なんと翼の端がちょうど中心と重なるんですよ。
これにはびっくりしました。
![Twitee](https://i2.wp.com/fum-s-tyle.com/wp-content/uploads/S_2013-05-11_22.47.58.png?resize=382%2C400)
ではっ