眼精疲労なう、で苦しんでおりますが
最後まで頑張って書き上げようと思います。
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-3481943934845626"
data-ad-slot="8806407289">
Twitee Liteでは黄金比が多数使われている
僕が開発している「Twitee Lite」では、
「iOS標準のパーツにできる限り頼らずデザインをする」
ということをモットーに、画面デザインからボタンデザイン、アニメーションアイコンまで一貫して僕一人で作成しています。
このモットーを掲げている理由は２つあり、
一つは
「オリジナリティの高いアプリを作るため」
もう一つは、
「自分自身のデザイン的な感性・スキルを磨くため」
です。
このため、パーツのデザインから配置まで1から作る必要があるので、
“黄金比”に頼ることは割と必然的な選択だと言えます。
黄金比は「最も美しい比」と言われており、
「1:1.618」の比のことを指します。
美しいアプリを作ることを目標の一つとして掲げている自分としては
黄金比を使わない手はありません。
「Twitee Lite」では今まで多くの箇所で黄金比を使ってデザインをしてきました。
古いものは1年以上前に作成したものまであるので、どこで黄金比を使ったのか忘れてしまっている部分が多々あります(笑)
(メモしておけばよかった。。。)
頑張って思い出しながら順番にご紹介していきます。
ツイート画面
まずはアプリのメイン画面である「ツイート画面」から。
4インチ画面の方をメインに紹介していきます。
テキストボックスの縦横比
なんとこの白い長方形は実は黄金比だったんですねぇ。
ちなみにiOS6以前の通知バナーは
このテキストボックスに被らずピッタリ表示されます。
偶然です。これを発見したときはさすがに驚きました。
SwipeFlowerの縦横比
SwipeFlower全体の縦横比は黄金比です。
ここでは述べませんが、SwipeFlowerを構成している細かいパーツも黄金比を使ってデザインしています。
風車の羽
ツイートアニメーション時にクルクルまわる風車です。
この風車を作成するのは手間がかかった。。。
タイムライン画面
曲線ツールバーのデザイン
設定画面の開き方を”タップ”から”スワイプアップ”への変更に伴ってツールバーをデザインし直しました。
↑がその時最初にデザインしたツールバーです。
AppStore公開版には採用していません。
こちらは実際にAppStore公開版で採用したツールバーです。
グラデーションの比率には直接黄金比は使わず、
曲線の調整時にさりげなく黄金比を使っています。
これは現バージョンでも使われているデザインです。
曲線が穏やかになり、より綺麗な曲線になりました。
グラデーションも微妙に変わっています。
このデザインでは目分量で調整したので黄金比は使っていません。
最終的には目分量ですが、黄金比が土台となっているのは事実です。
ちなみに最終デザインでは↓↓のデザインを参考にしました。
ショッピングモールで見つけた財布です。
上矢印の縦横比
スワイプアップを指し示す二重上矢印です。
縦横比が黄金比です。
人型アイコン
背景の正方形の一辺を軸に、黄金比を使ってシンプルな人型アイコンを作成しました。 顔部分の縦幅を1，ボディー部分の縦幅1の半分(0.5)を胴体にしています。
設定画面
今まで紹介したものは主にアイコンのデザインについてでしたが、
設定画面では主に配置で黄金比を用いています。
ではでは歴代の設定画面でご紹介しましょう。
初代 設定画面
かなりユーザーを困惑させた初代設定画面です(笑)
木目のボタンの作成も素人くさく回りくどいことをやっていたので
かなり手間がかかっていました。
「4inch/3.5inch」「日本語/英語」の計4種類をそれぞれのボタンで作成しなければならなかったため
かなり苦痛な作業でしたｗ
プラスマイナスアイコン
多くのユーザーに理解されなかったアイコンです。
ちなみにiPhone本体の音量ボタンを表しています。
図の通り、中心の長方形が黄金比です。
2代目 設定画面
初代の経験から、わかりやすさと画面サイズや言語に依存しにくいデザインを心がけました。 4月に公開したバージョン2.0で採用。
3代目 設定画面(現行)
リリース当初からツッコまれていた”謎の木目デザイン”からようやく脱した3代目です。
10月に公開したバージョン4.1で採用。
ツイート画面やタイムライン画面と同じ雰囲気を意識し、
対称性を高め、
ボタンへの親指の届きやすさが増し、
ボタンそのものと機能の表現を同化しスペースを有効活用、
なおかつ多機能化した完全オリジナルのTwitee Liteらしい設定画面に仕上げました。
個人的には美しい設定画面だと思っています(笑)
ステータスバーボタンの電池アイコン
3代目設定画面に搭載したステータスバーボタンの
電池アイコンの縦横比が黄金比でした(調べた)。
information画面のボタンの横幅
1.画面サイズ(1.618)に対し、大きいボタンの横幅(1)。
2.大きいボタンの横幅(1.618)に対し、小さいボタンの横幅(1)。
幅のサイズで秩序を生み出しています。
ショッピング画面のボタンの横幅
1.画面サイズ(1.618)に対し、レジへ進むボタンの横幅(1)。
2.レジへ進むボタンの横幅(1.618)に対し、閉じるボタンの横幅(1)。
3.閉じるボタン（1.618)に対し、復元ボタンの横幅(1)。
まとめ
いかがでしょうか。
けっこう細かい部分まで黄金比を用いていると思います。
ただ、黄金比はあくまでデザインをする際のひとつの指標であって、
黄金比を使っているからといって良いデザインになるとは限らないんですよね。
結局は本人の感性やスキルに頼ることになると思います。
実は先日Twitterにてユーザーさんから
「全体的にデザインのセンスなくて残念」
と言われたばかりです(笑)
RT faxxxs: Twitee使いやすくなったけど、デザインが全体的にセンス無くて残念
— Fumiya Mizuno (@fmoooon) 2013, 12月 13
「デザインが全体的に」っていう抽象的な言葉をダブルパンチで使うのやめてほしいですね。
せめて「配色」とか「アイコンのデザイン」っていう言葉使ってほしいです。
抽象的すぎて参考にしたくてもできないんですよねー。
万人受けじゃないんだなってことくらいしかわからないですねｗ
まあ、これからもデザインについてもハングリー精神でのぞみ、
素人なりに「デザインとは何か」を問い続けていきます！
今月に入ってバージョン4.2をリリースしました！
全面的にプログラムを見直し、
「使いやすさ・わかりやすさ・安定性」の向上をはかった自信作です。
アプリらしいアプリに仕上がっていると思います。
ぜひ一度ダウンロードしてみてくださいませ〜
Twitee Lite 〜世界一素敵なツイートアプリ〜 4.2（無料）
カテゴリ: ソーシャルネットワーキング, ユーティリティ
販売元: Fumiya Mizuno – Fumiya Mizuno（サイズ: 10.4 MB）
全てのバージョンの評価: 
（94件の評価）
