ajike switch

【アジケ勉強会Vol.3】フロントエンドによるサービス系案件の制作フロー

こんにちは、デザイナーの石橋です。 今回は先日社内で開かれたフロントエンジニアの木根による勉強会についてです。

木根が携わった2点のサービス開発案件を抜粋し、コーダー目線での制作フローの解説をメインに実績報告も兼ねてまとめていきます。

ではさっそくご紹介します。

1.『介護のほんね』

介護のほんね

URL:https://www.kaigonohonne.com/

制作期間:2014年3月〜8月

・サイト概要:口コミで探せる介護施設
・老人ホーム検索サイト
・ターゲット:年配層
・担当範囲:UXデザイン、UIデザイン、デザイン、フロントエンド開発
・デバイス:PC/SP ・分量:60ページほど

コーディングの進め方

①まずワイヤーフレーム制作時に打ち合わせをしてパーツを整理。
└ ここでアイコンの使い回しや、同じようなデザインになりそうなページを想定して理解を深めます。
②コーディングスタイルガイドの作成
└ ボタンやタブなどの種類、テーブルのスタイルを随時アップデートしながら作成します。

所感

木根にとって初めて尽くしではあったがモジュールの意識がつき、そしてそれが今でも基礎になっているそうです。
また、最初に社内で認識を合わせた事も効果的に理解を深め、かつ当時の新機能であるPhotoshopの外部ファイルリンクを試すいい機会にもなったとのこと。

 

2.『マンションマーケット』

MM

URL:https://mansion-market.com/

制作期間:2015年2月〜8月

・サイト概要:マンション売買をネットで簡単、気軽に行えるサービスサイト
・担当範囲:UXデザイン、UIデザイン、デザイン、コーディング
・デバイス:PC/SP ・180ページほど

コーディングの進め方

弊社の一番の強みであるUXデザインの進行をしたため、制作に入るまでは特殊な段階を踏んではいるものの、作業に入った後はスタンダードなweb制作フローで行ったそうです。
(ディレクターがワイヤーフレームを作成→デザイン→コーディング)
その中でデザイナーとの擦り合わせを多く取り、都度確認を行ったとの事。
└ 私はこちらの案件との関わりは薄かったのですが、その光景は確かに何度も見ておりました。
私も何度か別案件でちょっとしたパーツ作成でもフロントエンドとの擦り合わせを怠ったせいで、後々に悪影響が起こった経験があるので、デザイナー目線としても非常に参考になりました。

 まとめ

  • キックオフの段階でデザイン想定を摺り合わせておく事で、制作時の効率化を図ることができる。
  • どんなweb制作フローでもメリットとデメリットがあるため、一つに絞る事は難しい。

制作フローを一つに固める事は難しそうですが、これらはそれぞれの要所に対応した、確実なフローを考える良い資料だと思います。
現に現在進行している別案件で上記の振り返りを活かし、ブラッシュアップしたフローを実行しています。

一つのプロジェクトを終えて、制作フローを振り返ることは今後の制作を行う上でも大切です。大規模な開発になればなるほど、こうした制作フローの振り返り・共有を行うことをおすすめします。

 

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×