今更ですが、Webkidサイトリニューアルに伴う制作裏話を公開します。

今回行った(だいぶ前ですが)リニューアルでは、1ヶ月を目処に作ろうとスケジュールを立てました。
おおよそのスケジュールはこんな感じです。

・コーディング / 10営業日
・レスポンシブ / 4営業日
・プログラム開発 / 4営業日
・デバッグ / 3営業日

我ながら完璧なスケジュールです。
ちなみにデザインはコーティングに含まれています。
ページ数は動的を含め、約20P前後といった感じでしょうか。

担当者の選別

スケジュールが決まったので制作に伴うリソースだったりを紹介します。
他の人が忙しかったため、ブログを書くことが主な仕事の僕が担当しました。

・デザイナー (暇な僕)
・フロントエンド (暇な僕)
・CMS開発 (暇な僕)

というか全部ですね。
ブログを書くのが仕事なので、ブログを掲載する場所をつくるのも僕の役割ですね。

次に環境の用意です。
とりあえず、webpack使うかー的なノリでwebpackを使いました。

フレームワークはVue.jsを使用。
bootstrapなどのcssフレームワークとjQueryはいらないかなぁと思い未使用です。

サイト上で使用するアイコン系は作るのが面倒くさかったのでfont-awesomeを使用しました。

デザインをする上で大事なのが、いかにコーディングを楽にするかということ。
だったらコーディングから入ればいいじゃん的なノリでインブラウザデザインを開始。
昨今のデザインソフトは「Sketch」や「XD」など多様化される中、私の使用したツールは「Atom」です。

先進的なデザインツールですね。

ということで、完成したのが皆さんの見ているこの画面です。

Webkidが黄色な理由

これは非常に簡単な答えです。
千葉の制作会社には「黄色がない」ということです。
※あったらごめんね、あったらごめんね。

黄色といえば、ピカチュウが有名ですね。
赤、青、緑の御三家の種族値に負けないように、一生懸命頑張っていこうと思います。

デザインが終われば、マークアップも終わっているインブラウザの最大のメリットを活かしつつ、javascriptを導入していく作業が始まります。

先に説明した通り、Vue.jsが導入されているのでポチポチ作業をしていきます。
今となってはjQueryが入ってたらスパゲティになっていたなと思います。
とは言え、javascriptにそこまで時間を取られるのも苦痛なので、並行作業のレスポンシブも着手します。

邪魔してくるのは、いつもIE

babelのpolyfillさんのおかげで、対応は簡単でしたが、IEの確認するだけでイライラするのは職業病ですかね。
ということで、さりげなくPjax入れつつ、フロント周りは完了となりました。

wgetのコマンドを使ったときに生きていることを再確認できるのは私だけでしょうか。
レンタルサーバー標準の簡単インストールを使うと、変な履歴が残るのでコマンドでWordpressをぶっこみます。

更新部分である「ブログ」とか「お知らせ」とかを作っていきます。
あらかじめ、作成済みのコーディングデータにCMSで入力情報を流し込みを行い、この段階でおおよその完成イメージが垣間見えます。

WordPressのプラグインは便利ですが、プラグインの設定はそれなりに大変です。
特に大変なのが、「all in one seo pack」をはじめとしたSEO関連のプラグインでした。
metaタグを考え、文字を入力するのは気が滅入ります。

そして、Webサイトを公開します。
作ったファイルを公開用にビルドしてデプロイすれば完了です！

この公開作業というものは一番ストレスの溜まる作業です。デザイナーの人にこのストレスを味わってほしいというのが本音ですが、みなさん忙しいようなので、結局僕がやりました。みなさん忙しいようなので、結局僕がやりました。

ということで、今回は制作裏話ということで大雑把に制作フローを書いてみました。
自社サイトとはいえ、デザインから公開までに結構かかったことが個人的に反省すべき点だったと思います。
もっと効率的なやり方を模索して、今後に活かせればと感じました。

以上、フロントエンドのたくとでした。