A8.netデザイナー制作の進め方！-A8.netコンテンツ編-

2020/11/18
WEB制作

A8.netデザイナー制作の進め方！-A8.netコンテンツ編-

さしみ

みなさんこんにちは！
お肉大好き、さしみさんです。

今回は我々A8.netデザインチームのお仕事の進め方を、主に社内コンテンツ部分にフォーカスしてお伝えしていこうと思います。

以前ふじいさんが紹介してくださったように、当チームではwebデザインにとどまらず印刷物のデザイン（いわゆるDTP）からUI設計、動画編集まで多岐にわたって行っているわけなのですが、メインとして外せないA8.netのコンテンツ部分、その中でもメディア会員様向けのアフィリエイト関連コンテンツをどのように進めているか紹介していきます！

1:ディレクターと打ち合わせ

制作物の方向性やイメージ、開始時期などを打ち合わせします。

基本的に、A8.net内の特集・キャンペーンコンテンツに関しては、ディレクション担当のチームがどの時期にどんな特集を行うのか年間の計画を立てているので、その計画を元にどんな内容の特集を行うか打ち合わせします。

以前はオフィス内の打ち合わせスペースでミーティングをすることがほとんどでしたが、2020年からはほぼリモート作業に移行しているため、ここ最近の打ち合わせはzoomなどのオンライン会議ツールを使って行っています。
リアルでの打ち合わせも、オンラインでの会議も、それぞれメリットとデメリットがありますね。
そのあたりはきっと他のメンバーがいずれ記事にまとめてくれることでしょう！

どんな内容なのか？
どういうテイストにしていくか？(どういう見せ方が良さそうか)
などをお聞きしながら、必要に応じてデザイナーからも提案をしていきデザインの方向性を決めます。
ディレクターのイメージと、デザイナーのイメージが大幅に乖離しないように気をつけながら、打ち合わせをします。

2:デザイン作成

打ち合わせが完了したら、デザイナーの本領発揮、デザイン制作です。

使うソフトはAdobe PhotoshopやIllustratorです。
当チームはPhotoshop率が高いようです。
私はUI作成はIllustrator、写真加工はPhotoshopがマストアイテム！と思っておりますが、この辺りは最初に習得したソフトによって各々差が出るかもしれませんね。

XDもじわじわ増えてきていますが、webデザインはまだまだPhotoshop率が高い気がします。
全国のwebデザイナーにアンケートをとってみたいですね。

デザイナーにより進め方はそれぞれですが、私の場合はいただいた方向性を元にまずはラフを作成します。
（打ち合わせ時点でかなりイメージが具体的になっている場合は、そのままデザインを作成する場合もあり）

ここにこんな感じのアレを入れて…というようにイメージを膨らませながらラフります。
この時点でうっかり方向性を間違えると、のちほど修正地獄が待っています。

ラフが固まったら、素材を集めたり作ったりなどしてデザインを制作していきます。

3:デザインチェック・調整

デザインを満足行く状態まで作成したら、まずは我らが長(おさ)ふじいさんにチェックしてもらいます。
あまりにもご要望や目的とかけ離れているデザインとみなされると、容赦なくリテイク、すなわち修正地獄が待っています。

それもこれも、アフィリエイトをやりたいな、と思ってもらえる良きデザインをメディア会員の皆様へお届けするため！
皆の目的は一つ！

ふじいさんチェックでOKをもらったら、今度はディレクターさんにチェックしてもらいます。
こちらでも、万一ご要望や目的とかけ離れている場合（以下略）

4:コーディング

デザインにOKをいただいたら、次はコーディングです。

デザインをもとに、webブラウザで見られる形にしていきます。
(html、css、Javascript、PHPなど)

コーディングに関しては、いろんなソフトがありますが、今の所当チームではDreamweaverを使っている人が多いですね！
ただ、Dreamweaverよりも他のエディタのほうが使いやすい、というメンバーは各自好きなエディタを使用しております。

かくいう私も、かつてはサクラエディタ一択でゴリッゴリの手書きコーディングを行っておりました。
（よく使うhtmlコードを全て単語登録してEMMETのように使用していた）
EMMETとSassのコンパイルが標準装備されてからは、Dreamweaver一択です。
登録サイト内の単語をファイル横断して一括置き換えできたりの機能なども、とっても便利です。
Adobeさんありがとうございます、いつもお世話になっております。