有限会社コロン

2015年5月～2017年1月

男女の究極の心理戦と言われるマッチングサービスに携わりました。フロントエンドは自分一人という状況でした。長年の積み重ねによりフロントのソースコードは混乱していましたが、後々のメンバーの参入のしやすさを考慮しつつ、Gulp、Sass、Browserify、Flocssなどを導入し、ページごとにバラバラに定義されていたCSSやJSを整理していったり、アイコンフォントやSVGを導入してリクエストを減らしていったり、コンテンツを非同期化していく作業はフロントエンドらしい仕事と思えました。

デザインガイドライン（WordPressにて制作）やスタイルガイド（SC5 Style Guide Generatorにて制作）の制作も貴重な経験となりました。制作したガイドラインをもとに、リニューアルも無事完走することができました。

全体としてチームも最高のメンバーに恵まれ、職種の垣根もなく毎回MTGが白熱していたのが印象深いです。

最終的にフロントチームも自分を除いて3人体制にすることができたし、チームとしてある程度の基盤固めに貢献できたのかと思います。

開発環境

Backend : Perl Frontend : Gulp / JavaScript / HTML / Sass, Flocss / Photoshop / Illustrator/ Zeplin その他 : Slack / Subversion / GitLab / Redmine / Jira

担当プロジェクト

出会い応援コミュニティワクワクメール

ワクワクメール - 恋活・婚活・友達探し・素敵な出会いが見つかるマッチングアプリ

担当業務

PC・スマートフォン・ガラケー対応マッチングサービスのフロントエンド業務を担当
gulp、sass、Browserify、Flocssなどを導入し、制作環境を構築ページごとにバラバラに配置されていたCSS・JSを一つにまとめる
アイコンフォント・SVGを導入
コンテンツのAPI化
ページリニューアル

リニューアルに伴うデザインガイドライン制作

ガイドラインがない状況でしたので、ページをリニューアルするにあたってまずはデザイン上のガイドラインをWordPressにて制作致しました。

コーディングガイドライン・スタイルガイドを制作

コーディングについてもガイドラインがない状況でしたので、ページをリニューアルするにあたってガイドラインをSC5 Style Guide Generator（markdown + sass）にて作成制作致しました。

ガイドラインを元に、ページリニューアル

配色のコントラストがきつめで抵抗のあるユーザーが多いようでしたので、マテリアルデザインのルールを拝借し人間の目に優しくかつ視認性が高いトーンで統一、またボタンを触った時、スクロールした時などユーザーがアクションを起こした際には何かしらまたその行動を起こしたくなるようなインタラクションを目指して CSSアニメーションを付けました。