仕事内容のご紹介～デザイン制作部編

こんにちは。
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ファイルで作成しており、ソースのコピペができるようになっているため、作業の効率化
にも役立っています。

Windows Virtual PC

ブラウザ互換のチェックをするために利用しています。

Google Analytics

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

Firefox各種アドオン

「FireBug」・・・Webデバッグツール

「Html Validator」・・・表示中のページにHTMLのエラーがないかを検証する

「SwitchHosts」・・・hostsの切り替えを行う

「Popup ALT Attributes」・・・Firefox上からaltの内容を確認する

「ColorZilla」・・・表示しているページ内から色情報を取得する

「Firesizer」・・・ウィンドウの表示サイズの切り替えを行う

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

◆まとめ

ラクーンでは企画～リリースまでにいくつものチェックがあります。

そのために、案件の対応に時間がかかってしまうこともありますが、

「品質を最優先して案件に臨める環境」が整っていると感じています。

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

新しい仲間を募集中です☆

仕事内容のご紹介 ～デザイン制作部編

関連記事

仕事内容のご紹介～デザイン制作部編