こんにちは！&donuts デザインチームの相澤です。
&donutsの面接時にご質問を受けることもあり、弊社のWebデザイナーが使用している基本的なツールのご紹介をします。ご応募をご検討頂いている方やWebデザイナーを目指している方にとって、ご参考になる事を願ってお届けいたします。
デザイン編
・グラフィックツール
プロジェクトで指定のツールがある場合はそれを使いますが、指定がない場合は、ワイヤー・デザインと「Adobe XD」を使う事が多いです。「Adobe XD」は、URLでのオンライン共有できるので、ワイヤー・デザインのレビュー時に関係者同士でコメントの記述をしています。開発用の共有すれば、使用している色やテキスト、余白などの数値を取得できたり、CSSコードも表示されるので、引用してコーディング時にも使用しています。
「Photoshop」は写真加工、「Illustrator」はイラスト・地図・グラフ・ロゴなどの作成、また両者ともバナー・メインビジュアルのクリエティブ作成で使うことが多く、本来のツールの特性を生かした使用が多いです。
・おまけ：非デザイナーの方にオススメのツール
社内のデザイナー以外のご担当者が、グラフィックツールがパソコンに入ってないけれど、記事やSNSに載せる画像、資料に載せたい画像など、手軽にデザインした画像を作りたいというシーンは結構あるのでは？と思います。社内でそういう相談を受け、見つけた「Canva」。無料からはじめられ、すべての人がデザインを自由に作成できるツールです。導入や操作が手軽で、楽しくデザイン作成ができます。デザインテンプレートが豊富なので、デザインの参考にもなります。
コーディング編
・エディタ
指定はないですが、「Visual Studio Code」を使っています。Microsoftが提供しているオープンソースのエディタで、動作がとても軽量です。デフォルトでも機能が充実していますが、拡張機能で更に便利にすることができます。
とても便利！と思った拡張機能が、「Live Sass Compiler」です。拡張機能をインストールし少し設定をするだけで、Sassを書ける環境が手軽にできます。ベンダープレフィックスも自動でつけてくれます。Sassを書ける環境がすぐに欲しい、勉強したいけど環境構築が壁になっている、、、などの場合にとても便利だと思います。
・ファイルのバージョン管理
「GitHub」を使っています。Gitの操作は、ターミナルでコマンドを打つのも勿論OKですが、「SourceTree」を使っています。SourceTreeは、無料のGitクライアントソフトで視覚的にGitの操作が行えます。
「GitHub」「SourceTree」を使い始めたころは、誤った操作でおかしなことにならないかドキドキしていましたが(笑)、使っていく毎に慣れてきますし、なんて便利なんだ.....と開発者の方への尊敬の念でいっぱいです。
・CMS
プロジェクトにもよりますが、自社開発のCMS・EC統合プロダクト「Open Media Suite（OMS）」で組み込みをしています。組み込みをするときは、エンジニアとやり取りをしながら進めています。当OMOSAN Blogも、OMSを使用しています。
→OMSの開発ストーリーの記事もぜひお読みください！
************************
いかがでしたでしょうか？ここに書いているは、制作の中での基本的なツールです。こんなのを見つけたよ！これを使ってみて便利だったよ！などの情報は、毎週行っているデザイン室での定例ミーティングで共有しあっています。そこから得る知識も自分が共有するのも楽しみの一つです。
今回はツールだけのご紹介ですが、Webデザイナーとして求められている事は幅広く、習得しておきたいツールもスキルも沢山あります。どれもこれも完璧に身につける事は難しいですが、臨機応変に楽しく学習してみる、幅広く知識持っていることが大事だと思っています。その中から自分が好きと思える・得意とするものを見つけ、「これだけは誰にも負けない！任せて！」と自信を持てるものがあるのが理想です。
現在お勉強中の方、また弊社にご応募をご検討の方、楽しくこれからも学んでいきましょう！
