【tips】個人で、チーム共有で役立つWebデザインツールのご紹介
当社のWebデザインチームが、日常使っているツールやおすすめしたいツールをまとめました。日頃、どのように仕事を進めているのかが垣間見れる内容になっています。使いやすさを実感したものばかりなので、これからWebデザインを始めたい方もチェックしてみてください。
＊
こんにちは！&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デザイナーとして求められている事は幅広く、習得しておきたいツールもスキルも沢山あります。どれもこれも完璧に身につけることは難しいですが、臨機応変に楽しく学習してみる、幅広く知識持っていることが大事だと思っています。その中から自分が好きと思える・得意とするものを見つけ、「これだけは誰にも負けない！任せて！」と自信を持てるものがあるのが理想です。
現在お勉強中の方、また弊社にご応募をご検討の方、楽しくこれからも学んでいきましょう！
