みなさん、こんにちは。
今年の９月からアイスタイルにジョインしたデザイナーの新井です。
この記事は、「アイスタイル Advent Calendar 2017」24日目の記事です。
今日はクリスマス・イヴですね

はじめに

女性で＠cosmeを知っていたり、利用している人は割と多いと思うのですが、
男性の方だと知らない方がいたり、またアイスタイルと聞いてすぐに＠cosmeと結びついている人は、まだまだ少ないのではないかなと思います。

また、＠cosme＝口コミサイトといった印象も強いのではないでしょうか。
（私も、転職する前まではそう思っていました。）

しかし、実際には口コミ以外にも＠cosmeのリアル店舗や通販、サロン予約や化粧品業界の求人など、美容に関わる様々なサービスがあります。

デザイン部では、それらサービス別にデザイナーがいて運用をしたり、チームを組んで新規開発などを行なっています。

今回は簡単ではありますが、私が入社してからの業務を３つに分けてお話したいと思います。

##１.マークアップ

入社して最初の作業はマークアップでした。
内容はcssの修正で難しくはありませんでしたが、前職ではデザイナーとフロントと完全に分業されていて、久しく触れていなかったので少し不安でした。

また、この時に初めてGithubを使いました。
まずは基本の使い方など教わり、ブランチを作ってプルリクしてと一連の作業をしたのですが、その頃は手順を覚えるのに必死で、はっきり理解できていなかったと思います。。

しかも、自分が黒い画面でコマンドを打つ日が来るとは、想像もしていなかったのでびっくりでした。
（黒い画面が怖いのは、デザイナーあるあるだと思います。）

##2.ディレクション

運用案件では、既存ページのリニューアルと新規ページのデザインをしました。

今後のステップアップとしてアートディレクターを目指しているので、サポートを受けつつ、ディレクションも担当させてもらいました。

スケジュール確認や、ワイヤー、画面設計書の作成、デザイナーへの指示など、想像以上に考えなければいけない事が多く、
またコミュニケーション力もこの短期間でアップしたように思います。

##3.デザイン
今は新規プロジェクトのデザインを担当しています。

今回の案件で初めてAdobe XDを利用しました。

XDの良いところは操作が軽いところと、PhotoshopやIllustratorなどの連携です。
例えば、KVなどの画像はCCライブラリに入れておく事で、後に修正が発生した場合でも、psdを修正し保存するだけでXDにも反映されます。

また、デザイン→プロトタイプ→共有までの一連の流れを、XDだけでできてしまうのも魅力的です。

これまでカンプ一覧はhtmlで作っていて、デザインの修正があるたびに画像の書き出しをしていましたが、
XDのプロトタイプやコメント機能を利用することで、確認や修正などスピーディーに対応する事ができました。

また、違うパターンのプロトタイプを作りたい時は、「新規リンクの作成」で何パターンも簡単に作れる事ができるのも便利です。

ディレクターがワイヤーを作る時にも使えば、デザイナーがパワポから文字を１つずつコピペするといった、地味に面倒な作業も減るので、今後社内でも幅広く活用できたらなと思っています。

#最後に
この３ヶ月間で、デザイン以外の業務に携わる事が多かったので、そこをピックアップして書いてみました。
それがアイスタイルの良さでもあると思います。

また、サービスを横断してクリエイターがナレッジ共有をしたり、ヘルプで案件に入ったりと、横軸でつながる機会もあるので、スキルアップにも繋がると思います。

アイスタイルに興味がある人の参考になれば嬉しいです。
最後までお読みいただきありがとうございました。

明日は@sugat1679です！