PositionStrategyの開発振返り(slim, sass)

先日リリースしたPositionStrategyの開発の振り返りをします。
(PositionStrategyはこれです ⇛ http://position-strategy.ffab-0.com/

※数日前に開発メンバーの友人Hがブログに記事を書いているので、
その内容とは被らないような内容にしてます。(主にHTML,CSS担当として)
(そのブログ記事⇛http://tech-mr-myself.hatenablog.com/entry/2013/11/04/224842

■ PositionStrategyの概要

企業情報をグラフ化し、企業間での比較を視覚的にできるサービス。
具体的には、売上高や経常利益、時価総額、平均年収や平均年齢などの指標をグラフで見れます。
企業単体の業績推移はもちろんですが、A社とB社の業績比較や☓☓業界のトップ5企業なども見れます。
検索できる企業は東証一部、二部、マザーズ上場企業です。

f:id:kiiita:20131106134543j:plain

■ 今回自分が担当したこと

主にフロントエンドを担当しました(ただしJS除く。つまりHTMLとCSSだけ汗)。
HTMLはSLIMで、CSSはSassで書きました。

■ 開発の手順

今回のプロジェクトのスタートは特殊でした。
というのも、このサービスはもともと友人Hとその友人で企画したものだったからです。
その後色々あったらしく(仲間割れとかネガティブなものではない)、Hから声を掛けてもらって、
アサインさせてもらうことになりました。

その頃は丁度RubyRailsを勉強し始めて2ヶ月弱の頃で、
「ちょうどRubyRailsの勉強できるからいいか」と思っていた。
が、担当は上述のようにデザインが主・・・。
なぜそうなったかというと、①フロントとバックを分担することで開発スピードを上げるため、②自分がデザインが好きで一応の得意分野であったため、です。

で、ワイヤーフレーム(手書き)⇛モック(Cacoo)⇛Slim,Sassで実装という手順で進めました。
今振り返ると、この手順の重要性は大きかったと感じます。
なぜかというと、半年ほど前、友人Hとあるサービスを開発していて、そのときもデザインを担当していたんですが、
そのときはHTML,CSSをほぼ初めて触るレベルだったので、モックとかも作らず、とにかく試行錯誤して作っていきました。
しかも、CSS3に感動して「こんなことできるんや」ってので色々手を出してしまい、無駄な時間が多かった。

これに対して、今回はばっちりPixel数まで詰めてモックで描き上げたから、
あとはそれをSassで実装するだけだったので、余計な回り道がなかったです。

■ デザインをする上で意識したこと

KISSの法則を常に意識するようにしました。
KISSの法則とは、Keep It Simple, Stupid!の略です。
AppleのThink Simpleと共に念頭に置いて開発を進めました。

よく言われることですが、
「アメリカのデザインはとてもシンプルで、日本のデザインは野暮ったくごちゃごちゃしている」、
というのが通説です。

ですが皮肉なことに、
「日本人はCoolなデザインよりもごちゃごちゃしている方が好む傾向にある」、
という現実があります。
(何故なのかは全く理解できないけど・・・)

自分はごちゃごちゃしているのは嫌いなので、
PositionStrategyの機能が最低限理解できるようなデザインを心掛けるようにしました。

ただ、「Simple」と「単調でつまらない」というのは紙一重で、
今回のデザインは自分なりにはSimpleかつCoolを目指しましたが、傍から見れば後者に属するかもしれません。

■ この一ヶ月間で感じたこと、反省したこと

①全然RubyRailsの知識がついてない
これはホンマにやばかったです。
相方はばりばり書けるので、そのレベルの差に愕然としました。
今後も2人で月1でのサービス開発を目指しているので、ずっとフロント開発にならないようにスキル向上させていかんとアカンです。

②東京−大阪間でも開発は全然できる
Googleハングアウトを多用しました。Skypeは色々終わってます(ビデオ通話の面で)。
でも、やっぱり数回は直接会って話をしないと伝わらないことも多いと感じました。

■ おわりに

このサービス開発の途中で、友人Hとffab0(ファブゼロ)というチームを作る決意をしました。
これからもいっぱい開発していくので、よろしくです。
サービスについてのフィードバックとか頂けると嬉しいです。


PositionStrategy、一度見てみてくださいねー。

http://position-strategy.ffab-0.com/

f:id:kiiita:20131106140856j:plain