<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1176794389076832&ev=PageView&noscript=1" />

デザイナー上がりのエンジニアが0からシステム構築してみた。

デザイナー上がりのエンジニアが0からシステム構築してみた。

デザイナー上がりのエンジニアが0からシステム構築してみた。

Fledgeを運営する株式会社えふななに入社したのは今年の4月。その頃には「働き方から考える、新しい人生の選択肢」という、このサイトのコンセプトが決まった状態でした。そこから4ヶ月弱でオープンに至るまでの経緯やシステムのあれこれについてのお話をしたいと思います。

チーム構成

  • ディレクター1名
  • ライター2名
  • デザイナー1名
  • エンジニア1名

富山 涼平

大学卒業後、新卒でWEBデザイナーとして2年間働いたあと、自律した働き方をするため株式会社えふななに入社。フロントエンドエンジニアとして入社するもフロントもバックも行う「何でも屋」と化す。

チーム全員で決めていくことの大変さを実感

Fledgeではチーム全員がユーザー目線を持ってサイトをどのようにしていくかを考えて進めています。

サイトを立ち上げるのに、トップダウン的に行えばそれぞれの役割だけに集中してスピーディーにできると思います。

しかし、ただ立ち上げるのではなくて、スピードよりもユーザーは何を求めているのかをチーム全員が考えて、話し合いながらサイト構成を固めていくことを優先しました。

皆が色んな角度からの意見を持っているので、いいアイデアがたくさん出てきて会議は大盛り上がり!その分、話がまとまりにくく会議だけで半日とられることも。

その問題点を解決するため、全体で話し合うことだけを全体会議で行い、ライター関係の話ならライターのみで行ったりして、時間効率をあげようとしましたが、そこでの話がデザイナーやエンジニアに浸透せず、共有が上手くいかないこともありました。

全員で話し合ったら時間がかかり、一部で話し合ったらすれ違いが生じ、チーム全員がより良いサイトを創るという思いで進めていくことの難しさを感じました。

その課題を解決できるよう、チャットワークでの情報共有や会議で使う資料の事前共有を増やすなど日々改善を行っています。

半人前エンジニアの苦労話

前職ではWEBデザイナーとして、デザイン・コーディングに加えて少しだけシステム開発も行っていましたが、0からのシステム開発は初めてです。

サーバーサイドのことは知ったかぶりをして今までなんとかやってきましたが、今回はそうも行きませんでした。

サーバーについて

サーバーにも、レンタルサーバー、VPSサーバー、専用サーバー、クラウドサーバーと種類があるのは知っていましたが、それぞれの詳しい特徴はしっかりとは理解していませんでしたので、色んなサイトで調べながら、今回はVPSサーバーを選択しました。

レンタルサーバーは性能が低く、専用サーバーはコストが掛かり過ぎるため、選択肢から外しました。

残る、VPSサーバーとクラウドサーバーですが、
VPSは、コストが低く、性能がそこそこ。
クラウドサーバーは、性能を拡張でき柔軟性に優れているが、VPSより割高。

サイトがスケールしたときサーバーを移行することなく性能アップができるクラウドサーバーは、とても魅力的でしたが、サイトへの流入が未知数なため、まずはコストを優先してVPSサーバーにしました。

サーバー構築

VPSサーバーに決定しましたが、レンタルサーバーのように、HTMLファイルをサーバーにアップすればサイトが見れるようになるわけではありません。

OSのインストールからWEBサーバーの構築、メールサーバーの構築・・・など初めに設定することが山程あります。

こんなこと言っている私は、なんちゃってエンジニアなので、conf.dを触ったことがあるくらいでサーバーを0から構築するのははじめてです。

セキュリティとかセキュリティとかセキュリティがとても心配だったので、念入りにサーバーについては調べました。rootでログインできなくしたり、iptableでportの制限したり・・・

さらに今後のスケールを考え、サーバーを変える可能性も考慮してやったことを書き留めながら作業しました。


サーバー構築のメモ全34ページ!

あとで気づいたのですが、Ansibleとか構築を半自動化できるんですね。
また今度学習したいと思います。

WEBサーバーには、同時の大量アクセスにも強いNginxを選択しました!

システム構築

サーバーは出来上がりましたので、次は何を使ってシステム開発していくかを考えました。

WordPressをCMSにしようと考えていました。しかし、PHPは学生時代に触った程度で、学習コストがかかりそうでしたので、前職で使っていたNodeJSを利用して、CMSは自作しました。NodeJSはjavascriptと大差なくコーディングできるのでフロントエンドエンジニアの強い味方です!

はじめの頃の要件でしたら、WordPressをいじればできなくもない仕様ではあったのですが、「途中であの機能もつけたい」、「こういう仕様にしてほしい」と要件が変化していきWordPressでの開発は厳しい仕様になりました。

結果として、自作CMSは正解だったかなと思います。
(本当は、PHPが古いからイヤだったという思いもありましたが笑)

また、システムもなるべく柔軟なものを意識して作りました。というのも、チームのみんながユーザーにとってどういうサイトが良いかを常に考えていたため、途中で何度も仕様の変化が起こりました。例えば、連載なんかはライターさんからの意見で実装されました。

その変化に対応するために、ガチガチに固めたシステムでは対応できないと思い、モジュール化を意識したりして変化に対応できるコーディングをしました。

サイト構築

やっと自分の得意分野、フロントの開発です。

Fledgeはレスポンシブ対応にしているため、色々な画面の大きさを想定してコーディングしなければなりません。

デザインはPCサイズとスマホサイズをデザイナーに用意してもらいましたが、横幅が可変なためレイアウトが崩れてしまうということが多々ありました。その度にデザイナーと話し合ってデザインの修正を行いました。

レスポンシブサイトのデザインはとても難しいと思います。いろんな画面幅でも綺麗なデザインを維持するのは大変だと思います。レスポンシブサイトはみなさんどうやって開発しているのでしょうか。未だに疑問です。

今後のFledge

そんなこんなで、なんとか7/27オープンを迎えられそうです。

この記事もオープンの2日前ギリギリに書いています!まだ仕様変更が終わっていませんが!

これからやることも山盛りです。UIもどんどん変化していくと思います。

みなさんがより読みやすいような、読みたくなるような仕掛けを作っていきます。

また、ライターがそれぞれの個性を出せるようなシステムも作ってサポートしていけたらと思います。

ただのメディアで終わらせることなくFledgeと共に成長していけたらと思いますので、たまにFledgeを見に来て前と変わったところを探してください!