こんにちは。
11月に新設されましたデザイン制作部(旧:技術戦略部 WEBマスターチーム)のみながわです。

これまでTECH BLOGでは、技術戦略部のメンバーがエンジニアならではの情報を発信してきましたが、
今回はテクニカルな内容から少し離れ、デザイン制作部の仕事内容を紹介させていただきます。


◆デザイン制作部とは?
 
目的に応じて、何を、どこに、どのように配置するべきかを考え、ページデザインと
HTML/CSSコーディングを行う部門です。

・わかりやすさ、使いやすさ(ユーザビリティー、アクセシビリティ)の追求
・ページから与えられる印象の形成
・サイト内のデザイン統一
・コーディング品質の向上

を担っています。


◆作業フロー
 
1.要望があがる
  要望箱という社内掲示板に、他の部署や同じ部署のメンバーから実現したいことが書かれます。
  具体的な実現手段が指定されているケースもあれば、大雑把に目的だけが示されている場合も
  あります。

写真1(要望)

2.実現手段をすり合わせる
  社内会議やメール、要望箱掲示板などを通して、どのような画面が必要なのかを依頼者と、
  制作担当者とですり合わせます。

3.実施判断
  依頼内容に応じて、ドメイン責任者による承認ステップを踏みます。
  また法務に抵触する内容がないか、法務担当への確認も、このタイミングで行います。

4.制作
  印刷物のデザインやバナー、新規ページ、メールフォームなど対応内容は様々。
  コーディングはHTMLファイルで行うこともあれば、JSPファイルで行うこともあります。
  メールフォームを作る際は、社内に用意されている、汎用的に使えるメールフォームの
  システムを使い、複雑な仕様でなければ、開発者なしで制作できるようになっています。
  【使用するソフト】
  IllustratorCS5、PhotoshopCS5、Dreamweaver、Eclipse、サクラエディタ、WinMerge など
  
5.最終チェック
  デザインはそれぞれの好みに左右されることが多いため、
  サイト全体から見たそのページの印象、統一感などを含め、第三者目線での判断を入れます。
  これは各ドメインの最終チェック者が担当します。
  
6.依頼者確認
  できあがったものを依頼者に確認してもらいます。
  
7.QA
  部内で品質をチェックをします。
  QA担当者は、制作物に問題がないかを専用のチェックシートに沿って確認します。
  【確認ポイント】
  ・ページ内容
  ・フォーム等の挙動
  ・ブラウザ互換
  ・HTMLバリデーション
  ・JavaScriptの動作
                                  など
  メンバーごとに固有のローカルIPでページを確認できるようになっており、Hostsファイルを
  書き換えて確認しています。
  システムが絡む案件の場合は、技術戦略部と協力し、品質を担保することもあります。
  
8.本番アップ~反映確認


◆活用しているツールなど
 
部内Wiki
   作業の引継ぎや共有がスムーズに行えるよう、作業マニュアルをWikiで管理しています。

UIガイドライン
  デザイン統一化のためにドメインごとにUIガイドラインを用意しています。
  HTMLファイルで作成しており、ソースのコピペができるようになっているため、作業の効率化
  にも役立っています。

写真2(ガイドライン)
  
 Windows Virtual PC
  ブラウザ互換のチェックをするために利用しています。

Google Analytics
  制作したページの効果を検証したり、改善提案を行う際の調査に活用しています。

Firefox各種アドオン
  「FireBug」・・・Webデバッグツール
  「Html Validator」・・・表示中のページにHTMLのエラーがないかを検証する
  「SwitchHosts」・・・hostsの切り替えを行う
  「Popup ALT Attributes」・・・Firefox上からaltの内容を確認する
  「ColorZilla」・・・表示しているページ内から色情報を取得する
  「Firesizer」・・・ウィンドウの表示サイズの切り替えを行う

※スペースの都合上、詳細は割愛させていただきました。
   「活用しているツールなど」については、後日また改めてご紹介いたします!


◆まとめ

ラクーンでは企画~リリースまでにいくつものチェックがあります。
そのために、案件の対応に時間がかかってしまうこともありますが、
「品質を最優先して案件に臨める環境」が整っていると感じています。

以上、「デザイン制作部の仕事内容について」でした。

写真3(デザイン制作部)
 新しい仲間を募集中です☆